/* ══════════════════════════════════════════════════════════
   TOKENS — Dark (padrão)
══════════════════════════════════════════════════════════ */
:root {
  --bg-0: #0a0c10; --bg-1: #0f1218; --bg-2: #161b24; --bg-3: #1d242f;
  --line: #232b38; --line-2: #2d3645;
  --text-0: #e6ebf2; --text-1: #9aa6b8; --text-2: #5c6678;
  --accent: #ff6b1a; --accent-glow: rgba(255,107,26,0.15);
  --green: #2dd4a7; --green-bg: rgba(45,212,167,0.08);
  --red: #ff4757;   --red-bg: rgba(255,71,87,0.1);
  --yellow: #ffb547; --yellow-bg: rgba(255,181,71,0.1);
  --blue: #4f9bff;   --blue-bg: rgba(79,155,255,0.1);
  --purple: #a78bfa;
  /* Classic card colors — dark */
  --cl-idle:    #162e1f; --cl-idle-border:    #2d6a4f; --cl-idle-text:    #95d5b2;
  --cl-talking: #0f3320; --cl-talking-border: #40916c; --cl-talking-text: #74c69d;
  --cl-ringing: #302200; --cl-ringing-border: #d4a000; --cl-ringing-text: #ffd60a;
  --cl-offline: #161b24; --cl-offline-border: #232b38; --cl-offline-text: #5c6678;
}

/* ── Light theme ── */
body.light {
  --bg-0: #eef1f5; --bg-1: #ffffff; --bg-2: #f4f6fa; --bg-3: #e8ecf2;
  --line: #dde2ea; --line-2: #c5cdd8;
  --text-0: #1a2332; --text-1: #4b5770; --text-2: #8b98b0;
  --accent: #e05a10; --accent-glow: rgba(224,90,16,0.1);
  --green: #0ea575; --green-bg: rgba(14,165,117,0.1);
  --red: #e83347;   --red-bg: rgba(232,51,71,0.1);
  --yellow: #e09820; --yellow-bg: rgba(224,152,32,0.1);
  --blue: #3a82ee;   --blue-bg: rgba(58,130,238,0.1);
  --purple: #7c60e0;
  /* Classic card colors — light */
  --cl-idle:    #d4edda; --cl-idle-border:    #a8d5b8; --cl-idle-text:    #155724;
  --cl-talking: #c3e6cb; --cl-talking-border: #74c69d; --cl-talking-text: #0d3d1e;
  --cl-ringing: #fff3cd; --cl-ringing-border: #ffc107; --cl-ringing-text: #7d5800;
  --cl-offline: #e9ecef; --cl-offline-border: #ced4da; --cl-offline-text: #6c757d;
  background-image: none !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg-0); color: var(--text-0); font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; overflow: hidden; }
body { display: grid; grid-template-rows: auto minmax(0,1fr) auto; background-image: radial-gradient(circle at 20% 0%, var(--accent-glow) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(79,155,255,0.06) 0%, transparent 50%); }
.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
button { cursor: pointer; font-family: inherit; }

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.topbar { min-height: 44px; background: var(--bg-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 16px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; font-size: 14px; }
.brand-logo { width: 86px; height: 20px; display: block; object-fit: contain; }
.brand-mark { width: 22px; height: 22px; background: linear-gradient(135deg, var(--accent), #ff8c42); border-radius: 5px; display: grid; place-items: center; color: #0a0c10; font-weight: 800; font-size: 12px; }
.brand-sub { color: var(--text-2); font-weight: 700; letter-spacing: .02em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.conn-indicator { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-1); padding: 4px 10px; background: var(--red-bg); border: 1px solid rgba(255,71,87,0.2); border-radius: 4px; transition: all .3s; }
.conn-indicator.connected { background: var(--green-bg); border-color: rgba(45,212,167,0.2); }
.conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); transition: all .3s; }
.conn-indicator.connected .conn-dot { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; position: relative; }
.user-chip:hover { background: var(--bg-3); }
/* Dropdown do usuário */
.user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 500; overflow: hidden; display: none; }
.user-dropdown.open { display: block; }
.user-dropdown-header { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.user-dropdown-header .ud-name { font-size: 12px; font-weight: 800; color: var(--text-0); }
.user-dropdown-header .ud-role { font-size: 10px; color: var(--text-2); margin-top: 1px; }
.user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12px; color: var(--text-1); cursor: pointer; transition: background .12s; }
.user-dropdown-item:hover { background: var(--bg-2); color: var(--text-0); }
.user-dropdown-item.danger { color: var(--red); }
.user-dropdown-item.danger:hover { background: var(--red-bg); }
.user-dropdown-item .ud-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
/* Tela de logoff */
.logout-screen { position: fixed; inset: 0; background: var(--bg-0); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 9999; }
.logout-screen.visible { display: flex; }
.logout-screen .ls-icon { font-size: 48px; opacity: .5; }
.logout-screen .ls-msg { font-size: 16px; font-weight: 700; color: var(--text-1); }
.logout-screen .ls-sub { font-size: 12px; color: var(--text-2); }
.logout-screen .ls-btn { background: var(--accent); color: #0a0c10; border: none; padding: 10px 28px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; margin-top: 8px; }
.logout-screen .ls-btn:hover { opacity: .88; }
.snapshot-loading { position: fixed; inset: 44px 0 28px; z-index: 9000; background: rgba(10,12,16,0.88); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
body.light .snapshot-loading { background: rgba(238,241,245,0.86); }
.snapshot-loading-card { width: min(420px, calc(100vw - 40px)); background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.45); text-align: center; }
.snapshot-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: snapshot-spin .8s linear infinite; }
.snapshot-loading-title { font-size: 16px; font-weight: 800; color: var(--text-0); }
.snapshot-loading-sub { font-size: 12px; color: var(--text-1); line-height: 1.5; }
.snapshot-loading-hint { font-size: 11px; color: var(--text-2); line-height: 1.5; }
@keyframes snapshot-spin { to { transform: rotate(360deg); } }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta .n { font-size: 11px; font-weight: 700; }
.user-meta .c { font-size: 9px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }

/* Botões da topbar */
.tb-btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; transition: all .2s; white-space: nowrap; }
.tb-btn:hover { background: var(--bg-3); color: var(--text-0); border-color: var(--line-2); }
.tb-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   LAYOUT: MODERN (padrão)
══════════════════════════════════════════════════════════ */
.main-modern { display: grid; grid-template-columns: var(--fop-w-left,280px) 5px minmax(0,1fr) 5px var(--fop-w-right,320px); overflow: hidden; height: 100%; min-width: 0; }
.main-modern.modern-windows { display: block; position: relative; background: var(--bg-0); }
.main-modern.no-right { grid-template-columns: var(--fop-w-left,280px) 5px 1fr; }
.main-classic { display: none; height: 100%; }
body.classic .main-modern { display: none; }
body.classic .main-classic { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Canvas de janelas flutuantes */
.cl-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.cl-toolbar input { flex: 0 0 260px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); padding: 7px 12px; border-radius: 6px; font-family: inherit; font-size: 13px; outline: none; }
.cl-toolbar input:focus { border-color: var(--accent); }
.cl-actions { display: flex; gap: 7px; align-items: center; margin-left: 4px; }
.cl-action-btn { min-width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--bg-2); color: var(--text-0); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,0.06); }
.cl-action-btn span { font-size: 9px; letter-spacing: .05em; }
.cl-action-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--bg-3); }
.cl-action-btn.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.cl-action-btn:disabled { opacity: .38; cursor: not-allowed; }
.cl-selected { font-size: 11px; color: var(--text-2); margin-left: 4px; white-space: nowrap; }
.cl-legend { display: none; gap: 8px; align-items: center; }
.cl-leg { font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid; }
.cl-leg.idle    { color:var(--cl-idle-text);    background:var(--cl-idle);    border-color:var(--cl-idle-border); }
.cl-leg.talking { color:var(--cl-talking-text); background:var(--cl-talking); border-color:var(--cl-talking-border); }
.cl-leg.ringing { color:var(--cl-ringing-text); background:var(--cl-ringing); border-color:var(--cl-ringing-border); }
.cl-leg.offline { color:var(--cl-offline-text); background:var(--cl-offline); border-color:var(--cl-offline-border); }
.cl-workspace {
  position: relative; flex: 1; overflow: hidden; background: var(--bg-0);
  isolation: isolate; /* garante stacking context isolado para z-index das janelas */
}

/* Janelas flutuantes (estilo FOP2) */
.cl-win {
  position: absolute;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  min-width: 220px;
  transition: box-shadow 0.12s, border-color 0.12s;
}
/* Janela com foco (ativa / mais recente) */
.cl-win.cl-win-focus {
  border-color: var(--line-2);
  box-shadow: 0 8px 36px rgba(0,0,0,0.7), 0 0 0 1px var(--line-2);
}
.cl-win-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  cursor: move; user-select: none; touch-action: none;
  flex-shrink: 0;
  border-left: 4px solid var(--accent);
}
.cl-win-icon  { font-size: 14px; flex-shrink: 0; }
.cl-win-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-win-count { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-2); flex-shrink: 0; }
.cl-win-btn   { background: transparent; border: none; color: var(--text-2); cursor: pointer; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-family: monospace; line-height: 1; flex-shrink: 0; min-width: 20px; text-align: center; }
.cl-win-btn:hover { background: var(--bg-3); color: var(--text-0); }
.cl-win-body  { flex: 1; overflow-y: auto; overflow-x: hidden; }
.cl-win.minimized .cl-win-body  { display: none; }
.cl-win.minimized .cl-win-resize { display: none; }
.cl-win.minimized { height: auto !important; overflow: visible; }
/* Janela maximizada — sem borda arredondada, sem alça de resize, drag desabilitado */
.cl-win.cl-win-maximized { border-radius: 0 !important; }
.cl-win.cl-win-maximized .cl-win-resize { display: none; }
.cl-win.cl-win-maximized .cl-win-header { cursor: default; }
.cl-win-resize {
  position: absolute; bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: se-resize; touch-action: none; z-index: 1;
}
.cl-win-resize::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  pointer-events: none; border-radius: 1px;
}
.cl-win:hover .cl-win-resize::after { border-color: var(--accent); }
.cl-win.minimized .cl-win-resize { display: none; }
.cl-win-ext-grid { display: grid; grid-template-columns: repeat(auto-fill, 238px); align-items: stretch; justify-content: start; gap: 8px; padding: 8px; }
.cl-empty { padding: 14px; font-size: 12px; color: var(--text-2); }

/* Modern em janelas móveis */
.m-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--bg-0);
  isolation: isolate;
  padding-bottom: 16px;
}
.m-win {
  position: absolute;
  min-width: 240px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.m-win.m-win-focus {
  border-color: var(--line-2);
  box-shadow: 0 8px 36px rgba(0,0,0,0.7), 0 0 0 1px var(--line-2);
}
.m-win-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  cursor: move;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.m-win-icon { flex-shrink: 0; font-size: 13px; color: var(--text-2); }
.m-win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-1); }
.m-win-btn { background: transparent; border: none; color: var(--text-2); cursor: pointer; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-family: monospace; line-height: 1; flex-shrink: 0; min-width: 20px; text-align: center; }
.m-win-btn:hover { background: var(--bg-3); color: var(--text-0); }
.m-win-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.m-win-body > .col,
.m-win-body > .table-wrap,
.m-win-body > .queues,
.m-win-body > #colRight {
  flex: 1;
  min-height: 0;
  height: auto;
  width: 100%;
  border: none !important;
}
.m-win-body > .metrics {
  flex: 1;
  border-bottom: none;
}
.m-win-body .queues-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
#mwin-queues .m-win-body {
  overflow: auto;
}
#mwin-queues .queues {
  min-height: min-content;
  overflow: visible;
}
.m-win-body .table-wrap {
  overflow: auto;
}
.m-win.minimized .m-win-body,
.m-win.minimized .m-win-resize { display: none; }
.m-win.minimized { height: auto !important; overflow: visible; }
.m-win-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  touch-action: none;
  z-index: 1;
}
.m-win-resize::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  pointer-events: none;
  border-radius: 1px;
}
.m-win:hover .m-win-resize::after { border-color: var(--accent); }

/* ── Guias de snap (linhas azuis durante drag/resize) ── */
.cl-snap-h, .cl-snap-v {
  position: absolute; pointer-events: none; z-index: 99999;
  background: rgba(74,158,255,0.75);
  opacity: 0; transition: opacity 0.08s;
}
.cl-snap-h { left: 0; right: 0; height: 1px; }
.cl-snap-v { top: 0; bottom: 0; width: 1px; }

.col { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-1); min-width: 0; }
.col + .col { border-left: none; }

/* Divisória redimensionável */
.resize-handle {
  width: 6px; flex-shrink: 0;
  cursor: col-resize; background: var(--line);
  position: relative; z-index: 10;
  transition: background 0.15s;
  touch-action: none; /* necessário para Pointer Events no mobile */
  display: flex; align-items: center; justify-content: center;
}
.resize-handle::after {
  content: ''; position: absolute;
  width: 3px; height: 48px; border-radius: 3px;
  background: var(--line-2); transition: background 0.15s;
  pointer-events: none;
}
.resize-handle:hover::after, .resize-handle.rh-active::after { background: var(--accent); }
.resize-handle:hover { background: var(--bg-3); }
.resize-handle.rh-active { background: var(--bg-3); }
body.rh-dragging { cursor: col-resize !important; user-select: none !important; }
.center { background: var(--bg-0); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; min-width: 0; }

/* ── Panels ── */
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top: 0; z-index: 2; }
.panel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.panel-title .count { background: var(--bg-3); color: var(--text-0); padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: 0; }
.icon-btn { width: 22px; height: 22px; background: transparent; border: 1px solid transparent; color: var(--text-2); border-radius: 4px; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.icon-btn:hover { background: var(--bg-3); color: var(--text-0); border-color: var(--line); }
.panel-body { flex: 1; overflow-y: auto; }

/* ── Metrics ── */
.metrics { display: grid; grid-template-columns: repeat(6,1fr); background: var(--bg-1); border-bottom: 1px solid var(--line); }
.metric { padding: 12px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.metric:last-child { border-right: none; }
.metric-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); font-weight: 700; }
.metric-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.metric-delta { font-size: 10px; color: var(--text-1); }
.metric.accent .metric-value { color: var(--accent); }
.metric.green  .metric-value { color: var(--green); }
.metric.red    .metric-value { color: var(--red); }
.metric.blue   .metric-value { color: var(--blue); }
.metric.yellow .metric-value { color: var(--yellow); }

/* ── Extensions list (modern) ── */
.ext-search { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ext-search input { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); padding: 6px 10px; border-radius: 6px; font-family: inherit; font-size: 12px; outline: none; }
.ext-search input:focus { border-color: var(--accent); }
.ext-sortbar { display: flex; flex-direction: column; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.ext-sort-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.ext-sort-field select { min-width: 128px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); border-radius: 5px; padding: 5px 8px; font: inherit; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; outline: none; }
.ext-sort-field select:focus { border-color: var(--accent); }
.ext-sort-check { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-1); user-select: none; cursor: pointer; }
.ext-sort-check input { accent-color: var(--accent); }
.ext-row { display: grid; grid-template-columns: 6px 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.1s; }
.ext-row:hover { background: var(--bg-2); }
.status-bar { width: 4px; height: 32px; border-radius: 2px; }
.st-idle    { background: var(--green); box-shadow: 0 0 5px rgba(45,212,167,0.45); }
.st-talking { background: var(--green); box-shadow: 0 0 8px var(--green); }
.st-queue   { background: var(--purple); box-shadow: 0 0 6px rgba(167,139,250,0.55); }
.st-dialing { background: var(--blue); box-shadow: 0 0 6px rgba(79,155,255,0.55); }
.st-ringing { background: var(--yellow); animation: blink 1s infinite; }
.st-hold    { background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: blink 2s infinite; }
.st-paused  { background: var(--yellow); box-shadow: 0 0 6px rgba(255,181,71,0.55); }
.st-busy    { background: var(--red); }
.st-offline { background: #2a3140; }
/* ext-row colorido por status */
.ext-row[data-ext] { border-left: 2px solid transparent; }
.ext-row:has(.st-idle)    { border-left-color: rgba(45,212,167,0.35); }
.ext-row:has(.st-talking) { border-left-color: rgba(45,212,167,0.7); background: rgba(45,212,167,0.04); }
.ext-row:has(.st-queue)   { border-left-color: rgba(167,139,250,0.7); background: rgba(167,139,250,0.05); }
.ext-row:has(.st-dialing) { border-left-color: rgba(79,155,255,0.7); background: rgba(79,155,255,0.04); }
.ext-row:has(.st-ringing) { border-left-color: rgba(255,181,71,0.7); background: rgba(255,181,71,0.04); }
.ext-row:has(.st-hold)    { border-left-color: rgba(255,107,26,0.7); background: rgba(255,107,26,0.04); }
.ext-row:has(.st-paused)  { border-left-color: rgba(255,181,71,0.85); background: rgba(255,181,71,0.08); }
.ext-row:has(.st-offline) { opacity: .65; }
@keyframes blink { 50%{opacity:0.3} }
.ext-info { display: flex; flex-direction: column; min-width: 0; }
.ext-line1 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ext-num  { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.ext-name { color: var(--text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-line2 { font-size: 10px; color: var(--text-2); margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.ext-call-lines { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.ext-call-peer { font-size: 11px; color: var(--text-0); display: flex; align-items: center; gap: 4px; min-width: 0; }
.ext-call-action { color: var(--text-2); flex-shrink: 0; }
.ext-call-num { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classic-line .call-direction { margin-right: 4px; }
.ext-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-1); text-align: right; }
.ext-time .since { font-size: 9px; color: var(--text-2); display: block; }

/* ── Badges ── */
.badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-gray   { background: var(--bg-3);      color: var(--text-1); }
.badge-source { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; opacity: .85; }
.badge-source-redis { background: rgba(79,155,255,0.12); color: var(--blue); }
.badge-source-mysql { background: rgba(255,181,71,0.10); color: var(--yellow); }
.badge-source-redis_event { background: rgba(45,212,167,0.10); color: var(--green); }

/* ── Calls table ── */
.table-wrap { overflow: auto; height: 100%; }
table.calls { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
table.calls thead th { position: sticky; top: 0; background: var(--bg-1); border-bottom: 1px solid var(--line); text-align: left; padding: 8px 12px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); font-weight: 700; z-index: 1; }
table.calls tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.calls tbody tr:hover { background: var(--bg-2); }
.call-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.call-party { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; max-width: 100%; min-width: 0; }
.call-party-name { font-weight: 700; color: var(--text); font-family: inherit; }
.call-party-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.9em; color: var(--text-2); }
.call-mobile-main .call-party { min-width: 0; }
.call-direction { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; margin-right: 6px; }
.dir-in  { background: var(--green-bg); color: var(--green); }
.dir-out { background: var(--blue-bg);  color: var(--blue); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.action-btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1); padding: 4px 8px; border-radius: 4px; font-family: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.action-btn:hover { background: var(--bg-3); color: var(--text-0); border-color: var(--line-2); }
.action-btn.danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.action-btn.primary { background: var(--accent); color: #0a0c10; border-color: var(--accent); }
.action-btn.primary:hover { background: #ff8c42; }
.calls-mobile-list { display: none; }
/* Botões dentro do card Classic */
.classic-card-actions { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 8px 4px; border-top: 1px solid rgba(255,255,255,0.07); }
.classic-card.st-talking .classic-card-actions { border-top-color: rgba(255,255,255,0.1); }
.ca-btn { font-size: 9px; padding: 3px 6px; }
/* Múltiplas chamadas / peer / duração no card */
.cl-card-multi { font-size: 9px; font-weight: 800; background: var(--accent); color: #0a0c10; border-radius: 3px; padding: 1px 4px; margin-left: auto; }
.cl-card-peer  { font-size: 12px; color: inherit; font-family: inherit; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-card-dur   { font-size: 11px; color: rgba(35,64,42,0.78); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-weight: 700; margin-left: auto; min-width: 46px; text-align: right; flex-shrink: 0; }
.live-dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 6px var(--green); animation: pulse 1.5s infinite; }

/* ── Queues (modern) ── */
.queues { border-top: 1px solid var(--line); background: var(--bg-1); padding: 12px 16px; }
.queues-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.queue-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab; touch-action: none; user-select: none; }
.queue-card.dragging { opacity: .55; border-color: var(--accent); cursor: grabbing; }
.queue-members { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.queue-callers { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.queue-callers-title { font-size: 10px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.queue-caller-row { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 0; color: var(--text-1); }
.queue-caller-pos { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-2); min-width: 14px; text-align: right; }
.queue-caller-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-0); }
.queue-caller-name { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-caller-wait { color: var(--red); margin-left: auto; font-weight: 600; }
.queue-member-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }
.queue-member-acts { display: flex; gap: 4px; flex-shrink: 0; }
.queue-actions { margin-top: 4px; }
.classic-member { display: flex; align-items: center; gap: 6px; }
.classic-member-acts { margin-left: auto; display: flex; gap: 4px; }
.classic-member-acts .action-btn { padding: 2px 6px; }
.queues-grid.queue-drag-active { outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 4px; }
.queue-name { font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.queue-ext { font-family: 'JetBrains Mono', monospace; color: var(--accent); margin-left: 4px; }
.queue-stats { display: flex; gap: 12px; font-family: 'JetBrains Mono', monospace; }
.qstat { display: flex; flex-direction: column; }
.qstat .v { font-size: 16px; font-weight: 600; line-height: 1; }
.qstat .l { font-size: 9px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.qbar { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.qbar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #ff8c42); transition: width 0.3s; }

/* ── Right tabs ── */
.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.tab { flex: 1; background: transparent; border: none; color: var(--text-2); padding: 10px 8px; font-family: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover:not(.active) { color: var(--text-0); }
.tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.tab-panel.active { display: flex; }

/* ── Events log ── */
.event-row { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 11px; display: grid; grid-template-columns: 60px 70px 1fr; gap: 8px; align-items: baseline; }
.event-time { color: var(--text-2); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.event-type { font-size: 9px; text-transform: uppercase; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-align: center; }
.ev-call  { background: var(--green-bg); color: var(--green); }
.ev-queue { background: var(--blue-bg);  color: var(--blue); }
.ev-end   { background: var(--red-bg);   color: var(--red); }
.ev-info  { background: var(--bg-3);     color: var(--text-1); }
.ev-ws    { background: rgba(167,139,250,0.12); color: var(--purple); }
.ev-debug { background: rgba(255,181,71,0.10); color: var(--yellow); }
.event-msg { color: var(--text-1); font-size: 11px; }
.event-msg b { color: var(--text-0); font-family: 'JetBrains Mono', monospace; }
.event-msg .mono { white-space: pre-wrap; word-break: break-word; }
.debug-section-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.debug-snapshot-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.debug-snapshot-row { display: grid; grid-template-columns: 54px 58px 1fr; gap: 8px; align-items: center; padding: 6px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; font-size: 10px; color: var(--text-1); }
.debug-snapshot-row .debug-ext { color: var(--text-0); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.debug-snapshot-row .debug-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   LAYOUT: CLASSIC — cards de ramal
══════════════════════════════════════════════════════════ */

/* Cards de ramal */
.classic-card { width: 238px; min-height: 76px; border-radius: 4px; padding: 6px 8px; cursor: pointer; border: 1px solid rgba(0,0,0,0.18); transition: filter .15s, transform .1s; user-select: none; display: flex; flex-direction: column; gap: 4px; overflow: hidden; box-shadow: inset 0 1px rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.25); color: #24402b; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.classic-card:hover { filter: brightness(1.08); transform: translateY(-1px); }
.classic-card:active { transform: translateY(0); }
.classic-card.selected { outline: 3px solid rgba(79,155,255,0.85); outline-offset: 1px; box-shadow: inset 0 1px rgba(255,255,255,0.45), 0 0 0 1px rgba(0,0,0,0.25), 0 0 12px rgba(79,155,255,0.85); }
.classic-card.st-idle    { background: linear-gradient(#cbfacb, #bdf2bd); border-color: #86c88b; color: #224428; }
.classic-card.st-talking { background: linear-gradient(#ffc98f, #f5b36d); border-color: #c78948; color: #5b3514; animation: talking-glow 2s ease-in-out infinite; }
.classic-card.st-queue   { background: linear-gradient(#d7ccff, #bdaeff); border-color: #8d77d1; color: #33235f; }
.classic-card.st-dialing { background: linear-gradient(#bddcff, #9fc7f5); border-color: #6d9cca; color: #173a5f; }
.classic-card.st-ringing { background: linear-gradient(#ffc98f, #f5b36d); border-color: #c78948; color: #5b3514; animation: blink .8s infinite; }
.classic-card.st-hold    { background: linear-gradient(#ffd9a8, #f2b86e); border-color: #c78948; color: #5b3514; animation: blink 2s infinite; }
.classic-card.st-paused  { background: linear-gradient(#ffe8a3, #f5d56d); border-color: #c9a84a; color: #5b4a14; }
.classic-card.st-offline { background: linear-gradient(#d4ddd4, #c5cec5); border-color: #9da79d; color: #667066; opacity: .55; }
@keyframes talking-glow { 0%,100%{box-shadow:inset 0 1px rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.25)} 50%{box-shadow:inset 0 1px rgba(255,255,255,0.45), 0 0 9px rgba(245,179,109,0.95)} }

.classic-card-head { display: flex; align-items: center; gap: 5px; overflow: hidden; min-height: 18px; border-bottom: 1px dotted rgba(0,0,0,0.12); padding-bottom: 2px; }
.classic-status-dot { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.22); background: #62bd65; box-shadow: inset 0 1px rgba(255,255,255,0.55); }
.classic-card.st-ringing .classic-status-dot,
.classic-card.st-queue .classic-status-dot,
.classic-card.st-dialing .classic-status-dot,
.classic-card.st-talking .classic-status-dot,
.classic-card.st-hold .classic-status-dot,
.classic-card.st-paused .classic-status-dot { background: #f0a24c; }
.classic-card.st-queue .classic-status-dot { background: #8d77d1; }
.classic-card.st-dialing .classic-status-dot { background: #4f9bff; }
.classic-card.st-paused .classic-status-dot { background: #e0b000; }
.classic-card.st-offline .classic-status-dot { background: #a3aaa3; }
.classic-card-num  { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.classic-card-name { font-size: 12px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .96; min-width: 0; }
.classic-card .badge-source { display: none; }
.classic-card-lines { display: flex; flex-direction: column; gap: 2px; color: rgba(35,64,42,0.72); }
.classic-line { font-size: 12px; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; border-bottom: 1px dotted rgba(0,0,0,0.10); line-height: 18px; }
.classic-line:last-child { border-bottom: none; }
.classic-line.active { color: inherit; font-weight: 700; }
.classic-line.inactive { opacity: .78; }
.classic-line-icon { font-size: 11px; width: 12px; text-align: center; opacity: .65; }
.classic-line-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-call-badge { margin-left: auto; max-width: 82px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; border: 1px solid rgba(0,0,0,0.2); border-radius: 3px; padding: 1px 4px; background: rgba(255,255,255,0.34); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.cl-call-box { display: none; }
.cl-call-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.cl-call-number { max-width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filas dentro da janela clássica */
.classic-queue-block { margin: 8px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg-1); cursor: grab; touch-action: none; user-select: none; }
.classic-queue-block + .classic-queue-block { margin-top: 10px; }
.classic-queue-block.dragging { opacity: .55; border-color: var(--accent); cursor: grabbing; }
.classic-win-body.queue-drag-active { outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -4px; }
.classic-queue-block-head { padding: 10px 14px; background: var(--bg-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.classic-queue-block-title { font-size: 13px; font-weight: 800; color: var(--text-0); }
.classic-queue-ext { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); margin-left: 6px; }
.classic-queue-block-badge { font-size: 12px; font-family: 'JetBrains Mono', monospace; background: var(--bg-3); color: var(--text-1); padding: 2px 8px; border-radius: 4px; }
.cqb-badge.cqb-waiting { background: rgba(255,60,60,0.15); color: var(--red); border: 1px solid rgba(255,60,60,0.3); border-radius: 4px; padding: 1px 8px; font-size: 12px; }
.cqb-stats { display: flex; gap: 12px; padding: 4px 14px 2px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-2); }
.classic-queue-members { padding: 4px 0; border-top: 1px solid var(--line); }
/* Callers aguardando na fila */
.cqb-callers { border-top: 1px solid var(--line); padding: 4px 0 6px; }
.cqb-callers-title { padding: 4px 14px 2px; font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.cqb-caller { display: flex; align-items: center; gap: 8px; padding: 4px 14px; font-size: 12px; color: var(--text-1); }
.cqb-caller:hover { background: var(--bg-2); }
.cqb-caller-pos  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-2); min-width: 16px; text-align: right; }
.cqb-caller-num  { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-0); }
.cqb-caller-name { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cqb-caller-wait { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--red); margin-left: auto; }
.classic-member { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 13px; color: var(--text-1); }
.classic-member:hover { background: var(--bg-2); }
.classic-member-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cm-idle    { background: var(--green); }
.cm-busy    { background: var(--red); box-shadow: 0 0 5px var(--red); }
.cm-paused  { background: var(--yellow); }
.cm-offline { background: var(--text-2); }
.classic-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-empty { padding: 12px 14px; font-size: 12px; color: var(--text-2); font-style: italic; }

/* ══════════════════════════════════════════════════════════
   ACTION MODAL (XFER / confirmações)
══════════════════════════════════════════════════════════ */
.fop-modal-bg { position: fixed; inset: 0; background: rgba(10,12,16,0.82); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.fop-modal { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; min-width: 320px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.fop-modal h3 { font-size: 15px; font-weight: 800; margin: 0; }
.fop-modal .fop-modal-sub { font-size: 12px; color: var(--text-2); margin-top: -10px; }
.fop-modal-row { display: flex; gap: 8px; }
.fop-modal-row input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; }
.fop-modal-row input:focus { border-color: var(--accent); }
.fop-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.fop-modal-actions button { padding: 8px 18px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-1); }
.fop-modal-actions .btn-confirm { background: var(--accent); color: #0a0c10; border-color: var(--accent); }
.fop-modal-actions .btn-confirm:hover { opacity: 0.88; }
.fop-modal-actions button:hover { background: var(--bg-3); }
/* Meu ramal badge no header */
.my-ext-btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); padding: 3px 10px; border-radius: 20px; font-size: 11px; cursor: pointer; font-family: inherit; }
.my-ext-btn:hover { border-color: var(--accent); color: var(--text-0); }
/* Feedback de ação */
@keyframes fop-flash { 0%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
.action-toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 9px; padding: 12px 18px; font-size: 12px; z-index: 9999; pointer-events: none; animation: fop-flash 3s ease forwards; }
.action-toast.ok  { border-color: var(--green); color: var(--green); }
.action-toast.err { border-color: var(--red);   color: var(--red); }

/* ══════════════════════════════════════════════════════════
   LOGIN OVERLAY
══════════════════════════════════════════════════════════ */
.login-overlay { position: fixed; inset: 0; background: rgba(10,12,16,0.97); display: flex; align-items: center; justify-content: center; z-index: 9999; }
body.light .login-overlay { background: rgba(238,241,245,0.97); }
.login-box { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 32px; width: 360px; display: flex; flex-direction: column; gap: 20px; }
.login-box h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.login-field input { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-0); padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; }
.login-field input:focus { border-color: var(--accent); }
.login-btn { background: linear-gradient(135deg, var(--accent), #ff8c42); color: #0a0c10; border: none; padding: 12px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.login-btn:hover { opacity: 0.9; }
.login-error { color: var(--red); font-size: 12px; text-align: center; min-height: 18px; }

/* ══════════════════════════════════════════════════════════
   STATUS BAR
══════════════════════════════════════════════════════════ */
.statusbar { background: var(--bg-1); border-top: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px; gap: 18px; font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.statusbar .mono { color: var(--text-1); text-transform: none; letter-spacing: 0; }
.statusbar .sep { color: var(--line-2); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .main-modern { grid-template-columns: minmax(260px, 32vw) 5px minmax(0,1fr); }
  .main-modern.no-right { grid-template-columns: minmax(260px, 32vw) 5px minmax(0,1fr); }
  #rhRight, #colRight { display: none !important; }
  .metrics { grid-template-columns: repeat(3,1fr); }
  .metric:nth-child(3n) { border-right: none; }
  .queues-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  html, body { min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  body { min-height: 100dvh; grid-template-rows: auto auto auto; }
  .topbar { align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .brand { min-height: 28px; flex-shrink: 0; }
  .brand-logo { width: 78px; }
  .brand-sub { display: none; }
  .topbar-right { margin-left: auto; flex: 1 1 240px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .tb-btn, .my-ext-btn, .conn-indicator { min-height: 30px; padding: 4px 8px; }
  .user-chip { margin-left: auto; max-width: 100%; }

  .snapshot-loading { inset: 0; padding: 16px; }
  .main-modern,
  .main-modern.no-right {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .main-modern.modern-windows {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .main-modern.modern-windows .m-workspace {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: auto;
    min-height: 0 !important;
    overflow: visible;
    padding: 0;
  }
  .main-modern.modern-windows .m-win {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    z-index: auto !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .main-modern.modern-windows .m-win-header,
  .main-modern.modern-windows .m-win-resize {
    display: none !important;
  }
  .main-modern.modern-windows .m-win-body {
    display: block;
    min-height: 0;
    overflow: visible;
  }
  .main-modern.modern-windows .m-win-body > .col,
  .main-modern.modern-windows .m-win-body > .table-wrap,
  .main-modern.modern-windows .m-win-body > .queues,
  .main-modern.modern-windows .m-win-body > #colRight {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #mwin-metrics { order: 1; }
  #mwin-calls { order: 2; }
  #mwin-extensions { order: 3; }
  #mwin-queues { order: 4; display: block !important; }
  #mwin-debug {
    display: none !important;
  }
  .main-modern.modern-windows #mwin-queues .queues {
    display: block;
    width: auto;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    margin: 8px 10px 14px;
    background: var(--bg-1);
  }
  .main-modern.modern-windows #mwin-queues .queues-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .main-modern.modern-windows #mwin-queues .queue-card,
  .classic-queue-block {
    cursor: default;
    touch-action: auto;
  }
  .main-modern.modern-windows #mwin-calls .table-wrap {
    width: auto;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    margin: 8px 10px 10px;
  }
  .main-modern.modern-windows #mwin-extensions #colLeft {
    border-top: 1px solid var(--line) !important;
  }
  .resize-handle, #colRight, #rhRight { display: none !important; }
  #colLeft, #colCenter, #colRight { width: 100% !important; border-right: none !important; }
  #colLeft { order: 2; min-height: 0; border-top: 1px solid var(--line); border-bottom: none; overflow: visible; }
  #colLeft .panel-body { min-height: 0; overflow: visible; }
  .center { order: 1; display: flex; flex-direction: column; overflow: visible; background: var(--bg-0); }
  .metrics { order: 1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 10px; background: var(--bg-0); border-bottom: 1px solid var(--line); }
  .metric { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); gap: 5px; }
  .metric:nth-child(n) { border-right: 1px solid var(--line); }
  .metric-label { font-size: 8px; letter-spacing: .09em; }
  .metric-value { font-size: 18px; }
  .table-wrap {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 8px 10px 10px;
    background: var(--bg-1);
  }
  .table-wrap .panel-head {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    border-radius: 10px 10px 0 0;
  }
  table.calls { display: none; }
  .calls-mobile-list { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
  .call-mobile-empty { border: 1px dashed var(--line); border-radius: 8px; padding: 14px 12px; color: var(--text-2); font-size: 12px; text-align: center; background: var(--bg-2); }
  .call-mobile-card { flex: 0 0 auto; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg-2); display: flex; flex-direction: column; gap: 7px; }
  .call-mobile-line { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
  .call-mobile-main { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 170px; overflow: hidden; white-space: nowrap; }
  .call-mobile-main .call-num { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .call-mobile-arrow { color: var(--text-2); }
  .call-mobile-status { white-space: nowrap; margin-left: auto; }
  .call-mobile-duration { min-width: 44px; text-align: right; color: var(--text-1); font-size: 11px; margin-left: auto; }
  .queues { display: none; }
  .main-modern.modern-windows #mwin-queues .queues { display: block; }
  .queues-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event-row { grid-template-columns: 54px 64px minmax(0,1fr); }

  body.classic { height: auto; min-height: 100dvh; overflow-y: auto; }
  body.classic .main-classic { height: auto; min-height: calc(100dvh - 72px); overflow: visible; }
  .cl-toolbar { flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 10px; }
  .cl-toolbar input { flex: 1 1 220px; min-width: 0; }
  .cl-actions { flex-wrap: wrap; margin-left: 0; }
  .cl-selected { width: 100%; margin-left: 0; }
  body.classic .cl-workspace { flex: 0 0 auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 18px; }
  .cl-win {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    z-index: auto !important;
  }
  .cl-win.cl-win-maximized {
    border-radius: 3px !important;
  }
  .cl-win-header {
    cursor: default;
  }
  .cl-win-body {
    overflow: visible;
  }
  .cl-win-resize {
    display: none !important;
  }
  .cl-win-ext-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 8px;
  }
  .classic-card {
    width: 100%;
  }

  .statusbar { flex-wrap: nowrap; min-height: 28px; padding: 0 10px; gap: 8px; overflow: hidden; white-space: nowrap; }
  .statusbar .sep { display: none; }
}

@media (max-width: 640px) {
  .topbar { gap: 7px; }
  .topbar-right { flex-basis: 100%; justify-content: flex-start; gap: 6px; }
  .tb-btn, .my-ext-btn { padding: 4px 7px; border-radius: 7px; font-size: 10px; }
  #btnDebug { display: none !important; }
  .conn-indicator { padding: 5px 7px; font-size: 10px; }
  .user-meta { display: none; }
  .user-chip { padding: 4px; margin-left: auto; }

  .panel-head { padding: 9px 10px; }
  .ext-search { padding: 8px 10px; }
  .ext-sortbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
  .ext-sort-field { align-items: center; flex: 1; min-width: 0; }
  .ext-sort-field > span { display: none; }
  .ext-sort-field select { width: 100%; min-width: 0; padding: 6px 8px; }
  .ext-sort-check { flex-shrink: 0; font-size: 10px; }
  .ext-row { grid-template-columns: 5px minmax(0,1fr) auto; padding: 8px 10px; gap: 8px; }
  .ext-time { font-size: 10px; }
  .ext-line2 .badge-source { display: none; }

  .metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 8px; }
  .metric { padding: 8px; }
  .metric-value { font-size: 18px; }
  .row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .queues-grid { grid-template-columns: 1fr; }
  .queue-stats { justify-content: space-between; gap: 8px; }

  .fop-modal { width: calc(100vw - 28px); min-width: 0; padding: 22px; }
  .login-box { width: calc(100vw - 28px); padding: 24px; }
  .action-toast { left: 12px; right: 12px; bottom: 42px; text-align: center; }

  .cl-win-ext-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .classic-card { width: 100%; }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-2); }