/* 拾日 · B 天色（2026-10-30）
   Colour is a mark, not a fill. 今天 sits under a very pale sky that follows the clock (dawn apricot, day sky,
   dusk lilac, night periwinkle); everything else is paper white. Cards are white glass; a card's colour shows only in
   its small first line and its one button: 晨报 orange, 晚报 dusk indigo, the rest warm grey.
   拾日's face has the same sky behind it, and reacts to what happens instead of moving all the time. */

:root[data-phase] { --paper: #f7f6f2; }
:root[data-phase="dawn"]  { --sky-a: #fdd6b6; --sky-b: #fbeee4; --sky-c: #f6f1ec; --m-sky-top: #a9c8ec; --m-sky-bottom: #ffd2ad; }
:root[data-phase="day"]   { --sky-a: #cfe2f7; --sky-b: #edf3fa; --sky-c: #f3f4f4; --m-sky-top: #86b6ec; --m-sky-bottom: #d9eafb; }
:root[data-phase="dusk"]  { --sky-a: #e9c9dc; --sky-b: #f3e8ec; --sky-c: #f5f1ef; --m-sky-top: #5b5fb8; --m-sky-bottom: #f0a07e; }
:root[data-phase="night"] { --sky-a: #c6cbf0; --sky-b: #e8e6f4; --sky-c: #f1eff3; --m-sky-top: #1e2558; --m-sky-bottom: #3a4aa0; }

/* light mode: paper white everywhere, the sky only on 今天 */
@media (prefers-color-scheme: light) { :root[data-ui]:not([data-theme="dark"]) { --bg: var(--paper); } }
:root[data-ui][data-theme="light"] { --bg: var(--paper); }
body:has(.shell.on-today), .shell.on-today, .shell.on-today .main, .shell.on-today .content, .shell.on-today .topbar { background: var(--paper); }
.shell.on-today .page-scroll {
  background:
    radial-gradient(130% 420px at 50% -60px, var(--sky-a) 0%, color-mix(in srgb, var(--sky-a) 45%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, var(--sky-b) 0px, var(--sky-c) 420px, var(--paper) 760px);
  background-attachment: local;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shell.on-today .page-scroll, :root:not([data-theme="light"]) body:has(.shell.on-today),
  :root:not([data-theme="light"]) .shell.on-today, :root:not([data-theme="light"]) .shell.on-today .main, :root:not([data-theme="light"]) .shell.on-today .content {
    background: radial-gradient(130% 380px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg);
    background-attachment: local;
  }
}

/* 今天 cards: white glass, no tint; colour lives in the first line and the one button */
:root[data-ui] .page-today .story, :root[data-ui] .page-today .story.edition-morning,
:root[data-ui] .page-today .story.edition-evening, :root[data-ui] .page-today .story.edition-push {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  outline: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(60, 40, 80, 0.04), 0 14px 32px -22px rgba(60, 40, 80, 0.3);
}
:root[data-ui] .page-today .story .brief-metric, :root[data-ui] .page-today .story .brief-metric + .brief-metric,
:root[data-ui] .page-today .story[class*="edition-"] .brief-metric { background: rgba(120, 110, 130, 0.07); }
:root[data-ui] .page-today .story.edition-push .story .brief-actions .primary,
:root[data-ui] .page-today .story.edition-push .brief-actions .primary { background: #1d1b22; }
:root[data-ui] .page-today .story .brief-actions .secondary { background: rgba(120, 110, 130, 0.09); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-today .story { background: rgba(40, 40, 46, 0.72) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; }
  :root:not([data-theme="light"]) .page-today .story .brief-metric { background: rgba(255, 255, 255, 0.06) !important; }
}
/* progress bars keep their gradient, warmer */
:root[data-ui] .page-today .story.edition-morning .brief-bar-fill { background: linear-gradient(90deg, #f6b07c, #e8692c); }
:root[data-ui] .page-today .story.edition-evening .brief-bar-fill { background: linear-gradient(90deg, #f0a07e, #4a55c4); }

/* the brief being made: a thinking face, not a spinner */
.edition-pending-line.making { flex-direction: column; gap: 10px; margin: 26px 0 18px; font-size: 14px; color: var(--ink-2); }
.seal-lg { --s: 52px; }

/* 助理: a hero with the time-of-day sky behind the face */
:root[data-ui] .assistant-hero {
  position: relative; padding-top: 18px; padding-bottom: 22px; border-radius: 0 0 32px 32px; margin: 0 -18px 18px;
  background: radial-gradient(120% 100% at 50% 0%, var(--sky-a) 0%, var(--sky-b) 55%, transparent 100%);
}
:root[data-ui] .assistant-hero .seal-xxl { --s: 112px; box-shadow: 0 16px 36px -12px rgba(30, 37, 88, 0.45); }

/* the face: quiet, alive — it blinks, looks up when a page opens, smiles when something is done */
.mascot.m-react .m-sun, .mascot.m-react .m-eyes-open, .mascot.m-react .m-eyes-happy { animation: m-hop 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }
.mascot.m-react .m-eyes-open { animation: m-hop 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 1, m-blink 5.6s 0.9s infinite; }
@keyframes m-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-34px); } 70% { transform: translateY(6px); } 100% { transform: translateY(0); } }
.mascot-happy .m-sun { animation: m-glow 2.4s ease-in-out infinite; }
@keyframes m-glow { 0%, 100% { filter: none; } 50% { filter: brightness(1.08) saturate(1.1); } }
@media (prefers-reduced-motion: reduce) { .mascot, .mascot * { animation: none !important; } }
:root[data-ui] .page-today .story[class*="edition-"] .brief-metric + .brief-metric { background: rgba(120, 110, 130, 0.07); }

/* the sky starts at the very top of the screen (under the status bar), and stays put while the cards scroll over it */
.shell.on-today .main {
  background:
    radial-gradient(130% 420px at 50% -60px, var(--sky-a) 0%, color-mix(in srgb, var(--sky-a) 45%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, var(--sky-b) 0px, var(--sky-c) 420px, var(--paper) 760px) !important;
}
.shell.on-today .content, .shell.on-today .page-scroll, .shell.on-today .topbar { background: transparent !important; }
html:has(.shell.on-today), body:has(.shell.on-today) { background: var(--sky-b) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shell.on-today .main { background: radial-gradient(130% 380px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg) !important; }
  :root:not([data-theme="light"]) body:has(.shell.on-today), :root:not([data-theme="light"]) html:has(.shell.on-today) { background: var(--bg) !important; }
}
/* 助理: the same sky from the very top; the hero itself is clear */
.shell.on-assistant .main {
  background:
    radial-gradient(130% 380px at 50% -60px, var(--sky-a) 0%, color-mix(in srgb, var(--sky-a) 45%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, var(--sky-b) 0px, var(--sky-c) 360px, var(--paper) 620px) !important;
}
.shell.on-assistant .content, .shell.on-assistant .page-scroll, .shell.on-assistant .topbar { background: transparent !important; }
html:has(.shell.on-assistant), body:has(.shell.on-assistant) { background: var(--sky-b) !important; }
:root[data-ui] .shell.on-assistant .assistant-hero { background: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shell.on-assistant .main { background: radial-gradient(130% 340px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg) !important; }
  :root:not([data-theme="light"]) body:has(.shell.on-assistant), :root:not([data-theme="light"]) html:has(.shell.on-assistant) { background: var(--bg) !important; }
}

/* phone: the page never scrolls sideways — anything wider wraps, or scrolls inside its own box */
@media (max-width: 760px) {
  html, body, #app, .shell, .main, .content, .page-scroll, .chat-scroll { max-width: 100vw; overflow-x: hidden; }
  .page-today, .page-today .story, .chat-scroll .message, .bubble, .bubble-column, .push-card { min-width: 0; max-width: 100%; }
  .prose, .bubble, .brief-summary, .brief-headline, .story-cat, .brief-list-detail, .brief-sources { overflow-wrap: anywhere; word-break: break-word; }
  .prose pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
  .prose table, .table-wrap { max-width: 100%; }
  .prose img, .bubble img { max-width: 100%; height: auto; }
  /* iPhone zooms the whole page when a field under 16px is tapped, and stays zoomed */
  input, textarea, select { font-size: 16px !important; }
}

/* memory tiles: icon, title and count on the same lines in every tile */
:root[data-ui] .folder-tile { justify-content: flex-start; gap: 0; min-height: 112px; }
:root[data-ui] .folder-tile-icon { margin-bottom: 0; height: 28px; }
:root[data-ui] .folder-tile-title { margin-top: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:root[data-ui] .folder-tile-meta { margin-top: 3px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 助理 · the pet banner: full width, the sun-face rising from its lower edge, alive and touchable */
.pet-hero { position: relative; height: 250px; margin: -22px -18px 0; overflow: hidden; border-radius: 0 0 30px 30px;
  background: radial-gradient(60% 75% at 50% 100%, color-mix(in srgb, #ffb25a 38%, transparent), transparent 70%),
              linear-gradient(180deg, var(--sky-b) 0%, var(--sky-a) 100%); }
:root[data-phase="night"] .pet-hero { background: radial-gradient(60% 75% at 50% 100%, rgba(255, 178, 90, 0.28), transparent 70%), linear-gradient(180deg, #2a3172 0%, #1e2558 100%); }
:root[data-phase="dusk"] .pet-hero { background: radial-gradient(60% 75% at 50% 100%, rgba(255, 160, 110, 0.45), transparent 70%), linear-gradient(180deg, #7b7fd0 0%, #e9a6a0 100%); }
.pet-stage { position: absolute; left: 50%; bottom: 0; width: 320px; height: 320px; transform: translateX(-50%); touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.pet-face { width: 100%; height: 100%; display: block; overflow: visible; }
.pet-face .m-sky { fill: transparent; }
.pet-face .m-sun, .pet-face .m-halo { transform-box: fill-box; transform-origin: 50% 100%; }
.pet-face .m-sun { animation: pet-breathe 4.2s ease-in-out infinite; }
.pet-face .m-halo { animation: pet-glow 4.2s ease-in-out infinite; }
.pet-face .m-eyes { transform-box: view-box; animation: pet-look 9s ease-in-out infinite; }
@keyframes pet-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.025); } }
@keyframes pet-glow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes pet-look { 0%, 38%, 100% { transform: translate(0, 0); } 44%, 52% { transform: translate(-26px, -6px); } 60%, 68% { transform: translate(24px, -4px); } 74% { transform: translate(0, 0); } }
.pet-face .m-eyes-open, .pet-face .m-eyes-happy { transform-box: fill-box; transform-origin: center; }
/* a pat: squish, bounce, happy */
.pet-face.petted .m-sun { animation: pet-squish 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) 1; }
.pet-face.petted .m-eyes { animation: none; }
@keyframes pet-squish { 0% { transform: scale(1, 1); } 25% { transform: scale(1.08, 0.86); } 55% { transform: translateY(-36px) scale(0.96, 1.06); } 80% { transform: translateY(0) scale(1.02, 0.98); } 100% { transform: scale(1, 1); } }
.pet-heart { position: absolute; bottom: 150px; width: 14px; height: 14px; pointer-events: none; transform: rotate(45deg); background: #ff8a65; border-radius: 3px 0 3px 0; opacity: 0; animation: pet-heart 1.4s ease-out forwards; }
.pet-heart::before, .pet-heart::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: inherit; }
.pet-heart::before { left: -7px; top: 0; } .pet-heart::after { left: 0; top: -7px; }
@keyframes pet-heart { 0% { opacity: 0; transform: translate(0, 10px) rotate(45deg) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift, 0), -120px) rotate(45deg) scale(1.1); } }
.pet-say { position: absolute; left: 50%; top: 14px; transform: translate(-50%, 8px); padding: 7px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); color: #3a2a1c; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 6px 18px -8px rgba(30, 20, 60, 0.35); }
.pet-say.show { animation: pet-say 1.8s ease forwards; }
@keyframes pet-say { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.pet-tools { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; gap: 8px; }
.pet-tools .icon-button { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: none; color: var(--ink-2); display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-phase="night"] .pet-tools .icon-button { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pet-caption { text-align: center; margin: 14px 0 22px; }
.pet-caption .assistant-name { margin: 0; }
.shell.on-assistant .main { background: var(--paper) !important; }
:root[data-phase="night"] html:has(.shell.on-assistant), :root[data-phase="night"] body:has(.shell.on-assistant) { background: #2a3172 !important; }
html:has(.shell.on-assistant), body:has(.shell.on-assistant) { background: var(--sky-b) !important; }
@media (min-width: 761px) { .pet-hero { margin: 0 0 0; border-radius: 26px; } }
@media (prefers-reduced-motion: reduce) { .pet-face *, .pet-heart, .pet-say { animation: none !important; } }
.shell.on-assistant .topbar { background: var(--sky-b) !important; }
:root[data-phase="night"] .shell.on-assistant .topbar { background: #2a3172 !important; }
:root[data-phase="dusk"] .shell.on-assistant .topbar { background: #7b7fd0 !important; }
:root[data-phase="night"] .shell.on-assistant .topbar *, :root[data-phase="dusk"] .shell.on-assistant .topbar * { color: #fff; }
/* the face is a picture, not an icon: no inherited outline; a size that leaves sky around it */
.pet-face { stroke: none; }
.pet-stage { width: 236px; height: 236px; }
.pet-hero { height: 220px; }
.pet-heart { bottom: 110px; }
/* the whole face moves as one (eyes stay on the face): breathe and squish the picture, not the sun alone */
.pet-face .m-sun, .pet-face .m-halo, .pet-face.petted .m-sun { animation: none; }
.pet-face { transform-origin: 50% 100%; animation: pet-breathe-all 4.2s ease-in-out infinite; }
.pet-face.petted { animation: pet-squish 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) 1; }
@keyframes pet-breathe-all { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.03); } }
/* the word bubble sits beside the face, clear of the Dynamic Island */
.pet-say { top: auto; bottom: 168px; left: calc(50% + 70px); transform: translate(0, 8px); border-radius: 16px 16px 16px 4px; }
@keyframes pet-say { 0% { opacity: 0; transform: translate(0, 8px) scale(0.9); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -6px); } }
.pet-say { bottom: 126px; left: calc(50% + 62px); }
/* bubble anchored to the band (not the face): lower right, beside the face, never under the island or the buttons */
.pet-hero > .pet-say { top: auto; left: auto; right: 16px; bottom: 58px; max-width: 34%; white-space: normal; text-align: center; transform: translate(0, 8px); border-radius: 16px 16px 16px 4px; z-index: 1; }
.pet-heart { bottom: 96px; }
@keyframes pet-heart { 0% { opacity: 0; transform: translate(0, 10px) rotate(45deg) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift, 0), -70px) rotate(45deg) scale(1); } }
.pet-hero > .pet-say { bottom: 118px; }

/* ---- One message: copy / quote-reply ---- */
.bubble-quote { margin: 0 0 6px; padding: 2px 0 2px 8px; border-left: 2px solid currentColor; opacity: .62; font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.quote-chip { max-width: 100%; color: var(--ink-2); }
.quote-chip svg { flex: none; }
.quote-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-menu-shade { position: fixed; inset: 0; z-index: 90; background: transparent; }
.msg-menu { position: fixed; z-index: 91; display: flex; gap: 2px; padding: 4px; border-radius: 14px;
  background: rgba(30,30,32,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); animation: msg-menu-in .14s ease-out; }
.msg-menu-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 8px 10px; border-radius: 10px; color: #fff; font-size: 12px; }
.msg-menu-item:active { background: rgba(255,255,255,.14); }
.msg-menu-item svg { width: 20px; height: 20px; }
@keyframes msg-menu-in { from { opacity: 0; transform: scale(.96); } }
.held { transform: scale(.98); transition: transform .15s ease; }
/* Phone: the hold opens our menu, not the system text loupe. */
@media (hover: none) { .message .bubble, .message .push-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
/* Mouse: two small buttons under a message while hovering it. */
.msg-tools { display: none; gap: 2px; margin-top: 4px; }
.message.user .msg-tools { justify-content: flex-end; }
.msg-tools button { width: 28px; height: 28px; border-radius: 8px; color: var(--ink-3); display: grid; place-items: center; }
.msg-tools button:hover { background: var(--sunken, rgba(0,0,0,.05)); color: var(--ink); }
.msg-tools svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .message.has-tools .msg-tools { display: flex; visibility: hidden; }
  .message.has-tools:hover .msg-tools { visibility: visible; }
}

/* The dialog's ✕: a true circle, and no focus ring drawn around it on open. */
.modal-header .icon-button { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.modal-header .icon-button:focus, .modal-header .icon-button:focus-visible { outline: none; }


/* Dark picked by hand (the blocks above only cover a dark system): same rules. */
:root[data-theme="dark"] .shell.on-today .page-scroll, :root[data-theme="dark"] body:has(.shell.on-today),
  :root[data-theme="dark"] .shell.on-today, :root[data-theme="dark"] .shell.on-today .main, :root[data-theme="dark"] .shell.on-today .content {
    background: radial-gradient(130% 380px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg);
    background-attachment: local;
  }
:root[data-theme="dark"] .page-today .story { background: rgba(40, 40, 46, 0.72) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; }
  :root[data-theme="dark"] .page-today .story .brief-metric { background: rgba(255, 255, 255, 0.06) !important; }
:root[data-theme="dark"] .shell.on-today .main { background: radial-gradient(130% 380px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg) !important; }
  :root[data-theme="dark"] body:has(.shell.on-today), :root[data-theme="dark"] html:has(.shell.on-today) { background: var(--bg) !important; }
:root[data-theme="dark"] .shell.on-assistant .main { background: radial-gradient(130% 340px at 50% -60px, color-mix(in srgb, var(--sky-a) 22%, transparent), transparent 75%), var(--bg) !important; }
  :root[data-theme="dark"] body:has(.shell.on-assistant), :root[data-theme="dark"] html:has(.shell.on-assistant) { background: var(--bg) !important; }