/* LEO, the site assistant (crank W4, 4 Oct 2026). Lower right, above the phone's bottom bar and clear of the docked TV.
   z-index 50: over the sidebar (30), the opened page (35), the glass bar (40) and View as (45); under the focus veil (55),
   the docked TV (60), lock notes (70) and the sign-in sheet. Tokens are site.css's, with fallbacks. */
.leo{position:fixed;z-index:50;right:20px;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif)}
.leo[hidden]{display:none!important}
@media (max-width:959px){
  .leo{right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* the docked TV sits in this corner on a phone (160 x 90 at bottom 74px): Leo stands on top of it */
  html.tv-docked .leo{bottom:calc(74px + 90px + 12px + env(safe-area-inset-bottom,0px))}
}

/* the bubble */
.leo-fab{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;cursor:pointer;
  color:#f4dfa3;border:1px solid rgba(227,200,120,.45);
  background:radial-gradient(circle at 30% 25%,rgba(227,200,120,.30),rgba(5,6,31,.92) 70%);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 4px rgba(227,200,120,.06),0 0 22px rgba(227,200,120,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .25s var(--ease,ease),box-shadow .25s}
.leo-fab svg{width:24px;height:24px}
.leo-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 4px rgba(227,200,120,.1),0 0 28px rgba(227,200,120,.28)}
.leo-fab:focus-visible{outline:2px solid var(--gold,#E3C878);outline-offset:3px}
.leo-lk{position:absolute;right:-2px;bottom:-2px;display:none;place-items:center;width:22px;height:22px;border-radius:50%;
  color:#050638;background:var(--gold,#E3C878);box-shadow:0 0 0 2px #050638}
.leo-lk svg{width:12px;height:12px}
.leo[data-mode="out"] .leo-fab,.leo[data-mode="locked"] .leo-fab{color:rgba(201,211,226,.78);border-color:rgba(201,211,226,.22);
  background:radial-gradient(circle at 30% 25%,rgba(201,211,226,.14),rgba(5,6,31,.92) 70%);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.leo[data-mode="out"] .leo-lk,.leo[data-mode="locked"] .leo-lk{display:grid}
.leo-on .leo-fab{transform:scale(.92)}

/* the label beside the bubble, on hover (desktop only) */
.leo-tag{position:absolute;right:68px;bottom:14px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(4px);
  padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink,#F2EFE6);background:rgba(10,13,40,.95);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.4);transition:opacity .15s,transform .15s}
@media (hover:hover) and (min-width:960px){.leo:not(.leo-on) .leo-fab:hover ~ .leo-tag,.leo:not(.leo-on):has(.leo-fab:hover) .leo-tag{opacity:1;transform:none}}
.leo-on .leo-tag{display:none}

/* the note for a locked bubble */
.leo-note{display:grid;gap:6px;width:min(300px,calc(100vw - 24px));padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.45;
  color:var(--muted,#C9D3E2);background:rgba(10,13,40,.97);border:1px solid rgba(227,200,120,.3);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.leo-note[hidden]{display:none}
.leo-note b{color:var(--ink,#F2EFE6);font-size:14.5px}
.leo-go{justify-self:start;margin-top:4px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:13.5px;text-decoration:none;
  color:#050638;background:var(--gold,#E3C878)}
.leo-go:hover{background:#f0d892}

/* the chat */
.leo-panel{display:flex;flex-direction:column;width:370px;height:min(560px,calc(100vh - 64px - 120px));height:min(560px,calc(100svh - 64px - 120px));
  border-radius:18px;overflow:hidden;color:var(--ink,#F2EFE6);background:linear-gradient(180deg,#0c0f34,#05061f);
  border:1px solid rgba(227,200,120,.28);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
  animation:leoIn .22s var(--ease,ease)}
.leo-panel[hidden]{display:none}
@keyframes leoIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.leo-panel{animation:none}.leo-fab{transition:none}}
@media (max-width:959px){
  .leo-panel{position:fixed;left:8px;right:8px;width:auto;bottom:calc(74px + 56px + 10px + env(safe-area-inset-bottom,0px));
    height:min(520px,calc(100vh - 64px - 74px - 66px - 16px));height:min(520px,calc(100svh - 64px - 74px - 66px - 16px))}
  html.tv-docked .leo-panel{bottom:calc(74px + 90px + 12px + 56px + 10px + env(safe-area-inset-bottom,0px));
    height:min(460px,calc(100svh - 64px - 74px - 168px - 16px))}
  .leo-note{position:fixed;right:12px;left:auto;bottom:calc(74px + 56px + 10px + env(safe-area-inset-bottom,0px))}
  .leo-fab{width:50px;height:50px}
}
.leo-h{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-bottom:1px solid rgba(227,200,120,.16)}
.leo-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#f4dfa3;
  background:radial-gradient(circle at 30% 25%,rgba(227,200,120,.32),rgba(5,6,31,.9) 70%);border:1px solid rgba(227,200,120,.4)}
.leo-av svg{width:18px;height:18px}
.leo-who{display:grid;min-width:0;flex:1}
.leo-who b{font:600 16px var(--serif,Georgia,serif)}
.leo-who small{font-size:11.5px;color:var(--dim,rgba(201,211,226,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leo-left{flex:none;font-size:11.5px;color:var(--dim,rgba(201,211,226,.72))}
.leo-x{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;border:0;cursor:pointer;color:var(--muted,#C9D3E2);background:rgba(255,255,255,.05)}
.leo-x:hover{background:rgba(255,255,255,.1);color:var(--ink,#F2EFE6)}
.leo-x svg{width:16px;height:16px}
.leo-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:14px}
.leo-m{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.leo-assistant{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:4px}
.leo-user{align-self:flex-end;color:#050638;background:#e9dcb4;border-bottom-right-radius:4px}
.leo-sys{align-self:center;max-width:100%;font-size:13px;color:var(--gold,#E3C878);background:none;border:1px dashed rgba(227,200,120,.35);text-align:center}
.leo-wait{align-self:flex-start;font-size:13px;color:var(--dim,rgba(201,211,226,.72));background:none;padding:4px 2px}
.leo-wait::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:leoDots 1.2s steps(4) infinite}
@keyframes leoDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.leo-asks{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.leo-asks:empty{display:none}
.leo-ask{padding:6px 11px;border-radius:999px;cursor:pointer;font:500 12.5px var(--sans,system-ui,sans-serif);color:#f4dfa3;
  background:rgba(227,200,120,.08);border:1px solid rgba(227,200,120,.3)}
.leo-ask:hover{background:rgba(227,200,120,.16)}
.leo-f{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid rgba(227,200,120,.16)}
.leo-f textarea{flex:1;min-width:0;resize:none;max-height:120px;padding:10px 12px;border-radius:12px;font:15px/1.4 var(--sans,system-ui,sans-serif);
  color:var(--ink,#F2EFE6);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.leo-f textarea:focus{outline:none;border-color:rgba(227,200,120,.6)}
.leo-f textarea::placeholder{color:rgba(201,211,226,.55)}
.leo-send{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#050638;background:var(--gold,#E3C878)}
.leo-send:disabled{opacity:.45;cursor:default}
.leo-send svg{width:18px;height:18px}
.leo-fine{padding:0 14px 10px;font-size:11px;color:var(--dim,rgba(201,211,226,.72))}
.leo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.leo-link{color:#e3c878;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(227,200,120,.5)}.leo-link:hover{text-decoration-color:#e3c878}
