/* ══ MURPHY AT THE COUNTER — talk/text desk, skinned to the case ═══════════════
   Mechanics = the proven Altus dock kit (chooser · ring · text sheet · 4-part
   iOS visual-viewport pattern). Skin = this build's gold-on-black case system.
   z-index sits above the fl.js ribbon (2147483000/1) so the text sheet owns
   the screen on phones. */

/* ── the launcher: the counter bell ── */
.desk-launch {
  position: fixed; z-index: 2147483002;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: 12px;
  padding: 13px 18px 13px 15px;
  background: var(--case); color: var(--paper);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
html.desk-on .desk-launch { display: inline-flex; }
html.talk-dock-up .desk-launch { display: none; }
.desk-launch:hover { transform: translateY(-1px); border-color: var(--gold); background: var(--panel); }
.desk-launch:active { transform: translateY(1px); }
.desk-launch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.desk-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(217,167,95,.8); animation: desk-pulse 1.6s ease-in-out infinite; }
.desk-launch-ico { display: none; }
.desk-launch-txt { display: grid; gap: 2px; text-align: left; }
.desk-launch-txt b { font-family: 'Cinzel', serif; font-weight: 500; font-size: .72rem; letter-spacing: .22em; color: var(--gold); }
.desk-launch-txt span { font-family: 'Jost', sans-serif; font-weight: 300; font-size: .78rem; color: var(--dim); letter-spacing: .04em; }

/* ── the dock card ── */
.call-dock {
  position: fixed; z-index: 2147483002;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: min(374px, calc(100vw - 36px));
  display: none; color: var(--paper); background: var(--case);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.6);
  transform: translateY(150%); overflow: hidden;
  font-family: 'Jost', sans-serif;
}
.call-dock.up { display: block; animation: dock-in 460ms cubic-bezier(.2,1,.3,1) forwards; }
@keyframes dock-in { from { transform: translateY(150%); } to { transform: translateY(0); } }
.dock-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px;
  background: #030302; color: var(--gold);
  border-bottom: 1px solid var(--line-soft);
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 11px; letter-spacing: .18em;
}
.dock-eyebrow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dock-eyebrow #dock-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gold); }
.call-dock[data-state="incoming"] .dock-dot,
.call-dock[data-state="connecting"] .dock-dot,
.call-dock[data-state="text"] .dock-dot,
.call-dock[data-state="live"] .dock-dot { animation: desk-pulse 1.1s ease-in-out infinite; }
.dock-close { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid var(--line-soft); background: transparent; color: var(--gold); cursor: pointer; transition: background .16s var(--ease); }
.dock-close:hover { background: rgba(217,167,95,.12); }
.dock-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dock-close svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.dock-body { padding: 16px 18px 18px; }
.dock-panel { display: none; }
.call-dock[data-state="incoming"] [data-panel="incoming"],
.call-dock[data-state="chooser"] [data-panel="chooser"],
.call-dock[data-state="text"] [data-panel="text"],
.call-dock[data-state="connecting"] [data-panel="connecting"],
.call-dock[data-state="live"] [data-panel="live"],
.call-dock[data-state="ended"] [data-panel="ended"],
.call-dock[data-state="error"] [data-panel="error"] { display: block; }

.dock-stamp {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 10.5px; letter-spacing: .22em;
  transform: rotate(-2deg);
  animation: dock-stamp-thunk .34s cubic-bezier(.2,.7,.3,1.2) both;
}
@keyframes dock-stamp-thunk {
  0% { opacity: 0; transform: rotate(-2deg) scale(1.7); }
  55% { opacity: 1; transform: rotate(-2deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
.dock-title { margin: 0 0 6px; font-family: 'Cinzel', serif; font-weight: 500; font-size: 1.28rem; line-height: 1.15; letter-spacing: .04em; color: var(--paper); }
.dock-lede { margin: 0; color: var(--dim); font-size: 14px; font-weight: 300; line-height: 1.5; text-wrap: pretty; }
.dock-disclose { margin: 13px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold-deep); background: rgba(217,167,95,.05); color: var(--dim); font-size: 11px; font-weight: 300; line-height: 1.5; text-wrap: pretty; }
.dock-disclose a { color: var(--gold); }
.dock-incoming-head { display: flex; align-items: flex-start; gap: 11px; }
.dock-ring-dot { margin-top: 4px; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(217,167,95,.8); animation: desk-pulse 1.1s ease-in-out infinite; }
.dock-titles { display: grid; gap: 3px; min-width: 0; }
.dock-titles b { font-family: 'Cinzel', serif; font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: .04em; color: var(--paper); }
.dock-titles span { font-size: 13px; font-weight: 300; color: var(--dim); text-wrap: pretty; }
.dock-ring-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 14px; }

/* gold = the money action; press-in physics from the house buttons */
.dock-answer, .dock-cta, .dock-choose-talk, .dock-send {
  border: none; color: #1c0a04;
  background: linear-gradient(160deg,#f2c572,#d9a75f 55%,#a96e2b);
  box-shadow: 0 1px 0 rgba(247,223,166,.55) inset, 0 -2px 0 rgba(97,58,17,.5) inset, 0 8px 22px -8px rgba(217,167,95,.45);
  transition: transform .16s var(--ease), filter .16s var(--ease), box-shadow .16s var(--ease);
}
.dock-answer:hover, .dock-cta:hover, .dock-choose-talk:hover, .dock-send:hover { transform: translateY(-1px); filter: brightness(1.06); }
.dock-answer:active, .dock-cta:active, .dock-choose-talk:active, .dock-send:active { transform: translateY(1px); filter: brightness(.97); }
.dock-answer { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; font: 500 13px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dock-answer svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.dock-answer:focus-visible, .dock-decline:focus-visible, .dock-ghost:focus-visible, .dock-cta:focus-visible, .dock-choose:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dock-decline {
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font: 400 13px/1 'Jost', sans-serif; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.dock-decline:hover { color: var(--gold-hi); border-color: var(--gold); }
.dock-dots3 { display: flex; gap: 8px; margin: 13px 0 3px; }
.dock-dots3 span { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: desk-bounce 1s ease-in-out infinite; }
.dock-dots3 span:nth-child(2) { animation-delay: .15s; }
.dock-dots3 span:nth-child(3) { animation-delay: .3s; }
.dock-timer { margin: 10px 0 0; font-family: 'Cinzel', serif; font-variant-numeric: tabular-nums; font-size: 1.9rem; letter-spacing: .04em; line-height: 1; color: var(--gold-hi); }
.dock-livectl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.dock-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); background: transparent; color: var(--paper);
  font: 400 13px/1 'Jost', sans-serif; cursor: pointer; text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.dock-ghost:hover { color: var(--gold-hi); border-color: var(--gold); background: rgba(217,167,95,.07); }
.dock-mute[aria-pressed="true"] { color: var(--gold-hi); border-color: var(--gold); background: rgba(217,167,95,.12); }
.dock-hang { color: #f0c9c0; border-color: rgba(192,57,43,.6); }
.dock-hang:hover { color: #fff; border-color: #c0392b; background: rgba(192,57,43,.25); }
.dock-actions { display: grid; gap: 9px; margin-top: 14px; }
.dock-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 12px 18px; font: 500 13px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.dock-cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* the chooser — talk gold / text ink, equal weight */
.dock-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
html.desk-text-only .dock-choice { grid-template-columns: 1fr; }
html.desk-text-only .dock-choose-talk { display: none; }
.dock-choose { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; font: 500 13px/1 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dock-choose svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.dock-choose-text {
  border: 1px solid var(--line); background: transparent; color: var(--paper);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.dock-choose-text:hover { color: var(--gold-hi); border-color: var(--gold); background: rgba(217,167,95,.07); transform: translateY(-1px); }
.dock-choose-text:active { transform: translateY(1px); }
.dock-textinstead {
  display: block; width: 100%; margin: 10px 0 0; padding: 6px 0 2px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--dim); font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .06em;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .16s var(--ease);
}
.dock-textinstead:hover { color: var(--gold-hi); }
.dock-textinstead:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the text thread — the counter slip, written channel */
.dock-chat {
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(320px, 44dvh); min-height: 96px; overflow-y: auto;
  padding: 4px 2px 6px; overscroll-behavior: contain;
}
.msg {
  margin: 0; max-width: 86%; padding: 9px 12px;
  font-size: 14px; font-weight: 300; line-height: 1.45;
  text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere;
}
.msg.from-murphy {
  align-self: flex-start;
  background: rgba(217,167,95,.07);
  border-left: 2px solid var(--gold);
  color: var(--paper);
}
.msg.from-you { align-self: flex-end; background: linear-gradient(160deg,#f2c572,#d9a75f 60%,#b0793a); color: #1c0a04; font-weight: 400; }
.msg.sys { border-left-color: var(--line); color: var(--dim); font-style: italic; }
.msg.typing { display: inline-flex; gap: 6px; padding: 12px 14px; }
.msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: desk-bounce 1s ease-in-out infinite; }
.msg.typing span:nth-child(2) { animation-delay: .15s; }
.msg.typing span:nth-child(3) { animation-delay: .3s; }
.dock-compose { display: flex; gap: 8px; margin-top: 10px; }
.dock-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); background: #030302; color: var(--paper);
  font: 300 16px/1.3 'Jost', sans-serif;
}
.dock-input::placeholder { color: var(--dim); }
.dock-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.dock-input:disabled { opacity: .55; }
.dock-send { display: grid; place-items: center; width: 44px; min-height: 44px; flex: 0 0 44px; cursor: pointer; }
.dock-send svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.dock-send:disabled { opacity: .55; cursor: default; }

@keyframes desk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
@keyframes desk-bounce { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

@media (max-width: 620px) {
  /* clear the fl.js ribbon (bottom band on phones) while floating */
  /* phones: the labeled slip collapses to a round gold bell so it never
     sits over the hero actions (SE-class collision, 07-22) */
  .desk-launch {
    right: 12px; bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; padding: 0; border-radius: 50%;
    justify-content: center; border-left-width: 1px; border-color: var(--gold);
  }
  .desk-launch-txt { display: none; }
  .desk-launch-ico { display: block; width: 24px; height: 24px; color: var(--gold); }
  .desk-dot { position: absolute; top: 5px; right: 7px; }
  .call-dock { left: 12px; right: 12px; width: auto; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }

  /* TEXTING goes FULL-SHEET on phones, pinned to the VISUAL viewport (--vvh
     from window.visualViewport in desk.js). The dock-in animation's
     fill:forwards would pin transform and defeat the JS pan compensation —
     the sheet doesn't animate. (4-part iOS kit, Altus 07-22.) */
  html.talk-text-open body { overflow: hidden; }
  html.talk-text-open .call-dock.up {
    top: 0; left: 0; right: 0; bottom: auto;
    height: var(--vvh, 100dvh);
    border-left: 1px solid var(--line); border-top: 0; border-right: 0; border-bottom: 0;
    display: flex; flex-direction: column;
    animation: none; transform: translateY(0);
  }
  html.talk-text-open .call-dock.up .dock-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  html.talk-text-open .call-dock.up [data-panel="text"] {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  html.talk-text-open .call-dock.up .dock-chat { flex: 1; max-height: none; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call-dock.up { animation: none; transform: translateY(0); }
  .dock-stamp { animation: none; }
  .msg.typing span, .dock-dot, .dock-ring-dot, .dock-dots3 span, .desk-dot { animation: none !important; }
}