/* Canvas calling dialog styles. Dialog element itself is owned by the host app;
   this sheet only styles the calling content and keeps long tokens/links readable
   on narrow viewports and doubled (200%) text.
   Docking contract: while joined + dialog closed the controller sets
   body.cc-call-docked (and html.cc-call-docked). Desktop gets a fixed 340px
   right rail with body padding so the canvas keeps its own space; mobile
   (<=900px) re-parents the bar in-flow after .topbar with a bounded
   conversation height. No other global selectors live in this sheet. */

.canvas-call-dialog {
  box-sizing: border-box;
  max-inline-size: min(30rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}

.canvas-call-dialog h2 { margin: 0; font-size: 1.25rem; }
.canvas-call-dialog h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }

.cc-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
}

.cc-head-text { min-inline-size: 0; }

.cc-sub {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.85;
}

.cc-close {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  min-inline-size: 44px;
  min-block-size: 44px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cc-notice,
.cc-status,
.cc-error,
.cc-hint {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

.cc-status { font-weight: 600; }

.cc-error {
  color: inherit;
  border-inline-start: 0.25rem solid currentColor;
  padding-inline-start: 0.5rem;
}

.cc-section { margin-block-start: 0.75rem; }
.cc-setup[hidden] { display: none; }

/* While joined the setup collapses away (belt and braces behind the hidden
   attribute the controller toggles); Call details stays reachable. */
.canvas-call-dialog[data-joined="true"] #cc-setup { display: none; }

.cc-field {
  display: block;
  margin-block: 0.5rem;
}

.cc-input {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block-start: 0.25rem;
  overflow-wrap: anywhere;
}

.cc-link {
  display: block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.cc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding-block: 0.25rem;
}

.cc-btn {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  cursor: pointer;
}

.cc-btn:disabled { cursor: default; }

.cc-primary {
  display: block;
  inline-size: 100%;
  padding: 0.7rem 1rem;
  min-block-size: 44px;
  font-size: 1rem;
  font-weight: 600;
}

/* Icon toolbar buttons: 44px targets, icon-only visually (the
   [data-cc-label] slot keeps a text fallback for AT/older assertions). */
.cc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  flex: none;
}

.cc-icon-btn svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}

.cc-icon-btn .cc-btn-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cc-danger {
  border-color: #b3261e;
  color: #b3261e;
}

.cc-danger:not(:disabled) {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}

.cc-details { margin-block-start: 0.75rem; }
.cc-details > summary {
  cursor: pointer;
  padding: 0.4rem 0;
  min-block-size: 44px;
  line-height: 1.4;
}

.cc-diagnostics { opacity: 0.85; font-size: 0.9rem; }

/* Single live thread: language, save hint, captions, AI slot move together
   between the dialog and the collapsed bar host. */
#cc-thread { min-inline-size: 0; }
#cc-ai-tools:empty { display: none; }

.cc-captions {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
  max-block-size: 12rem;
  overflow: auto;
}

.cc-captions li {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.4;
}

.cc-captions .cc-peer { list-style-type: "≈ "; }
.cc-captions .cc-self { list-style-type: "• "; }
.cc-captions .cc-self,
.cc-captions .cc-peer {
  border: 1px solid currentColor;
  padding: 0.3rem 0.5rem;
  margin-block: 0.25rem;
  list-style-position: inside;
}
.cc-captions .cc-interim { opacity: 0.75; }
.cc-captions .cc-final { opacity: 1; }
.cc-bar-captions-host .cc-captions,
#cc-bar-captions-host .cc-captions {
  max-block-size: 8rem;
  overflow: auto;
  margin: 0.25rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .cc-captions, .cc-callbar { scroll-behavior: auto; }
}

.cc-audio { display: none; }

/* Compact call bar: lives OUTSIDE the dialog so the canvas stays usable
   while joined. Desktop docks it as a right rail; mobile keeps it in-flow
   after .topbar so it never covers the bottom command input, including when
   the mobile keyboard is open. Shown only while joined + dialog closed. */
.cc-callbar {
  box-sizing: border-box;
  border: 1px solid currentColor;
  background: Canvas;
  font-size: 0.9rem;
}

.cc-callbar[hidden] { display: none; }

.cc-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cc-bar-status {
  min-inline-size: 0;
  max-inline-size: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

#cc-bar-captions-host {
  flex-basis: 100%;
  inline-size: 100%;
  min-inline-size: 0;
}

/* Desktop dock: fixed 340px right rail, full height. Body padding gives the
   canvas/composer their own space so nothing is covered. Width > 900px. */
@media (min-width: 901px) {
  body.cc-call-docked {
    padding-right: 340px;
    overflow-x: clip;
  }
  body.cc-call-docked .cc-callbar {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    transform: none;
    z-index: 60;
    inline-size: 340px;
    max-inline-size: 340px;
    block-size: 100dvh;
    max-block-size: 100dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0;
    border-block: none;
    border-inline-end: none;
  }
  body.cc-call-docked .cc-bar-row { flex-wrap: wrap; }
  body.cc-call-docked #cc-bar-captions-host {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
  }
  body.cc-call-docked #cc-bar-captions-host .cc-captions {
    max-block-size: none;
  }
}

/* Mobile dock: in-flow bar directly after .topbar (controller re-parents it
   there once). Bounded conversation; toolbar row stays near 44px tall. */
@media (max-width: 900px) {
  body.cc-call-docked { overflow-x: clip; }
  body.cc-call-docked .cc-callbar {
    position: static;
    transform: none;
    z-index: auto;
    inline-size: 100%;
    max-inline-size: 100%;
    display: block;
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    border-inline: none;
    border-top: none;
  }
  body.cc-call-docked .cc-bar-status { max-inline-size: 42vw; }
  body.cc-call-docked #cc-bar-captions-host .cc-captions {
    max-block-size: min(38vh, 300px);
  }
  /* While the keyboard/composer is engaged, shrink the visible conversation
     instead of overlaying the composer. */
  body.cc-call-docked:has(.canvas-composer:focus-within) #cc-bar-captions-host .cc-captions {
    max-block-size: 24vh;
  }
  /* Account for the in-flow bar so the workspace never slides under it. */
  body.cc-call-docked #canvas-editor .canvas-workspace {
    height: calc(var(--view-height, 100dvh) - var(--chrome-height, 108px) - var(--cc-dock-height, 0px));
  }
}

/* Final hierarchy: setup is quiet, joined controls are one toolbar, and
   caption options disclose optional language/AI choices below the thread. */
.canvas-call-dialog { background: #fff; color: #202124; border-color: #bfc2c6; border-radius: 8px; }
.canvas-call-dialog[data-joined="false"] .cc-controls,
.canvas-call-dialog[data-joined="false"] #cc-cap-dialog-host,
.canvas-call-dialog[data-joined="false"] #cc-link-details { display: none; }
.canvas-call-dialog[data-joined="true"] .cc-sub,
.canvas-call-dialog[data-joined="true"] .cc-head .cc-close { display: none; }
.cc-primary { background: #222; color: #fff; border-color: #222; }
.cc-bar-row { display: grid; grid-template-columns: minmax(0,1fr) repeat(4,44px); gap: 4px; }
.cc-bar-status { max-inline-size: none; font-size: 12px; }
.cc-captions { list-style: none; padding: 0; }
.cc-captions .cc-self, .cc-captions .cc-peer { list-style: none; border-color: #d7d9dd; border-radius: 3px; padding: 7px 8px; font-size: 13px; }
.cc-captions .cc-self { background: #f5f5f3; }
#cc-save-hint { font-size: 11px; color: #61666f; margin: 5px 0; }
.cc-thread-options { margin-top: 0; }
.cc-thread-options > summary { padding: 10px 0; font-size: 12px; }
.cc-btn:focus-visible, .cc-details > summary:focus-visible { outline: 3px solid #6489d7; outline-offset: 2px; }
@media (max-width:900px) {
  body.cc-call-docked .cc-callbar { max-block-size: min(36dvh,280px); overflow-y: auto; }
  body.cc-call-docked .cc-bar-row { position: sticky; top: -5px; z-index: 2; background: #fff; }
  body.cc-call-docked #cc-bar-captions-host .cc-captions { max-block-size: 104px; margin-top: 4px; }
  body.cc-call-docked .cc-thread-options .cc-field { font-size: 12px; margin-block: 4px; }
}
@media (max-width:900px) and (max-height:650px) {
  body.cc-call-docked:has(.composer:focus-within) #cc-bar-captions-host { max-block-size: 76px; overflow: auto; }
}

.cc-icon-btn { position: relative; }
.cc-icon-btn[aria-pressed="true"] { background: #e9edf3; border-color: #7c8da6; }
.cc-icon-btn[data-cc="mute"][aria-pressed="true"]::after,
.cc-icon-btn[data-cc-bar="mute"][aria-pressed="true"]::after { content: ""; position: absolute; width: 23px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.cc-icon-btn[aria-busy="true"] { outline: 1px dashed #7c8da6; outline-offset: -5px; }