/* ─────────────────────────────────────────────────────────────────────────────
   tg-office.css — "Take it to Zoom" floating widget for EP offices.

   The text-based office (Helpers/<ep>.html) is the working surface. This
   stylesheet adds:
     1. A "Take it to Zoom" button in the office topbar.
     2. A floating call widget (fixed position, top-right) that opens
        when the button is clicked. Shows the EP's blinking portrait,
        name + tagline, status pill, Speak (mic) button, and Voice
        toggle (autoplay).

   The text-based office stays fully usable behind/beside the widget.
   The widget is the *call presence* — voice in, voice out — and lives
   on top of the work surface like a Zoom PIP.

   Color tokens come from the host page :root vars; we provide fallback
   hexes so the widget renders correctly even if loaded on a page that
   has not defined them.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Topbar: Export button (small, unobtrusive — visitor downloads their
       brief + revision log as DOCX). ──────────────────────────────────────── */
.tg-topbar-export{
  display:inline-flex;align-items:center;gap:0.4rem;
  background:transparent;border:1px solid rgba(212,170,74,0.35);
  color:var(--gold-light, #d4aa4a);
  font-family:'DM Mono',monospace;font-size:0.6rem;letter-spacing:0.18em;
  text-transform:uppercase;
  padding:0.55rem 0.95rem;cursor:pointer;
  transition:background 0.18s,border-color 0.18s,color 0.18s;
}
.tg-topbar-export:hover:not([disabled]){
  background:rgba(212,170,74,0.08);
  border-color:var(--gold, #b8922a);color:var(--gold, #b8922a);
}
.tg-topbar-export[disabled]{opacity:0.6;cursor:wait;}

/* ── Topbar: "Take it to Zoom" button ──────────────────────────────────── */
.tg-zoom-open{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-family:'DM Mono',monospace;font-size:0.6rem;letter-spacing:0.18em;
  text-transform:uppercase;
  background:var(--gold, #b8922a);color:var(--ink, #0a0a0a);
  border:1px solid var(--gold, #b8922a);
  padding:0.55rem 0.95rem;cursor:pointer;
  text-decoration:none;
  transition:background 0.18s,border-color 0.18s,transform 0.18s;
}
.tg-zoom-open:hover{
  background:var(--gold-light, #d4aa4a);border-color:var(--gold-light, #d4aa4a);
  transform:translateY(-1px);
}
.tg-zoom-open .icon{
  width:14px;height:14px;border:1.5px solid currentColor;border-radius:3px;
  display:inline-block;position:relative;
}
.tg-zoom-open .icon::after{
  content:'';position:absolute;top:50%;left:50%;
  width:4px;height:4px;background:currentColor;border-radius:50%;
  transform:translate(-50%, -50%);
}

/* ── Widget container (fixed top-right of viewport) ────────────────────── */
.tg-zoom-widget{
  position:fixed;top:80px;right:24px;z-index:200;
  width:360px;max-width:calc(100vw - 48px);
  background:rgba(10,10,10,0.94);
  backdrop-filter:blur(12px);
  border:1px solid rgba(212,170,74,0.5);
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.7),
             0 0 80px -16px rgba(212,170,74,0.18);
  display:flex;flex-direction:column;
  overflow:hidden;
  opacity:0;transform:translateY(-12px) scale(0.97);pointer-events:none;
  transition:opacity 0.28s ease,transform 0.32s ease;
}
.tg-zoom-widget.is-open{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}

/* Header */
.tg-zoom-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:0.75rem;
  padding:0.95rem 1.05rem 0.6rem;
  border-bottom:1px solid rgba(212,170,74,0.18);
}
.tg-zoom-head-meta{min-width:0;}
.tg-zoom-name{
  font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;
  color:var(--cream, #f4ede0);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tg-zoom-name em{font-style:italic;color:var(--gold-light, #d4aa4a);}
.tg-zoom-tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.85rem;
  color:var(--text-dim, #a89c88);margin-top:0.1rem;line-height:1.3;
}
.tg-zoom-close{
  background:transparent;border:1px solid rgba(212,170,74,0.3);
  color:var(--text-dim, #a89c88);cursor:pointer;
  font-size:0.9rem;line-height:1;
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color 0.18s,border-color 0.18s;
}
.tg-zoom-close:hover{color:var(--gauntlet-consequence, #c0392b);border-color:var(--gauntlet-consequence, #c0392b);}

/* Portrait area */
.tg-zoom-stage{
  padding:1rem 1.05rem 0.7rem;
  display:flex;flex-direction:column;align-items:center;gap:0.7rem;
}
.tg-zoom-portrait{
  position:relative;width:100%;aspect-ratio:1/1;
  border:1px solid rgba(212,170,74,0.3);background:#14151a;overflow:hidden;
}
.tg-zoom-portrait img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.tg-zoom-portrait .tg-zoom-blink-closed{
  opacity:0;animation:tg-zoom-blink 6s linear infinite;
}
@keyframes tg-zoom-blink{
  0%,93%,100%{opacity:0;}
  95%,97%{opacity:1;}
}
/* Pulsing ring when EP is "speaking" (audio playing) */
.tg-zoom-portrait::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:2px solid transparent;
  transition:border-color 0.18s;
}
.tg-zoom-widget.is-speaking .tg-zoom-portrait::after{
  border-color:var(--gold-light, #d4aa4a);
  animation:tg-zoom-pulse 1.4s ease-in-out infinite;
}
@keyframes tg-zoom-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,170,74,0.4);}
  50%{box-shadow:0 0 0 8px rgba(212,170,74,0);}
}

/* Status pill */
.tg-zoom-status{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-family:'Cormorant Garamond',serif;font-size:0.95rem;
  color:var(--text, #e8dece);
  padding:0.35rem 0.8rem;
  background:rgba(255,255,255,0.04);border:1px solid rgba(212,170,74,0.2);
}
.tg-zoom-status .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ea874;box-shadow:0 0 6px #4ea874;
  animation:tg-zoom-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes tg-zoom-pulse-dot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.55;transform:scale(0.9);}
}
.tg-zoom-status.is-thinking .dot{background:var(--gold-light, #d4aa4a);box-shadow:0 0 6px var(--gold-light, #d4aa4a);}
.tg-zoom-status.is-thinking{color:var(--gold-light, #d4aa4a);}

/* Controls */
.tg-zoom-controls{
  display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;
  padding:0.6rem 1.05rem 0.5rem;
  border-top:1px solid rgba(212,170,74,0.18);
  margin-top:0.4rem;
}

/* Mic permission note - injected by tg-ep-zoom.js. Sits between controls
   and the Hear-again replay button. One-liner reminding the visitor the
   browser will ask for mic access on the first Speak tap. */
.tg-zoom-mic-note{
  padding:0 1.05rem 0.55rem;
  font-family:'DM Mono',monospace;font-size:0.5rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-dim, #a89c88);
  line-height:1.45;text-align:center;
}
.tg-zoom-mic-note strong{color:var(--gold-light, #d4aa4a);font-weight:500;}
.tg-zoom-btn{
  font-family:'DM Mono',monospace;font-size:0.6rem;letter-spacing:0.16em;
  text-transform:uppercase;cursor:pointer;
  padding:0.65rem 0.75rem;
  display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
  border:1px solid var(--rule, rgba(184,146,42,0.3));
  background:transparent;color:var(--text-dim, #a89c88);
  transition:all 0.18s;
}
.tg-zoom-btn:hover{color:var(--gold, #b8922a);border-color:var(--gold, #b8922a);}
.tg-zoom-btn[disabled]{opacity:0.4;cursor:not-allowed;}

.tg-zoom-speak{
  background:#4ea874;color:#0a1a10;border-color:#4ea874;
}
.tg-zoom-speak:hover:not([disabled]){background:#5fb887;border-color:#5fb887;color:#0a1a10;}
.tg-zoom-speak.is-listening{
  background:var(--gauntlet-consequence, #c0392b);border-color:var(--gauntlet-consequence, #c0392b);color:#fff;
  animation:tg-zoom-listen 1.2s ease-in-out infinite;
}
@keyframes tg-zoom-listen{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0.5);}
  50%{box-shadow:0 0 0 6px rgba(192,57,43,0);}
}
.tg-zoom-speak .mic{
  width:11px;height:11px;border:1.5px solid currentColor;border-radius:5.5px 5.5px 5.5px 5.5px;
}

.tg-zoom-voice.is-on{
  background:rgba(212,170,74,0.1);color:var(--gold-light, #d4aa4a);border-color:var(--gold-light, #d4aa4a);
}

/* Replay last response — full-width row below the 2-col controls */
.tg-zoom-replay{
  grid-column:1 / -1;
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.14em;
  text-transform:uppercase;cursor:pointer;
  padding:0.55rem 0.75rem;
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  background:transparent;border:1px dashed rgba(212,170,74,0.3);
  color:var(--text-dim, #a89c88);
  transition:all 0.18s;
}
.tg-zoom-replay:hover:not([disabled]){color:var(--gold-light, #d4aa4a);border-color:var(--gold-light, #d4aa4a);border-style:solid;}
.tg-zoom-replay[disabled]{opacity:0.35;cursor:not-allowed;}
.tg-zoom-replay.is-playing{
  background:var(--gold, #b8922a);color:var(--ink, #0a0a0a);border-color:var(--gold, #b8922a);border-style:solid;
}

/* ── Stage B: Share-screen view ─────────────────────────────────────────
   When the EP proposes a revision, the widget swaps from portrait to a
   "shared screen" showing her notes on the brief: section label,
   rationale, before/after diff, accept/reject. Portrait shrinks to a
   PIP in the corner so the visitor still sees who is talking.

   The widget grows slightly when sharing so the diff has room to read.
   ──────────────────────────────────────────────────────────────────────── */
.tg-zoom-widget.is-sharing{
  width:440px;max-width:calc(100vw - 48px);
}

/* Share-screen container (injected by tg-ep-zoom.js) */
.tg-zoom-screen{
  display:none;flex-direction:column;
  border:1px solid rgba(212,170,74,0.3);background:#14151a;
  width:100%;
  overflow:hidden;
}
.tg-zoom-widget.is-sharing .tg-zoom-screen{display:flex;}
.tg-zoom-widget.is-sharing .tg-zoom-portrait{
  position:absolute;top:0.6rem;right:0.6rem;
  width:80px;height:80px;aspect-ratio:auto;
  z-index:5;
  border:2px solid rgba(212,170,74,0.5);
  box-shadow:0 8px 20px -4px rgba(0,0,0,0.6);
}
.tg-zoom-widget.is-sharing .tg-zoom-stage{
  position:relative;padding:0.5rem 0.6rem 0.6rem;gap:0.5rem;
}

.tg-zoom-screen-head{
  padding:0.7rem 0.9rem 0.55rem;
  border-bottom:1px solid rgba(212,170,74,0.18);
}
.tg-zoom-screen-eyebrow{
  font-family:'DM Mono',monospace;font-size:0.52rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold, #b8922a);
  margin-bottom:0.25rem;
}
.tg-zoom-screen-label{
  font-family:'Playfair Display',serif;font-size:0.95rem;font-weight:700;
  color:var(--cream, #f4ede0);line-height:1.25;
  padding-right:90px; /* keep clear of the PIP */
}
.tg-zoom-screen-body{
  padding:0.7rem 0.9rem;
  display:flex;flex-direction:column;gap:0.55rem;
  max-height:280px;overflow-y:auto;
  font-family:'Cormorant Garamond',serif;font-size:0.92rem;line-height:1.5;
}
.tg-zoom-screen-rationale{
  font-style:italic;color:var(--text-dim, #a89c88);
  border-left:2px solid rgba(212,170,74,0.3);
  padding:0.35rem 0 0.35rem 0.7rem;
}
.tg-zoom-screen-diff{display:flex;flex-direction:column;gap:0.35rem;}
.tg-zoom-screen-before{
  padding:0.4rem 0.55rem;
  background:rgba(0,0,0,0.4);border-left:2px solid rgba(212,170,74,0.35);
  color:var(--text-dim, #a89c88);font-size:0.88rem;line-height:1.5;white-space:pre-wrap;
  text-decoration:line-through;text-decoration-color:rgba(192,57,43,0.5);
}
.tg-zoom-screen-arrow{
  font-family:'DM Mono',monospace;font-size:0.5rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold, #b8922a);
  text-align:center;padding:0.05rem 0;
}
.tg-zoom-screen-after{
  padding:0.4rem 0.55rem;
  background:rgba(212,170,74,0.06);border-left:2px solid var(--gold-light, #d4aa4a);
  color:var(--cream, #f4ede0);font-size:0.92rem;line-height:1.5;white-space:pre-wrap;
}

.tg-zoom-screen-actions{
  padding:0.55rem 0.9rem 0.7rem;
  border-top:1px solid rgba(212,170,74,0.18);
  display:flex;gap:0.45rem;flex-wrap:wrap;
}
.tg-zoom-screen-btn{
  font-family:'DM Mono',monospace;font-size:0.55rem;letter-spacing:0.16em;
  text-transform:uppercase;cursor:pointer;
  padding:0.55rem 0.8rem;
  border:1px solid var(--gold, #b8922a);
  transition:all 0.18s;
  flex:1;min-width:0;
}
.tg-zoom-screen-accept{background:var(--gold, #b8922a);color:#1a130a;}
.tg-zoom-screen-accept:hover{background:var(--gold-light, #d4aa4a);border-color:var(--gold-light, #d4aa4a);}
.tg-zoom-screen-reject{
  background:transparent;color:var(--text-dim, #a89c88);border-color:var(--rule, rgba(184,146,42,0.3));
}
.tg-zoom-screen-reject:hover{border-color:var(--gauntlet-consequence, #c0392b);color:var(--gauntlet-consequence, #c0392b);}
.tg-zoom-screen-stop{
  background:transparent;color:var(--text-dim, #a89c88);
  border:1px dashed var(--rule, rgba(184,146,42,0.3));
  flex:0 0 auto;
}
.tg-zoom-screen-stop:hover{color:var(--gold-light, #d4aa4a);border-color:var(--gold-light, #d4aa4a);}

/* When sharing, the bottom controls (Speak / Voice / Replay) get a
   slightly smaller visual weight since the focus is the diff. */
.tg-zoom-widget.is-sharing .tg-zoom-controls{padding-top:0.4rem;padding-bottom:0.7rem;}

/* Mobile: widget takes most of the width, anchored bottom-right */
@media (max-width:720px){
  .tg-zoom-widget,
  .tg-zoom-widget.is-sharing{
    top:auto;bottom:16px;right:16px;left:16px;
    width:auto;max-width:none;
  }
  .tg-zoom-portrait{max-height:38vh;aspect-ratio:auto;height:38vh;}
  .tg-zoom-widget.is-sharing .tg-zoom-portrait{
    width:60px;height:60px;
  }
  .tg-zoom-screen-body{max-height:42vh;}
}