styles.css

/* ── Spark Memo ──────────────────────────────────────────────────────────── */

/*
  Timestamp badge – rendered both in the editor (CM6 mark decoration)
  and in reading view (post-processed <span>).

  Colors are driven by CSS custom properties so they update instantly
  when the user changes them in Settings, without requiring a reload.
*/
.jp-timestamp {
  display: inline-block;

  color: var(--jp-ts-color, #7c3aed);
  background: var(--jp-ts-bg, #ede9fe);

  /* Monospace keeps time digits aligned */
  font-family: var(
    --font-monospace,
    "Cascadia Code",
    "Fira Code",
    monospace
  );
  font-size: 0.76em;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;

  /* Pill shape */
  padding: 2px 9px;
  border-radius: 99px;

  /* Spacing before the journal text */
  margin-right: 6px;

  vertical-align: middle;
  white-space: nowrap;

  /* Subtle depth */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Smooth color transitions when settings change */
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
.theme-dark .jp-timestamp {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ── Reading view ─────────────────────────────────────────────────────────── */

/* Non-interactive cursor in the rendered view */
.markdown-reading-view .jp-timestamp {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* Very subtle hover feedback */
.markdown-reading-view .jp-timestamp:hover {
  opacity: 0.82;
  transition: opacity 0.15s ease;
}

/* ── Editor (source / live-preview) ─────────────────────────────────────── */

/* Keep the native text cursor so the user can click around */
.cm-editor .jp-timestamp {
  cursor: text;
}

/* ── Quick-capture sidebar view ─────────────────────────────────────────── */

.jp-capture-root {
  --jp-tl-line: var(--jp-ts-bg, #ede9fe);
  --jp-tl-dot: var(--jp-ts-color, #7c3aed);
  --jp-tl-dot-ring: color-mix(in srgb, var(--jp-tl-dot) 35%, transparent);

  --jp-pane-pad: 12px;

  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--jp-pane-pad);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--background-primary);
}

/* Only the timeline list scrolls; the input card (and tab / search / location
   bars above it) stay pinned so the user always has the composer in view. */
.jp-timeline-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* overflow-y:auto forces overflow-x to clip too. The day-header dot has a
     2px outer ring that would otherwise get clipped on the left edge, so we
     nudge the scroll box 4px into the root's left padding. */
  padding-left: 4px;
  margin-left: -4px;
  /* Scroll still works via trackpad/wheel — just hide the visible scrollbar. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

/* Mobile keyboard fix. When the software keyboard opens, Obsidian resizes the
   app so the leaf already ends exactly at the top of the keyboard — and then
   *also* pads `.view-content` with a bottom inset the height of the keyboard
   (measured: 372px on iPhone), the usual trick for views whose content scrolls
   as a whole. Our root IS that `.view-content`, and it is a fixed-height flex
   column, so the inset is double compensation: of its 388px only 4px were left
   for content, `.jp-pane-capture` correctly resolved to 0, and the timeline
   collapsed with it. Drop the inset back to our own padding; nothing can be
   hidden behind the keyboard here, because the leaf stops above it.
   `!important` is required — Obsidian sets the inset as an inline style.
   Zero rather than the usual pane padding: with the keyboard up every point
   counts, and a scrolling list running to the edge of the pane is the norm on
   mobile. The timeline supplies its own breathing room at the bottom. */
.is-mobile .jp-capture-root {
  padding-bottom: 0 !important;
}
.is-mobile .jp-timeline-scroll {
  padding-bottom: 8px;
}

/* Day header stays pinned to the top of the scroll area while its entries
   scroll underneath — the user always sees which day they're looking at,
   and the prev/calendar/next controls stay reachable.

   Both classes are written together on purpose: `.jp-timeline-entry` further
   down sets `position: relative` at the same specificity, and — being later in
   the file — silently won, which killed the sticky behaviour entirely. */
.jp-timeline-entry.jp-timeline-entry--header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--background-primary);
  padding-top: 4px;
  padding-bottom: 4px;
}
/* The rail (`.jp-timeline-day::before`) is drawn from the day block's top, and
   isn't sticky — so it kept running up past the header dot, all the way to the
   top of the scroll area. Mask just the sliver above the dot's centre (dot is
   top:8px, 14px tall → centre at 15px) so the rail appears to start at the dot
   and never above it. Everything below the centre is left untouched, keeping
   the rail continuous down the day. Painted before the dot in DOM order, so the
   dot still draws on top. */
.jp-timeline-entry.jp-timeline-entry--header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -24px;
  width: 24px;
  height: 15px;
  background: var(--background-primary);
}
.jp-timeline-scroll::-webkit-scrollbar {
  display: none; /* Chromium (Obsidian's Electron shell) */
}

/* Toolbar */
.jp-capture-toolbar {
  display: flex;
  gap: 8px;
  padding: 0 4px;
}
.jp-capture-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jp-capture-toolbar-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

/* Input card */
.jp-capture-card {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.jp-capture-card:focus-within {
  border-color: var(--background-modifier-border-hover);
}
/* iOS WebView clips the top-left corner of a <textarea> placeholder's first
   glyph when both padding-top and padding-left are near 0. A small pad on
   all sides keeps "What's happening?" from getting its W corner cut off,
   without changing the desktop layout. */
.is-mobile .jp-capture-input {
  padding: 4px 4px 2px 6px;
}
.jp-capture-input {
  width: 100%;
  min-height: 60px;
  max-height: 240px;
  resize: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--text-normal);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  padding: 0;
  box-sizing: border-box;
}
.jp-capture-input::placeholder {
  color: var(--text-faint);
}
.jp-capture-input {
  scrollbar-width: thin;
  scrollbar-color: var(--background-modifier-border) transparent;
}
.jp-capture-input::-webkit-scrollbar {
  width: 4px;
}
.jp-capture-input::-webkit-scrollbar-track {
  background: transparent;
}
.jp-capture-input::-webkit-scrollbar-thumb {
  background-color: var(--background-modifier-border);
  border-radius: 4px;
}
.jp-capture-input::-webkit-scrollbar-thumb:hover {
  background-color: var(--background-modifier-border-hover);
}
.jp-capture-input-wrapper {
  position: relative;
}
.jp-tag-suggest {
  position: absolute;
  z-index: 50;
  min-width: 140px;
  max-width: 260px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: var(--shadow-s);
  padding: 4px;
}
.jp-tag-suggest--hidden {
  display: none;
}
.jp-tag-suggest-item {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-normal);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jp-tag-suggest-item--active,
.jp-tag-suggest-item:hover {
  background: var(--background-modifier-hover);
}
.jp-tag-suggest-item-parent {
  color: var(--text-faint);
}
.jp-tag-suggest-item-leaf {
  color: var(--text-normal);
  font-weight: 600;
}
.jp-capture-button-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.jp-capture-plus-btn,
.jp-capture-tag-btn,
.jp-capture-mention-btn,
.jp-capture-geo-btn {
  background: color-mix(in srgb, var(--jp-tl-dot) 8%, var(--background-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--jp-tl-dot) 18%, transparent) !important;
  outline: none !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--jp-tl-dot) 70%, var(--text-muted)) !important;
  cursor: pointer;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.jp-capture-plus-btn:hover,
.jp-capture-tag-btn:hover,
.jp-capture-mention-btn:hover,
.jp-capture-geo-btn:hover {
  color: var(--jp-tl-dot) !important;
  background-color: color-mix(in srgb, var(--jp-tl-dot) 14%, transparent) !important;
}
.jp-capture-geo-btn.is-disabled,
.jp-capture-geo-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.jp-capture-geo-btn.is-loading {
  cursor: wait;
  position: relative;
}
.jp-capture-geo-btn.is-loading::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, var(--jp-tl-dot) 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: jp-geo-spin 0.9s linear infinite;
  pointer-events: none;
}
@keyframes jp-geo-spin {
  to { transform: rotate(360deg); }
}
.jp-capture-plus-btn svg,
.jp-capture-tag-btn svg,
.jp-capture-mention-btn svg,
.jp-capture-geo-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.jp-capture-geo-btn svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}
.jp-capture-tag-btn,
.jp-capture-mention-btn,
.jp-capture-geo-btn {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.jp-capture-left-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Pending-image strip sits above the textarea, pushing it down — thumbnails
   read like attachment previews rather than inline icon badges. */
.jp-capture-attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.jp-capture-attachments--empty {
  display: none;
  margin-bottom: 0;
}
/* Pending-image row: a plain horizontal strip regardless of count — the
   2×2 grid look is reserved for how multiple images render in the
   timeline once submitted, not this preview. */
.jp-capture-image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jp-capture-attachment-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.jp-capture-attachment-thumb-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--jp-tl-dot) 18%, transparent);
  cursor: zoom-in;
}
.jp-capture-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jp-capture-attachment-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.65) !important;
  color: white !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--background-primary);
}
.jp-capture-attachment-remove:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}
.jp-capture-attachment-remove svg {
  width: 11px !important;
  height: 11px !important;
  stroke: currentColor;
  stroke-width: 3;
}

/* Pending-recording card: mirrors the image thumbnail slot but shows a mic
   icon + duration instead of a preview, since audio has no visual frame. */
.jp-capture-attachment-audio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--jp-tl-dot) 10%, var(--background-primary));
  border: 1px solid color-mix(in srgb, var(--jp-tl-dot) 18%, transparent);
  color: var(--jp-tl-dot);
  flex-shrink: 0;
}
.jp-capture-attachment-audio-icon {
  display: inline-flex;
  align-items: center;
}
.jp-capture-attachment-audio-icon svg {
  width: 15px !important;
  height: 15px !important;
}
.jp-capture-attachment-audio-duration {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Pending-file card: shown in the composer's attachment strip for
   non-image, non-audio files. Same silhouette as the audio card so the row
   stays visually consistent, but wider to fit the file name and size. */
.jp-capture-attachment-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 260px;
  height: 56px;
  padding: 0 34px 0 12px;
  border-radius: 10px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
  cursor: pointer;
  flex-shrink: 0;
}
.jp-capture-attachment-file:hover {
  background: var(--background-modifier-hover);
}
.jp-capture-attachment-file-icon {
  display: inline-flex;
  align-items: center;
  color: var(--jp-tl-dot);
  flex-shrink: 0;
}
.jp-capture-attachment-file-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.jp-capture-attachment-file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.jp-capture-attachment-file-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jp-capture-attachment-file-size {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Timeline file card: replaces the raw `![[file.pdf]]` embed in rendered
   bubbles. Slightly larger + block-level so it lays out on its own line
   inside the memo body. */
.jp-timeline-file-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 14px;
  margin: 4px 0;
  border-radius: 8px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
  text-decoration: none;
  cursor: pointer;
}
.jp-timeline-file-card:hover {
  background: var(--background-modifier-hover);
  text-decoration: none;
}
.jp-timeline-file-card-icon {
  display: inline-flex;
  align-items: center;
  color: var(--jp-tl-dot);
  flex-shrink: 0;
}
.jp-timeline-file-card-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.jp-timeline-file-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.jp-timeline-file-card-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.jp-timeline-file-card-size {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Capture-time override pill: shown next to the image/mic buttons once the
   user opts into an image's capture time instead of "now". */
.jp-capture-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jp-tl-dot) 12%, var(--background-primary));
  border: 1px solid color-mix(in srgb, var(--jp-tl-dot) 26%, transparent);
  color: var(--jp-tl-dot);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.jp-capture-time-pill--hidden,
.jp-location-pill--hidden {
  display: none;
}

/* Top-of-card pill row — sits above the attachments/textarea and holds the
   editing / capture-time / location / metadata-hint pills side by side.
   Collapses (no bottom spacing) when every child pill is hidden. */
.jp-capture-top-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.jp-capture-top-pill-row:not(:has(> *:not(.jp-capture-time-pill--hidden):not(.jp-location-pill--hidden))) {
  display: none;
}

/* Location chip next to the timeline timestamp — same pill styling, but
   rendered as a clickable <a href="maps://..."> rather than a <div>. */
.jp-location-chip {
  margin-left: 6px;
  text-decoration: none !important;
  cursor: pointer;
}
.jp-capture-time-pill-icon {
  display: inline-flex;
  align-items: center;
}
.jp-capture-time-pill-icon svg {
  width: 12px !important;
  height: 12px !important;
}
.jp-capture-time-pill-clear {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer;
  opacity: 0.7;
}
.jp-capture-time-pill-clear:hover {
  opacity: 1;
}
.jp-capture-time-pill-clear svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 3;
}

/* "Apply photo info?" hint pill — its label re-opens the confirm modal. */
.jp-metadata-hint-text {
  cursor: pointer;
}
.jp-metadata-hint-text:hover {
  text-decoration: underline;
}
@keyframes jp-recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Live recording bar: waveform + duration + status */
.jp-recording-bar {
  --jp-recording-stroke: var(--jp-tl-dot, #7c3aed);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--background-secondary);
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: top center;
}
/* One-shot fade + slide-down when the bar enters the DOM. Class is added
   after `display:''` is set and removed on hide so it can replay next time. */
.jp-recording-bar.jp-bar-entering {
  animation: jp-recording-bar-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes jp-recording-bar-in {
  0%   { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
  100% { opacity: 1; transform: translateY(0)    scaleY(1);    }
}
/* Top row: waveform + time/status */
.jp-recording-bar > :nth-child(1) {
  /* waveform + meta sit in a flex row */
}
.jp-recording-waveform {
  flex: 1;
  height: 34px;
  display: block;
  min-width: 0;
}
.jp-recording-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  line-height: 1.1;
}
.jp-recording-time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-normal);
}
/* Hidden while actively recording — the timer + waveform already say
   enough. Only shown once transcription starts, where it's the sole cue
   that something is still happening (the timer freezes at that point). */
.jp-recording-status {
  display: none;
  font-size: 11px;
  color: var(--text-muted);
}
.jp-recording-bar.is-transcribing .jp-recording-status {
  display: block;
}
/* Waveform + meta live in a flex row; stop button sits centered below. */
.jp-recording-bar .jp-recording-waveform,
.jp-recording-bar .jp-recording-meta {
  /* placed via the row wrapper created at runtime */
}
.jp-recording-wave-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jp-recording-stop {
  align-self: center;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none;
  border-radius: 50% !important;
  background: var(--text-error);
  color: var(--text-on-accent, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--text-error) 40%, transparent);
  animation: jp-recording-pulse 1.2s ease-in-out infinite;
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.jp-recording-stop:hover {
  transform: scale(1.06);
}
.jp-recording-stop:active {
  transform: scale(0.94);
}
.jp-recording-stop svg {
  width: 14px !important;
  height: 14px !important;
  display: block;
  fill: currentColor;
  stroke: none;
}

/* Transcribing state: shown after the user clicks stop but before the final
   text lands. RecBar stays visible with a slow breathing effect on the
   waveform row + status text. The stop button is hidden (no longer needed),
   the icon group + NOTE button stay hidden too (we're still working). */
.jp-recording-bar.is-transcribing {
  background: color-mix(in srgb, var(--background-secondary) 70%, var(--background-primary) 30%);
}
/* Repeats !important to override the base rule's pinned min/max-height,
   which exists so Obsidian's mobile `button` styles can't resize the
   button. Without it the collapse would never take effect. */
.jp-recording-bar.is-transcribing .jp-recording-stop {
  opacity: 0;
  pointer-events: none;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  overflow: hidden;
}
.jp-recording-bar.is-transcribing .jp-recording-wave-row {
  animation: jp-transcribing-breathe 1.8s ease-in-out infinite;
  transform-origin: center;
}
.jp-recording-bar.is-transcribing .jp-recording-status {
  color: var(--text-accent);
}
@keyframes jp-transcribing-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.jp-capture-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
/* Circular icon submit button — filled/accent when there's content to send,
   flat/muted when the input is empty. */
.jp-capture-submit {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  background: var(--jp-tl-dot) !important;
  color: var(--text-on-accent, #fff) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.jp-capture-submit svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.jp-capture-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--jp-tl-dot) 85%, white) !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--jp-tl-dot) 40%, transparent) !important;
}
.jp-capture-submit:active {
  transform: translateY(1px);
}
.jp-capture-submit--disabled,
.jp-capture-submit:disabled {
  background: color-mix(in srgb, var(--text-faint) 25%, var(--background-primary)) !important;
  color: var(--text-faint) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
.jp-capture-submit--loading svg {
  animation: jp-capture-submit-spin 0.8s linear infinite;
}
@keyframes jp-capture-submit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty state */
.jp-capture-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Timeline */
.jp-timeline {
  position: relative;
}
.jp-timeline-entry {
  position: relative;
  margin-bottom: 12px;
}
.jp-timeline-entry:last-child {
  margin-bottom: 0;
}

/* Freshly-written entry: brief pulse so the eye lands on it after submit.
   Applied by renderDayContent when the row matches `pendingHighlight`. */
.jp-timeline-entry--just-added .jp-timeline-bubble {
  animation: jp-timeline-entry-flash 2.2s ease-out 1;
}
.jp-timeline-entry--just-added .jp-timeline-dot {
  animation: jp-timeline-dot-flash 2.2s ease-out 1;
}
@keyframes jp-timeline-entry-flash {
  0% {
    background: color-mix(in srgb, var(--jp-tl-dot) 22%, var(--background-primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jp-tl-dot) 45%, transparent);
    transform: translateY(-2px);
  }
  60% {
    background: color-mix(in srgb, var(--jp-tl-dot) 10%, var(--background-primary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--jp-tl-dot) 20%, transparent);
    transform: translateY(0);
  }
  100% {
    background: inherit;
    box-shadow: none;
    transform: translateY(0);
  }
}
@keyframes jp-timeline-dot-flash {
  0%, 40% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--jp-tl-dot) 35%, transparent);
  }
  100% {
    box-shadow: 0 0 0 1px var(--jp-tl-dot-ring);
  }
}
.jp-timeline-dot {
  position: absolute;
  left: -22px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--background-primary);
  border: 2px solid var(--jp-tl-dot);
  box-sizing: border-box;
}
.jp-timeline-dot--latest {
  width: 12px;
  height: 12px;
  left: -23px;
  top: 5px;
  background: var(--jp-tl-dot);
  border: 3px solid var(--background-primary);
  box-shadow: 0 0 0 1px var(--jp-tl-dot-ring);
}

/* Timeline entry: dot + connector + timestamp pill on the same baseline,
   then a content bubble that hangs off below the timestamp. */
.jp-timeline-entry-head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 10px;
}
/* Connector line from the timeline dot to the timestamp pill */
.jp-timeline-entry-head::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--jp-tl-line);
  border-radius: 2px;
  transform: translateY(-50%);
}
.jp-timeline-entry-head .jp-timestamp {
  position: relative;
  margin-right: 0;
}
/* Straight vertical tail dropping from the bottom-center of the timestamp
   pill down to the bubble's top edge. */
.jp-timeline-entry-head .jp-timestamp::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 10px;
  background: var(--jp-tl-line);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Content bubble — chat-style rounded card with a very faint accent tint */
.jp-timeline-bubble {
  position: relative;
  background: color-mix(in srgb, var(--jp-tl-dot) 6%, var(--background-primary));
  border: 1px solid color-mix(in srgb, var(--jp-tl-dot) 14%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-normal);
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Obsidian sets `user-select: none` app-wide and only re-enables it for its
     own document containers; a custom ItemView inherits "not selectable".
     Re-enable it here so memo text can be selected and copied. */
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}

/* Code blocks (and any long unbroken token, e.g. a URL or API key, that
   isn't inside a real fenced code block) must wrap within the bubble's own
   width instead of forcing the whole card — and the timeline column with
   it — wider than the sidebar. */
.jp-timeline-bubble pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.jp-timeline-bubble code {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Dark theme adjustments */
.theme-dark .jp-capture-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.theme-dark .jp-timeline-bubble {
  background: color-mix(in srgb, var(--jp-tl-dot) 12%, var(--background-primary));
  border-color: color-mix(in srgb, var(--jp-tl-dot) 22%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Timeline date-header node (first row) */
.jp-timeline-entry--header {
  margin-bottom: 16px;
}
.jp-timeline-dot--header {
  width: 14px;
  height: 14px;
  left: -24px;
  top: 8px;
  background: var(--jp-tl-dot);
  border: 3px solid var(--background-primary);
  box-shadow: 0 0 0 2px var(--jp-tl-dot);
}
.jp-timeline-header-card {
  padding: 0 0 4px 2px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.jp-timeline-header-text {
  flex: 1;
  min-width: 0;
}
.jp-timeline-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.jp-timeline-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jp-timeline-header-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.jp-timeline-header-btn svg {
  width: 14px;
  height: 14px;
}
/* Locate / open-note button in date header */
.jp-timeline-open-btn {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.jp-timeline-open-btn:hover {
  color: var(--jp-tl-dot);
  background: color-mix(in srgb, var(--jp-tl-dot) 10%, transparent);
}
.jp-timeline-open-btn svg {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.jp-timeline-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-normal);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.jp-timeline-header-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Markdown rendered body — flatten paragraph margins so bubbles stay tight.
   Obsidian's reading-view renderer wraps every top-level block (paragraph,
   list, ...) in its own `.el-p` / `.el-ul` / `.el-ol` div and puts the
   actual `--p-spacing`-driven vertical margin on *that* wrapper, not on the
   inner `<p>`/`<ul>`/`<ol>` tag — styling the inner tags (as we did before)
   never touched the real source of the gap. */
.jp-timeline-bubble > :first-child {
  margin-top: 0;
}
.jp-timeline-bubble > :last-child {
  margin-bottom: 0;
}
.jp-timeline-bubble p,
.jp-timeline-bubble ul,
.jp-timeline-bubble ol {
  margin: 0 !important;
}
.jp-timeline-bubble > div {
  margin: 0 !important;
}
.jp-timeline-bubble > div + div {
  margin-top: 4px !important;
}
.jp-timeline-bubble li {
  margin: 0 !important;
}
.jp-timeline-bubble li + li {
  margin-top: 2px !important;
}
.jp-timeline-bubble li p {
  margin: 0 !important;
}
/* Restore the gap for blank lines the user typed. The entry text is
   de-indented before rendering, so these arrive as sibling blocks of the
   bubble, not as one list item — the flattening rule above would otherwise
   erase every paragraph break.
   Which adjacencies imply a blank line in the source: two paragraphs always
   need one between them, and a paragraph following a list does too (without
   it the line is a lazy continuation and gets absorbed into the last bullet).
   A list *after* a paragraph does not, which is why `p + ul` stays tight —
   "定位" immediately followed by its bullets is the common case. The cost is
   that a blank line deliberately placed before a list renders the same as no
   blank line; telling those apart needs the renderer, not CSS.
   Soft-breaks are <br> inside one <p>, so multi-line memos stay tight. */
.jp-timeline-bubble p + p,
.jp-timeline-bubble ul + p,
.jp-timeline-bubble ol + p {
  margin-top: 1em !important;
}
/* One holder per blank-line-separated block (see `renderEntryBody`). The gap
   lives here rather than on the rendered tags, so it lands exactly where the
   blank line was typed — including between two list items, which markdown
   alone gives us no way to detect. Needs to out-specify the generic
   `> div + div` rule above. */
.jp-timeline-bubble .jp-md-block + .jp-md-block {
  margin-top: 1em !important;
}
/* Embedded images render as a small square thumbnail — same footprint as
   a grid cell — instead of at full width. A tall portrait shot would
   otherwise dominate the timeline entry; full detail is one click away
   via the zoom-in preview. */
.jp-timeline-bubble img,
.jp-timeline-bubble .internal-embed img {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 6px;
}
.jp-timeline-bubble .internal-embed {
  display: block;
}
/* Non-image / non-audio embeds (PDF、视频、通用文件等) 会被 renderFileEmbedCards
   替换成紧凑的文件卡片。替换发生在 MarkdownRenderer.render 的 .then 回调里，
   在此之前 Obsidian 会先渲染出一个很大的默认预览（PDF iframe、视频播放器等），
   导致气泡瞬间被撑高。这里先把这些原始 embed 藏起来，等替换后的 .jp-timeline-file-card
   出现即可，避免 memo 列表在提交后闪一下变形。 */
.jp-timeline-bubble .internal-embed.pdf-embed:not(.image-embed),
.jp-timeline-bubble .internal-embed.file-embed:not(.image-embed),
.jp-timeline-bubble .internal-embed.video-embed:not(.image-embed) {
  display: none;
}
/* Embedded audio recording — same top gap as an embedded image, so a memo
   ending in a voice note doesn't sit noticeably closer to its text than one
   ending in a photo. */
.jp-timeline-bubble .internal-embed:has(audio),
.jp-timeline-bubble audio {
  margin-top: 6px;
}
/* Multi-image memo (2–9 images submitted together): grid instead of a
   vertical stack, "moments"-style. Column count follows the same
   convention as WeChat Moments: 2/3 images sit in a single row of that
   count, 4 forms a 2×2 square, 5+ wraps a 3-column grid. */
.jp-timeline-image-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 280px;
  margin-top: 8px !important;
}
.jp-timeline-image-grid[data-count="1"] {
  grid-template-columns: 1fr;
  max-width: 320px;
}
.jp-timeline-image-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.jp-timeline-image-grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}
.jp-timeline-image-grid .internal-embed {
  margin: 0 !important;
  cursor: zoom-in;
}
.jp-timeline-image-grid .internal-embed img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
}
/* Non-grid embeds (single images that never went through applyImageGrid,
   e.g. inserted by hand rather than via the capture panel) are still
   worth a zoom cursor + click-to-preview. */
.jp-timeline-bubble .internal-embed img {
  cursor: zoom-in;
}
/* Lists inside bubbles: tighter padding (margin is zeroed above, on the
   `.el-ul`/`.el-ol` wrapper div instead). */
.jp-timeline-bubble ul,
.jp-timeline-bubble ol {
  padding-left: 18px;
}

/* Override Obsidian default textarea focus/hover styles for an immersive
   input — the cursor already shows it's active, so no hover highlight. */
.jp-capture-input:focus,
.jp-capture-input:focus-visible,
.jp-capture-input:hover,
.jp-capture-input:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
}

/* Toolbar layout — spacer pushes date-nav cluster right, hidden state for
   the "today" button when already on today. */
.jp-capture-toolbar-spacer {
  flex: 1;
}
.jp-capture-toolbar-btn--hidden {
  display: none !important;
}

/* Continuous-scroll timeline: each day is a sub-section with its own
   vertical line, scoped to that day's header + entries only — it must not
   bleed into sibling UI like the bottom-nav row or end-of-list marker. */
.jp-timeline-day {
  position: relative;
  padding-left: 24px;
}
.jp-timeline-day::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--jp-tl-line);
  border-radius: 2px;
}
.jp-timeline-day + .jp-timeline-day {
  margin-top: 18px;
}

/* Infinite-scroll sentinel — invisible 1px element observed for intersection */
.jp-timeline-sentinel {
  height: 1px;
  margin: 12px 0;
}

/* Day nav — prev / calendar / next, above the single-day timeline. */
.jp-day-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.jp-day-nav-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jp-day-nav-btn svg {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
}
.jp-day-nav-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.jp-day-nav-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.jp-day-nav-calendar-btn.is-today {
  color: var(--jp-tl-dot);
}

/* End-of-stream marker shown when no more history exists */
.jp-timeline-end {
  height: 8px;
}

/* Bottom-of-day nudge to the previous day — stands in for the old
   scroll-to-load-older-days affordance now that only one day shows at once.
   The row also hosts a "back to today" affordance on the right when the
   displayed day isn't today. */
.jp-timeline-bottom-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
.jp-timeline-bottom-nav-row:has(.jp-timeline-bottom-nav-today) {
  justify-content: space-between;
}
.jp-timeline-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jp-timeline-bottom-nav:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.jp-timeline-bottom-nav-icon {
  display: inline-flex;
  align-items: center;
}
.jp-timeline-bottom-nav-icon svg {
  width: 14px;
  height: 14px;
}
.jp-timeline-bottom-nav.is-disabled {
  cursor: default;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}
.jp-timeline-bottom-nav.is-disabled:hover {
  background: transparent;
  color: var(--text-faint);
}
.jp-timeline-bottom-nav-today {
  color: var(--interactive-accent);
}
.jp-timeline-bottom-nav-today:hover {
  color: var(--interactive-accent-hover);
}

/* ── Mobile toolbar auto-hide ─────────────────────────────────────────────
   Slides Obsidian's bottom toolbar out of view when the user scrolls down
   inside the capture timeline, restoring it on scroll up. The class is
   toggled on <body> by capture-view.ts only on mobile + while the view is
   active, and is always cleared on view close. */
.is-mobile .mobile-toolbar {
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.is-mobile.jp-hide-mobile-toolbar .mobile-toolbar {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Delete confirm modal ─────────────────────────────────────────────────
   Shown when the user picks "删除 memo" (and "删除 memo 和录音文件") from
   the entry context menu. Goal: make the destructive action feel weighty
   without bloating the dialog. */
.jp-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jp-delete-confirm-question {
  margin: 0;
  color: var(--text-normal);
  font-size: 14px;
}
.jp-delete-confirm-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
}
.jp-delete-confirm-preview .jp-timestamp {
  flex-shrink: 0;
  margin-right: 0;
}
.jp-delete-confirm-preview-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-normal);
  word-break: break-word;
  white-space: pre-wrap;
}
.jp-delete-confirm-audio {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text-error, #e26d6d) 8%, var(--background-secondary));
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text-error, #e26d6d) 22%, transparent);
}
.jp-delete-confirm-audio-label {
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.jp-delete-confirm-audio-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text-normal);
  font-family: var(--font-monospace, monospace);
  word-break: break-all;
}
.jp-delete-confirm-audio-list li + li {
  margin-top: 2px;
}
.jp-delete-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.jp-delete-confirm-cancel,
.jp-delete-confirm-confirm {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Obsidian's default modal title reserves left padding to visually balance
   the close (×) button, which makes the title look indented relative to
   the body text below it. Flush it left for our confirm modals. */
.jp-modal-title-flush {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ── Image-time confirm modal ─────────────────────────────────────────────
   Shown when an added image's capture time (EXIF, or last-modified as a
   fallback) differs from the current time by more than 5 minutes. */
/* ── Image preview modal ──────────────────────────────────────────────────
   Chrome-free, dark-backdrop full-size preview of a pending thumbnail. */
.jp-image-preview-modal {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  top: 0;
  left: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jp-image-preview-modal .modal-close-button {
  color: #fff;
  z-index: 2;
}
.jp-image-preview-modal .modal-content {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Calendar picker modal ────────────────────────────────────────────────
   Month grid used to jump the capture timeline to any day. */
.jp-calendar-modal {
  /* The modal mounts outside .jp-capture-root (Obsidian appends it to
     <body>), so it can't inherit that scope's --jp-tl-dot — redeclare it
     here from the same underlying setting. */
  --jp-tl-dot: var(--jp-ts-color, #7c3aed);
  max-width: 320px;
}
/* Obsidian's own × close button sits top-right of the modal; push the
   whole grid down clear of it rather than skewing the content sideways. */
.jp-calendar-modal .modal-content {
  padding-top: 34px;
}
.jp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.jp-cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-normal);
}
.jp-cal-nav-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.jp-cal-nav-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.jp-cal-nav-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.jp-cal-weekdays,
.jp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
}
.jp-cal-weekday {
  width: 100%;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
  padding: 4px 0;
}
.jp-cal-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 0;
  font-size: 12.5px;
  color: var(--text-faint);
}
.jp-cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-normal);
}
.jp-cal-cell:hover {
  background: var(--background-modifier-hover);
}
.jp-cal-cell.is-empty {
  cursor: default;
  pointer-events: none;
}
.jp-cal-cell.is-future {
  color: var(--text-faint);
  cursor: default;
}
/* Today: circular outline around the number itself (not the whole cell). */
.jp-cal-cell.is-today .jp-cal-cell-num {
  background: color-mix(in srgb, var(--jp-tl-dot) 18%, transparent);
  box-shadow: 0 0 0 1.5px var(--jp-tl-dot) inset;
  color: var(--jp-tl-dot);
  font-weight: 700;
}
.jp-cal-cell.is-selected {
  background: color-mix(in srgb, var(--jp-tl-dot) 14%, transparent);
}
/* Has-entries: filled pill behind the day number, high-contrast against
   both empty and selected cells. */
.jp-cal-cell.has-entries .jp-cal-cell-num {
  color: var(--text-on-accent, #fff);
  background: var(--jp-tl-dot);
  font-weight: 600;
}
/* Today + has entries: swap the outline colour so it still reads against
   the now-solid accent fill. */
.jp-cal-cell.is-today.has-entries .jp-cal-cell-num {
  box-shadow: 0 0 0 1.5px var(--text-on-accent, #fff) inset;
}
.jp-cal-cell-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.jp-cal-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}
.jp-cal-today-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--jp-tl-dot);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}
.jp-cal-today-btn:hover {
  background: var(--background-modifier-hover);
}
.jp-image-preview-img {
  display: block;
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-out;
  transform-origin: center center;
  transition: transform 0.05s linear;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.jp-image-preview-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px;
  z-index: 3;
  pointer-events: none;
}

.jp-image-time-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jp-image-time-confirm-question {
  margin: 0;
  color: var(--text-normal);
  font-size: 14px;
  line-height: 1.55;
}
.jp-image-metadata-confirm-list {
  margin: -4px 0 0;
  padding-left: 20px;
  color: var(--text-normal);
  font-size: 13px;
  line-height: 1.6;
}
.jp-image-metadata-retry-btn {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.jp-image-time-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.jp-image-time-confirm-cancel,
.jp-image-time-confirm-confirm {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* ── Tab bar (capture / stats) ──────────────────────────────────────────── */

/* Tabs sit at the very top of the view, above the input card / stats
   toolbar. Pill-shaped buttons with icon + short label; the active one
   wears a soft accent background to make the current pane obvious. */
.jp-tab-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  margin-bottom: 6px;
}
/* Search bar — appears below tab bar when search tab is active */
.jp-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  padding: 6px 10px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
}
.jp-search-bar-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  color: var(--text-muted);
}
.jp-search-bar-icon svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.jp-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--text-normal);
  font-size: 13px;
  padding: 0;
  min-width: 0;
}
.jp-search-input::placeholder {
  color: var(--text-faint);
}
.jp-search-bar-random-btn {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.jp-search-bar-random-btn:hover {
  color: var(--jp-tl-dot);
  background: color-mix(in srgb, var(--jp-tl-dot) 10%, transparent);
}
.jp-search-bar-random-btn svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Location aggregation tab */
.jp-location-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  padding: 6px 10px;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
}
.jp-location-back-btn {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.jp-location-back-btn:hover {
  color: var(--jp-tl-dot);
  background: color-mix(in srgb, var(--jp-tl-dot) 10%, transparent);
}
/* Same reason as .jp-tab-btn.is-hidden: the base rule's
   `display: inline-flex !important` can't be beaten by the inline style that
   hide() writes, so visibility is toggled with this class instead. */
.jp-location-back-btn.is-hidden,
.jp-location-view-btn.is-hidden {
  display: none !important;
}
.jp-location-back-btn svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.jp-location-bar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-normal);
}
/* The tag name can be long; let it ellipsize and keep the count pill intact. */
.jp-location-bar-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Map/list switch, pinned to the right of the location bar. Borrows the tab
   bar's round icon-button language instead of a segmented control, so it reads
   as part of the same UI rather than a second, competing frame. */
.jp-location-view-toggle {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.jp-location-view-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 50% !important;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jp-location-view-btn:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.jp-location-view-btn.is-active {
  background: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 14%, transparent);
  border-color: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 22%, transparent);
  color: var(--jp-ts-color, #7c3aed);
}
.theme-dark .jp-location-view-btn.is-active {
  background: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 22%, transparent);
  border-color: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 32%, transparent);
}
.jp-location-view-btn svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Tag filter: the input takes over the bar's title slot, the button stays pinned right */
.jp-tag-search-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.jp-tag-search-btn {
  margin-left: auto;
}

/* Map view: fixed vertical extent, horizontally scrollable and wrapping */
.jp-map-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--background-secondary);
  /* Bleed past the pane's padding so the map runs edge to edge */
  margin-left: calc(-1 * var(--jp-pane-pad, 12px));
  margin-right: calc(-1 * var(--jp-pane-pad, 12px));
  width: calc(100% + 2 * var(--jp-pane-pad, 12px));
}
.jp-map-wrap::-webkit-scrollbar {
  display: none;
}
.jp-map-svg {
  display: block;
}
.jp-map-land {
  fill: var(--background-modifier-border);
}
.jp-map-marker {
  cursor: pointer;
}
.jp-map-dot {
  fill: var(--text-accent);
  fill-opacity: 0.8;
  stroke: var(--background-primary);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: r 0.12s ease-out, fill-opacity 0.12s ease-out;
}
.jp-map-marker:hover .jp-map-dot,
.jp-map-marker.is-hovered .jp-map-dot {
  fill-opacity: 1;
  stroke-width: 2;
}
/* The count is hidden at rest — dot size alone carries the magnitude */
.jp-map-count {
  fill: var(--text-on-accent);
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.jp-map-marker:hover .jp-map-count,
.jp-map-marker.is-hovered .jp-map-count {
  opacity: 1;
}
.jp-location-list {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  padding: 2px 0;
}
.jp-location-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.jp-location-item:hover {
  background: var(--background-modifier-hover);
  border-color: color-mix(in srgb, var(--jp-tl-dot) 30%, var(--background-modifier-border));
}
.jp-location-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--jp-tl-dot);
}
.jp-location-item-icon svg {
  width: 14px;
  height: 14px;
}
.jp-location-item-name {
  font-size: 13px;
  color: var(--text-normal);
  white-space: nowrap;
}
.jp-location-item-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--background-modifier-border);
  border-radius: 999px;
  padding: 1px 8px;
}
.jp-tag-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}
.jp-tag-item {
  display: flex;
  width: fit-content;
  max-width: 100%;
}
.jp-tag-item--parent {
  background: color-mix(in srgb, var(--jp-tl-dot) 10%, var(--background-secondary));
  border-color: color-mix(in srgb, var(--jp-tl-dot) 35%, var(--background-modifier-border));
}
.jp-tag-item--parent:hover {
  background: color-mix(in srgb, var(--jp-tl-dot) 18%, var(--background-secondary));
}
.jp-tag-item--parent .jp-location-item-name {
  font-weight: 600;
}
.jp-tag-item-chevron {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}
.jp-tag-item-chevron svg {
  width: 14px;
  height: 14px;
}
.jp-tag-item--parent .jp-tag-item-chevron {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jp-tl-dot) 22%, transparent);
  color: var(--jp-tl-dot);
}
.jp-tag-item-chevron--spacer {
  width: 14px;
  cursor: default;
}
.jp-tag-rename-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jp-tag-rename-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: 14px;
}
.jp-tag-delete-children-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.jp-location-jump {
  cursor: pointer;
}
.jp-location-jump:hover {
  text-decoration: underline;
}

/* Keyword highlight in search results */
.jp-search-highlight {
  background: color-mix(in srgb, var(--jp-tl-dot) 22%, transparent);
  color: var(--jp-tl-dot);
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 600;
}
.jp-tab-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50% !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jp-tab-btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px !important;
  height: 15px !important;
}
.jp-tab-btn-icon svg {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
}
/* Text label is no longer used, hidden if accidentally present */
.jp-tab-btn-text {
  display: none;
}
/* Beats the `display: inline-flex !important` above, which an inline
   style from hide() cannot. */
.jp-tab-btn.is-hidden {
  display: none !important;
}
.jp-tab-btn:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.jp-tab-btn.is-active {
  background: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 14%, transparent);
  color: var(--jp-ts-color, #7c3aed);
  border-color: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 22%, transparent);
}
.theme-dark .jp-tab-btn.is-active {
  background: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 22%, transparent);
  border-color: color-mix(in srgb, var(--jp-ts-color, #7c3aed) 32%, transparent);
}

/* Pane containers — capture pane keeps its existing layout; stats pane
   stacks toolbar + body vertically. */
.jp-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
.jp-pane-stats {
  overflow-y: auto;
  /* macOS overlay scrollbars float on top of the content, and this pane's right
     edge is also the cards' right edge — the bar sat right on their border.
     Hide it like the timeline does; wheel/trackpad scrolling is unaffected. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}
.jp-pane-stats::-webkit-scrollbar {
  display: none; /* Chromium (Obsidian's Electron shell) */
}

/* ── Yearly stats view ────────────────────────────────────────────────────
   Lives inside the JournalCaptureView as the second tab. Hosted in
   `.jp-pane-stats`; uses the same purple accent token as the timestamp
   badge for visual continuity. */

.jp-pane-stats {
  --jp-stats-accent: var(--jp-ts-color, #7c3aed);
  --jp-stats-accent-soft: var(--jp-ts-bg, #ede9fe);
  --jp-stats-cell-size: 11px;
  --jp-stats-cell-gap: 3px;
}

/* Stats toolbar — year nav only (page title sits in the tab bar above) */
.jp-stats-toolbar {
  display: flex;
  align-items: center;
}
.jp-stats-toolbar-spacer {
  flex: 1;
}
.jp-stats-year-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--background-secondary);
  border-radius: 999px;
}
.jp-stats-year-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jp-stats-year-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.jp-stats-year-label {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-normal);
  font-variant-numeric: tabular-nums;
}

/* Body container */
.jp-stats-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Loading + empty states */
.jp-stats-loading,
.jp-stats-empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.jp-stats-spinner {
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--jp-stats-accent);
  border-radius: 50%;
  animation: jp-stats-spin 0.8s linear infinite;
}
@keyframes jp-stats-spin {
  to { transform: rotate(360deg); }
}

/* Hero — combined total-words headline + inline KPI strip in one card.
   Top half: the big "X 万 字" number with subtitle.
   Bottom half: 4 compact KPIs in a grid, separated from the top by a hairline. */
.jp-stats-hero {
  padding: 12px 14px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
}
.jp-stats-hero-top {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 10px;
}
.jp-stats-hero-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-normal);
  font-feature-settings: 'tnum';
}
.jp-stats-hero-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.jp-stats-hero-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.jp-stats-hero-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Inline KPI strip living inside the hero card. With 4 KPIs we default to a
   2×2 grid for sidebar widths; on a wider capture pane they spread to a
   single row. */
.jp-stats-hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}
@media (min-width: 520px) {
  .jp-stats-hero-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.jp-stats-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.jp-stats-kpi-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: var(--jp-stats-accent);
}
.jp-stats-kpi-icon svg {
  width: 13px;
  height: 13px;
}
.jp-stats-kpi-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.jp-stats-kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.jp-stats-kpi-unit {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.jp-stats-kpi-label {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Heatmap section */
.jp-stats-heatmap-section {
  padding: 14px 16px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
}
.jp-stats-heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jp-stats-heatmap-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-normal);
}
/* The heatmap is naturally wider than a sidebar; allow horizontal scroll
   so we don't squish the cells beyond readability. */
.jp-stats-heatmap-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.jp-stats-heatmap-inner {
  display: flex;
  gap: 6px;
  min-width: max-content;
}
.jp-stats-daylabels {
  display: grid;
  grid-template-rows: repeat(7, var(--jp-stats-cell-size));
  row-gap: var(--jp-stats-cell-gap);
  padding-top: 16px;
}
.jp-stats-daylabel {
  font-size: 10px;
  color: var(--text-faint);
  line-height: var(--jp-stats-cell-size);
  height: var(--jp-stats-cell-size);
  width: 12px;
  text-align: right;
}
.jp-stats-heatmap-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jp-stats-monthrow {
  display: grid;
  grid-auto-columns: var(--jp-stats-cell-size);
  grid-auto-flow: column;
  gap: var(--jp-stats-cell-gap);
  height: 13px;
}
.jp-stats-monthlabel {
  font-size: 10px;
  color: var(--text-faint);
  line-height: 13px;
  white-space: nowrap;
  width: 0;
  overflow: visible;
}
.jp-stats-grid {
  display: grid;
  grid-auto-columns: var(--jp-stats-cell-size);
  grid-auto-flow: column;
  gap: var(--jp-stats-cell-gap);
}
.jp-stats-col {
  display: grid;
  grid-template-rows: repeat(7, var(--jp-stats-cell-size));
  row-gap: var(--jp-stats-cell-gap);
}
.jp-stats-cell {
  width: var(--jp-stats-cell-size);
  height: var(--jp-stats-cell-size);
  border-radius: 2px;
  background: var(--background-modifier-border);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.jp-stats-cell.is-empty {
  background: transparent;
  cursor: default;
}
.jp-stats-cell:hover:not(.is-empty):not(.is-future) {
  transform: scale(1.3);
}
.jp-stats-cell.is-future {
  background: transparent;
  cursor: default;
  outline: 1px dashed var(--background-modifier-border);
  outline-offset: -1px;
}
.jp-stats-cell.is-today {
  outline: 2px solid var(--jp-stats-accent);
  outline-offset: 1px;
}

/* 5-level purple ramp via color-mix so it reacts to the accent setting. */
.jp-stats-cell.level-0 {
  background: color-mix(in srgb, var(--text-faint) 14%, transparent);
}
.jp-stats-cell.level-1 {
  background: color-mix(in srgb, var(--jp-stats-accent) 22%, var(--background-primary));
}
.jp-stats-cell.level-2 {
  background: color-mix(in srgb, var(--jp-stats-accent) 45%, var(--background-primary));
}
.jp-stats-cell.level-3 {
  background: color-mix(in srgb, var(--jp-stats-accent) 70%, var(--background-primary));
}
.jp-stats-cell.level-4 {
  background: var(--jp-stats-accent);
}

/* Legend */
.jp-stats-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 10px;
}
.jp-stats-legend .jp-stats-cell {
  cursor: default;
}
.jp-stats-legend .jp-stats-cell:hover {
  transform: none;
}
.jp-stats-legend-label {
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 0 3px;
}

/* Footer summary */
.jp-stats-footer {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* Dark theme: bump level-0 contrast so empty days don't disappear. */
.theme-dark .jp-stats-cell.level-0 {
  background: color-mix(in srgb, var(--text-faint) 18%, transparent);
}

/* ── Focus-recording mode ───────────────────────────────────────────────── */
/* When recording, the icon group + submit button fade/collapse out so the
   waveform and centered stop button own the space. Animated via the
   is-recording class on .jp-capture-actions. */
.jp-capture-button-row,
.jp-capture-submit {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    max-width 0.3s ease,
    margin 0.3s ease,
    padding 0.3s ease;
  overflow: hidden;
}
/* Collapse state must repeat !important, because the base rules pin the
   button's width/min-width with !important to survive Obsidian's mobile
   `button` styles. Without it, min-width would beat max-width and the
   button could never collapse. */
.jp-capture-actions.is-recording .jp-capture-button-row,
.jp-capture-actions.is-recording .jp-capture-submit {
  opacity: 0;
  transform: translateY(4px);
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none;
  margin: 0;
  padding: 0 !important;
  border: 0;
}
/* When recording, the actions row is empty — collapse its height too. */
.jp-capture-actions.is-recording {
  margin-top: 0;
  min-height: 0;
  transition: margin-top 0.3s ease, min-height 0.3s ease;
}
.jp-settings-version {
  margin-top: 1.5em;
  font-size: 0.75em;
  color: var(--text-faint);
  text-align: center;
}

.jp-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.jp-notice__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.jp-notice__icon .svg-icon {
  /* 移动端图标尺寸会被更高优先级的规则覆盖成 0，必须硬锁 */
  width: 1em !important;
  height: 1em !important;
  flex: 0 0 auto;
}

/* ── Settings preview badge ────────────────────────────────────────── */
.jp-settings-preview {
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.jp-settings-preview-label {
  color: var(--text-muted);
}

/* ── Off-screen mirror div for measuring textarea caret position ───── */
.jp-caret-mirror {
  position: absolute;
  visibility: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  top: 0;
  left: -9999px;
}
/* ── Send to MyClaudian dialog ─────────────────────────────────────── */
/* Narrower than Obsidian's default modal: this dialog holds one short
   instruction, not a document, and the default width made a three-line box
   look like a text editor. */
.jp-mc-modal-shell {
  max-width: 520px;
}
.jp-mc-memo {
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--background-secondary);
  margin-bottom: 12px;
}
.jp-mc-memo-meta {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.jp-mc-memo-body {
  font-size: 0.9em;
  white-space: pre-wrap;
  /* The memo is an echo, not the subject of the dialog: a long one scrolls
     inside its card rather than pushing the composer off screen. */
  max-height: 120px;
  overflow-y: auto;
}
/* Height is set here rather than through the `rows` attribute, which themes
   override freely — one was inflating a 4-row box to ~550px. Explicit min and
   max keep it at three lines, growing only if the user drags it. */
.jp-mc-input {
  width: 100%;
  height: 72px;
  min-height: 72px;
  max-height: 160px;
  resize: vertical;
  font-size: 0.95em;
}
.jp-mc-suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}
.jp-mc-suggestions.is-hidden {
  display: none;
}
.jp-mc-suggestion {
  background: transparent;
  box-shadow: none;
  padding: 2px 0;
  font-size: 0.88em;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.jp-mc-suggestion:hover {
  color: var(--text-accent);
  background: transparent;
}
.jp-mc-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Fixed and on `body`: anchored to the composer in viewport coordinates so the
   modal's edge cannot clip it. `--layer-menu` sits above `--layer-modal`. */
.jp-mention-dropdown {
  position: fixed;
  z-index: var(--layer-menu);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  background: var(--background-primary);
  box-shadow: var(--shadow-s);
}
.jp-mention-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}
.jp-mention-item.is-selected,
.jp-mention-item:hover {
  background: var(--background-modifier-hover);
}
.jp-mention-name {
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The parent folder is context, not the thing being chosen: it gives up space
   to the name first and is the half that gets truncated. */
.jp-mention-path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 0.85em;
  color: var(--text-muted);
}