/* === agent f: Sunny assistant (web/assistant.js) ===
   A glass panel that springs in from the right edge. Navy + gold (Sunny's own colors), pills, calm type.
   Everything here is scoped to .tb-sunny, .sn-* and .sunny-svg. */

/* ---- Sunny's mark (ported from ProjectOS sunny-mark.js) */
.sn-mark { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.sunny-svg { display: block; overflow: visible; }
.sunny-svg .sm-body { animation: smFloat 3.6s ease-in-out infinite; transform-box: view-box; transform-origin: 32px 32px; }
.sunny-svg .sm-rays { transform-origin: 32px 32px; transform-box: view-box; animation: smSpin 32s linear infinite; }
.sunny-svg .sm-ray-l { transform-origin: 32px 32px; transform-box: view-box; animation: smFlare 2.8s ease-in-out infinite; }
.sunny-svg .sm-ray-s { transform-origin: 32px 32px; transform-box: view-box; animation: smFlare 2.8s ease-in-out -1.4s infinite; }
.sunny-svg .sm-eyes { transform-box: view-box; transform-origin: 32px 30.4px; animation: smBlink 5.2s infinite; }
.sunny-svg .sm-shadow { transform-box: view-box; transform-origin: 32px 60px; animation: smShadow 3.6s ease-in-out infinite; }
.sunny-svg.sm-busy .sm-rays { animation-duration: 5s; }
.sunny-svg.sm-busy { filter: drop-shadow(0 0 4px rgb(252 181 55 / .7)); }
@keyframes smFlare { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes smFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes smShadow { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.88); opacity: .09; } }
@keyframes smSpin { to { transform: rotate(360deg); } }
@keyframes smBlink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

/* ---- top bar button: a small gold-edged pill */
.tb-sunny { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; margin: 0 4px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgb(255 255 255 / .08); color: #fff; font: inherit; font-size: var(--fs-md, 14px); font-weight: 600; letter-spacing: -.005em;
  box-shadow: inset 0 0 0 1px rgb(252 181 55 / .35); transition: background .15s, box-shadow .15s, transform 100ms var(--ease-out); }
.tb-sunny:hover { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(252 181 55 / .6); }
.tb-sunny:active { transform: scale(.97); }
.tb-sunny.on { background: linear-gradient(180deg, rgb(252 181 55 / .3), rgb(227 154 23 / .22)); box-shadow: inset 0 0 0 1px rgb(252 181 55 / .8); }
.tb-sunny:focus-visible { outline: 2px solid var(--sg-gold); outline-offset: 2px; }
@media (max-width: 700px) { .tb-sunny { padding: 0 5px; margin: 0 2px; } .tb-sunny span { display: none; } }

/* ---- panel */
.sn-root { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0; z-index: var(--z-panel, 50); pointer-events: none; }
.sn-panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100vw - 20px)); display: flex; flex-direction: column; pointer-events: auto;
  will-change: transform; transform: translate3d(calc(100% + 24px), 0, 0); border-radius: 26px; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, rgb(255 251 240 / .9), rgb(240 243 250 / .9) 38%);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 0 0 1px rgb(255 255 255 / .6), 0 2px 6px rgb(var(--sg-blue-rgb) / .1), 0 28px 70px rgb(var(--sg-blue-rgb) / .3); }
.sn-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; cursor: grab; z-index: 2; touch-action: none; display: grid; place-items: center; }
.sn-grip span { width: 4px; height: 40px; border-radius: 4px; background: var(--line-3); opacity: .55; transition: opacity .15s, height .2s var(--ease-out); }
.sn-grip:hover span { opacity: 1; height: 60px; }
.sn-grip:active { cursor: grabbing; }

.sn-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 20px; border-bottom: 1px solid rgb(var(--sg-blue-rgb) / .08); background: rgb(255 251 240 / .72); }
.sn-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sn-title b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--sg-blue); }
.sn-title span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-ibtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgb(255 255 255 / .6); color: var(--icon); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s, transform 100ms var(--ease-out); }
.sn-ibtn:hover { background: #fff; color: var(--ink); }
.sn-ibtn:active { transform: scale(.94); }
.sn-ibtn:disabled { opacity: .45; cursor: default; }

.sn-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 8px 20px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }

/* empty state */
.sn-hello { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 4px; gap: 8px; }
.sn-hello h2 { margin: 6px 0 0; font-size: 20px; letter-spacing: -.025em; font-weight: 700; color: var(--ink); }
.sn-hello p { margin: 0; max-width: 32ch; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.sn-suggest { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 12px; }
.sn-suggest button { text-align: left; padding: 11px 14px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  background: rgb(255 255 255 / .72); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px var(--line-2), 0 2px 6px rgb(var(--sg-blue-rgb) / .05);
  transition: background .15s, box-shadow .15s, transform 100ms var(--ease-out); }
.sn-suggest button::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sg-gold); margin-right: 10px; vertical-align: 1px; }
.sn-suggest button:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--line-3), 0 6px 16px rgb(var(--sg-blue-rgb) / .1); }
.sn-suggest button:active { transform: scale(.985); }

/* messages */
.sn-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.sn-msg.me { justify-content: flex-end; }
.sn-msg.me .sn-bubble { background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: 0 4px 12px rgb(var(--sg-blue-rgb) / .25); max-width: 85%; white-space: pre-wrap; }
.sn-msg.sunny > .sn-mark { margin-top: 4px; }
.sn-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sn-bubble { padding: 10px 13px; border-radius: 6px 18px 18px 18px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sn-msg.sunny .sn-bubble { background: rgb(255 255 255 / .82); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sg-blue-rgb) / .07), 0 2px 8px rgb(var(--sg-blue-rgb) / .06); max-width: 100%; }
.sn-msg.err .sn-bubble { background: rgb(255 244 236 / .9); box-shadow: 0 0 0 1px rgb(234 88 12 / .25); color: #7a2e0b; }
.sn-bubble p { margin: 0 0 .5em; } .sn-bubble p:last-child { margin-bottom: 0; }
.sn-bubble ul { margin: .2em 0 .55em; padding-left: 1.15em; } .sn-bubble ul:last-child { margin-bottom: 0; }
.sn-bubble li { margin: .18em 0; }
.sn-bubble li::marker { color: var(--sg-gold-deep); }
.sn-bubble a { color: var(--sg-blue-lift); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(var(--sg-blue-rgb) / .2); }
.sn-bubble a:hover { border-bottom-color: currentColor; }
.sn-bubble b { font-weight: 650; }

/* typing state */
.sn-msg.typing .sn-bubble { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.sn-dots { display: inline-flex; gap: 4px; }
.sn-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--sg-gold-deep); opacity: .35; animation: snDot 1.2s ease-in-out infinite; }
.sn-dots i:nth-child(2) { animation-delay: .15s; } .sn-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes snDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* record links under an answer */
.sn-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-ref { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 11px; border-radius: var(--r-pill); text-decoration: none; color: var(--sg-blue); font-size: 12.5px; font-weight: 600;
  background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s, transform 100ms var(--ease-out); }
.sn-ref span { color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20ch; }
.sn-ref:hover { background: #fff; text-decoration: none; }
.sn-ref:active { transform: scale(.97); }
.sn-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; }
.sn-chip:hover { background: #fff; text-decoration: none; }
.sn-chip:active { transform: scale(.97); }

/* proposal cards */
.sn-card { width: 100%; border-radius: 18px; padding: 12px 12px 10px; background: rgb(255 255 255 / .9); display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sg-gold-rgb) / .45), 0 6px 18px rgb(var(--sg-blue-rgb) / .08); animation: snCardIn .32s var(--ease-out) both; }
@keyframes snCardIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.sn-card.done { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(15 138 107 / .35); }
.sn-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.sn-card-ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-ink, #2A1C00); background: linear-gradient(145deg, #FDD27A, var(--sg-gold-deep)); flex: none; }
.sn-card[data-kind="draft_reply"] .sn-card-ico { color: #fff; background: linear-gradient(145deg, var(--sg-blue-lift), var(--sg-blue)); }
.sn-card-h b { font-weight: 650; letter-spacing: -.01em; }
.sn-card-on { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-card-on:hover { color: var(--sg-blue-lift); }
.sn-card-why { font-size: 12px; color: var(--muted); line-height: 1.4; }
textarea.sn-card-text { width: 100%; resize: vertical; min-height: 54px; border: 0; border-radius: 12px; padding: 9px 11px; font-size: 13.5px; line-height: 1.45; background: rgb(var(--sg-blue-rgb) / .04); box-shadow: inset 0 0 0 1px var(--line-2); }
textarea.sn-card-text:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sg-blue-lift), 0 0 0 3px var(--focus-ring); background: #fff; }
div.sn-card-text.done { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; color: var(--ink-2); padding: 0 2px; }
.sn-card-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sn-card-a .btn { height: 32px; padding: 0 14px; }
.sn-ok { display: inline-flex; align-items: center; gap: 5px; color: #0F8A6B; font-weight: 600; font-size: 13px; }

/* setup card (no key yet) */
.sn-setup { border-radius: 18px; padding: 14px 16px; background: rgb(255 255 255 / .85); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sg-gold-rgb) / .5); font-size: 13.5px; line-height: 1.5; }
.sn-setup-h { display: flex; align-items: center; gap: 7px; color: var(--sg-blue); margin-bottom: 4px; }
.sn-setup p { margin: 6px 0; color: var(--ink-2); }
.sn-setup ol { margin: 6px 0; padding-left: 1.3em; }
.sn-setup li { margin: 4px 0; }
.sn-setup .sn-note { font-size: 12px; color: var(--muted); }

/* composer */
.sn-compose { padding: 8px 14px 12px 18px; border-top: 1px solid rgb(var(--sg-blue-rgb) / .07); background: rgb(255 255 255 / .35); }
.sn-ctx { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin: 0 0 6px 4px; }
.sn-inputrow { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 8px rgb(var(--sg-blue-rgb) / .06); }
.sn-inputrow:focus-within { box-shadow: inset 0 0 0 1.5px var(--sg-blue-lift), 0 0 0 4px var(--focus-ring); }
.sn-inputrow textarea { flex: 1; border: 0; background: transparent; resize: none; min-height: 34px; max-height: 140px; padding: 7px 0; font-size: 14.5px; line-height: 1.4; box-shadow: none; }
.sn-inputrow textarea:focus { outline: none; box-shadow: none; }
.sn-send { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none; color: #fff;
  background: linear-gradient(180deg, var(--sg-blue-lift), var(--sg-blue)); box-shadow: 0 4px 10px rgb(var(--sg-blue-rgb) / .3); transition: transform 100ms var(--ease-out), opacity .15s; }
.sn-send:active:not(:disabled) { transform: scale(.92); }
.sn-send:disabled { opacity: .35; cursor: default; box-shadow: none; }
.sn-fine { font-size: 11px; color: var(--faint); margin: 6px 4px 0; line-height: 1.35; }

/* phones: the panel takes the whole width under the bar */
@media (max-width: 700px) {
  .sn-panel { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); border-radius: 22px; background: linear-gradient(180deg, rgb(255 251 240 / .98), rgb(240 243 250 / .98) 38%); }
  .sn-title span { display: none; }
  .sn-scroll { padding: 12px 12px 8px 16px; }
  .sn-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .sn-inputrow textarea { font-size: 16px; }   /* no zoom on focus */
}
@media (prefers-reduced-motion: reduce) {
  .sunny-svg .sm-body, .sunny-svg .sm-rays, .sunny-svg .sm-ray-l, .sunny-svg .sm-ray-s, .sunny-svg .sm-eyes, .sunny-svg .sm-shadow, .sn-dots i { animation: none; }
  .sn-dots i { opacity: .7; }
  .sn-card { animation: snFade .15s both; }
  @keyframes snFade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-transparency: reduce) {
  .sn-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f6f7fb; }
}
@media (prefers-contrast: more) {
  .sn-panel { background: #fff; } .sn-msg.sunny .sn-bubble, .sn-card, .sn-suggest button { box-shadow: 0 0 0 1px #6d7896; }
}
/* === end agent f === */