/* Tanya chat widget. Colors, type and motion come from tokens.css: light and dark follow its variables.
   Literal colors only appear as var() fallbacks, for a page that forgets to load tokens.css. */
.tny{
  --tny-disc:var(--ink,#0E1E3A);            /* navy disc behind the brand mark */
  --tny-paper:var(--canvas,#F2F4F7);        /* light parts of the mark on that disc */
  --tny-gap:24px;                           /* distance to the viewport edge */
  /* Above the landing's fixed bottom bar (height published in --tc-bottom-bar) or the home indicator */
  --tny-bottom:calc(var(--tny-gap) + max(var(--tc-bottom-bar,0px),env(safe-area-inset-bottom,0px)));
  font-family:var(--font-body,'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif);
  color:var(--text-primary,#0E1E3A);
  -webkit-font-smoothing:antialiased;
}
/* Dark: the disc stays navy (raised navy surface) and the mark turns light, like logo-mark-light.svg */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tny{--tny-disc:var(--ink-2,#1A2C4C);--tny-paper:var(--ink,#EEF2F8)}
}
:root[data-theme="dark"] .tny{--tny-disc:var(--ink-2,#1A2C4C);--tny-paper:var(--ink,#EEF2F8)}

.tny,.tny *,.tny *::before,.tny *::after{box-sizing:border-box}
.tny [hidden]{display:none!important}
.tny svg{display:block}
/* Zero specificity, so the component rules below win */
:where(.tny) button,:where(.tny) textarea{font:inherit;color:inherit}
.tny-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tny :focus-visible{outline:2px solid var(--focus,#B8892E);outline-offset:3px}

/* Brand mark (geometry of assets/img/logo-mark.svg?v=3) */
.tny-mk-line{fill:none;stroke:var(--tny-paper);stroke-width:3.5}
.tny-mk-p{fill:var(--tny-paper)}
.tny-mk-i{fill:var(--tny-disc)}
.tny-mk-a{fill:var(--accent,#B8892E)}

/* Launcher: a speech bubble whose tail points to the corner */
.tny-launch{position:fixed;z-index:60;right:calc(var(--tny-gap) + env(safe-area-inset-right,0px));bottom:var(--tny-bottom);
  width:62px;height:62px;padding:0;border:0;border-radius:50% 50% 12px 50%;cursor:pointer;
  display:grid;place-items:center;background:var(--tny-disc);
  box-shadow:inset 0 0 0 1px var(--accent-muted,#D9C39A),var(--shadow-2,0 2px 6px rgba(14,30,58,.08),0 18px 44px rgba(14,30,58,.12));
  transition:transform var(--t-med,.42s) var(--ease-out,ease),opacity .3s var(--ease-out,ease),box-shadow var(--t-fast,.18s)}
.tny-launch .tny-mk{width:36px;height:36px;transition:transform var(--t-med,.42s) var(--ease-out,ease)}
.tny-launch:active{transform:scale(.96)}
.tny.is-open .tny-launch{visibility:hidden}
/* Tucked away while a [data-tanya-tuck] block crosses the bottom strip it would cover */
.tny.is-tucked:not(.is-open) .tny-launch{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
.tny.is-tucked:not(.is-open) .tny-launch:focus-visible{transform:none;opacity:1;pointer-events:auto}

/* Panel */
.tny-panel{position:fixed;z-index:61;right:calc(var(--tny-gap) + env(safe-area-inset-right,0px));bottom:var(--tny-bottom);
  width:392px;max-width:calc(100vw - 2 * var(--tny-gap));height:620px;
  max-height:calc(100vh - var(--tny-bottom) - 24px);max-height:calc(100dvh - var(--tny-bottom) - 24px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel,#FBFCFD);border:1px solid var(--line,#D5DBE4);border-radius:20px;
  box-shadow:var(--shadow-2,0 2px 6px rgba(14,30,58,.08),0 18px 44px rgba(14,30,58,.12));
  box-shadow:0 40px 80px -36px color-mix(in srgb,var(--ink-2,#16294D) 55%,transparent),var(--shadow-2,0 18px 44px rgba(14,30,58,.12));
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:100% 100%;
  transition:opacity .28s var(--ease-out,ease),transform var(--t-med,.42s) var(--ease-out,ease)}
.tny.is-in .tny-panel{opacity:1;transform:none}
.tny-panel:focus{outline:none}
/* Brass rule along the top edge, like the binding of a ledger */
.tny-panel::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent,#B8892E),var(--accent-muted,#D9C39A) 62%,transparent)}

.tny-head{flex:none;display:flex;align-items:center;gap:12px;padding:15px 10px 13px 16px;border-bottom:1px solid var(--line,#D5DBE4);background:var(--panel,#FBFCFD)}
.tny-ava{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--tny-disc);
  box-shadow:inset 0 0 0 1px var(--accent-muted,#D9C39A)}
.tny-ava .tny-mk{width:28px;height:28px}
.tny-id{flex:1;min-width:0}
.tny-name{margin:0;font:600 22px/1.05 var(--font-display,Georgia,serif);letter-spacing:-.01em;color:var(--text-primary,#0E1E3A)}
.tny-sub{margin:4px 0 0;font:500 10.5px/1.3 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary,#4A5670)}
.tny-ico{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:none;cursor:pointer;
  color:var(--text-primary,#0E1E3A);text-decoration:none;transition:background-color var(--t-fast,.18s),border-color var(--t-fast,.18s)}
.tny-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tny-tel{border:1px solid var(--line,#D5DBE4);color:var(--accent-text,#8A6418)}
.tny-tel svg{width:18px;height:18px}
.tny-wa{margin-left:-2px}

/* Conversation */
.tny-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;padding:20px 16px 16px;scroll-behavior:smooth;background-color:var(--canvas,#F2F4F7);
  /* Ruled like ledger paper; the rules scroll with the conversation */
  background-image:repeating-linear-gradient(180deg,transparent 0 35px,color-mix(in srgb,var(--line,#D5DBE4) 50%,transparent) 35px 36px);
  background-attachment:local}
.tny-body:focus{outline:none}
.tny-hint{margin:auto 0 0;padding:0 2px 4px}
.tny-hint::before{content:"";display:block;width:28px;height:2px;margin-bottom:16px;background:var(--accent,#B8892E)}
.tny-hint1{margin:0 0 8px;font:400 italic 28px/1.12 var(--font-display,Georgia,serif);letter-spacing:-.015em;color:var(--text-primary,#0E1E3A)}
.tny-hint2{margin:0;max-width:32ch;font-size:15px;line-height:1.5;color:var(--text-secondary,#4A5670)}
.tny-hint3{margin:16px 0 0;font:500 10.5px/1.5 var(--font-mono,ui-monospace,monospace);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text,#8A6418)}

.tny-log{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.tny-log:empty{display:none}
.tny-msg{display:flex;flex-direction:column;align-items:flex-start}
.tny-msg p{margin:0;max-width:86%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tny-b p{background:var(--panel,#FBFCFD);color:var(--text-primary,#0E1E3A);border:1px solid var(--line,#D5DBE4);border-bottom-left-radius:6px}
.tny-u{align-items:flex-end}
.tny-u p{background:var(--ink,#0E1E3A);color:var(--canvas,#F2F4F7);border-bottom-right-radius:6px}

/* Buttons under a reply and quick replies: 44px targets */
.tny-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:94%}
.tny-act,.tny-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 16px;
  border:1px solid var(--line-strong,#7A869C);border-radius:999px;background:var(--panel,#FBFCFD);color:var(--text-primary,#0E1E3A);
  font:600 14px/1.2 var(--font-body,sans-serif);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--t-fast,.18s),border-color var(--t-fast,.18s),color var(--t-fast,.18s)}
.tny-act svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tny-act-main,.tny-chip-main{background:var(--accent,#B8892E);border-color:var(--accent,#B8892E);color:var(--accent-ink,#0E1E3A)}
.tny-act-main svg{order:2}
.tny-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tny-log:empty + .tny-chips{margin-top:20px}

.tny-typing{flex:none;display:flex;align-items:center;gap:5px;height:30px;padding:0 18px 4px;background:var(--canvas,#F2F4F7)}
.tny-typing span{width:6px;height:6px;border-radius:50%;background:var(--accent,#B8892E);animation:tny-dot 1.2s infinite ease-in-out}
.tny-typing span:nth-child(2){animation-delay:.15s}
.tny-typing span:nth-child(3){animation-delay:.3s}
.tny-typing em{margin-left:8px;font:500 10.5px/1 var(--font-mono,monospace);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary,#4A5670)}
@keyframes tny-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Composer */
.tny-form{flex:none;display:flex;align-items:flex-end;gap:8px;margin:0;padding:12px;border-top:1px solid var(--line,#D5DBE4);background:var(--panel,#FBFCFD)}
.tny-form textarea{flex:1;min-width:0;min-height:46px;max-height:120px;resize:none;margin:0;padding:12px 15px;border-radius:14px;
  border:1px solid var(--line-strong,#7A869C);background:var(--canvas,#F2F4F7);color:var(--text-primary,#0E1E3A);
  font:400 16px/1.35 var(--font-body,sans-serif)}
.tny-form textarea::placeholder{color:var(--text-secondary,#4A5670);opacity:1}
.tny-form textarea:focus-visible{outline:2px solid var(--focus,#B8892E);outline-offset:1px}
.tny-send{flex:none;width:46px;height:46px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--accent,#B8892E);color:var(--accent-ink,#0E1E3A);transition:background-color var(--t-fast,.18s)}
.tny-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (hover:hover){
  .tny-launch:hover{transform:translateY(-2px)}
  .tny-launch:hover .tny-mk{transform:scale(1.07)}
  .tny-ico:hover{background:var(--panel-2,#E9EDF3)}
  .tny-act:hover,.tny-chip:hover{border-color:var(--text-primary,#0E1E3A)}
  .tny-act-main:hover,.tny-chip-main:hover,.tny-send:hover{background:var(--accent-hover,#C99A3C);border-color:var(--accent-hover,#C99A3C)}
}

.tny-scrim{position:fixed;inset:0;z-index:60;background:rgba(11,22,40,.5);background:color-mix(in srgb,var(--ink-2,#16294D) 58%,transparent)}

/* Phones (portrait and landscape): full-width bottom sheet. Keep in sync with SHEET_Q in tanya.js */
@media (max-width:480px),(max-height:500px){
  .tny{--tny-gap:16px}
  .tny-launch{width:58px;height:58px}
  .tny-panel{left:0;right:0;bottom:0;width:auto;max-width:none;height:88vh;height:88dvh;max-height:none;
    border-radius:20px 20px 0 0;border-bottom:0;
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(24px);transform-origin:50% 100%}
  .tny-msg p{max-width:90%}
  .tny-hint1{font-size:26px}
}
/* Landscape phones: full height, compact header */
@media (max-height:500px){
  .tny-panel{height:100vh;height:100dvh;border-radius:0}
  .tny-ava{display:none}
  .tny-head{padding-top:10px;padding-bottom:8px}
}
html.tny-lock,html.tny-lock body{overflow:hidden!important;overscroll-behavior:none}

@media (prefers-reduced-motion:reduce){
  .tny-launch,.tny-launch .tny-mk,.tny-panel,.tny-body,.tny-act,.tny-chip{transition:none!important;scroll-behavior:auto}
  .tny-panel{transform:none!important}
  .tny-launch:hover,.tny-launch:hover .tny-mk{transform:none}
  .tny-typing span{animation:none;opacity:.7}
}
@media (forced-colors:active){
  .tny-launch,.tny-ava,.tny-send,.tny-msg p,.tny-act,.tny-chip{border:1px solid CanvasText}
}
@media print{.tny{display:none!important}}
