@import url("/assets/tokens.css");

.lilly-light {
  position: fixed;
  z-index: 210;
  width: 68px;
  height: 68px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-primary);
  cursor: pointer;
  touch-action: none;
}
/* Lilly is meant to read as lit and waiting, not as a button someone forgot to style.
   The halo breathes behind the orb and the flame keeps a slow candle flicker; both stop
   under prefers-reduced-motion, where the orb still reads as lit but holds still. */
.lilly-light::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(227, 197, 126, .42), rgba(184, 144, 46, .22) 38%, rgba(184, 144, 46, 0) 72%);
  opacity: .78;
  filter: blur(2px);
  animation: lilly-breathe 2.8s ease-in-out infinite;
  pointer-events: none;
}
.lilly-light:hover::before,
.lilly-light:focus-visible::before { animation-duration: 2.2s; }
.lilly-light.corner-br { inset-inline-end: calc(var(--s-lg) + env(safe-area-inset-right)); inset-block-end: calc(var(--s-lg) + env(safe-area-inset-bottom)); }
.lilly-light.corner-bl { inset-inline-start: calc(var(--s-lg) + env(safe-area-inset-left)); inset-block-end: calc(var(--s-lg) + env(safe-area-inset-bottom)); }
.lilly-light.corner-tr { inset-inline-end: calc(var(--s-lg) + env(safe-area-inset-right)); inset-block-start: calc(var(--s-lg) + env(safe-area-inset-top)); }
.lilly-light.corner-tl { inset-inline-start: calc(var(--s-lg) + env(safe-area-inset-left)); inset-block-start: calc(var(--s-lg) + env(safe-area-inset-top)); }
/* The wheel is the mark. It used to be laid over a star that was still in the button at
   opacity 0, which is why the flicker below appeared to do nothing. */
.lilly-light-mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  filter: drop-shadow(0 10px 18px rgba(42, 30, 18, .22));
  animation: lilly-flicker 5.6s ease-in-out infinite;
  pointer-events: none;
}
.lilly-light-label {
  position: absolute;
  inset-inline-end: calc(100% + var(--s-xs));
  inset-block-start: 50%;
  transform: translateY(-50%);
  padding: var(--s-xxs) var(--s-xs);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface-tint);
  color: var(--c-primary-ink);
  font: var(--t-caption);
  white-space: nowrap;
  box-shadow: var(--e-soft);
  pointer-events: none;
}
.lilly-light.corner-br .lilly-light-label,
.lilly-light.corner-tr .lilly-light-label { inset-inline-end: calc(100% + var(--s-xs)); }
.lilly-light.corner-bl .lilly-light-label,
.lilly-light.corner-tl .lilly-light-label { inset-inline-start: calc(100% + var(--s-xs)); }
.lilly-light.corner-bl .lilly-light-label,
.lilly-light.corner-tl .lilly-light-label { inset-inline-end: auto; }
.lilly-light:hover .lilly-light-mark,
.lilly-light:focus-visible .lilly-light-mark { filter: drop-shadow(0 10px 18px rgba(42, 30, 18, .28)) drop-shadow(0 0 12px rgba(184, 144, 46, .42)); }
.lilly-light.is-thinking .lilly-light-mark { animation: lilly-thinking 1.4s ease-in-out infinite alternate; }
.lilly-light.panel-open .lilly-light-label { display: none; }
.lilly-light-unread { position: absolute; inset-inline-end: var(--s-xxs); inset-block-start: var(--s-xxs); width: var(--s-sm); height: var(--s-sm); border: 2px solid var(--c-canvas); border-radius: var(--r-pill); background: var(--c-primary); }

/* With Lilly on, no command column renders and every view spans tracks 1-2, so the first
   track is dead space. Keeping it at 260px is what pushed the dock 108px past
   .caluminate-main's overflow:hidden edge at 1400 — the panel was being clipped, not fitted.
   Three tracks are kept because the views span "1 / 3"; the first simply has no width. */
.caluminate-main.lilly-docked { grid-template-columns: 0 minmax(0, 1fr) 340px; }

.lilly-presence-panel {
  position: fixed;
  z-index: 209;
  width: min(420px, 92vw);
  height: min(60svh, 560px);
  min-width: 280px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-tint);
  box-shadow: var(--e-lifted), 0 0 0 1px color-mix(in srgb, var(--c-primary) 28%, transparent), 0 0 26px rgba(227, 197, 126, .24);
  color: var(--c-ink-body);
  overflow: hidden;
  resize: both;
  /* Grows out of the corner the orb sits in, so the panel reads as having come from it. */
  animation: lilly-panel-open .26s cubic-bezier(.2,.75,.25,1) both, lilly-panel-pulse 3.4s ease-in-out infinite;
}
.lilly-presence-panel.corner-br { transform-origin: 100% 100%; }
.lilly-presence-panel.corner-bl { transform-origin: 0 100%; }
.lilly-presence-panel.corner-tr { transform-origin: 100% 0; }
.lilly-presence-panel.corner-tl { transform-origin: 0 0; }
.lilly-presence-panel[hidden] { display: none; }
.lilly-presence-panel.is-docked {
  position: relative;
  /* .corner-* sets inset-block/inline-end for the floating panel and is declared after this
     rule, so under position:relative those offsets survive as a shift — which lifted the
     docked panel out of its own grid cell and let .caluminate-main's overflow:hidden clip
     the header, minimise button and all. Docked, the grid places it; nothing else should. */
  inset: auto !important;
  z-index: 3;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
  justify-self: stretch;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  resize: none;
}
/* The dock is 340px against the floating panel's 420, and a fixed column grid collides at that
   width — the name runs under the controls. Wrap instead, so the name takes the space that is
   left and search and minimise keep their own. */
.lilly-presence-panel.is-docked .lilly-presence-header {
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-xs);
  row-gap: var(--s-xs);
}
/* The name shrinks so search and minimise stay on its row. */
.lilly-presence-panel.is-docked .lilly-presence-header > :first-child { flex: 1 1 0; min-width: 0; }
.lilly-presence-panel.is-docked .lilly-presence-header > button { flex: 0 0 auto; }
.lilly-presence-panel.corner-br { inset-inline-end: calc(var(--s-lg) + env(safe-area-inset-right)); inset-block-end: calc(var(--s-section) + env(safe-area-inset-bottom)); }
.lilly-presence-panel.corner-bl { inset-inline-start: calc(var(--s-lg) + env(safe-area-inset-left)); inset-block-end: calc(var(--s-section) + env(safe-area-inset-bottom)); }
.lilly-presence-panel.corner-tr { inset-inline-end: calc(var(--s-lg) + env(safe-area-inset-right)); inset-block-start: calc(var(--s-section) + env(safe-area-inset-top)); }
.lilly-presence-panel.corner-tl { inset-inline-start: calc(var(--s-lg) + env(safe-area-inset-left)); inset-block-start: calc(var(--s-section) + env(safe-area-inset-top)); }
.lilly-presence-header { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-sm) var(--s-sm) var(--s-sm) var(--s-md); border-bottom: 1px solid var(--c-hairline); cursor: move; touch-action: none; }
.lilly-presence-heading { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-xs); }
/* The compact cut of the lockup: 28px mark, then the name. Sized here rather than in the
   markup so the 340px dock and the floating panel cannot disagree about it. */
.lilly-presence-mark { flex: 0 0 auto; width: 28px; height: 28px; display: block; border-radius: var(--r-pill); }
.lilly-presence-heading-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lilly-presence-heading-text strong { font: var(--t-heading-3); font-family: var(--font-reading); font-weight: 400; line-height: 1.1; }
/* Icon buttons, sized for a finger even in the 340px dock. */
.lilly-icon-button { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-muted); cursor: pointer; }
.lilly-icon-button svg { width: 18px; height: 18px; display: block; }
.lilly-icon-button:hover { background: var(--c-surface-tint); color: var(--c-primary-ink); }
.lilly-icon-button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media (max-width: 759px) { .lilly-icon-button { width: 44px; height: 44px; } .lilly-icon-button svg { width: 20px; height: 20px; } }
.lilly-date-separator { display: flex; align-items: center; gap: var(--s-xs); color: var(--c-ink-muted); font: var(--t-caption); }
.lilly-date-separator::before, .lilly-date-separator::after { content: ""; flex: 1; border-block-start: 1px solid var(--c-hairline); }
.lilly-presence-header strong { display: block; color: var(--c-ink); font: var(--t-heading-3); }
.lilly-presence-context { display: block; color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lilly-presence-header button { width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-primary-ink); cursor: pointer; font: var(--t-heading-3); }
.lilly-scheduling-notifications { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-xs) var(--s-md); border-bottom: 1px solid var(--c-hairline); background: var(--c-primary-wash); flex-wrap: wrap; }
.lilly-scheduling-notifications[hidden] { display: none; }
.lilly-scheduling-notifications > strong { color: var(--c-primary-ink); font: var(--t-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.lilly-scheduling-notification { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 2px var(--s-xs); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-ink); font: var(--t-caption); }
.lilly-scheduling-notification button { min-height: 28px; padding: 0 8px; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: transparent; color: var(--c-primary-ink); font: var(--t-caption); cursor: pointer; }
.lilly-scheduling-notification button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lilly-light-unread.has-scheduling-alerts { display: block; }
.lilly-thread { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-md); display: flex; flex-direction: column; gap: var(--s-sm); }
.lilly-thread > *:first-child { margin-top: auto; }
.lilly-msg { display: flex; }
.lilly-msg.user { justify-content: flex-end; }
.lilly-msg.lilly { flex-direction: column; align-items: flex-start; gap: 2px; }
.lilly-msg-copy { align-self: flex-start; min-height: 26px; padding: 2px var(--s-xs); border: 0; border-radius: var(--r-xs); background: transparent; color: var(--c-ink-muted); font: var(--t-caption); font-family: var(--font-ui); cursor: pointer; opacity: 0; transition: opacity .14s ease, color .14s ease; }
.lilly-scheduling-card { width: min(100%, 360px); display: grid; gap: var(--s-xs); margin-top: var(--s-xxs); padding: var(--s-sm); border: 1px solid var(--c-hairline-strong); border-left: 3px solid var(--c-primary); border-radius: var(--r-sm); background: var(--c-surface-tint); color: var(--c-ink); box-shadow: 0 1px 2px rgba(42, 30, 18, .06); }
.lilly-scheduling-title { color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.lilly-scheduling-slots { display: grid; gap: var(--s-xxs); }
.lilly-scheduling-slot { display: grid; gap: 1px; padding: var(--s-xs); border: 1px solid var(--c-hairline); border-radius: var(--r-xs); background: var(--c-canvas); }
.lilly-scheduling-slot.recommended { border-color: var(--c-primary); background: var(--c-primary-wash); }
.lilly-scheduling-when { color: var(--c-ink); font: var(--t-body-ui); font-weight: 700; }
.lilly-scheduling-detail, .lilly-scheduling-meta { color: var(--c-ink-muted); font: var(--t-caption); }
.lilly-scheduling-rationale { display: grid; gap: var(--s-xxs); margin: 0; padding-inline-start: var(--s-md); color: var(--c-ink-body); font: var(--t-caption); }
.lilly-scheduling-meta { margin: 0; }
/* The rule she understood. Same shape as the card that follows it, so the pair reads as
   one answer in two parts — but it holds no times, and never a write action. */
.lilly-habit-card { width: min(100%, 360px); display: grid; gap: var(--s-xs); margin-top: var(--s-xxs); padding: var(--s-sm); border: 1px solid var(--c-hairline-strong); border-left: 3px solid var(--c-primary); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-ink); }
.lilly-habit-title { color: var(--c-ink); font: var(--t-body-ui); font-weight: 700; }

/* Cards are bounded: over three times, the rest live in the week's own holding strip. */
.lilly-scheduling-more { color: var(--c-ink-muted); font: var(--t-caption); font-family: var(--font-ui); }
/* A card whose times have gone stale keeps its shape and changes its first action, rather
   than vanishing and taking the times with it. */
.lilly-scheduling-actions .lilly-scheduling-primary { border-color: var(--c-action-edge); background: var(--c-action); color: var(--c-on-action); font-weight: 700; }
.lilly-scheduling-actions,
.lilly-scheduling-mode-actions { display: flex; flex-wrap: wrap; gap: var(--s-xxs); }
.lilly-scheduling-mode-actions { padding-block-end: var(--s-xxs); border-block-end: 1px solid var(--c-hairline); }
.lilly-scheduling-actions button,
.lilly-scheduling-mode-actions button { min-height: 34px; padding: var(--s-xxs) var(--s-xs); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-primary-ink); cursor: pointer; font: var(--t-caption); font-family: var(--font-ui); }
.lilly-scheduling-mode-actions button[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); cursor: default; }
.lilly-scheduling-actions button:hover, .lilly-scheduling-actions button:focus-visible,
.lilly-scheduling-mode-actions button:hover, .lilly-scheduling-mode-actions button:focus-visible { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lilly-scheduling-mode-actions button:disabled { opacity: 1; }
/* A write she cannot make is disabled in place, not removed: taking the button away would
   leave the reader wondering where it went. The card still offers its times. */
.lilly-scheduling-actions button:disabled { border-color: var(--c-hairline); background: var(--c-sunken); color: var(--c-ink-faint); cursor: not-allowed; }
.lilly-msg.lilly:hover .lilly-msg-copy, .lilly-msg-copy:focus-visible { opacity: 1; }
.lilly-msg-copy:hover { color: var(--c-primary-ink); }
.lilly-msg-copy:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media (hover: none) { .lilly-msg-copy { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lilly-msg-copy { transition: none; } }
/* Hers: warm ground, her serif, one squared corner where a tail would be. Yours: mirrored,
   gold-washed, the interface sans. The difference is what makes it read as a conversation. */
.lilly-bubble { max-width: 88%; padding: 10px 13px; border: 0; border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px; background: var(--c-marketing-ground); color: var(--c-ink); font: var(--t-reading); box-shadow: 0 1px 2px rgba(42, 30, 18, .06); white-space: pre-wrap; }
.lilly-msg.user .lilly-bubble { border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg); background: color-mix(in srgb, var(--c-primary-wash) 52%, var(--c-marketing-ground)); color: var(--c-ink); font: var(--t-body-ui); box-shadow: none; }
/* Waiting happens where the answer will appear, instead of as a caption under the box. */
.lilly-typing-dots { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.lilly-typing-dots i { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--c-primary); animation: lilly-typing 1.2s ease-in-out infinite; }
.lilly-typing-dots i:nth-child(2) { animation-delay: .18s; }
.lilly-typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes lilly-typing { 0%, 100% { opacity: .28; } 50% { opacity: .9; } }
/* A date nobody says out loud, in a chip rather than a bare line. */
.lilly-date-separator { align-self: center; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(184, 144, 46, .10); color: var(--c-ink-muted); font: var(--t-caption); font-family: var(--font-ui); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lilly-context { align-self: center; color: var(--c-ink-muted); font: var(--t-caption); }
/* The opening state. Reclaim's chat greets you by name and offers grouped ways in rather
   than an empty box; this is the same idea in Lilly's register. */
.lilly-opening { display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-xs) 0; }
.lilly-greeting { color: var(--c-ink); font: var(--t-heading-3); font-family: var(--font-reading); }
.lilly-opening-note { margin: 0; color: var(--c-ink-body); font: var(--t-body-ui); }
.lilly-starters { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.lilly-starter,
.lilly-starter-prompt,
.lilly-starter-back { border: 1px solid var(--c-hairline-strong); background: var(--c-canvas); color: var(--c-ink); cursor: pointer; text-align: left; font-family: var(--font-ui); transition: border-color .16s ease, background .16s ease; }
.lilly-starter { min-height: 34px; padding: var(--s-xs) var(--s-sm); border-radius: var(--r-pill); font: var(--t-caption); }
.lilly-starter:hover, .lilly-starter-prompt:hover { border-color: var(--c-primary); background: var(--c-primary-wash); }
.lilly-starter:focus-visible, .lilly-starter-prompt:focus-visible, .lilly-starter-back:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lilly-starter-back { align-self: flex-start; min-height: 30px; padding: 4px var(--s-sm); border-radius: var(--r-pill); color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.lilly-starter-prompts { display: flex; flex-direction: column; gap: var(--s-xs); }
.lilly-starter-prompt { min-height: 40px; padding: var(--s-xs) var(--s-sm); border-radius: var(--r-sm); border-left: 3px solid var(--c-primary); font: var(--t-body-ui); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .lilly-starter, .lilly-starter-prompt, .lilly-starter-back { transition: none; } }
.lilly-history-search { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-md); background: var(--c-canvas); }
.lilly-history-search[hidden] { display: none; }
.lilly-history-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--s-xs); }
.lilly-history-search-form input,
.lilly-history-search-form select { min-width: 0; min-height: 44px; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-xs); background: var(--c-canvas); color: var(--c-ink); font: var(--t-body-ui); }
.lilly-history-search-form button { min-height: 44px; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-primary); border-radius: var(--r-sm); background: var(--c-primary); color: var(--c-on-primary); cursor: pointer; font: var(--t-button); }
.lilly-history-search-status { min-height: var(--s-lg); margin: var(--s-xs) 0; color: var(--c-ink-muted); font: var(--t-caption); }
.lilly-history-results { display: grid; gap: var(--s-xs); }
.lilly-history-result { display: grid; gap: var(--s-xxs); width: 100%; min-height: 44px; padding: var(--s-sm); border: 1px solid var(--c-hairline); border-radius: var(--r-sm); background: var(--c-surface-tint); color: var(--c-ink-body); cursor: pointer; text-align: start; }
.lilly-history-result:hover,
.lilly-history-result:focus-visible { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lilly-history-result strong { color: var(--c-ink); font: var(--t-body-ui); font-weight: 600; }
.lilly-history-result span { display: -webkit-box; overflow: hidden; font: var(--t-caption); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.lilly-history-result time { color: var(--c-primary-ink); font: var(--t-eyebrow); }
.lilly-history-retention { display: grid; gap: var(--s-xs); margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--c-hairline); }
.lilly-history-retention label { display: grid; gap: var(--s-xxs); color: var(--c-ink); font: var(--t-body-ui); font-weight: 600; }
.lilly-history-retention select { min-height: 44px; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-xs); background: var(--c-canvas); color: var(--c-ink); font: var(--t-body-ui); }
.lilly-history-retention p { margin: 0; color: var(--c-ink-muted); font: var(--t-caption); }
.lilly-history-retention button { justify-self: start; min-height: 44px; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-primary-ink); cursor: pointer; font: var(--t-button); }
.lilly-history-retention button:hover,
.lilly-history-retention button:focus-visible { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lilly-previews { display: grid; flex: 0 0 auto; gap: var(--s-xs); padding: 0; }
.lilly-previews:empty { display: none; }
.lilly-preview { padding: var(--s-sm); border: 1px dashed var(--c-primary-ink); border-radius: var(--r-sm); background: var(--c-sunken); }
.lilly-preview-label { color: var(--c-ink); font: var(--t-caption); }
.lilly-preview-actions { display: flex; gap: var(--s-xs); margin-top: var(--s-xs); }
.lilly-preview-actions button,
.lilly-send { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: var(--c-action); color: var(--c-on-action); cursor: pointer; }
.lilly-preview-actions button { border-radius: var(--r-pill); }
.lilly-send { border-radius: var(--r-sm); }
.lilly-send svg { width: 17px; height: 17px; display: block; margin: 0; }
.lilly-send:disabled { opacity: .45; cursor: default; }
.lilly-send:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media (max-width: 759px) { .lilly-send { width: 44px; height: 44px; } .lilly-send svg { width: 19px; height: 19px; } }
.lilly-preview-actions .lilly-confirm,
.lilly-send { border-color: var(--c-action-edge); background: var(--c-action); color: var(--c-on-action); }
.lilly-composer { padding: 10px var(--s-sm) var(--s-sm); border-top: 1px solid var(--c-hairline); background: var(--c-canvas); }
.lilly-composer-field { display: flex; align-items: center; gap: var(--s-xs); padding: 5px; border-radius: var(--r-md); background: var(--c-marketing-ground); box-shadow: 0 0 0 1px var(--c-hairline); }
.lilly-composer-field:focus-within { box-shadow: 0 0 0 2px var(--c-primary); }
/* Grows with what you type, then scrolls — no drag-grip, no fixed two rows. */
.lilly-composer textarea { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 34px; max-height: 132px; resize: none; padding: 8px 0; border: 0; background: transparent; color: var(--c-ink); font: var(--t-body-ui); }
.lilly-composer textarea:focus { outline: none; }
.lilly-status { display: block; padding: 0 var(--s-sm) 6px; color: var(--c-ink-muted); font: var(--t-caption); }
.lilly-status:empty { display: none; }

@keyframes lilly-breathe { from { opacity: .45; transform: scale(.92); } to { opacity: .95; transform: scale(1.08); } }
@keyframes lilly-orb-pulse { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: .92; transform: scale(1.08); } }
.lilly-light::after { animation: lilly-orb-pulse 3.4s ease-in-out infinite; }
@keyframes lilly-flicker { 0% { opacity: .58; } 28% { opacity: .78; } 54% { opacity: .64; } 76% { opacity: .84; } 100% { opacity: .7; } }
@keyframes lilly-panel-open { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes lilly-panel-pulse {
  0%, 100% { box-shadow: var(--e-lifted), 0 0 0 1px rgba(184, 144, 46, .16), 0 0 22px rgba(227, 197, 126, .20); }
  50% { box-shadow: var(--e-lifted), 0 0 0 1px rgba(184, 144, 46, .34), 0 0 38px rgba(227, 197, 126, .38); }
}
@keyframes lilly-thinking { from { opacity: .56; transform: scale(.96); } to { opacity: .9; transform: scale(1.04); } }

/* Below the narrow-app breakpoint the calendar needs the width back more than Lilly does. */
@media (max-width: 1279px) {
  .caluminate-main.lilly-docked { grid-template-columns: 0 minmax(0, 1fr) 300px; }
}
@media (max-width: 1199px) {
  .caluminate-main.lilly-docked { grid-template-columns: revert; }
  .lilly-presence-panel.is-docked { display: none; }
}

@media (max-width: 759px) {
  .lilly-presence-panel,
  .lilly-presence-panel.corner-br,
  .lilly-presence-panel.corner-bl,
  .lilly-presence-panel.corner-tr,
  .lilly-presence-panel.corner-tl {
    position: fixed;
    inset: auto 0 0 0;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: min(82svh, 720px) !important;
    min-width: 0;
    max-width: none;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    resize: none;
  }
  .lilly-presence-panel::before { content: ""; width: var(--s-xxl); margin: var(--s-xs) auto 0; border-top: var(--s-xxs) solid var(--c-hairline-strong); border-radius: var(--r-pill); }
  .lilly-presence-header { padding: var(--s-sm) var(--s-lg); cursor: default; }
  .lilly-thread { padding: var(--s-md) var(--s-lg); }
  .lilly-composer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-sm) var(--s-lg) calc(var(--s-sm) + env(safe-area-inset-bottom));
  }
  .lilly-composer-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: var(--s-xs); padding: 5px; }
  .lilly-composer textarea { min-height: 44px; max-height: 30svh; padding: var(--s-xs) var(--s-sm); resize: none; }
  .lilly-composer-row { display: contents; }
  .lilly-status { min-height: 1.2em; padding-inline: 0; }
  .lilly-send { width: 44px; height: 44px; min-width: 44px; min-height: 44px; align-self: center; border-radius: var(--r-sm); }
  .lilly-light.panel-open { display: none; }
  .lilly-history-search-form { grid-template-columns: minmax(0,1fr) auto; }
  .lilly-history-search-form select { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .lilly-light,
  .lilly-light::before,
  .lilly-light-mark,
  .lilly-presence-panel { animation: none !important; transition: none !important; }
  /* The halo stays — it is what makes the orb read as live — it simply holds still. */
  .lilly-light::before { opacity: .7; transform: none; }
}