/* css/cti-live.css
   CTI Live - ren konfliktfri version 2026-06-20
   Ersatt hela gamla filen med denna for test.
   Inga gamla steg-block, ingen zoom/scale-layout, inga dubbla kompaktregler.
*/

/* =========================================================
   1. BASVARIABLER
   ========================================================= */

.cti-live-work,
.cti-fullscreen-panel {
  --cti-text: #071b3a;
  --cti-muted: #526784;
  --cti-border: #d7e2f3;
  --cti-card-bg: #f8fbff;
  --cti-stage-bg-1: #dff3ff;
  --cti-stage-bg-2: #cfeaff;
  --cti-stage-border: #8fc4e8;

  --cti-stage-min-height: calc(100vh - 500px);
  --cti-stage-grid: 190px minmax(390px, 560px) 250px;
  --cti-stage-gap: 26px;
  --cti-stage-padding: 14px 18px;

  --cti-agent-min: 30px;
  --cti-agent-name: 10px;
  --cti-agent-meta: 8px;

  --cti-customer-min: 48px;
  --cti-customer-main: 13px;
  --cti-customer-small: 8px;

  --cti-center-min: 78px;
  --cti-center-small: 9px;
  --cti-party-name: 12px;
  --cti-party-small: 8px;
}

/* =========================================================
   2. SIDHUVUD OCH KNAPPAR
   ========================================================= */

.cti-live-work {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  color: var(--cti-text);
}

.cti-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cti-live-title h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 950;
}

.cti-live-title .sub,
.cti-live-meta {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
  color: #334b6b;
}

.cti-live-meta { text-align: right; }

.cti-live-actions,
.cti-fullscreen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.cti-fullscreen-btn,
.cti-panel-settings-btn,
.cti-layout-settings-btn,
.cti-fullscreen-close,
.cti-panel-settings-close,
.cti-panel-settings-action,
.cti-call-detail-close {
  height: 32px;
  border: 0;
  border-radius: 11px;
  padding: 0 15px;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.cti-fullscreen-btn { background: #2f7fbd; }
.cti-panel-settings-btn { background: #17345f; }
.cti-layout-settings-btn { background: #475569; }
.cti-fullscreen-close,
.cti-panel-settings-close,
.cti-call-detail-close { background: #dc2626; }
.cti-panel-settings-action { background: #2f7fbd; }

.cti-fullscreen-btn:hover,
.cti-panel-settings-btn:hover,
.cti-layout-settings-btn:hover,
.cti-fullscreen-close:hover,
.cti-panel-settings-close:hover,
.cti-panel-settings-action:hover,
.cti-call-detail-close:hover { filter: brightness(1.06); }

/* =========================================================
   3. STATISTIKKORT
   ========================================================= */

.cti-cards,
.cti-fullscreen-panel .cti-cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(82px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.cti-stat-card {
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid var(--cti-border);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 5px 15px rgba(20,45,90,.10);
}

.cti-stat-card .label {
  font-size: 10px;
  line-height: 1.08;
  font-weight: 950;
  color: #49617f;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cti-stat-card .num {
  margin-top: 4px;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
}

.cti-stat-card.all { background: #dbeafe; border-color: #93c5fd; }
.cti-stat-card.all .num { color: #1d4ed8; }
.cti-stat-card.ok { background: #c8f7d8; border-color: #4ade80; }
.cti-stat-card.ok .num { color: #16a34a; }
.cti-stat-card.bad { background: #ffcaca; border-color: #f87171; }
.cti-stat-card.bad .num { color: #dc2626; }
.cti-stat-card.warn { background: #fff0b8; border-color: #facc15; }
.cti-stat-card.warn .num { color: #d97706; }
.cti-stat-card.dim,
.cti-stat-card.rejected { background: #e5e7eb; border-color: #cbd5e1; }
.cti-stat-card.dim .num,
.cti-stat-card.rejected .num { color: #475569; }
.cti-stat-card.missed { background: #fee2e2; border-color: #991b1b; }
.cti-stat-card.missed .num { color: #991b1b; }

/* =========================================================
   4. GENERELLA PANELER
   ========================================================= */

.cti-main-grid,
.cti-stack,
.cti-adaptive-stack {
  min-height: 0;
}

.cti-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cti-border);
  border-radius: 18px;
  background: var(--cti-card-bg);
  box-shadow: 0 8px 24px rgba(20,45,90,.14);
}

.cti-card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border-bottom: 1px solid var(--cti-border);
  font-weight: 950;
}

.cti-card-titleline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cti-card-titleline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cti-card-sub {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  color: var(--cti-muted);
  text-align: right;
}

.cti-panel-close-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  color: #334155;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cti-panel-close-btn:hover { background: #dc2626; color: #fff; }

.cti-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.cti-empty {
  padding: 14px;
  color: var(--cti-muted);
  font-size: 13px;
  font-weight: 850;
}

.cti-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 70px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: #475569;
  font-size: 11px;
  font-weight: 950;
  text-transform: lowercase;
}

.cti-badge.ok { background: #16a34a; }
.cti-badge.bad { background: #dc2626; }
.cti-badge.warn { background: #d97706; }
.cti-badge.dim { background: #64748b; }
.cti-badge.neutral { background: #475569; }
.cti-badge.missed { background: #991b1b; }
.cti-badge.rejected { background: #111827; }

.cti-info-click,
.cti-call-row { cursor: pointer; }

.cti-info-click:hover,
.cti-call-row:hover {
  filter: brightness(.98);
  outline: 2px solid rgba(37,99,235,.30);
  outline-offset: -2px;
}

/* =========================================================
   5. SAMTAL LIVE - FLYTANDE VAXELYTA
   ========================================================= */

.cti-floating-card {
  min-height: calc(100vh - 430px);
  display: flex;
  flex-direction: column;
}

.cti-live-stage {
  flex: 1 1 auto;
  min-height: var(--cti-stage-min-height);
  height: auto;
  display: grid;
  grid-template-columns: var(--cti-stage-grid);
  gap: var(--cti-stage-gap);
  justify-content: space-between;
  align-items: start;
  padding: var(--cti-stage-padding);
  overflow: hidden;
  background: linear-gradient(135deg, var(--cti-stage-bg-1) 0%, var(--cti-stage-bg-2) 48%, #e7f7ff 100%);
  border: 1px solid var(--cti-stage-border);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 22px rgba(59,130,246,.08), 0 8px 22px rgba(15,59,120,.10);
}

.cti-stage-zone {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.cti-stage-agents { justify-self: start; width: 100%; }
.cti-stage-center { justify-self: center; width: 100%; max-width: 100%; }
.cti-stage-customers { justify-self: end; width: 100%; }

.cti-stage-title {
  flex: 0 0 auto;
  color: #073b75;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cti-stage-title.small { margin-top: 6px; font-size: 8px; }

.cti-stage-agent-list,
.cti-stage-center-list,
.cti-stage-customer-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 5px;
  padding: 2px 5px 8px 2px;
  scrollbar-width: thin;
}

.cti-stage-agent-list::-webkit-scrollbar,
.cti-stage-center-list::-webkit-scrollbar,
.cti-stage-customer-list::-webkit-scrollbar { width: 8px; }

.cti-stage-agent-list::-webkit-scrollbar-thumb,
.cti-stage-center-list::-webkit-scrollbar-thumb,
.cti-stage-customer-list::-webkit-scrollbar-thumb {
  background: rgba(20,60,100,.42);
  border-radius: 8px;
}

.cti-stage-agent-list::-webkit-scrollbar-track,
.cti-stage-center-list::-webkit-scrollbar-track,
.cti-stage-customer-list::-webkit-scrollbar-track { background: rgba(255,255,255,.30); }

.cti-stage-empty {
  min-height: 26px;
  padding: 7px 8px;
  border: 1px dashed rgba(7,59,117,.28);
  border-radius: 9px;
  background: rgba(255,255,255,.45);
  color: #073b75;
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

/* =========================================================
   6. AGENTER
   ========================================================= */

.cti-float-agent {
  width: 100%;
  min-height: var(--cti-agent-min);
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #87afd0;
  border-radius: 7px;
  background: #f7fbff;
  box-shadow: inset 4px 0 0 #64748b, 0 2px 5px rgba(15,59,120,.14);
  color: #061b36;
  cursor: pointer;
}

.cti-float-agent.ok { background: #d7fbe5; border-color: #22a65a; box-shadow: inset 4px 0 0 #15803d, 0 2px 5px rgba(15,59,120,.14); }
.cti-float-agent.warn,
.cti-float-agent.ringing { background: #fff2b8; border-color: #d97706; box-shadow: inset 4px 0 0 #b45309, 0 2px 7px rgba(180,83,9,.18); }
.cti-float-agent.bad { background: #ffdada; border-color: #cc2d2d; box-shadow: inset 4px 0 0 #b91c1c, 0 2px 5px rgba(15,59,120,.14); }

.cti-float-agent-line,
.cti-float-agent-meta,
.cti-float-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.cti-float-agent-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #061b36;
  font-size: var(--cti-agent-name);
  line-height: 1.05;
  font-weight: 950;
}

.cti-float-agent-line span {
  flex: 0 0 auto;
  color: #0f3b78;
  font-size: calc(var(--cti-agent-name) - 2px);
  line-height: 1.05;
  font-weight: 950;
}

.cti-float-agent-meta {
  margin-top: 1px;
  color: #061b36;
  font-size: var(--cti-agent-meta);
  line-height: 1.05;
  font-weight: 850;
}

.cti-float-agent.ok .cti-float-agent-line strong::before { content: "● "; color: #15803d; }
.cti-float-agent.warn .cti-float-agent-line strong::before,
.cti-float-agent.ringing .cti-float-agent-line strong::before { content: "☎ "; color: #b45309; }

/* =========================================================
   7. KUNDER OCH HOGERKORT
   ========================================================= */

.cti-float-customer {
  width: 100%;
  min-height: var(--cti-customer-min);
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid #7faed1;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: inset 4px 0 0 #64748b, 0 2px 6px rgba(15,59,120,.14);
  color: #061b36;
  cursor: pointer;
}

.cti-float-customer.ring,
.cti-float-customer.warn { background: #fff1a8; border-color: #d97706; box-shadow: inset 4px 0 0 #b45309, 0 2px 7px rgba(180,83,9,.18); }
.cti-float-customer.direct,
.cti-float-customer.incoming,
.cti-stage-incoming .cti-float-customer { background: #dbeafe; border-color: #2563eb; box-shadow: inset 4px 0 0 #1d4ed8, 0 2px 7px rgba(37,99,235,.16); }
.cti-float-customer.browse { background: #e9ddff; border-color: #7c3aed; box-shadow: inset 4px 0 0 #6d28d9, 0 2px 7px rgba(124,58,237,.16); }
.cti-float-customer.missed { background: #ffdada; border-color: #dc2626; box-shadow: inset 4px 0 0 #b91c1c, 0 2px 7px rgba(185,28,28,.16); }
.cti-float-customer.rejected { background: #e5e7eb; border-color: #374151; box-shadow: inset 4px 0 0 #111827, 0 2px 7px rgba(17,24,39,.14); }

.cti-float-mini-top {
  color: #061b36;
  font-size: var(--cti-customer-small);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: .03em;
}

.cti-float-mini-main {
  margin-top: 2px;
  color: #061b36;
  font-size: var(--cti-customer-main);
  line-height: 1.05;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cti-float-mini-sub {
  margin-top: 1px;
  color: #061b36;
  font-size: var(--cti-customer-small);
  line-height: 1.05;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cti-stage-events { margin-top: 6px; display: grid; gap: 5px; }
.cti-stage-events .cti-float-customer { min-height: calc(var(--cti-customer-min) - 10px); }

/* =========================================================
   8. MITTENKORT / KOPPLADE SAMTAL
   ========================================================= */

.cti-float-center-card {
  width: 100%;
  min-height: var(--cti-center-min);
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid rgba(15,59,120,.24);
  border-radius: 11px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 3px 8px rgba(15,59,120,.14);
  color: #061b36;
}

.cti-float-center-card.connected,
.cti-float-center-card.ok,
.cti-float-center-card.cti-center-connected-call { background: #c8f7d8; border: 2px solid #16a34a; box-shadow: inset 5px 0 0 #15803d, 0 3px 8px rgba(22,163,74,.18); }

.cti-float-center-card.waiting-agent,
.cti-float-center-card.warn,
.cti-float-center-card.cti-center-waiting-offer { background: #fff1a8; border: 2px solid #d97706; box-shadow: inset 5px 0 0 #b45309, 0 3px 8px rgba(180,83,9,.18); }

.cti-float-center-card.direct { background: #dbeafe; border-color: #2563eb; box-shadow: inset 5px 0 0 #1d4ed8, 0 3px 8px rgba(37,99,235,.16); }
.cti-float-center-card.browse,
.cti-float-center-card.info,
.cti-float-center-card.agent_event { background: #e9ddff; border-color: #7c3aed; box-shadow: inset 5px 0 0 #6d28d9, 0 3px 8px rgba(124,58,237,.16); }
.cti-float-center-card.cti-center-held { opacity: .88; filter: saturate(.92); }

.cti-float-center-head,
.cti-float-center-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #061b36;
  font-size: var(--cti-center-small);
  line-height: 1.08;
  font-weight: 950;
}

.cti-float-center-head { padding-bottom: 3px; border-bottom: 1px solid rgba(15,59,120,.14); }

.cti-float-pair {
  margin-top: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.cti-float-pair-waiting-customer-only { display: flex; justify-content: flex-start; }
.cti-float-pair-waiting-customer-only .cti-float-side-customer { width: 100%; max-width: 360px; }

.cti-float-side {
  min-width: 0;
  min-height: 42px;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(7,59,117,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
  color: #061b36;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.cti-float-side.muted { cursor: default; opacity: .72; }
.cti-float-side-label { color: #061b36; font-size: calc(var(--cti-party-small) - 1px); line-height: 1; font-weight: 950; letter-spacing: .06em; }
.cti-float-side-customer .cti-float-side-label::before { content: "☎ "; }
.cti-float-side-agent .cti-float-side-label::before { content: "👤 "; }

.cti-float-side strong {
  color: #061b36;
  font-size: var(--cti-party-name);
  line-height: 1.05;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cti-float-side span {
  color: #061b36;
  font-size: var(--cti-party-small);
  line-height: 1.05;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cti-float-link { display: flex; align-items: center; justify-content: center; color: #073b75; font-size: 18px; font-weight: 950; }
.cti-float-center-foot { margin-top: 4px; color: #061b36; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cti-stage-center .cti-float-center-card.cti-center-connected-call .cti-float-center-foot { display: none; }

.cti-float-agent,
.cti-float-customer,
.cti-float-center-card,
.cti-float-side,
.cti-call-card,
.live-pulse { animation: none; transform: none; }

.cti-float-agent:hover,
.cti-float-customer:hover,
.cti-float-side:hover,
.cti-float-center-card:hover { filter: contrast(1.04) brightness(1.01); }

/* =========================================================
   9. LAYOUTLAGEN
   ========================================================= */

.cti-layout-compact {
  --cti-stage-min-height: calc(100vh - 430px);
  --cti-stage-grid: 170px minmax(360px, 520px) 220px;
  --cti-stage-gap: 22px;
  --cti-stage-padding: 12px 16px;
  --cti-agent-min: 24px;
  --cti-agent-name: 8.8px;
  --cti-agent-meta: 7px;
  --cti-customer-min: 36px;
  --cti-customer-main: 10.5px;
  --cti-customer-small: 7px;
  --cti-center-min: 58px;
  --cti-center-small: 7.8px;
  --cti-party-name: 9.5px;
  --cti-party-small: 6.8px;
}

.cti-layout-compact .cti-cards { gap: 6px; margin-bottom: 7px; }
.cti-layout-compact .cti-stat-card { min-height: 44px; padding: 6px 9px; border-radius: 12px; }
.cti-layout-compact .cti-stat-card .label { font-size: 9px; }
.cti-layout-compact .cti-stat-card .num { font-size: 21px; }
.cti-layout-compact .cti-card-head { padding: 7px 10px; }
.cti-layout-compact .cti-stage-title { font-size: 8px; }

.cti-layout-calls {
  --cti-stage-grid: 150px minmax(470px, 720px) 210px;
  --cti-stage-gap: 22px;
}

.cti-layout-agents {
  --cti-stage-grid: 260px minmax(360px, 540px) 220px;
}

.cti-layout-agents .cti-float-agent { min-height: 36px; }

.cti-layout-wallboard {
  --cti-stage-min-height: calc(100vh - 450px);
  --cti-stage-grid: 220px minmax(460px, 760px) 280px;
  --cti-stage-gap: 28px;
  --cti-agent-min: 38px;
  --cti-agent-name: 12px;
  --cti-agent-meta: 9px;
  --cti-customer-min: 62px;
  --cti-customer-main: 16px;
  --cti-customer-small: 9px;
  --cti-center-min: 96px;
  --cti-center-small: 10px;
  --cti-party-name: 15px;
  --cti-party-small: 9px;
}

.cti-layout-wallboard .cti-stat-card { min-height: 62px; }
.cti-layout-wallboard .cti-stat-card .num { font-size: 31px; }

/* =========================================================
   10. HELSKARM
   ========================================================= */

.cti-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 8px;
  background: rgba(7,27,58,.62);
}

.cti-fullscreen-panel {
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
  max-width: none;
  max-height: none;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  border: 2px solid rgba(255,255,255,.70);
  border-radius: 18px;
  background: linear-gradient(180deg, #86a5e7 0%, #6f8fd6 100%);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.cti-fullscreen-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.cti-fullscreen-title { font-size: 28px; line-height: 1; font-weight: 950; }
.cti-fullscreen-sub { margin-top: 5px; font-size: 13px; line-height: 1.3; font-weight: 850; color: #17345f; }
.cti-fullscreen-grid { flex: 1 1 auto; min-height: 0; display: block; overflow: hidden; }
.cti-fullscreen-panel .cti-floating-card { min-height: 0; height: 100%; }
.cti-fullscreen-panel .cti-live-stage { --cti-stage-min-height: 0; height: 100%; min-height: 0; }
.cti-fullscreen-panel .cti-cards { flex: 0 0 auto; }

/* =========================================================
   11. MODALER
   ========================================================= */

.cti-panel-settings-overlay,
.cti-call-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7,27,58,.55);
}

.cti-panel-settings-box {
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: #f8fbff;
  color: #071b3a;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.cti-panel-settings-head,
.cti-call-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #d7e2f3;
}

.cti-panel-settings-title { font-size: 18px; line-height: 1.1; font-weight: 950; }
.cti-panel-settings-sub { margin-top: 3px; font-size: 12px; font-weight: 800; color: #526784; }

.cti-panel-settings-list,
.cti-layout-preset-list { display: grid; gap: 9px; padding: 14px 16px 16px; }

.cti-panel-toggle-row,
.cti-layout-preset {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #d7e2f3;
  border-radius: 13px;
  background: #fff;
  color: #071b3a;
  box-shadow: 0 5px 14px rgba(20,45,90,.08);
  cursor: pointer;
}

.cti-panel-toggle-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 900; }
.cti-panel-toggle-row input { width: 18px; height: 18px; accent-color: #2563eb; }
.cti-layout-preset span { display: block; font-size: 15px; font-weight: 950; }
.cti-layout-preset small { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: #526784; }
.cti-layout-preset.active { border-color: #2563eb; background: #dbeafe; box-shadow: inset 5px 0 0 #2563eb, 0 5px 14px rgba(20,45,90,.10); }

.cti-panel-settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #d7e2f3; }

.cti-call-detail {
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px;
  background: #f8fbff;
  color: #071b3a;
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}

.cti-call-detail-top { position: sticky; top: 0; z-index: 2; }
.cti-call-detail-title { font-size: 24px; line-height: 1.05; font-weight: 950; }
.cti-call-detail-sub { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: #334b6b; font-size: 13px; font-weight: 900; }
.cti-call-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.cti-call-detail-section { overflow: hidden; border: 1px solid #d7e2f3; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(20,45,90,.10); }
.cti-call-detail-section-title { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #eaf1ff; border-bottom: 1px solid #d7e2f3; font-size: 14px; font-weight: 950; }
.cti-call-detail-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-bottom: 1px solid #edf2fb; font-size: 13px; }
.cti-call-detail-row:last-child { border-bottom: 0; }
.cti-call-detail-label { color: #526784; font-weight: 900; }
.cti-call-detail-value { color: #071b3a; font-weight: 950; overflow-wrap: anywhere; }
.cti-call-detail-raw { margin: 0 14px 14px; overflow: hidden; border: 1px solid #d7e2f3; border-radius: 14px; background: #fff; }
.cti-call-detail-raw summary { padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 950; background: #f1f5f9; }
.cti-call-detail-raw pre { margin: 0; max-height: 260px; overflow: auto; padding: 12px; background: #0f172a; color: #e5e7eb; font-size: 12px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }

/* =========================================================
   12. TABELLER / LEGACY
   ========================================================= */

.cti-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.cti-table th { position: sticky; top: 0; z-index: 2; padding: 7px; background: #eaf1ff; color: #071b3a; border-bottom: 1px solid #cddaf0; text-align: left; font-size: 11px; font-weight: 950; }
.cti-table td { padding: 7px; border-bottom: 1px solid #e0e7f3; color: #102747; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cti-row-ok { background: #c8f7d8; box-shadow: inset 7px 0 0 #16a34a; }
.cti-row-bad { background: #ffcaca; box-shadow: inset 7px 0 0 #dc2626; }
.cti-row-warn { background: #fff0b8; box-shadow: inset 7px 0 0 #d97706; }
.cti-row-dim { background: #f1f5f9; box-shadow: inset 7px 0 0 #94a3b8; }
.cti-row-missed { background: #fee2e2; box-shadow: inset 7px 0 0 #991b1b; }
.cti-row-rejected { background: #e5e7eb; box-shadow: inset 7px 0 0 #111827; }

/* =========================================================
   13. RESPONSIVT
   ========================================================= */

@media (max-width: 1350px) {
  .cti-cards,
  .cti-fullscreen-panel .cti-cards { grid-template-columns: repeat(4, minmax(88px, 1fr)); }
}

@media (max-width: 900px) {
  .cti-live-work { width: calc(100% - 16px); }
  .cti-live-head,
  .cti-fullscreen-head { flex-direction: column; gap: 8px; }
  .cti-live-meta { text-align: left; }
  .cti-live-stage { display: flex; flex-direction: column; min-height: 0; height: auto; overflow: visible; }
  .cti-stage-agents,
  .cti-stage-center,
  .cti-stage-customers { width: 100%; }
  .cti-stage-center { order: 1; }
  .cti-stage-customers { order: 2; }
  .cti-stage-agents { order: 3; }
  .cti-stage-agent-list,
  .cti-stage-center-list,
  .cti-stage-customer-list { max-height: 260px; }
  .cti-call-detail-grid { grid-template-columns: 1fr; }
  .cti-call-detail-row { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 700px) {
  .cti-fullscreen-overlay { padding: 0; background: #7896df; }
  .cti-fullscreen-panel {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 16px) 8px;
    overflow-y: auto;
  }
  .cti-fullscreen-title { font-size: 20px; }
  .cti-fullscreen-sub { font-size: 10.5px; }
  .cti-fullscreen-panel .cti-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .cti-fullscreen-panel .cti-stat-card { min-height: 48px; padding: 6px; }
  .cti-fullscreen-panel .cti-stat-card .label { font-size: 8px; }
  .cti-fullscreen-panel .cti-stat-card .num { font-size: 19px; }
  .cti-fullscreen-panel .cti-live-stage { height: auto; min-height: 0; overflow: visible; }
  .cti-fullscreen-panel .cti-stage-agent-list { max-height: 240px; }
  .cti-fullscreen-panel .cti-stage-customer-list { max-height: 180px; }
  .cti-mobile-live-only-btn { display: inline-flex; align-items: center; justify-content: center; }
}

.cti-mobile-live-only-btn {
  display: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #0f5f9f;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.cti-mobile-live-only-btn.active { background: #176b2c; }

/* cti_waiting_offer_yellow_final_20260620
   Kund har valt/erbjuds agent = gul/orange väntstatus.
   Grön används bara för kopplat/pratar. */
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-stage-center .cti-float-center-card.waiting-agent,
.cti-stage-center .cti-float-center-card.browse {
  background: #fff1b8 !important;
  border: 2px solid #d89a00 !important;
  color: #5c3b00 !important;
  box-shadow: inset 6px 0 0 #d97706, 0 4px 12px rgba(120, 70, 0, 0.16) !important;
}

.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-stage-center .cti-float-center-card.browse .cti-float-side {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(216, 154, 0, 0.45) !important;
}

.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-center-head,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-center-head,
.cti-stage-center .cti-float-center-card.browse .cti-float-center-head,
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-mini-top,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-mini-top,
.cti-stage-center .cti-float-center-card.browse .cti-float-mini-top {
  color: #5c3b00 !important;
}

/* Lila får inte slå igenom på väntande agentval. */
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer.direct,
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer.browse,
.cti-stage-center .cti-float-center-card.waiting-agent.direct,
.cti-stage-center .cti-float-center-card.waiting-agent.browse {
  background: #fff1b8 !important;
  border-color: #d89a00 !important;
  box-shadow: inset 6px 0 0 #d97706, 0 4px 12px rgba(120, 70, 0, 0.16) !important;
}
/* Väntande/gula kort i kompakt ska också vara mindre. */
.cti-layout-compact .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-float-center-card.browse {
  padding: 5px 7px !important;
}

/* Listor ska kunna visa fler rader men scrolla vid behov. */
.cti-layout-compact .cti-stage-agent-list,
.cti-layout-compact .cti-stage-center-list,
.cti-layout-compact .cti-stage-customer-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 5px !important;
}


/* cti_compact_true_small_20260620
   Kompaktläge: mindre på riktigt genom smalare kolumner och kort.
   Normal påverkas inte. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 165px minmax(380px, 560px) 230px !important;
  gap: 10px !important;
  align-items: start !important;
}

.cti-layout-compact .cti-stage-zone {
  min-width: 0 !important;
}

.cti-layout-compact .cti-stage-center {
  max-width: 560px !important;
}

.cti-layout-compact .cti-stage-agents {
  max-width: 165px !important;
}

.cti-layout-compact .cti-stage-customers {
  max-width: 230px !important;
}

.cti-layout-compact .cti-stage-title {
  font-size: 9px !important;
  margin-bottom: 4px !important;
  letter-spacing: .04em !important;
}

/* Agentkort vänster */
.cti-layout-compact .cti-float-agent {
  min-height: 26px !important;
  padding: 2px 5px !important;
  margin-bottom: 3px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-agent strong {
  font-size: 11px !important;
  line-height: 1 !important;
  max-width: 105px !important;
}

.cti-layout-compact .cti-float-agent-meta,
.cti-layout-compact .cti-float-agent span {
  font-size: 7px !important;
  line-height: 1 !important;
}

/* Kundkort höger */
.cti-layout-compact .cti-float-customer {
  min-height: 32px !important;
  padding: 3px 5px !important;
  margin-bottom: 4px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  line-height: 1.02 !important;
}

.cti-layout-compact .cti-float-mini-main {
  font-size: 13px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-mini-top,
.cti-layout-compact .cti-float-mini-sub {
  font-size: 7px !important;
  line-height: 1 !important;
}

/* Mittenkort */
.cti-layout-compact .cti-float-center-card {
  max-width: 560px !important;
  width: 100% !important;
  padding: 4px 6px !important;
  margin-bottom: 5px !important;
  border-radius: 8px !important;
  font-size: 8px !important;
  line-height: 1.02 !important;
}

.cti-layout-compact .cti-float-center-head,
.cti-layout-compact .cti-float-center-foot {
  font-size: 7px !important;
  line-height: 1 !important;
  padding: 1px 2px !important;
  margin-bottom: 2px !important;
}

/* Agent + kund inne i gröna/gula mittenkort */
.cti-layout-compact .cti-float-pair,
.cti-layout-compact .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) !important;
  gap: 4px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-float-side {
  min-height: 42px !important;
  padding: 3px 5px !important;
  border-radius: 6px !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-side-label {
  font-size: 7px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-side strong {
  font-size: 12px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-float-side span {
  font-size: 7px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-float-link {
  width: 14px !important;
  font-size: 11px !important;
}

/* Gula väntkort i kompakt ska inte bli stora fullbreddskort. */
.cti-layout-compact .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-float-center-card.browse {
  max-width: 560px !important;
  padding: 4px 6px !important;
}

/* Scroll finns bara i listorna vid behov. */
.cti-layout-compact .cti-stage-agent-list,
.cti-layout-compact .cti-stage-center-list,
.cti-layout-compact .cti-stage-customer-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}
/* cti_compact_center_smaller_final_20260620
   Kompaktläge: mittenkolumnen ska vara tydligt mindre men fortfarande läsbar. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 165px minmax(330px, 470px) 230px !important;
  gap: 10px !important;
}

.cti-layout-compact .cti-stage-center {
  max-width: 470px !important;
}

.cti-layout-compact .cti-stage-center-list {
  max-width: 470px !important;
}

/* Själva gröna/gula mittenkorten */
.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 470px !important;
  width: 100% !important;
  padding: 3px 5px !important;
  margin-bottom: 4px !important;
  border-radius: 7px !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}

/* Rubrik och fot i mittenkort */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 6.8px !important;
  line-height: 1 !important;
  padding: 1px 2px !important;
  margin-bottom: 1px !important;
}

/* Agent/kund-rutorna inne i mittenkort */
.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 34px !important;
  padding: 2px 4px !important;
  border-radius: 5px !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 6.5px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 10.5px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 6.8px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Länkpilen mellan agent och kund */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) !important;
  gap: 3px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 12px !important;
  font-size: 10px !important;
}

/* Gula väntkort ska också hålla kompakt bredd/höjd */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 470px !important;
  padding: 3px 5px !important;
}

/* Texten i väntkortets stora kundruta */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 38px !important;
}

/* cti_super_compact_final_20260620
   Kompakt ska vara mycket mindre än normal.
   Gäller både vanlig vy och helskärm. Normal påverkas inte. */

/* Hela kompakt-grid: smalare kolumner och ingen horisontell scroll. */
.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage,
.cti-layout-compact .cti-fullscreen-panel .cti-live-stage {
  grid-template-columns: 145px minmax(300px, 390px) 190px !important;
  gap: 8px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

/* Kolumner */
.cti-layout-compact .cti-stage-agents {
  max-width: 145px !important;
}

.cti-layout-compact .cti-stage-center {
  max-width: 390px !important;
}

.cti-layout-compact .cti-stage-center-list {
  max-width: 390px !important;
}

.cti-layout-compact .cti-stage-customers {
  max-width: 190px !important;
}

.cti-layout-compact .cti-stage-title {
  font-size: 8px !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
  letter-spacing: .03em !important;
}

/* Vänster agentkort */
.cti-layout-compact .cti-float-agent {
  min-height: 22px !important;
  padding: 2px 4px !important;
  margin-bottom: 2px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-agent strong {
  font-size: 9px !important;
  line-height: 1 !important;
  max-width: 92px !important;
}

.cti-layout-compact .cti-float-agent-meta,
.cti-layout-compact .cti-float-agent span {
  font-size: 6px !important;
  line-height: 1 !important;
}

/* Höger kundkort */
.cti-layout-compact .cti-float-customer {
  min-height: 26px !important;
  padding: 2px 4px !important;
  margin-bottom: 3px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-mini-main {
  font-size: 10px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-mini-top,
.cti-layout-compact .cti-float-mini-sub {
  font-size: 6px !important;
  line-height: 1 !important;
}

/* Mittenkort: detta är huvuddelen som var för stor. */
.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 390px !important;
  width: 100% !important;
  padding: 2px 4px !important;
  margin-bottom: 3px !important;
  border-radius: 6px !important;
  font-size: 6.5px !important;
  line-height: 1 !important;
}

/* Rubrik/fot i mittenkort */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 6px !important;
  line-height: 1 !important;
  padding: 0 2px !important;
  margin-bottom: 1px !important;
}

/* Agent/kund-rutorna inne i mittenkort */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) !important;
  gap: 3px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 28px !important;
  padding: 2px 3px !important;
  border-radius: 5px !important;
  font-size: 6px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 5.8px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 9px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 5.8px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 10px !important;
  font-size: 9px !important;
}

/* Gula väntkort också små i kompakt */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 390px !important;
  padding: 2px 4px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 30px !important;
}

/* Helskärm/kompakt ska inte få horisontell scroll. */
.cti-fullscreen-panel.cti-layout-compact,
.cti-layout-compact .cti-fullscreen-panel {
  overflow-x: hidden !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-floating-card,
.cti-layout-compact .cti-fullscreen-panel .cti-floating-card {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Scroll bara i listorna när det behövs. */
.cti-layout-compact .cti-stage-agent-list,
.cti-layout-compact .cti-stage-center-list,
.cti-layout-compact .cti-stage-customer-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
}
/* Smalare mitt, men lämna övriga kolumner rimliga. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(260px, 340px) 190px !important;
  gap: 9px !important;
  align-items: start !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 340px !important;
}

/* Mittenkort: smalare, lite högre, texten får andas. */
.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 340px !important;
  width: 100% !important;
  padding: 4px 5px !important;
  margin-bottom: 6px !important;
  border-radius: 7px !important;
  font-size: 7px !important;
  line-height: 1.08 !important;
}

/* Rubrik/fot ska vara liten men läsbar. */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 6.5px !important;
  line-height: 1.05 !important;
  padding: 1px 2px !important;
  margin-bottom: 2px !important;
}

/* I kompakt kör vi agent/kund i två smalare kolumner. */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) !important;
  gap: 3px !important;
  align-items: stretch !important;
}

/* Agent-/kundruta inne i kort: inte för låg, annars kapas text. */
.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 48px !important;
  padding: 3px 4px !important;
  border-radius: 5px !important;
  font-size: 6.7px !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
}

/* Rubriken AGENT/KUND. */
.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 6px !important;
  line-height: 1 !important;
}

/* Namn/nummer: tydligt men inte jättestort. */
.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 9.5px !important;
  line-height: 1.04 !important;
  margin: 1px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Detaljrader får visas på flera korta rader. */
.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 6.5px !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Pilen mellan agent och kund. */
.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 10px !important;
  font-size: 9px !important;
}

/* Väntar/erbjuds-agent-kort: smalare men högre så kundinfo får plats. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 340px !important;
  padding: 4px 5px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 58px !important;
}

/* Höger kundkort i kompakt får vara smalt men text ska inte försvinna helt. */
.cti-layout-compact .cti-stage-customers {
  max-width: 190px !important;
}

.cti-layout-compact .cti-float-customer {
  min-height: 34px !important;
  padding: 3px 5px !important;
}

.cti-layout-compact .cti-float-mini-main {
  font-size: 11px !important;
  line-height: 1.04 !important;
}

.cti-layout-compact .cti-float-mini-sub,
.cti-layout-compact .cti-float-mini-top {
  font-size: 6.5px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Ingen horisontell scroll i kompakt. */
.cti-layout-compact .cti-live-stage,
.cti-layout-compact .cti-stage-zone,
.cti-layout-compact .cti-stage-center-list {
  overflow-x: hidden !important;
}


/* cti_compact_wide_thin_center_20260620
   Kompaktläge: korten ska vara breda horisontellt men tunna vertikalt.
   Målet är fler samtal på höjden utan att texten kapas. */

/* Kompakt-grid: mitten får mer bredd, korten blir låga. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(520px, 680px) 210px !important;
  gap: 10px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-layout-compact .cti-stage-agents {
  max-width: 145px !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 680px !important;
}

.cti-layout-compact .cti-stage-customers {
  max-width: 210px !important;
}

/* Mittenkort: breda och tunna. */
.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 680px !important;
  width: 100% !important;
  padding: 2px 5px !important;
  margin-bottom: 3px !important;
  border-radius: 7px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

/* Rubrik/fot ska ta minimal höjd. */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 6.5px !important;
  line-height: 1 !important;
  padding: 0 2px !important;
  margin: 0 !important;
}

/* Agent/kund inne i kortet: låga och breda. */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) !important;
  gap: 4px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 30px !important;
  padding: 2px 4px !important;
  border-radius: 5px !important;
  font-size: 6.5px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

/* Namn/nummer tydliga men inte höga. */
.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 6px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 6.3px !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Pilen mellan agent och kund. */
.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 12px !important;
  font-size: 10px !important;
}

/* Väntar/erbjuds agent: också bred och låg, inte hög ruta. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 680px !important;
  padding: 2px 5px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 36px !important;
}

/* Vänster agentlista fortsatt kompakt. */
.cti-layout-compact .cti-float-agent {
  min-height: 22px !important;
  padding: 2px 4px !important;
  margin-bottom: 2px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-agent strong {
  font-size: 9px !important;
  line-height: 1 !important;
}

/* Höger kundkort lågt men läsbart. */
.cti-layout-compact .cti-float-customer {
  min-height: 28px !important;
  padding: 2px 4px !important;
  margin-bottom: 3px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-mini-main {
  font-size: 11px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-float-mini-top,
.cti-layout-compact .cti-float-mini-sub,
.cti-layout-compact .cti-float-agent-meta {
  font-size: 6px !important;
  line-height: 1 !important;
}

/* Scroll endast vertikalt vid behov. */
.cti-layout-compact .cti-stage-agent-list,
.cti-layout-compact .cti-stage-center-list,
.cti-layout-compact .cti-stage-customer-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
}
/* cti_compact_narrower_width_20260620
   Kompaktläge: behåll tunna kort men gör mitten smalare horisontellt. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(430px, 560px) 210px !important;
  gap: 10px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 560px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 560px !important;
  width: 100% !important;
}

/* Gula väntkort ska följa samma smalare bredd. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 560px !important;
}

/* Behåll tunn/låg kompaktkänsla. */
.cti-layout-compact .cti-stage-center .cti-float-center-card {
  padding: 2px 5px !important;
  margin-bottom: 3px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 30px !important;
  padding: 2px 4px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 10px !important;
  line-height: 1 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 6.3px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* cti_compact_center_even_tighter_20260620
   Kompaktläge: mitten ännu smalare och mer vertikalt kompakt.
   Påverkar endast cti-layout-compact. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(390px, 500px) 210px !important;
  gap: 9px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 500px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 500px !important;
  width: 100% !important;
  padding: 1px 4px !important;
  margin-bottom: 2px !important;
  border-radius: 6px !important;
  font-size: 6.4px !important;
  line-height: .96 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 5.8px !important;
  line-height: .95 !important;
  padding: 0 2px !important;
  margin: 0 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) !important;
  gap: 3px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 25px !important;
  padding: 1px 3px !important;
  border-radius: 5px !important;
  font-size: 5.8px !important;
  line-height: .96 !important;
  overflow: hidden !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 5.5px !important;
  line-height: .95 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 9px !important;
  line-height: .98 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 5.7px !important;
  line-height: .96 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 10px !important;
  font-size: 9px !important;
}

/* Väntar/erbjuds agent ska också bli lägre och smalare. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 500px !important;
  padding: 1px 4px !important;
  margin-bottom: 2px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 29px !important;
}

/* Håll detaljraderna på en rad i kompakt så korten inte bygger höjd. */
.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* cti_compact_overview_tiny_center_20260620
   Kompaktläge = överblicksläge.
   Mittenkort ska vara mycket låga, ungefär lite större än agentkort.
   Text får vara liten; syftet är att se alla samtal. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(360px, 460px) 210px !important;
  gap: 9px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 460px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 460px !important;
  width: 100% !important;
  padding: 1px 3px !important;
  margin-bottom: 2px !important;
  border-radius: 5px !important;
  font-size: 5.8px !important;
  line-height: .92 !important;
}

/* Rubrik och fot i mittenkort nästan minimala. */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 5.2px !important;
  line-height: .9 !important;
  padding: 0 1px !important;
  margin: 0 !important;
}

/* Agent/kund inne i kortet: mycket låga. */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) !important;
  gap: 2px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 20px !important;
  padding: 1px 2px !important;
  border-radius: 4px !important;
  font-size: 5.2px !important;
  line-height: .92 !important;
  overflow: hidden !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 5px !important;
  line-height: .9 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 7.8px !important;
  line-height: .94 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 5px !important;
  line-height: .9 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 8px !important;
  font-size: 8px !important;
}

/* Väntar/erbjuds agent: också överblickslågt. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 460px !important;
  padding: 1px 3px !important;
  margin-bottom: 2px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 23px !important;
}

/* I kompakt överblick prioriteras antal synliga samtal över full textläsbarhet. */
.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* cti_compact_overview_smaller_20260620
   Kompakt överblick: ännu mindre mittenkort.
   Endast cti-layout-compact påverkas. */
.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(330px, 420px) 210px !important;
  gap: 8px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-layout-compact .cti-stage-center,
.cti-layout-compact .cti-stage-center-list {
  max-width: 420px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 420px !important;
  width: 100% !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
  border-radius: 4px !important;
  font-size: 5.2px !important;
  line-height: .86 !important;
}

/* Rubrik/fot extremt tunn i kompakt överblick. */
.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 4.8px !important;
  line-height: .85 !important;
  padding: 0 1px !important;
  margin: 0 !important;
}

/* Innehåll i mittenkort: lågt men fortfarande synligt. */
.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1fr) !important;
  gap: 2px !important;
  align-items: stretch !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 16px !important;
  padding: 0 2px !important;
  border-radius: 3px !important;
  font-size: 4.8px !important;
  line-height: .85 !important;
  overflow: hidden !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 4.5px !important;
  line-height: .85 !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 6.8px !important;
  line-height: .9 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 4.6px !important;
  line-height: .85 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-layout-compact .cti-stage-center .cti-float-link {
  width: 7px !important;
  font-size: 7px !important;
}

/* Gula väntkort följer samma överblicksstorlek. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 420px !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
}

.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 18px !important;
}

/* Håll text på en rad i kompakt överblick så korten inte växer på höjden. */
.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-layout-compact .cti-stage-center .cti-float-center-head {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* cti_fullscreen_compact_overview_20260620
   Samma kompakta överblick i helskärm som i vanliga kompaktläget. */

/* Helskärm + kompakt: använd samma överblicksgrid. */
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(330px, 420px) 210px !important;
  gap: 8px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

/* Begränsa mitten i helskärm/kompakt. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center-list {
  max-width: 420px !important;
}

/* Mittenkort i helskärm/kompakt ska vara samma små överblickskort. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 420px !important;
  width: 100% !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
  border-radius: 4px !important;
  font-size: 5.2px !important;
  line-height: .86 !important;
}

/* Rubrik/fot i mittenkort. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-foot,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-head,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 4.8px !important;
  line-height: .85 !important;
  padding: 0 1px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Agent/kund-rutorna inne i mittenkort. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1fr) !important;
  gap: 2px !important;
  align-items: stretch !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 16px !important;
  padding: 0 2px !important;
  border-radius: 3px !important;
  font-size: 4.8px !important;
  line-height: .85 !important;
  overflow: hidden !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side-label,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side-label,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side-label,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 4.5px !important;
  line-height: .85 !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side strong,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 6.8px !important;
  line-height: .9 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side span,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 4.6px !important;
  line-height: .85 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Väntande/gula kort följer samma storlek i helskärm/kompakt. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  max-width: 420px !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse .cti-float-side {
  min-height: 18px !important;
}
/* cti_fullscreen_compact_fill_bottom_20260620
   Helskärm + kompakt: ljusblå liveyta ska gå ner till botten.
   Vid många samtal scrollar listorna, inte hela layouten. */

/* Helskärmspanelen ska använda hela höjden. */
.cti-fullscreen-panel,
#cti-fullscreen-overlay .cti-fullscreen-panel,
.cti-fullscreen-overlay .cti-fullscreen-panel {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Hela samtalskortet i helskärm ska fylla resterande yta. */
.cti-fullscreen-panel .cti-floating-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Rubriken i Samtal Live tar bara sin höjd. */
.cti-fullscreen-panel .cti-floating-card > .cti-card-head {
  flex: 0 0 auto !important;
}

/* Den ljusblå liveytan fyller resten ner till botten. */
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

/* Alla tre kolumner fyller höjden i blå ytan. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-zone,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-zone,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-zone,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-zone {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Själva listorna får scroll om det blir många samtal/agenter/kunder. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-agent-list,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-customer-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-agent-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-customer-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-agent-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-customer-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-agent-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-customer-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
}

/* Eventuella missade/vägrade-sektioner ska inte trycka sönder höjden. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-events,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-events {
  flex: 0 0 auto !important;
  max-height: 22vh !important;
  overflow-y: auto !important;
}


/* cti_fullscreen_grid_fill_bottom_exact_20260620
   Riktig helskärm/kompakt: hela gridlagret och Samtal Live-kortet fyller höjden.
   Den ljusblå liveytan går till botten; listor scrollar vid behov. */

/* Overlay och panel ska vara viewport-höga. */
#cti-fullscreen-overlay,
.cti-fullscreen-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#cti-fullscreen-overlay .cti-fullscreen-panel,
.cti-fullscreen-overlay .cti-fullscreen-panel,
.cti-fullscreen-panel {
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Toppen/statistik tar bara den höjd den behöver. */
.cti-fullscreen-panel .cti-fullscreen-head,
.cti-fullscreen-panel .cti-status-grid,
.cti-fullscreen-panel .cti-kpi-row,
.cti-fullscreen-panel .cti-summary-row {
  flex: 0 0 auto !important;
}

/* Detta är lagret som saknades: fullscreen-grid måste fylla resten. */
.cti-fullscreen-panel .cti-fullscreen-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  overflow: hidden !important;
}

/* Stackarna inne i fullscreen-grid måste också få höjd. */
.cti-fullscreen-panel .cti-adaptive-stack,
.cti-fullscreen-panel .cti-fullscreen-left,
.cti-fullscreen-panel .cti-fullscreen-right {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Samtal Live-kortet ska fylla sin stack. */
.cti-fullscreen-panel .cti-floating-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Rubriken på Samtal Live tar bara sin egen höjd. */
.cti-fullscreen-panel .cti-floating-card > .cti-card-head {
  flex: 0 0 auto !important;
}

/* Den ljusblå ytan fyller resten av Samtal Live-kortet. */
.cti-fullscreen-panel.cti-layout-compact .cti-floating-card .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage,
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Kolumnerna i blå ytan fyller höjd. */
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage .cti-stage-zone,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage .cti-stage-zone,
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage .cti-stage-zone,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage .cti-stage-zone {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Listorna får scroll vid många samtal/agenter/kunder. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-agent-list,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-customer-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-agent-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-customer-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-agent-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-customer-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* cti_yellow_half_width_all_layouts_20260620
   Gula väntar/erbjuds-agent-kort i mitten innehåller bara kundbenet.
   Därför ska de vara ungefär halva bredden av gröna kopplade kort
   där agent + kund tillsammans bildar full mittenbredd.
   Gäller alla lägen. Höjd/vertikal layout lämnas som den är. */

/* Standard: gula mittenkort tar ungefär en halv radbredd. */
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-stage-center .cti-float-center-card.waiting-agent,
.cti-stage-center .cti-float-center-card.browse {
  width: calc((100% - 18px) / 2) !important;
  max-width: calc((100% - 18px) / 2) !important;
  min-width: 260px !important;
  align-self: flex-start !important;
}

/* Innehållet i gult kort ska använda hela gula kortets bredd, inte låtsas ha två halvor. */
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-side,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-side,
.cti-stage-center .cti-float-center-card.browse .cti-float-side {
  width: 100% !important;
  max-width: 100% !important;
}

/* Om gult kort råkar ha pair-grid ska det bli en ensam kundruta, inte agent+kund-grid. */
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-pair,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-pair,
.cti-stage-center .cti-float-center-card.browse .cti-float-pair,
.cti-stage-center .cti-float-center-card.cti-center-waiting-offer .cti-float-pair-connected-agent-left,
.cti-stage-center .cti-float-center-card.waiting-agent .cti-float-pair-connected-agent-left,
.cti-stage-center .cti-float-center-card.browse .cti-float-pair-connected-agent-left {
  display: block !important;
}

/* Kompakt har smalare mitten, så minbredden måste vara lägre där. */
.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  width: calc((100% - 8px) / 2) !important;
  max-width: calc((100% - 8px) / 2) !important;
  min-width: 180px !important;
}

/* Helskärm kompakt ska följa samma princip. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  width: calc((100% - 8px) / 2) !important;
  max-width: calc((100% - 8px) / 2) !important;
  min-width: 180px !important;
}

/* cti_fullscreen_same_layout_size_20260620
   Helskärm ska använda samma layoutstorlekar som vanlig vy.
   Inga egna större kort i helskärm.
   Helskärm får bara ge mer yta runt omkring, inte ändra kortstorlek. */

/* Stoppa helskärmens extra uppskalning/transform om tidigare regler finns. */
.cti-fullscreen-panel .cti-floating-card,
.cti-fullscreen-overlay .cti-floating-card,
#cti-fullscreen-overlay .cti-floating-card {
  transform: none !important;
  zoom: 1 !important;
}

/* Håll helskärmsytan fullhöjd men låt innehållets storlek styras av valt layoutläge. */
#cti-fullscreen-overlay,
.cti-fullscreen-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

#cti-fullscreen-overlay .cti-fullscreen-panel,
.cti-fullscreen-overlay .cti-fullscreen-panel,
.cti-fullscreen-panel {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Fullscreen-grid fyller bara tillgänglig yta. Den får inte ändra storlek på korten. */
.cti-fullscreen-panel .cti-fullscreen-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* Samtal Live-kortet fyller höjden, men kortstorlekarna inuti ska vara samma som vanlig vy. */
.cti-fullscreen-panel .cti-floating-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Den ljusblå ytan fyller resten, men använder samma gridbredd/kortstorlek som valt läge. */
.cti-fullscreen-panel .cti-live-stage,
.cti-fullscreen-overlay .cti-live-stage,
#cti-fullscreen-overlay .cti-live-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Scroll ska ligga i listorna vid behov. */
.cti-fullscreen-panel .cti-stage-agent-list,
.cti-fullscreen-panel .cti-stage-center-list,
.cti-fullscreen-panel .cti-stage-customer-list,
.cti-fullscreen-overlay .cti-stage-agent-list,
.cti-fullscreen-overlay .cti-stage-center-list,
.cti-fullscreen-overlay .cti-stage-customer-list,
#cti-fullscreen-overlay .cti-stage-agent-list,
#cti-fullscreen-overlay .cti-stage-center-list,
#cti-fullscreen-overlay .cti-stage-customer-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

/* Kompakt i helskärm ska exakt följa kompakt i vanlig vy. */
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(330px, 420px) 210px !important;
  gap: 8px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

.cti-fullscreen-panel.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list {
  max-width: 420px !important;
}

/* Kompakt/gröna kort i helskärm = samma som kompakt/vanlig vy. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 420px !important;
  width: 100% !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
  border-radius: 4px !important;
  font-size: 5.2px !important;
  line-height: .86 !important;
}

/* Kompakt/gula kort i helskärm = samma halvbredd som kompakt/vanlig vy. */
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  width: calc((100% - 8px) / 2) !important;
  max-width: calc((100% - 8px) / 2) !important;
  min-width: 180px !important;
}

/* Normal/fokus/wallboard i helskärm ska inte få extra scale heller. */
.cti-fullscreen-panel.cti-layout-normal .cti-live-stage,
.cti-fullscreen-panel.cti-layout-calls .cti-live-stage,
.cti-fullscreen-panel.cti-layout-agents .cti-live-stage,
.cti-fullscreen-panel.cti-layout-wallboard .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-normal .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-calls .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-agents .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-wallboard .cti-live-stage {
  transform: none !important;
  zoom: 1 !important;
}

/* cti_fullscreen_compact_conflict_final_20260620
   SISTA OVERRIDE:
   Helskärm + kompakt ska ha samma små kompaktkort som vanlig kompaktvy.
   Slår ut äldre fullscreen/compact-regler, scale och transform. */

/* Ingen extra uppskalning i helskärm kompakt. */
#cti-fullscreen-overlay.cti-layout-compact,
#cti-fullscreen-overlay.cti-layout-compact *,
.cti-fullscreen-overlay.cti-layout-compact,
.cti-fullscreen-overlay.cti-layout-compact *,
.cti-fullscreen-panel.cti-layout-compact,
.cti-fullscreen-panel.cti-layout-compact *,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact * {
  transform: none !important;
  zoom: 1 !important;
}

/* Helskärm kompakt: samma grid som vanlig kompakt överblick. */
#cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
.cti-fullscreen-overlay.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel.cti-layout-compact .cti-live-stage,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-live-stage {
  grid-template-columns: 145px minmax(330px, 420px) 210px !important;
  gap: 8px !important;
  align-items: start !important;
  overflow-x: hidden !important;
}

/* Mittenkolumn samma maxbredd som vanlig kompakt. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center-list,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center-list {
  max-width: 420px !important;
}

/* Gröna mittenkort: små kompaktkort. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card {
  max-width: 420px !important;
  width: 100% !important;
  padding: 0 3px !important;
  margin-bottom: 1px !important;
  border-radius: 4px !important;
  font-size: 5.2px !important;
  line-height: .86 !important;
}

/* Header/fot i kompakt helskärm. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-head,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-foot,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-head,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-foot {
  font-size: 4.8px !important;
  line-height: .85 !important;
  padding: 0 1px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Agent/kund-halvor inne i grönt kort. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-pair,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-pair-connected-agent-left {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1fr) !important;
  gap: 2px !important;
  align-items: stretch !important;
}

/* Små sidokort inne i mittenkort. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side {
  min-height: 16px !important;
  padding: 0 2px !important;
  border-radius: 3px !important;
  font-size: 4.8px !important;
  line-height: .85 !important;
  overflow: hidden !important;
}

#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side-label,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side-label,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side-label,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side-label {
  font-size: 4.5px !important;
  line-height: .85 !important;
}

#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side strong,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side strong {
  font-size: 6.8px !important;
  line-height: .9 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-side span,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-side span {
  font-size: 4.6px !important;
  line-height: .85 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Gula kort i helskärm kompakt: halv bredd, som vanlig kompakt. */
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
#cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-overlay.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel.cti-layout-compact .cti-stage-center .cti-float-center-card.browse,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.cti-center-waiting-offer,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.waiting-agent,
.cti-fullscreen-panel .cti-floating-card.cti-layout-compact .cti-stage-center .cti-float-center-card.browse {
  width: calc((100% - 8px) / 2) !important;
  max-width: calc((100% - 8px) / 2) !important;
  min-width: 180px !important;
}

/* CTI Live mobile fullscreen 2026-06-22
   Mobil helskärm är egen overlay-layout ovanpå befintlig CTI Live.
   Desktop/vanlig helskärm påverkas inte. */
#cti-fullscreen-overlay.cti-mobile-fullscreen,
.cti-fullscreen-overlay.cti-mobile-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-panel,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-panel,
.cti-fullscreen-panel.cti-mobile-fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-head,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  padding: 6px 4px 8px 4px !important;
  background: rgba(8, 20, 45, 0.92) !important;
  backdrop-filter: blur(6px);
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-status-grid,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-status-grid,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-kpi-row,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-kpi-row,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-summary-row,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-summary-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-grid,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-grid {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  zoom: 1 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage {
  grid-template-columns: none !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 10px 0 !important;
  overflow: visible !important;
  display: block !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone-title,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone-title {
  position: sticky !important;
  top: 58px !important;
  z-index: 3 !important;
  background: rgba(210, 235, 255, 0.96) !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agent-list,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-center-list,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customer-list,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agent-list,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-center-list,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-agent-card,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-float-center-card,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-customer-card,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-agent-card,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-float-center-card,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-customer-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  zoom: 1 !important;
}

@media (max-width: 700px) {
  #ctiLiveMobileFullscreenBtn {
    display: inline-flex !important;
  }

  #cti-fullscreen-overlay.cti-mobile-fullscreen .cti-card-head,
  .cti-fullscreen-overlay.cti-mobile-fullscreen .cti-card-head {
    font-size: 13px !important;
  }
}


/* CTI Live mobile fullscreen order fix 2026-06-22
   I mobil helskärm ska viktigaste samtalsinformationen visas först. */
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card > .cti-card-head,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card > .cti-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-height: auto !important;
  overflow: visible !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card > .cti-card-head .cti-card-title,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-floating-card > .cti-card-head .cti-card-title {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage {
  display: flex !important;
  flex-direction: column !important;
}

/* Ordning i mobil: ringer/kunder först, mitten sedan, agenter sist. */
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customers,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customer,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-right,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customers,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-customer,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-right {
  order: 1 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-center,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-center {
  order: 2 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agents,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agent,
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-left,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agents,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-agent,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-left {
  order: 3 !important;
}

/* Säker fallback om befintliga zoner inte har höger/vänsterklass:
   kundzonen är normalt tredje zonen, mitten andra, agenter första. */
#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(3),
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(3) {
  order: 1 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(2),
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(2) {
  order: 2 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(1),
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-live-stage > .cti-stage-zone:nth-child(1) {
  order: 3 !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone {
  border: 1px solid rgba(55, 120, 180, 0.35) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  background: rgba(220, 242, 255, 0.8) !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone-title,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-stage-zone-title {
  top: 0 !important;
  position: relative !important;
  margin-bottom: 6px !important;
}


/* CTI Live mobile fullscreen iOS scroll fix 2026-06-22 */
#cti-fullscreen-overlay.cti-mobile-fullscreen,
.cti-fullscreen-overlay.cti-mobile-fullscreen {
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

#cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-panel,
.cti-fullscreen-overlay.cti-mobile-fullscreen .cti-fullscreen-panel,
.cti-fullscreen-panel.cti-mobile-fullscreen {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}