/* Masterbek Desk — voice reception dock.
   Idle: a living orb that introduces itself once per tab, then folds away.
   In a call: a dark glass card whose orb and waveform follow real audio levels
   (--mic, --voice are set by desk.js from local analysers). */

#desk {
  --mic: 0;
  --voice: 0;
  --level: max(var(--mic), var(--voice));
  --desk-accent: #2354ff;
  --desk-violet: #7c5cff;
  --desk-coral: #ff6a4d;
  --desk-cyan: #37c8ff;
  --desk-ink: #0d1226;
  --desk-glass: rgba(13, 18, 38, .9);
  --desk-line: rgba(255, 255, 255, .12);
  --desk-text: #f5f7ff;
  --desk-muted: rgba(245, 247, 255, .62);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--desk-text);
  font: 13px/1.45 "Manrope", system-ui, sans-serif;
  text-align: left;
}
#desk * { box-sizing: border-box; }
#desk [hidden] { display: none !important; }
#desk button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#desk button:disabled { cursor: default; }
#desk button:focus-visible, #desk summary:focus-visible, #desk input:focus-visible {
  outline: 2px solid var(--desk-cyan);
  outline-offset: 3px;
}
#desk svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Soft glow behind the dock ---------- */
#desk .desk-aurora {
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(60% 80% at 30% 60%, rgba(35, 84, 255, .45), transparent 70%),
    radial-gradient(50% 70% at 80% 40%, rgba(255, 106, 77, .28), transparent 70%);
  filter: blur(18px);
  opacity: .55;
  pointer-events: none;
  transition: opacity .4s ease, border-radius .4s ease;
}

/* ---------- Idle launcher: orb + folding label ---------- */
#desk #start-area { position: relative; }
#desk #start {
  display: flex;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--desk-line);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(13, 18, 38, .94), rgba(34, 28, 72, .92));
  box-shadow: 0 18px 44px -14px rgba(35, 84, 255, .55), 0 2px 10px rgba(8, 10, 30, .25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
#desk #start:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 22px 54px -14px rgba(35, 84, 255, .7), 0 2px 10px rgba(8, 10, 30, .25);
}
#desk #start:disabled { opacity: 1; }

#desk #orb {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  transition: width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}
#desk.dragging #orb { cursor: grabbing; }
#desk .orb-core {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #1a2a9a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 6px 22px -4px rgba(35, 84, 255, .7);
}
#desk .orb-core::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, var(--desk-accent), var(--desk-violet), var(--desk-coral), var(--desk-cyan), var(--desk-accent));
  filter: blur(9px);
  animation: desk-spin 9s linear infinite;
}
#desk .orb-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 70% 85%, rgba(8, 12, 40, .5), transparent 62%);
}
#desk .desk-mic {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: auto;
  color: #fff;
  stroke-width: 1.9;
  filter: drop-shadow(0 1px 2px rgba(8, 12, 40, .45));
  transition: opacity .3s ease;
}
#desk .orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 150, 255, .55);
  opacity: 0;
  pointer-events: none;
}
/* Idle heartbeat: one ring gently pings to say "I'm listening if you want". */
#desk:has(#call-area[hidden]) .orb-ring-1 { animation: desk-ping 3.2s cubic-bezier(.2, .7, .3, 1) infinite; }

#desk .desk-invite {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .5s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, padding .5s cubic-bezier(.2, .8, .2, 1);
}
#desk #desk-start-label { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
#desk #desk-start-hint { font-size: 11px; color: var(--desk-muted); }
#desk.peek:has(#call-area[hidden]) .desk-invite,
#desk:has(#call-area[hidden]):hover .desk-invite,
#desk:has(#call-area[hidden]):focus-within .desk-invite {
  max-width: 260px;
  padding: 0 16px 0 12px;
  opacity: 1;
  transition-delay: 0s, .12s, 0s;
}

/* Resume: a small "new conversation" badge on the orb. */
#desk #desk-new {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--desk-ink);
  box-shadow: 0 2px 8px rgba(8, 12, 40, .3);
}
#desk #desk-new svg { width: 13px; height: 13px; stroke-width: 2.4; }
#desk #desk-resume { display: none; }

/* Privacy: a quiet shield beside the idle launcher, popover when opened. */
#desk #desk-privacy { order: -1; }
#desk #desk-privacy summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  color: rgba(13, 18, 38, .72);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(13, 18, 38, .08);
  box-shadow: 0 6px 18px -8px rgba(8, 12, 40, .35);
  backdrop-filter: blur(10px);
  transition: opacity .3s ease, transform .3s ease;
}
#desk #desk-privacy summary::-webkit-details-marker { display: none; }
#desk #desk-privacy summary svg { width: 16px; height: 16px; }
#desk:has(#call-area[hidden]):not(.peek):not(:hover):not(:focus-within):not(:has(details[open])) #desk-privacy summary {
  opacity: 0;
  transform: translateX(8px) scale(.9);
  pointer-events: none;
}
#desk #desk-privacy p,
#desk:has(#call-area[hidden]) #error,
#desk:has(#call-area[hidden]) #actions:not(:empty) {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--desk-line);
  background: var(--desk-glass);
  color: var(--desk-muted);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 18px 44px -16px rgba(8, 12, 40, .6);
  backdrop-filter: blur(14px);
  animation: desk-rise .25s ease both;
}

/* ---------- In a call: dark glass card ---------- */
#desk:has(#call-area:not([hidden])) {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 320px;
  padding: 16px 18px 14px;
  border: 1px solid var(--desk-line);
  border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(35, 84, 255, .38), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, rgba(255, 106, 77, .2), transparent 60%),
    linear-gradient(165deg, #0d1226, #171b38);
  box-shadow: 0 30px 80px -24px rgba(8, 12, 40, .75), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: desk-open .45s cubic-bezier(.2, .8, .2, 1) both;
}
#desk:has(#call-area:not([hidden])) .desk-aurora {
  inset: -30px;
  border-radius: 48px;
  opacity: calc(.35 + var(--level) * .9);
}

#desk .call-status {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--desk-muted);
}
#desk:has(#call-area:not([hidden])) .call-status { display: flex; }
#desk .desk-live {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 0 rgba(61, 220, 151, .6);
  animation: desk-live 2s ease-out infinite;
}
#desk:has(#mute[aria-pressed="true"]) .desk-live { background: var(--desk-coral); animation: none; }
#desk #status { flex: 1; min-width: 0; color: var(--desk-text); font-weight: 600; overflow-wrap: anywhere; }
#desk #timer {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
#desk #timer:empty { display: none; }

#desk:has(#call-area:not([hidden])) #start-area { display: grid; place-items: center; padding: 40px 0 30px; }
#desk:has(#call-area:not([hidden])) #start {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
#desk:has(#call-area:not([hidden])) .desk-invite,
#desk:has(#call-area:not([hidden])) .desk-mic { display: none; }
#desk:has(#call-area:not([hidden])) #orb { width: 104px; height: 104px; }
#desk:has(#call-area:not([hidden])) .orb-core {
  transform: scale(calc(1 + var(--level) * .08));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 18px 60px -8px rgba(35, 84, 255, calc(.55 + var(--level) * .4));
  transition: transform .08s linear;
}
#desk:has(#call-area:not([hidden])) .orb-core::before { animation-duration: 6s; }
#desk.is-speaking .orb-core::before { animation-duration: 2.4s; }
#desk.is-speaking .orb-core { filter: saturate(1.25) hue-rotate(-18deg); }
#desk:has(#call-area:not([hidden])) .orb-ring { opacity: calc(.18 + var(--level) * .8); transition: transform .1s linear, opacity .2s ease; }
#desk:has(#call-area:not([hidden])) .orb-ring-1 { transform: scale(calc(1.12 + var(--level) * .16)); }
#desk:has(#call-area:not([hidden])) .orb-ring-2 { transform: scale(calc(1.25 + var(--level) * .26)); opacity: calc(.1 + var(--level) * .55); }
#desk:has(#call-area:not([hidden])) .orb-ring-3 { transform: scale(calc(1.38 + var(--level) * .36)); opacity: calc(.05 + var(--level) * .35); }
#desk.is-speaking .orb-ring { border-color: rgba(255, 138, 110, .7); }
/* Before audio flows (connecting), the rings breathe on their own. */
#desk:has(#call-area:not([hidden])):not(:has(#orb.active)) .orb-ring-1 { animation: desk-ping 1.6s cubic-bezier(.2, .7, .3, 1) infinite; }

#desk .desk-wave {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  margin: 6px 0 4px;
}
#desk:has(#call-area:not([hidden])) .desk-wave { display: flex; }
#desk .desk-wave span {
  width: 4px;
  height: calc(4px + var(--level) * var(--f, 1) * 30px);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--desk-cyan), var(--desk-accent));
  opacity: calc(.45 + var(--level) * .55);
  transition: height .08s linear;
}
#desk.is-speaking .desk-wave span { background: linear-gradient(180deg, #ffb199, var(--desk-coral)); }
#desk .desk-wave span:nth-child(1), #desk .desk-wave span:nth-child(7) { --f: .35; }
#desk .desk-wave span:nth-child(2), #desk .desk-wave span:nth-child(6) { --f: .65; }
#desk .desk-wave span:nth-child(3), #desk .desk-wave span:nth-child(5) { --f: .9; }
#desk .desk-wave span:nth-child(4) { --f: 1; }

#desk .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
#desk .controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--desk-line);
  background: rgba(255, 255, 255, .07);
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
#desk .controls button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
#desk .controls button:active:not(:disabled) { transform: scale(.94); }
#desk .controls button:disabled { opacity: .45; }
#desk #mute[aria-pressed="true"] { background: #fff; color: #d6423b; border-color: #fff; }
#desk #stop { width: 64px; border-radius: 999px; background: #e5484d; border-color: #e5484d; color: #fff; }
#desk #stop:hover:not(:disabled) { background: #f0595d; }
#desk #stop svg { width: 24px; height: 24px; fill: currentColor; stroke-width: 1.2; }
#desk .controls #extend {
  width: auto;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--desk-accent);
  border-color: var(--desk-accent);
  color: #fff;
}
#desk #extend svg { width: 16px; height: 16px; }
#desk #extend-label { font-size: 12px; font-weight: 700; white-space: nowrap; }
#desk #interview { color: #9fb4ff; }

#desk #typed-details { margin-top: 10px; text-align: center; }
#desk #typed-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
  color: var(--desk-muted);
  font-size: 12px;
  transition: color .2s ease, background .2s ease;
}
#desk #typed-details summary::-webkit-details-marker { display: none; }
#desk #typed-details summary:hover { color: var(--desk-text); background: rgba(255, 255, 255, .06); }
#desk #typed-details summary svg { width: 16px; height: 16px; }
#desk #typed { display: flex; gap: 6px; margin-top: 8px; }
#desk #typed-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--desk-line);
  background: rgba(255, 255, 255, .06);
  color: var(--desk-text);
  font: inherit;
}
#desk #typed-input::placeholder { color: var(--desk-muted); }
#desk #typed button { padding: 0 14px; border-radius: 12px; background: #fff; color: var(--desk-ink); font-weight: 700; }

#desk:has(#call-area:not([hidden])) #desk-privacy { order: 0; margin-top: 8px; text-align: center; }
#desk:has(#call-area:not([hidden])) #desk-privacy summary {
  display: inline-grid;
  width: 28px;
  height: 28px;
  color: var(--desk-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
#desk:has(#call-area:not([hidden])) #desk-privacy p { position: static; width: auto; margin-top: 6px; text-align: left; animation: none; }

/* Actions and errors inside the card */
#desk:has(#call-area:not([hidden])) #error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(229, 72, 77, .16);
  color: #ffb4b0;
  font-size: 12px;
}
#desk:has(#call-area[hidden]) #error { color: #ffb4b0; }
#desk #actions:empty { display: none; }
#desk .action {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--desk-line);
  background: rgba(255, 255, 255, .06);
  color: var(--desk-text);
  animation: desk-rise .3s ease both;
}
#desk .action h2 { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
#desk .action dl { max-height: 150px; margin: 0 0 6px; overflow: auto; overflow-wrap: anywhere; }
#desk .action dt { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--desk-muted); }
#desk .action dd { margin: 0 0 6px; }
#desk #actions button { margin: 4px 6px 0 0; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; color: var(--desk-ink); }
#desk #actions button + button { background: rgba(255, 255, 255, .1); color: var(--desk-text); }

#desk-unsaved {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1001;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #0d1226;
  color: #f5f7ff;
  font: 13px/1.45 "Manrope", system-ui, sans-serif;
  box-shadow: 0 18px 44px -16px rgba(8, 12, 40, .6);
}
#desk-unsaved a { color: #9fb4ff; font-weight: 700; }

/* ---------- Motion ---------- */
@keyframes desk-spin { to { transform: rotate(360deg); } }
@keyframes desk-ping {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes desk-live {
  70% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}
@keyframes desk-open {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes desk-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes desk-invite {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-9px); }
  65% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  #desk.attention #start { animation: desk-invite 1.4s ease-in-out 1.2s 2; }
  #desk { view-transition-name: masterbek-desk; }
  ::view-transition-group(masterbek-desk) { z-index: 1000; animation-duration: 0s; }
  ::view-transition-old(masterbek-desk) { display: none; }
  ::view-transition-new(masterbek-desk) { animation: none; mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) {
  #desk *, #desk *::before, #desk *::after { animation: none !important; transition: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  #desk { right: 12px; bottom: 12px; }
  #desk #orb { width: 44px; height: 44px; }
  #desk .desk-mic { width: 20px; height: 20px; }
  #desk.peek:has(#call-area[hidden]) .desk-invite { max-width: min(220px, calc(100vw - 120px)); }
  #desk:has(#call-area:not([hidden])) { width: calc(100vw - 24px); padding: 14px 16px 12px; }
  #desk:has(#call-area:not([hidden])) #orb { width: 88px; height: 88px; }
  #desk:has(#call-area:not([hidden])) #start-area { padding: 32px 0 24px; }
}