/* ── TALKING TO HER (17 Sep 2026) ────────────────────────────────────────
   The call takes the screen, because a call IS what you are doing. Her paper
   ground, her lavender, her bloom — nothing here is a stock phone UI. */

/* the button that starts it, in the composer beside send. THE SAME PEN AS
   + AND SEND (18 Sep 2026): her lavender, the 1.9 line the + and the arrow
   are drawn with, the same drawn square the + wears and the same sizes -
   28px on the desk (the + is 28), a 44px target on a phone (as they are). It
   was a grey rough.js mic at 38px with no frame, the one button that did not
   look like hers. */
.dchat-call{
  flex:0 0 auto; position:relative; width:34px; height:34px; padding:0;
  background:transparent; border:0; cursor:pointer; line-height:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--lav,#AF69EE); transition:transform .12s ease;
}
.dchat-call:hover{ transform:scale(1.1) }
.dchat-call:active{ transform:scale(.95) }
.dchat-call[disabled]{ opacity:.35; cursor:default; transform:none }
.dcall-ico{ position:relative; z-index:2; display:block; width:19px; height:19px;
  overflow:visible }
.dcall-ico *{ stroke:var(--lav,#AF69EE); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round }
.dcall-mark{ position:absolute; left:50%; top:50%; width:38px; height:38px;
  transform:translate(-50%,-50%); overflow:visible; pointer-events:none;
  color:var(--lav,#AF69EE) }
#wk-bar .dchat-tools .dchat-call{ width:28px; height:28px }
#wk-bar .dcall-mark{ width:29px; height:29px }
#wk-bar .dcall-ico{ width:16px; height:16px }
@media (max-width:760px){
  #wk-bar .dchat-tools .dchat-call{ width:44px; height:44px }
  #wk-bar .dcall-mark{ width:34px; height:34px }
  #wk-bar .dcall-ico{ width:18px; height:18px }
}

/* ── the call ────────────────────────────────────────────────────────── */
#dlive{
  position:fixed; inset:0; z-index:9000; display:none;
  background:var(--paper,#15101C);
  flex-direction:column; align-items:center;
  font-family:var(--sans,-apple-system,Segoe UI,Roboto,sans-serif);
  color:var(--ink,#F6F3F9);
}
#dlive.on{ display:flex }
#dlive::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 38%,
    rgba(175,105,238,.13), transparent 70%);
}

.dlv-top{
  flex:0 0 auto; width:100%; max-width:640px;
  display:flex; align-items:center; gap:10px;
  padding:18px 22px 0; position:relative; z-index:1;
}
.dlv-room{ font-size:13.5px; color:var(--mute,#8C887E); letter-spacing:.01em }
.dlv-room b{ color:var(--ink,#F6F3F9); font-weight:600 }
.dlv-clock{ margin-left:auto; font-size:13px; color:var(--mute,#8C887E);
  font-variant-numeric:tabular-nums }
.dlv-clock.low{ color:#E0A77A }

/* her bloom, breathing with her voice */
.dlv-stage{
  flex:0 0 auto; position:relative; z-index:1;
  margin:26px 0 8px; width:184px; height:184px;
  display:flex; align-items:center; justify-content:center;
}
.dlv-bloom{ position:relative; z-index:2; line-height:0;
  transition:transform .09s ease-out }
.dlv-bloom svg{ display:block; overflow:visible }
.dlv-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(175,105,238,.26);
  transform:scale(.72); opacity:0;
  transition:transform .12s ease-out, opacity .3s ease;
}
#dlive.speaking .dlv-ring{ opacity:1 }
#dlive.listening .dlv-ring{ opacity:.55 }

/* what is happening, in words */
.dlv-state{
  flex:0 0 auto; position:relative; z-index:1; min-height:22px;
  font-family:var(--hand,inherit); font-size:15px; color:#AF69EE;
  letter-spacing:.01em; text-align:center; padding:0 22px;
}
#dlive.working .dlv-state{ animation:dlvpulse 1.5s ease-in-out infinite }
@keyframes dlvpulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* the words, as they are said */
.dlv-said{
  flex:1 1 auto; width:100%; max-width:640px; min-height:0;
  overflow-y:auto; padding:18px 26px 8px; position:relative; z-index:1;
  display:flex; flex-direction:column; gap:13px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26px);
  mask-image:linear-gradient(to bottom,transparent,#000 26px);
}
.dlv-l{ font-size:15px; line-height:1.5; max-width:86% }
.dlv-l.you{ align-self:flex-end; color:var(--ink,#F6F3F9);
  border:1px solid rgba(175,105,238,.28);
  border-radius:13px 15px 12px 14px; padding:8px 13px; font-size:14px }
.dlv-l.her{ align-self:flex-start; color:var(--ink,#F6F3F9);
  font-family:var(--serif,Georgia,serif) }
.dlv-l.her.part{ opacity:.62 }
.dlv-l.note{ align-self:center; color:var(--mute,#8C887E); font-size:12.5px;
  font-family:var(--hand,inherit) }

/* the two things you can do on a call */
.dlv-keys{
  flex:0 0 auto; position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
  padding:14px 0 max(26px, env(safe-area-inset-bottom));
}
.dlv-k{
  width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; border:1px solid rgba(175,105,238,.34);
  color:#AF69EE; display:flex; align-items:center; justify-content:center;
  transition:background .14s ease, transform .1s ease, border-color .14s ease;
}
.dlv-k:hover{ background:rgba(175,105,238,.12) }
.dlv-k:active{ transform:scale(.94) }
.dlv-k svg{ display:block; width:23px; height:23px; overflow:visible }
.dlv-k.muted{ background:rgba(175,105,238,.16); border-color:#AF69EE }
.dlv-k.end{ border-color:rgba(214,122,104,.5); color:#D67A68 }
.dlv-k.end:hover{ background:rgba(214,122,104,.14) }

/* what it cost, on the way out */
.dlv-over{
  position:relative; z-index:1; text-align:center; padding:0 26px 22px;
  font-family:var(--hand,inherit); font-size:14px; color:var(--mute,#8C887E);
}
.dlv-over a{ color:#AF69EE; cursor:pointer; text-decoration:none;
  border-bottom:1px solid rgba(175,105,238,.4) }

@media (max-width:520px){
  .dlv-stage{ width:150px; height:150px; margin:18px 0 6px }
  .dlv-said{ padding:14px 18px 6px }
  .dlv-k{ width:62px; height:62px }
}
@media (max-height:620px){
  .dlv-stage{ width:116px; height:116px; margin:10px 0 2px }
}

/* ── SHE IS WRITING DOWN WHAT HE SAYS (18 Sep 2026) ──────────────────────
   Tap the mark and it lights; a word beside it says what is happening, so he
   is never talking at a button that gives nothing back. */
.dchat-call.hearing{ color:#AF69EE }
.dchat-call.hearing svg.dcall-ico{ animation:dhearpulse 1.15s ease-in-out infinite }
@keyframes dhearpulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.dhear-note{
  font-family:var(--hand,inherit); font-size:12.5px; color:#AF69EE;
  white-space:nowrap; padding:0 6px 0 2px; opacity:.92;
}
@media (max-width:520px){ .dhear-note{ font-size:11.5px; padding:0 4px } }