/* DROP VICTOR A LINE (crank W52, 4 Oct 2026). A WhatsApp-like thread with Victor, for signed-in members; for the owner,
   the same button opens his inbox. The button stands on top of Leo's bubble in the lower right (Leo: bottom 20px, 56px on
   a desktop; 50px at bottom 74px under 960px; 48px at bottom 64+12px on a phone), never over him, and steps aside while
   Leo's panel or note is open. z-index 50, as Leo. Decisions: crank-rooms-2026-10-04/builds/W52/PANEL.md. */
.msg{--msg-green:#1f8f5f;--msg-me:#0f4f3c;--msg-me2:#0b4233;--msg-read:#E3C878;
  position:fixed;z-index:50;right:22px;bottom:calc(20px + 56px + 12px + 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)}
.msg[hidden]{display:none!important}
@media (max-width:959px){
  .msg{right:14px;bottom:calc(74px + 50px + 12px + env(safe-area-inset-bottom,0px))}
  html.tv-docked .msg{bottom:calc(74px + 90px + 12px + 50px + 12px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:760px){
  .msg{right:13px;bottom:calc(var(--m-tab,64px) + 12px + 48px + 12px + env(safe-area-inset-bottom,0px))}
}
/* Leo's panel or locked note is open: step aside so nothing sits on top of it */
html:has(.leo.leo-on) .msg:not(.msg-on),html:has(.leo-note:not([hidden])) .msg:not(.msg-on){visibility:hidden;pointer-events:none}

/* the button */
.msg-fab{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;cursor:pointer;color:#dff5ea;
  border:1px solid rgba(46,200,110,.5);background:radial-gradient(circle at 30% 25%,rgba(46,200,110,.38),rgba(5,6,31,.92) 72%);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 4px rgba(46,200,110,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s var(--ease,ease),box-shadow .25s}
.msg-fab svg{width:24px;height:24px}
.msg-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 4px rgba(46,200,110,.12)}
.msg-fab:focus-visible{outline:2px solid #2ec86e;outline-offset:3px}
.msg-on .msg-fab{transform:scale(.92)}
@media (max-width:959px){.msg-fab{width:46px;height:46px}.msg-fab svg{width:21px;height:21px}}
.msg-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;
  font:700 11.5px/1 var(--sans,system-ui,sans-serif);color:#04140c;background:#2ec86e;box-shadow:0 0 0 2px #050638}
.msg-badge[hidden]{display:none}
.msg-tag{position:absolute;right:64px;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){.msg:not(.msg-on) .msg-fab:hover ~ .msg-tag{opacity:1;transform:none}}
.msg-on .msg-tag{display:none}

/* the panel */
.msg-panel{display:flex;flex-direction:column;width:380px;height:min(580px,calc(100vh - 164px - 72px));height:min(580px,calc(100svh - 164px - 72px));
  border-radius:18px;overflow:hidden;color:var(--ink,#F2EFE6);background:#070a26;
  border:1px solid rgba(46,200,110,.28);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);animation:msgIn .22s var(--ease,ease)}
.msg-panel[hidden]{display:none}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msg-panel{animation:none}.msg-fab{transition:none}}
@media (max-width:959px){
  /* a sheet between the top bar and the buttons */
  .msg-panel{position:fixed;left:8px;right:8px;width:auto;top:calc(72px + env(safe-area-inset-top,0px));
    bottom:calc(74px + 8px + env(safe-area-inset-bottom,0px));height:auto}
}
@media (max-width:760px){
  .msg-panel{left:0;right:0;top:calc(60px + env(safe-area-inset-top,0px));bottom:calc(var(--m-tab,64px) + env(safe-area-inset-bottom,0px));
    border-radius:16px 16px 0 0;border-bottom:0}
  /* the sheet covers the corner: the button and Leo wait underneath */
  .msg.msg-on .msg-fab{visibility:hidden}
  html:has(.msg.msg-on) .leo{visibility:hidden}
}

.msg-h{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.msg-back{display:none;place-items:center;flex:none;width:32px;height:32px;margin-right:-4px;border-radius:8px;border:0;cursor:pointer;color:var(--muted,#C9D3E2);background:none}
.msg-back:hover{background:rgba(255,255,255,.08);color:var(--ink,#F2EFE6)}
.msg-back svg{width:18px;height:18px}
.msg[data-view="thread"][data-role="owner"] .msg-back{display:grid}
.msg-av{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;background:#1a1d44;border:1px solid rgba(255,255,255,.12)}
.msg-ini{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font:600 14px/1 var(--sans,system-ui,sans-serif);
  color:#dff5ea;background:linear-gradient(140deg,#1d6b4f,#123a5c)}
.msg-ini[hidden],.msg-av[hidden]{display:none}
.msg-who{display:grid;min-width:0;flex:1}
.msg-who b{font:600 15.5px/1.25 var(--sans,system-ui,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-who small{font-size:12px;color:var(--dim,rgba(201,211,226,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-ib{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)}
.msg-ib:hover{background:rgba(255,255,255,.1);color:var(--ink,#F2EFE6)}
.msg-ib svg{width:16px;height:16px}
.msg-ib[hidden]{display:none}

/* the thread */
.msg-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px;padding:12px 12px 10px;
  background:radial-gradient(circle at 20% 0%,rgba(46,200,110,.05),transparent 50%),radial-gradient(circle at 100% 100%,rgba(227,200,120,.04),transparent 45%)}
.msg-log[hidden]{display:none}
.msg-day{align-self:center;margin:10px 0 6px;padding:4px 10px;border-radius:8px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--muted,#C9D3E2);background:rgba(255,255,255,.07)}
.msg-b{position:relative;max-width:80%;padding:7px 10px 6px;border-radius:12px;font-size:14.5px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-b + .msg-b.msg-turn{margin-top:6px}
.msg-them{align-self:flex-start;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.msg-mine{align-self:flex-end;background:linear-gradient(180deg,var(--msg-me),var(--msg-me2));border:1px solid rgba(46,200,110,.25)}
.msg-them.msg-turn{border-top-left-radius:4px}
.msg-mine.msg-turn{border-top-right-radius:4px}
.msg-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:6px 0 -2px 10px;font-size:11px;line-height:1;
  color:rgba(223,245,234,.6);white-space:nowrap;user-select:none}
.msg-them .msg-meta{color:var(--dim,rgba(201,211,226,.65))}
.msg-tk{width:16px;height:11px;flex:none}
.msg-tk.is-read{color:var(--msg-read)}
.msg-clock{width:11px;height:11px}
.msg-fail{color:#ff8f8f}
.msg-b.is-failed{opacity:.75;border-color:rgba(255,120,120,.5)}
.msg-sys{align-self:center;max-width:92%;margin:6px 0;padding:6px 10px;border-radius:8px;font-size:12.5px;text-align:center;color:#ffd6a0;background:rgba(255,170,60,.08);border:1px solid rgba(255,170,60,.25)}
.msg-empty{margin:auto 8px;padding:18px;border-radius:14px;text-align:center;font-size:14px;line-height:1.5;color:var(--muted,#C9D3E2);
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12)}
.msg-empty b{display:block;margin-bottom:4px;color:var(--ink,#F2EFE6);font-size:15px}

/* the owner's inbox */
.msg-list{flex:1;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:4px 0;list-style:none}
.msg-list[hidden]{display:none}
.msg-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 14px;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit}
.msg-row:hover,.msg-row:focus-visible{background:rgba(255,255,255,.05);outline:none}
.msg-row + .msg-row{box-shadow:0 -1px 0 rgba(255,255,255,.05)}
.msg-rt{display:grid;flex:1;min-width:0;gap:2px}
.msg-r1,.msg-r2{display:flex;align-items:baseline;gap:8px;min-width:0}
.msg-r1 b{flex:1;min-width:0;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-r1 time{flex:none;font-size:11.5px;color:var(--dim,rgba(201,211,226,.65))}
.msg-r2 span{flex:1;min-width:0;font-size:13px;color:var(--dim,rgba(201,211,226,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-r2 i{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;font:700 11.5px/1 var(--sans,system-ui,sans-serif);font-style:normal;color:#04140c;background:#2ec86e}
.msg-row.is-unread .msg-r1 time{color:#2ec86e}
.msg-row.is-unread .msg-r2 span{color:var(--ink,#F2EFE6)}

/* the composer */
.msg-form{display:flex;align-items:flex-end;gap:8px;padding:8px 10px 6px;border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.msg-form[hidden]{display:none}
.msg-in{flex:1;min-height:40px;max-height:122px;resize:none;padding:10px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
  font:15px/1.35 var(--sans,system-ui,sans-serif);color:var(--ink,#F2EFE6);background:rgba(255,255,255,.06);outline:none}
.msg-in::placeholder{color:rgba(201,211,226,.5)}
.msg-in:focus{border-color:rgba(46,200,110,.5)}
.msg-send{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#04140c;background:#2ec86e;transition:transform .15s,opacity .15s}
.msg-send:disabled{opacity:.4;cursor:default}
.msg-send:not(:disabled):hover{transform:scale(1.05)}
.msg-send svg{width:18px;height:18px}
.msg-count{padding:0 14px;font-size:11.5px;text-align:right;color:var(--dim,rgba(201,211,226,.65))}
.msg-count[hidden]{display:none}
.msg-note{margin:0;padding:2px 14px 10px;font-size:11.5px;line-height:1.45;color:var(--dim,rgba(201,211,226,.66));background:rgba(255,255,255,.03)}
.msg-note[hidden]{display:none}
.msg-note a{color:inherit;text-decoration:underline;text-decoration-color:rgba(201,211,226,.4);text-underline-offset:2px}
.msg-note a:hover{color:var(--ink,#F2EFE6)}

/* the owner's Pulse button carries the unread count too */
#nav-pulse{position:relative}
.msg-pbadge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;
  font:700 10.5px/1 var(--sans,system-ui,sans-serif);color:#04140c;background:#2ec86e;box-shadow:0 0 0 2px #050638;pointer-events:none}