/* Ringover CTI — CCaaS side panel D365
   Tokens alignés 1:1 avec le design system Ringover (WebApp product = bleu 00779E)
*/

/* ============================================================
   RINGOVER DESIGN TOKENS (copiés de leur :root public)
   ============================================================ */
:root {
  --ro-ff-inter: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Neutrals */
  --ro-colors-neutral-dark-300: rgba(129, 147, 168, 1);
  --ro-colors-neutral-dark-500: rgba(100, 110, 125, 1);
  --ro-colors-neutral-dark-700: rgba(61, 71, 83, 1);
  --ro-colors-neutral-dark-900: rgb(22, 32, 41);
  --ro-colors-neutral-light-100: rgba(249, 251, 255, 1);
  --ro-colors-neutral-light-300: rgba(240, 243, 250, 1);
  --ro-colors-neutral-light-500: rgba(223, 229, 243, 1);
  --ro-colors-neutral-light-700: rgba(197, 207, 231, 1);

  /* Base colors */
  --ro-colors-white: rgb(255, 255, 255);
  --ro-colors-black: rgba(18, 18, 18, 1);
  --ro-colors-dark-opacity-40: rgba(18, 18, 18, .4);
  --ro-colors-dark-opacity-68: rgba(18, 18, 18, .68);

  /* Sizes — 4px base unit */
  --ro-size-0: 0px;
  --ro-size-half: 2px;
  --ro-size-1: 4px;
  --ro-size-2: 8px;
  --ro-size-3: 12px;
  --ro-size-4: 16px;
  --ro-size-5: 20px;
  --ro-size-6: 24px;
  --ro-size-7: 32px;
  --ro-size-8: 40px;
  --ro-size-9: 48px;
  --ro-size-10: 64px;

  /* Radii */
  --ro-radii-sm: var(--ro-size-1);
  --ro-radii-md: var(--ro-size-2);
  --ro-radii-lg: var(--ro-size-3);
  --ro-radii-xl: var(--ro-size-4);
  --ro-radii-2xl: var(--ro-size-6);
  --ro-radii-circle: 50%;

  /* Font sizes */
  --ro-fs-0: .625rem;     /* 10px */
  --ro-fs-1: .8rem;       /* ~12.8px */
  --ro-fs-2: .875rem;     /* 14px — default text */
  --ro-fs-3: 1rem;        /* 16px */
  --ro-fs-4: 1.125rem;    /* 18px */
  --ro-fs-5: 1.25rem;     /* 20px */
  --ro-fs-6: 1.5rem;      /* 24px */
  --ro-fw-bolder: 500;
  --ro-fw-boldest: 600;

  /* Semantic text */
  --ro-colors-text-primary: var(--ro-colors-neutral-dark-900);
  --ro-colors-text-intermediate: var(--ro-colors-neutral-dark-700);
  --ro-colors-text-secondary: var(--ro-colors-neutral-dark-500);
  --ro-colors-text-inverted: var(--ro-colors-white);
  --ro-colors-text-btn: var(--ro-colors-white);

  /* Component backgrounds (cards/panels) */
  --ro-colors-component-light: var(--ro-colors-neutral-light-100);
  --ro-colors-component-regular: var(--ro-colors-neutral-light-300);
  --ro-colors-component-accentuated: var(--ro-colors-neutral-light-500);
  --ro-colors-component-deep: var(--ro-colors-neutral-light-700);
  --ro-colors-component-opaque: var(--ro-colors-white);

  /* Borders */
  --ro-colors-border-light: var(--ro-colors-neutral-light-300);
  --ro-colors-border-regular: var(--ro-colors-neutral-light-500);
  --ro-colors-border-accentuated: var(--ro-colors-neutral-light-700);

  /* Bg container / overlay */
  --ro-colors-bg-container: var(--ro-colors-white);
  --ro-colors-bg-overlay: var(--ro-colors-white);

  /* ACCENT = WebApp blue (Ringover CTI uses this, not the teal) */
  --ro-colors-product-webapp-500: rgb(0, 119, 158);
  --ro-colors-product-webapp-600: rgb(0, 98, 130);
  --ro-colors-product-webapp-700: rgb(0, 73, 97);
  --ro-colors-product-webapp-500-opacity-8:  rgba(0, 119, 158, 0.08);
  --ro-colors-product-webapp-500-opacity-20: rgba(0, 119, 158, 0.2);
  --ro-colors-product-webapp-500-opacity-25: rgba(0, 119, 158, 0.25);
  --ro-colors-product-webapp-500-opacity-50: rgba(0, 119, 158, 0.5);

  --ro-colors-accent:              var(--ro-colors-product-webapp-500);
  --ro-colors-accent-light:        var(--ro-colors-product-webapp-500-opacity-8);
  --ro-colors-accent-hover:        var(--ro-colors-product-webapp-600);
  --ro-colors-accent-hover-light:  var(--ro-colors-product-webapp-500-opacity-20);
  --ro-colors-accent-active:       var(--ro-colors-product-webapp-700);
  --ro-colors-accent-foreground:   var(--ro-colors-text-btn);
  --ro-colors-accent-shadow-light: var(--ro-colors-product-webapp-500-opacity-25);
  --ro-colors-accent-shadow:       var(--ro-colors-product-webapp-500-opacity-50);

  /* Multi-product (teal — utilisé pour branding uniquement) */
  --ro-colors-multi-product-500: rgb(39, 201, 214);

  /* Semantic */
  --ro-colors-success:        rgb(24, 163, 38);
  --ro-colors-success-light:  rgba(24, 163, 38, .08);
  --ro-colors-success-hover:  rgb(18, 120, 28);
  --ro-colors-warning:        rgb(255, 135, 38);
  --ro-colors-warning-light:  rgba(255, 135, 38, .08);
  --ro-colors-danger:         rgba(229, 37, 23, 1);
  --ro-colors-danger-light:   rgba(229, 37, 23, .08);
  --ro-colors-danger-hover:   rgba(205, 45, 35, 1);
  --ro-colors-info:           rgb(16, 134, 246);
  --ro-colors-info-light:     rgba(16, 134, 246, .08);

  /* Omnichannel */
  --ro-colors-omnichannel-sms:       rgb(21, 95, 126);
  --ro-colors-omnichannel-whatsapp:  rgb(37, 211, 102);
  --ro-colors-omnichannel-email:     rgb(66, 133, 244);

  /* Shadows */
  --ro-shadow-shape-md: 1px 6px 20px 0px;
  --ro-shadow-shape-lg: 1px 8px 20px 0px;
  --ro-shadow-light: var(--ro-shadow-shape-md) rgba(18,18,18,.05);
  --ro-shadow:       var(--ro-shadow-shape-md) rgba(18,18,18,.10);
  --ro-shadow-accentuated: 5px 11px 40px 0px rgba(18,18,18,.2);
  --ro-shadow-product: var(--ro-shadow-shape-lg) var(--ro-colors-accent-shadow);

  /* Block widths (alignés sur Ringover) */
  --block-right-width: 400px;
  --block-right-width-lg: 480px;

  /* Animation */
  --ro-animation-transition: .24s ease;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
body {
  font-family: var(--ro-ff-inter);
  font-size: var(--ro-fs-2);
  line-height: calc(1.5 * var(--ro-fs-2));
  color: var(--ro-colors-text-primary);
  background: var(--ro-colors-component-light);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: inherit; }

/* ============================================================
   WIDGET SHELL
   ============================================================ */
.widget {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
body.dbg-open .widget { height: 65vh; }

/* ============================================================
   HEADER — Style 100% Ringover (ro-header)
   ============================================================ */
.widget-header, .ro-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ro-size-2) var(--ro-size-3);
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  flex-shrink: 0;
  min-height: 44px;
  gap: var(--ro-size-2);
}
.ro-header-brand {
  display: flex; align-items: center; gap: var(--ro-size-2);
  font-weight: var(--ro-fw-boldest);
  font-size: var(--ro-fs-2);
  flex-shrink: 0;
}
.ro-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ro-colors-warning);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  transition: background var(--ro-animation-transition);
  flex-shrink: 0;
}
.ro-dot.ok    { background: var(--ro-colors-success); }
.ro-dot.error { background: var(--ro-colors-danger); }
.ro-header-title {
  font-weight: var(--ro-fw-boldest); letter-spacing: -0.2px;
  font-size: var(--ro-fs-2);
}
.ro-header-actions {
  display: flex; align-items: center; gap: var(--ro-size-1);
  flex: 1; justify-content: flex-end;
}

/* Device picker — dropdown custom Ringover-style */
.ro-device-picker { position: relative; flex-shrink: 0; }
.ro-device-trigger {
  display: flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--ro-colors-text-inverted);
  border-radius: var(--ro-radii-md);
  font-family: inherit; font-size: 11px; font-weight: var(--ro-fw-boldest);
  cursor: pointer;
  transition: background var(--ro-animation-transition);
}
.ro-device-trigger:hover { background: rgba(255,255,255,.25); }
.ro-device-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ro-device-name {
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  max-width: 68px;
}
.ro-device-menu {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  min-width: 240px;
  background: var(--ro-colors-bg-container);
  border: 1px solid var(--ro-colors-border-regular);
  border-radius: var(--ro-radii-md);
  box-shadow: var(--ro-shadow);
  padding: var(--ro-size-1);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
}
.ro-device-menu.hidden { display: none; }
.ro-device-item {
  display: flex; align-items: center; gap: var(--ro-size-2);
  padding: var(--ro-size-2) var(--ro-size-2);
  background: transparent;
  border: none;
  border-radius: var(--ro-radii-sm);
  font-family: inherit;
  font-size: var(--ro-fs-1);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--ro-animation-transition);
}
.ro-device-item:hover { background: var(--ro-colors-component-regular); }
.ro-device-item.active {
  background: var(--ro-colors-accent-light);
  color: var(--ro-colors-accent-active);
  font-weight: var(--ro-fw-boldest);
}
.ro-device-item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--ro-colors-text-secondary);
}
.ro-device-item.active .ro-device-item-icon { color: var(--ro-colors-accent); }
.ro-device-item-text {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.ro-device-item-label { font-weight: var(--ro-fw-boldest); font-size: var(--ro-fs-1); }
.ro-device-item-desc {
  font-size: var(--ro-fs-0); color: var(--ro-colors-text-secondary);
  font-weight: var(--ro-fw-bolder);
}
.ro-device-item-status {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ro-colors-neutral-dark-300);
}
.ro-device-item-status.available { background: var(--ro-colors-success); }

/* Context select compact */
.ro-select-compact {
  height: 28px; padding: 0 var(--ro-size-2);
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--ro-colors-text-inverted);
  border-radius: var(--ro-radii-md);
  font-family: inherit; font-size: 11px; font-weight: var(--ro-fw-boldest);
  cursor: pointer; outline: none;
  flex-shrink: 0;
}
.ro-select-compact option {
  color: var(--ro-colors-text-primary);
  background: var(--ro-colors-bg-container);
}

/* Header icon buttons — style ro-btn ro-shape-icon ro-variant-ghost */
.ro-hbtn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--ro-colors-text-inverted);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--ro-animation-transition);
  flex-shrink: 0;
}
.ro-hbtn:hover { background: rgba(255,255,255,.15); }
.ro-hbtn:active { background: rgba(255,255,255,.25); }
.ro-hbtn.active { background: rgba(255,255,255,.3); }

/* Banner */
.banner {
  padding: var(--ro-size-2) var(--ro-size-4);
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-bolder);
  flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--ro-colors-border-regular);
}
.banner-info    { background: var(--ro-colors-accent-light); color: var(--ro-colors-accent-active); }
.banner-error   { background: var(--ro-colors-danger-light); color: var(--ro-colors-danger); }
.banner-success { background: var(--ro-colors-success-light); color: var(--ro-colors-success-hover); }
.banner.hidden  { display: none; }

/* Iframe container */
.iframe-container {
  flex: 1 1 0;
  overflow: hidden;
  background: var(--ro-colors-bg-container);
  position: relative;
  min-height: 0;
}
.iframe-container > div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-height: none !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  padding: 0 !important; margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
.iframe-container iframe {
  display: block !important;
  width: 100% !important; height: 100% !important;
  border: none !important;
}

/* Footer / active call */
.widget-footer {
  flex-shrink: 0;
  background: var(--ro-colors-bg-container);
  border-top: 1px solid var(--ro-colors-border-regular);
  z-index: 5;
}
.active-call {
  display: flex; align-items: center;
  padding: var(--ro-size-2) var(--ro-size-4);
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  gap: var(--ro-size-3);
}
.active-call.hidden { display: none; }
.active-call-number {
  font-weight: var(--ro-fw-boldest); font-size: var(--ro-fs-2);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.active-call-timer {
  font-family: var(--ro-ff-inter), monospace;
  font-size: var(--ro-fs-2); font-weight: var(--ro-fw-boldest);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.18);
  padding: 3px var(--ro-size-2);
  border-radius: var(--ro-radii-sm);
}
.call-controls { display: flex; gap: var(--ro-size-1); }
.call-controls button {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border: none; border-radius: 50%;
  color: var(--ro-colors-text-inverted); cursor: pointer;
  font-size: var(--ro-fs-1);
  transition: background var(--ro-animation-transition);
}
.call-controls button:hover { background: rgba(255,255,255,.35); }

/* Context panel (inline in footer) */
.context-panel { display: none; }

/* Action bar off (remplacé par FAB) */
.action-bar { display: none !important; }

/* Toast */
.toast {
  position: fixed;
  top: calc(44px + var(--ro-size-2));
  left: var(--ro-size-3); right: var(--ro-size-3);
  padding: var(--ro-size-2) var(--ro-size-3);
  border-radius: var(--ro-radii-md);
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  box-shadow: var(--ro-shadow);
  z-index: 500;
  animation: slideDown .2s ease;
}
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.toast.hidden { display: none; }
.toast-ok    { background: var(--ro-colors-success-light); color: var(--ro-colors-success-hover); border-left: 3px solid var(--ro-colors-success); }
.toast-error { background: var(--ro-colors-danger-light); color: var(--ro-colors-danger); border-left: 3px solid var(--ro-colors-danger); }
.toast-info  { background: var(--ro-colors-accent-light); color: var(--ro-colors-accent-active); border-left: 3px solid var(--ro-colors-accent); }

/* ============================================================
   CCAAS FAB — superposé PAR-DESSUS l'iframe Ringover au niveau
   de leur #menu-mobile (z-index max). On ne peut pas injecter
   dans leur DOM cross-origin, mais on peut superposer visuellement.
   ============================================================ */
#ccaas-fab {
  position: fixed;
  /* Aligné avec leur menu-mobile (bas de l'iframe) — leur menu fait ~48px,
     le centre est à ~24px du bas. Notre bouton = 40px, donc bottom: 4px pour center */
  bottom: 4px;
  right: 8px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  border: 2px solid var(--ro-colors-bg-container);
  border-radius: 50%;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 12px var(--ro-colors-accent-shadow), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .15s, background var(--ro-animation-transition);
}
#ccaas-fab:hover {
  background: var(--ro-colors-accent-hover);
  transform: scale(1.05);
}
#ccaas-fab:active { transform: scale(0.95); }
#ccaas-fab .ro-icon {
  font-size: 18px;
  color: var(--ro-colors-text-inverted);
}
#ccaas-fab .menu-notif {
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ro-colors-success);
  border: 2px solid var(--ro-colors-bg-container);
}
#ccaas-fab[data-status="warn"] .menu-notif { background: var(--ro-colors-warning); }
#ccaas-fab[data-status="err"]  .menu-notif { background: var(--ro-colors-danger); }
#ccaas-fab[data-status="gray"] .menu-notif { background: var(--ro-colors-neutral-dark-300); }

/* Masquer quand debug panel ouvert */
body.dbg-open #ccaas-fab { display: none; }

/* ============================================================
   OVERLAY (style Ringover "blockcontent")
   ============================================================ */
.ccaas-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
}
.ccaas-overlay.hidden { display: none; }
.ccaas-backdrop {
  position: absolute; inset: 0;
  background: var(--ro-colors-dark-opacity-40);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.ccaas-drawer {
  position: relative;
  margin-left: auto;
  width: 100%;
  max-width: min(var(--block-right-width), 100vw);
  height: 100%;
  background: var(--ro-colors-component-light);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--ro-shadow-accentuated);
  animation: slideInRight .25s cubic-bezier(.25,.46,.45,.94);
}
@keyframes slideInRight { from { transform: translateX(100%) } to { transform: translateX(0) } }

.ccaas-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ro-size-3) var(--ro-size-4);
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  flex-shrink: 0;
}
.ccaas-drawer-title { font-weight: var(--ro-fw-boldest); font-size: var(--ro-fs-3); }
.ccaas-close {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.15);
  border: none; color: var(--ro-colors-text-inverted);
  font-size: var(--ro-fs-3); cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ro-animation-transition);
}
.ccaas-close:hover { background: rgba(255,255,255,.3); }

/* === blockcontent-style body: flex column, padding 16, gap 8, overflow auto === */
.ccaas-drawer-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--ro-size-4);
  gap: var(--ro-size-2);
}

/* --- Cards (sections) style Ringover ro-card --- */
.ccaas-card {
  background: var(--ro-colors-component-opaque);
  border: 1px solid var(--ro-colors-border-regular);
  border-radius: var(--ro-radii-md);
  padding: var(--ro-size-3);
  display: flex; flex-direction: column;
  gap: var(--ro-size-2);
  flex-shrink: 0;
}
.ccaas-card-scrollable {
  max-height: 180px;
  overflow-y: auto;
}
.ccaas-card-title {
  font-size: var(--ro-fs-0);
  font-weight: 800;
  color: var(--ro-colors-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
  line-height: 1.2;
}

/* Device selector grid (Use/Open via) */
.ccaas-device-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ro-size-1);
}
.ccaas-device-btn {
  display: flex; align-items: center; gap: var(--ro-size-2);
  padding: var(--ro-size-2) var(--ro-size-3);
  background: var(--ro-colors-component-regular);
  border: 1.5px solid transparent;
  border-radius: var(--ro-radii-md);
  font-family: inherit; font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  text-align: left;
  transition: all var(--ro-animation-transition);
}
.ccaas-device-btn:hover {
  background: var(--ro-colors-component-accentuated);
  border-color: var(--ro-colors-accent-light);
}
.ccaas-device-btn.active {
  background: var(--ro-colors-accent-light);
  border-color: var(--ro-colors-accent);
  color: var(--ro-colors-accent-active);
}
.ccaas-device-icon { font-size: 16px; flex-shrink: 0; }
.ccaas-device-label { flex: 1; font-size: var(--ro-fs-0); line-height: 1.2; }
.ccaas-device-status { flex-shrink: 0; font-size: 10px; line-height: 1; }

/* === Status agent grid (ro-btn shape-icon style) === */
.ccaas-status-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ro-size-1);
}
.ccaas-status-btn {
  display: flex; align-items: center; gap: var(--ro-size-2);
  padding: var(--ro-size-2) var(--ro-size-3);
  background: var(--ro-colors-component-regular);
  border: 1px solid transparent;
  border-radius: var(--ro-radii-md);
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  text-align: left;
  transition: all var(--ro-animation-transition);
}
.ccaas-status-btn:hover {
  background: var(--ro-colors-component-accentuated);
}
.ccaas-status-btn.active {
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  border-color: var(--ro-colors-accent);
}
.ccaas-status-icon { font-size: var(--ro-fs-3); flex-shrink: 0; }

/* === Action grid (cards cliquables 2 colonnes) === */
.ccaas-action-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ro-size-2);
}
.ccaas-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ro-size-1);
  padding: var(--ro-size-3) var(--ro-size-2);
  background: var(--ro-colors-component-regular);
  border: 1px solid transparent;
  border-radius: var(--ro-radii-md);
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  transition: all var(--ro-animation-transition);
  min-height: 72px;
  text-align: center;
}
.ccaas-action:hover {
  background: var(--ro-colors-component-accentuated);
  border-color: var(--ro-colors-accent-light);
}
.ccaas-action:active { transform: scale(0.97); }
.ccaas-action .ccaas-icon { font-size: var(--ro-fs-4); line-height: 1; }
.ccaas-action span:last-child {
  font-size: var(--ro-fs-1); line-height: 1.2;
}
.ccaas-action-primary {
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  border-color: var(--ro-colors-accent);
}
.ccaas-action-primary:hover {
  background: var(--ro-colors-accent-hover);
  border-color: var(--ro-colors-accent-hover);
  color: var(--ro-colors-text-inverted);
}
.ccaas-action-danger {
  background: var(--ro-colors-danger-light);
  color: var(--ro-colors-danger);
}
.ccaas-action-danger:hover { background: rgba(229,37,23,.16); }
.ccaas-action-success {
  background: var(--ro-colors-success-light);
  color: var(--ro-colors-success-hover);
}
.ccaas-action-success:hover { background: rgba(24,163,38,.16); }

/* Contact card (avatar + infos) */
.ccaas-contact {
  display: flex; align-items: center; gap: var(--ro-size-3);
  padding: var(--ro-size-2);
  background: var(--ro-colors-accent-light);
  border-radius: var(--ro-radii-md);
}
.ccaas-contact-avatar {
  width: var(--ro-size-8); height: var(--ro-size-8);
  border-radius: 50%;
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ro-fs-3); font-weight: var(--ro-fw-boldest);
  flex-shrink: 0;
}
.ccaas-contact-info { flex: 1; min-width: 0; }
.ccaas-contact-name {
  font-size: var(--ro-fs-2); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccaas-contact-meta {
  font-size: var(--ro-fs-0); color: var(--ro-colors-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Stats row (compteurs) */
.ccaas-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ro-size-1);
}
.ccaas-stat {
  background: var(--ro-colors-component-regular);
  border-radius: var(--ro-radii-sm);
  padding: var(--ro-size-2) var(--ro-size-1);
  text-align: center;
}
.ccaas-stat-value {
  display: block; font-size: var(--ro-fs-4); font-weight: 800;
  color: var(--ro-colors-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ccaas-stat-label {
  display: block; font-size: var(--ro-fs-0);
  color: var(--ro-colors-text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: var(--ro-size-1);
  font-weight: var(--ro-fw-boldest);
}

/* List style (history, results) */
.ccaas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ro-size-1); }
.ccaas-list-item {
  display: flex; align-items: center; gap: var(--ro-size-2);
  padding: var(--ro-size-2);
  background: var(--ro-colors-component-regular);
  border-radius: var(--ro-radii-sm);
  font-size: var(--ro-fs-1);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  transition: background var(--ro-animation-transition);
}
.ccaas-list-item:hover { background: var(--ro-colors-component-accentuated); }
.ccaas-list-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ro-fw-bolder); }
.ccaas-list-item-value { font-size: var(--ro-fs-0); color: var(--ro-colors-text-secondary); flex-shrink: 0; }
.ccaas-list-item-icon { font-size: var(--ro-fs-3); flex-shrink: 0; }

/* Empty state */
.ccaas-empty {
  text-align: center;
  color: var(--ro-colors-text-secondary);
  font-style: italic;
  padding: var(--ro-size-3);
  font-size: var(--ro-fs-1);
}

/* ============================================================
   MODALS (centered, Ringover style)
   ============================================================ */
.ccaas-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ro-size-4);
}
.ccaas-modal-backdrop {
  position: absolute; inset: 0;
  background: var(--ro-colors-dark-opacity-68);
  animation: fadeIn .15s;
}
.ccaas-modal-box {
  position: relative;
  width: 100%; max-width: 360px; max-height: 85vh;
  background: var(--ro-colors-bg-container);
  border-radius: var(--ro-radii-lg);
  display: flex; flex-direction: column;
  box-shadow: var(--ro-shadow-accentuated);
  animation: modalSlideUp .2s cubic-bezier(.25,.46,.45,.94);
  overflow: hidden;
}
@keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.ccaas-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ro-size-3) var(--ro-size-4);
  border-bottom: 1px solid var(--ro-colors-border-regular);
}
.ccaas-modal-title { font-weight: var(--ro-fw-boldest); font-size: var(--ro-fs-2); color: var(--ro-colors-text-primary); }
.ccaas-modal-close {
  background: none; border: none;
  font-size: var(--ro-fs-4); cursor: pointer;
  color: var(--ro-colors-text-secondary);
  width: 28px; height: 28px;
  border-radius: var(--ro-radii-sm);
  display: flex; align-items: center; justify-content: center;
}
.ccaas-modal-close:hover { background: var(--ro-colors-component-accentuated); }
.ccaas-modal-body {
  padding: var(--ro-size-3) var(--ro-size-4);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--ro-size-2);
}
.ccaas-modal-footer {
  display: flex; justify-content: flex-end; gap: var(--ro-size-2);
  padding: var(--ro-size-2) var(--ro-size-4);
  border-top: 1px solid var(--ro-colors-border-regular);
  background: var(--ro-colors-component-light);
}
.ccaas-modal-footer button {
  height: 36px; padding: 0 var(--ro-size-4);
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  border-radius: var(--ro-radii-sm);
  border: none; cursor: pointer;
  transition: background var(--ro-animation-transition);
}
.ccaas-btn-cancel { background: transparent; color: var(--ro-colors-text-secondary); }
.ccaas-btn-cancel:hover { background: var(--ro-colors-component-accentuated); }
.ccaas-btn-ok { background: var(--ro-colors-accent); color: var(--ro-colors-text-inverted); }
.ccaas-btn-ok:hover { background: var(--ro-colors-accent-hover); }

.ccaas-modal-input,
.ccaas-modal-textarea,
.ccaas-field input,
.ccaas-field textarea,
.ccaas-field select {
  width: 100%; padding: var(--ro-size-2) var(--ro-size-3);
  background: var(--ro-colors-component-light);
  border: 1px solid var(--ro-colors-border-regular);
  border-radius: var(--ro-radii-sm);
  font-size: var(--ro-fs-1);
  color: var(--ro-colors-text-primary);
  outline: none;
  transition: border-color var(--ro-animation-transition);
}
.ccaas-modal-input:focus,
.ccaas-modal-textarea:focus,
.ccaas-field input:focus,
.ccaas-field textarea:focus,
.ccaas-field select:focus { border-color: var(--ro-colors-accent); }
.ccaas-modal-textarea { min-height: 90px; resize: vertical; }
.ccaas-field { display: flex; flex-direction: column; gap: var(--ro-size-1); }
.ccaas-field > span {
  font-size: var(--ro-fs-0); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-intermediate);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Disposition grid */
.ccaas-disp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ro-size-1);
}
.ccaas-disp-btn {
  display: flex; align-items: center; gap: var(--ro-size-1);
  padding: var(--ro-size-2);
  background: var(--ro-colors-component-regular);
  border: 1.5px solid transparent;
  border-radius: var(--ro-radii-sm);
  font-size: var(--ro-fs-0); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  text-align: left;
  transition: all var(--ro-animation-transition);
}
.ccaas-disp-btn:hover { background: var(--ro-colors-component-accentuated); }
.ccaas-disp-btn.active { border-color: var(--ro-colors-accent); background: var(--ro-colors-accent-light); }
.ccaas-disp-btn[data-color="err"].active  { border-color: var(--ro-colors-danger);  background: var(--ro-colors-danger-light);  color: var(--ro-colors-danger); }
.ccaas-disp-btn[data-color="warn"].active { border-color: var(--ro-colors-warning); background: var(--ro-colors-warning-light); color: rgb(180,90,0); }
.ccaas-disp-btn[data-color="ok"].active   { border-color: var(--ro-colors-success); background: var(--ro-colors-success-light); color: var(--ro-colors-success-hover); }
.ccaas-disp-icon { font-size: var(--ro-fs-3); flex-shrink: 0; }

/* Callback presets (chip style Ringover) */
.ccaas-preset-row {
  display: flex; flex-wrap: wrap; gap: var(--ro-size-1);
}
.ccaas-preset {
  padding: var(--ro-size-1) var(--ro-size-3);
  background: var(--ro-colors-component-regular);
  border: none; border-radius: 20px;
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  transition: all var(--ro-animation-transition);
}
.ccaas-preset:hover { background: var(--ro-colors-component-accentuated); }
.ccaas-preset.active { background: var(--ro-colors-accent); color: var(--ro-colors-text-inverted); }

/* Canned replies */
.ccaas-canned-list { display: flex; flex-direction: column; gap: var(--ro-size-1); }
.ccaas-canned-item {
  padding: var(--ro-size-2);
  background: var(--ro-colors-component-regular);
  border: 1px solid transparent;
  border-radius: var(--ro-radii-sm);
  font-size: var(--ro-fs-1);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  text-align: left;
  transition: all var(--ro-animation-transition);
}
.ccaas-canned-item:hover { background: var(--ro-colors-accent-light); border-color: var(--ro-colors-accent); }

/* Tags (chips) */
.ccaas-tag-cloud {
  display: flex; flex-wrap: wrap; gap: var(--ro-size-1);
}
.ccaas-tag {
  padding: var(--ro-size-1) var(--ro-size-2);
  background: var(--ro-colors-component-regular);
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: var(--ro-fs-1); font-weight: var(--ro-fw-boldest);
  color: var(--ro-colors-text-primary);
  cursor: pointer;
  transition: all var(--ro-animation-transition);
}
.ccaas-tag:hover { border-color: var(--ro-colors-accent); }
.ccaas-tag.active { background: var(--ro-colors-accent); color: var(--ro-colors-text-inverted); }

/* Script list (numbered) */
.ccaas-script-list {
  padding-left: calc(var(--ro-size-5) + var(--ro-size-1));
  margin: 0;
  counter-reset: step;
  list-style: none;
  display: flex; flex-direction: column;
  gap: var(--ro-size-2);
}
.ccaas-script-list li {
  font-size: var(--ro-fs-1); line-height: 1.5;
  color: var(--ro-colors-text-primary);
  position: relative;
}
.ccaas-script-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: calc(-1 * var(--ro-size-5) - var(--ro-size-1));
  width: var(--ro-size-5); height: var(--ro-size-5);
  background: var(--ro-colors-accent);
  color: var(--ro-colors-text-inverted);
  border-radius: 50%;
  font-size: var(--ro-fs-0); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   DEBUG PANEL (inchangé, juste tokens alignés)
   ============================================================ */
#debug-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 35vh; min-height: 140px;
  display: flex; flex-direction: column;
  background: #1e1e2e; color: #cdd6f4;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 11px; line-height: 1.4;
  z-index: 9999;
  border-top: 2px solid #f38ba8;
}
.dbg-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: #181825; border-bottom: 1px solid #313244; flex-shrink: 0; flex-wrap: wrap; }
.dbg-title { font-weight: 700; color: #f38ba8; font-size: 11px; margin-right: 6px; }
.dbg-filters { display: flex; gap: 2px; flex-wrap: wrap; }
.dbg-fbtn { padding: 2px 6px; font-size: 10px; background: #313244; color: #bac2de; border: none; border-radius: 3px; cursor: pointer; }
.dbg-fbtn.active { background: #585b70; color: #cdd6f4; }
.dbg-fbtn:hover { background: #45475a; }
.dbg-copy, .dbg-clear, .dbg-close { background: none; border: none; color: #6c7086; font-size: 14px; cursor: pointer; padding: 2px 5px; }
.dbg-copy { margin-left: auto; }
.dbg-copy:hover, .dbg-clear:hover, .dbg-close:hover { color: #f38ba8; }
.dbg-list { flex: 1; overflow-y: auto; padding: 2px 0; }
.dbg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 2px 8px; border-bottom: 1px solid #181825; font-size: 11px; }
.dbg-row:hover { background: #262637; }
.dbg-expandable { cursor: pointer; }
.dbg-ts { color: #6c7086; flex-shrink: 0; font-size: 10px; }
.dbg-badge { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.dbg-label { flex: 1; min-width: 0; overflow-wrap: break-word; }
.dbg-detail { width: 100%; margin: 2px 0 3px; padding: 3px 7px; background: #11111b; color: #a6adc8; border-radius: 2px; font-size: 10px; white-space: pre-wrap; word-break: break-all; max-height: 140px; overflow-y: auto; }
.dbg-err .dbg-label { color: #f38ba8; }
.dbg-warn .dbg-label { color: #f9e2af; }
.dbg-net .dbg-label { color: #cba6f7; }
.dbg-sdk .dbg-label { color: #a6e3a1; }
.dbg-csp .dbg-label { color: #f38ba8; font-weight: 600; }
.dbg-msg .dbg-label { color: #e879f9; }
.dbg-wss .dbg-label { color: #22d3ee; }
.dbg-xhr .dbg-label { color: #a78bfa; }

/* Scrollbar (thin, Ringover style) */
* { scrollbar-width: thin; scrollbar-color: var(--ro-colors-border-regular) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--ro-colors-border-regular); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ro-colors-border-accentuated); }