/* App shell (collapsible sidebar, status control), Bellen, Instellingen and
 * the embedded phone (call panel / incoming toast). Tokens only; no inline
 * styles (strict CSP: sizes go through the CSSOM). docs/telephony/CONSOLE.md
 * "Navigatie" and "Telefoon in de console". */

/* -- sidebar header + collapse ------------------------------------------------------------- */
.side-top { display: flex; align-items: center; gap: 6px; }
.side-top .brand { flex: 1; min-width: 0; }
.side-top .brand > div:last-child { flex: 1; min-width: 0; }
.side-top .brand-name { overflow-wrap: anywhere; }
.side-toggle { color: var(--side-muted); padding: 0 8px; flex: none; }
.side-top .side-toggle { flex: none; }  /* beats .sidebar .btn-ghost (flex: 1), so the brand gets the width */
.side-toggle:hover { color: var(--side-strong); background: var(--side-hover); }
.shell.is-collapsed .side-toggle .icon { transform: scaleX(-1); }
.nav-foot { margin-bottom: 4px; }
.link-btn { border: 0; background: transparent; padding: 0; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Explicitly collapsed (any width above the phone layout) = the 1100 px layout: icons only. */
@media (min-width: 861px) {
  .shell.side-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .shell.is-collapsed .sidebar { padding: 12px 10px; gap: 8px; align-items: center; overflow-y: auto; overflow-x: hidden; }
  .shell.is-collapsed .side-top { flex-direction: column; }
  .shell.is-collapsed :is(.brand > div:last-child, .nav a > .nav-text, .org-chip .nav-text, .org-switch label,
    .me-card .who, .sidebar .btn-ghost > span, .presence-line, .presence select) { display: none; }
  /* Section titles become thin dividers in the icon rail. */
  .shell.is-collapsed .nav-section { display: block; width: 28px; height: 1px; margin: 5px auto; padding: 0;
    font-size: 0; line-height: 0; color: transparent; overflow: hidden; white-space: nowrap; text-indent: -9999px;
    background: var(--side-border); }
  .shell.is-collapsed .nav-section:first-child { display: none; }
  .shell.is-collapsed .org-chip { padding: 6px; border: 0; background: none; }
  .shell.is-collapsed .org-chip select { display: none; }
  .shell.is-collapsed .nav { gap: 1px; }
  .shell.is-collapsed .nav a { justify-content: center; padding: 7px; }
  .shell.is-collapsed .nav a[aria-current="page"]::before { left: -11px; }
  .shell.is-collapsed .nav-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .shell.is-collapsed .sidebar-foot { gap: 6px; }
  .shell.is-collapsed .me-card { padding: 0; border: 0; background: none; justify-content: center; }
  .shell.is-collapsed .sidebar-foot .row { flex-direction: column; }
  .shell.is-collapsed .presence { padding: 8px; justify-items: center; }
  /* Tooltips in the icon rail (positioned fixed so a scrollable sidebar never clips them). */
  .side-tip { position: fixed; left: 86px; transform: translateY(-50%); white-space: nowrap; padding: 6px 10px;
    border-radius: 9px; font-size: var(--t-xs); font-weight: 600; background: var(--popover); color: var(--text);
    box-shadow: var(--shadow-pop); border: 1px solid var(--border-strong); z-index: 45; pointer-events: none; }
  .side-tip[hidden] { display: none; }
  /* Explicitly expanded in a narrow window: undo the automatic icon rail. */
  .shell.side-expanded { grid-template-columns: var(--side-w, 252px) minmax(0, 1fr); }
  .shell.side-expanded .sidebar { padding: 22px 14px 16px; align-items: stretch; }
  .shell.side-expanded :is(.brand > div:last-child, .nav a > .nav-text, .org-chip .nav-text, .nav-section, .org-switch label,
    .me-card .who, .sidebar .btn-ghost > span) { display: revert; }
  .shell.side-expanded .org-chip { padding: 9px 12px; border: 1px solid var(--side-border); background: var(--side-card); }
  .shell.side-expanded .org-chip select { display: revert; }
  .shell.side-expanded .nav a { justify-content: flex-start; padding: 9px 12px; }
  .shell.side-expanded .nav a[aria-current="page"]::before { left: -15px; }
  .shell.side-expanded .nav-count { position: static; }
  .shell.side-expanded .me-card { padding: 11px; border: 1px solid var(--side-border); background: var(--side-card); justify-content: flex-start; }
  .shell.side-expanded .sidebar-foot .row { flex-direction: row; }
}
@media (max-width: 860px) {
  .side-toggle { display: none; }
}

/* -- status control ("Beschikbaar ▾", registration dot, active device) ------------------------------ */
.presence { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--side-border); background: var(--side-card); }
.presence[hidden] { display: none; }  /* no linked agent (owners, platform staff): no empty status pill */
.presence-row { display: flex; align-items: center; gap: 9px; }
.presence select { flex: 1; min-width: 0; height: 28px; padding: 0 6px; border: 0; background: transparent; color: var(--side-strong);
  font-weight: 600; box-shadow: none; }
.presence select:focus-visible { box-shadow: var(--focus); }
.presence select option { color: #0D1626; }
.presence-line { font-size: var(--t-xs); color: var(--side-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.presence-line .link-btn { color: var(--side-accent); font-size: var(--t-xs); }
.presence-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); display: inline-block; }
.presence[data-dot="on"] .presence-dot, .presence-dot.dot-on, .presence-dot.dot-ok { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.presence[data-dot="wait"] .presence-dot, .presence-dot.dot-wait, .presence-dot.dot-warn { background: var(--warn); }
.presence[data-dot="off"] .presence-dot, .presence-dot.dot-off { background: var(--danger); }
.presence[data-dot="away"] .presence-dot, .presence-dot.dot-away { background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
.presence-dot.dot-info { background: var(--info); }
.presence-dot.dot-muted { background: var(--muted); }

/* -- Bellen ----------------------------------------------------------------------------- */
.bellen { align-items: start; }
.dial-row { display: flex; gap: 8px; align-items: center; }
.dial-input { font-size: var(--t-xl); height: calc(var(--control-h) + 14px); letter-spacing: .02em; }
.dialpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 340px; }
.dial-key { height: 52px; font-size: var(--t-lg); font-family: var(--mono); border-radius: 14px; }
.btn-call { min-width: 160px; }
.dial-device { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); }
.list { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad, 18px); border-top: 1px solid var(--border); }
.list-row:first-child { border-top: 0; }
.list-row > .icon { color: var(--muted); flex: none; }
.list-main { flex: 1; min-width: 0; display: grid; gap: 1px; color: var(--text); text-decoration: none; }
.list-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.list-main:hover strong, a.list-main:hover .mono { text-decoration: underline; }
.empty-note { margin: 0; padding: 16px var(--pad, 18px); color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: var(--gap); align-items: start; }

/* -- the embedded phone: incoming toast + call panel (iframe /telephony/softphone/embed) ------------------ */
.phone-frame { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 400px; height: 560px; max-width: calc(100vw - 32px);
  border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface-solid); box-shadow: var(--shadow-pop);
  color-scheme: normal; transition: opacity .16s ease, transform .16s ease; }
.phone-frame[data-phase="idle"] { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); width: 1px; height: 1px; }
.phone-frame[data-phase="ringing"] { width: 360px; }
.phone-frame[data-phase="ended"] { width: 340px; }
/* Keep the toast clear of the console's own toasts. */
.phone-frame:not([data-phase="idle"]) ~ .toasts, body:has(.phone-frame:not([data-phase="idle"])) .toasts { right: 440px; }
@media (max-width: 600px) {
  .phone-frame { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; border-radius: 18px; }
  .phone-frame[data-phase="ringing"], .phone-frame[data-phase="ended"] { width: auto; }
  body:has(.phone-frame:not([data-phase="idle"])) .toasts { right: 20px; bottom: auto; top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .phone-frame { transition: none; } }