@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Design tokens ── */
:root {
  --ms-navy:        #0A2540;
  --ms-navy-hover:  #0E3460;
  --ms-navy-soft:   #EEF2F8;
  --ms-rail-text:   #C9DDF0;
  --ms-bg:          #FAFBFC;
  --ms-surface:     #FFFFFF;
  --ms-line:        #EAECF0;
  --ms-text:        #101828;
  --ms-muted:       #475467;
  --ms-muted-lt:    #98A2B3;
  --ms-accent:      #635BFF;
  --ms-accent-soft: #F0EFFF;
  --ms-accent-light: #B3ADFF;
  --ms-green:       #12B76A;
  --ms-green-soft:  #ECFDF3;
  --ms-amber:       #F79009;
  --ms-amber-soft:  #FFFAEB;
  --ms-red:         #F04438;
  --ms-red-soft:    #FEF3F2;
  --ms-pink:        #DB2777;
  --ms-pink-soft:   #FCE7F3;
  --ms-blue:        #2563EB;
  --ms-blue-soft:   #EFF6FF;
  --ms-brown-soft:  #FAF5EB;
  --ms-green-soft-2: #DCFCE7;
  /* Accent hover */
  --ms-accent-hover: #5249E5;

  /* Border strong */
  --ms-line-strong: #D0D5DD;

  /* Layout */
  --ms-sidebar-w:           220px;  /* kept for legacy references */
  --ms-sidebar-w-collapsed:  52px;
  --ms-rail-w:               96px;
  --ms-flyout-w:            220px;
  --ms-topbar-h:             56px;

  /* Radius scale */
  --ms-radius-xs:   4px;
  --ms-radius-sm:   6px;
  --ms-radius:      8px;
  --ms-radius-lg:   12px;
  --ms-radius-full: 9999px;

  /* Shadow scale */
  --ms-shadow:    0 1px 2px rgba(16,24,40,.06);
  --ms-shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --ms-shadow-xl: 0 20px 40px -4px rgba(16,24,40,.14), 0 8px 16px -4px rgba(16,24,40,.08);

  /* Transition */
  --ms-tr: 120ms ease;

  /* Text on colored backgrounds (buttons, filled badges) */
  --ms-on-accent: #FFFFFF;

  /* RGB variants — for use in rgba(var(--ms-*-rgb), alpha) */
  --ms-accent-rgb:  99, 91, 255;
  --ms-red-rgb:    240, 68, 56;
  --ms-green-rgb:   18, 183, 106;
  --ms-amber-rgb:  247, 144, 9;
  --ms-navy-rgb:    10, 37, 64;
  --ms-black-rgb:   16, 24, 40;
  --ms-surface-rgb: 255, 255, 255;

  /* Operadoras */
  --op-bradesco:    #cf1238;
  --op-sulamerica:  #f47a20;
  --op-amil:        #7fa8f8;
  --op-unimed:      #173766;
  --op-unimed-text: #43d17e;
  --op-porto:       #2e3c82;

  /* Operadoras tabeladas (Cotador Varejo) — cor dominante de cada logo em
     UTIL/static/logos-operadoras/, extraída com Pillow (pixel não-branco/
     transparente mais frequente). Unimed POA e VS são cooperativas com o
     verde Unimed (diferente do --op-unimed acima, que é a Unimed Seguros). */
  --op-hapvida:     #0064b0;
  --op-doctor:      #007c40;
  --op-medsenior:   #007438;
  --op-unimed-coop: #00985c;
  --op-alice:       #be0380;
  --op-omint:       #002475;
  --op-prevent:     #0b345f;
  --op-careplus:    #007ac9;

  /* Flow — painéis com gradiente azul-acinzentado */
  --flow-nav-bg:       linear-gradient(180deg, #eef4fb 0%, #e6eef7 100%);
  --flow-nav-line:     #ccd8e6;
  --flow-work-bg:      linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  --flow-work-line:    #d4deea;
  --flow-insp-bg:      linear-gradient(180deg, #f9fbfe 0%, #f2f6fb 100%);
  /* Flow chat UI */
  --flow-panel-line:   #dde5ef;
  --flow-thread-line:  #dce4ee;
  --flow-bubble-out:   #eef4ff;
  --flow-bubble-out-ln:#cfe0ff;
  --flow-bubble-sys:   #f5f7fa;
  --flow-window-bg:    linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
  --flow-window-ln:    #cfe0f3;
  --flow-chat-bg:      linear-gradient(180deg, #fbfcfe 0%, #f2f6fb 100%);
  --flow-composer-bg:  linear-gradient(180deg, #fcfdff 0%, #f7fafc 100%);
  --flow-kv-bg:        linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  --flow-search-bg:    rgba(255, 255, 255, .78);
  --flow-filter-bg:    rgba(255, 255, 255, .74);
  --flow-edit-hover:   #dddaff;
  --flow-funil-ln:     #c8c2ff;

  /* Marca Claude AI */
  --ms-claude:      #cc785c;
  --ms-excel-green: #1d6f42;
  --ms-claude-soft: #f9ede8;

  /* Extended semantic palette (não coberta pelos tokens base) */
  --ms-orange:       #ea580c;
  --ms-orange-soft:  #fff7ed;
  --ms-orange-line:  #fed7aa;
  --ms-purple:       #7c3aed;
  --ms-purple-soft:  #f3e8ff;
  --ms-purple-line:  #c4b5fd;
  --ms-info:         #2563eb;
  --ms-info-soft:    #eef6ff;
  --ms-info-line:    #cfe3ff;
  --ms-green-line:   #b6e8cf;
  --ms-green-deep:   #065f46;
  --ms-amber-line:   #fdba74;
  --ms-amber-deep:   #b45309;
  --ms-red-line:     #fecaca;
  --ms-red-deep:     #991b1b;
  --ms-accent-deep:  #3730a3;

  /* Code / log panels (dark surface) */
  --ms-code-bg:      #0f172a;
  --ms-code-text:    #e2e8f0;
  --ms-code-muted:   #8fa4c7;

  /* WhatsApp */
  --ms-wapp-read:    #4fc3f7;

  /* RGB variants para cores estendidas */
  --ms-orange-rgb:  234, 88,  12;
  --ms-purple-rgb:  124, 58, 237;
  --ms-info-rgb:     37, 99, 235;

  /* Typography scale */
  --ms-text-xs:   11px;
  --ms-text-sm:   13px;
  --ms-text-base: 14px;
  --ms-text-md:   16px;
  --ms-text-lg:   20px;
  --ms-text-xl:   24px;

  /* Spacing scale — base 4px */
  --ms-space-1:  4px;
  --ms-space-2:  8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-8: 32px;
}

/* ── Font override ── */
body, button, input, select, textarea, label, a {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Body & background ── */
body {
  margin: 0;
  background: var(--ms-bg) !important;
  color: var(--ms-text);
}

/* ── Rail ── */
.ms-rail {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--ms-rail-w); z-index: 220;
  background: var(--ms-navy);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 12px; gap: 2px;
}

.ms-rail-logo {
  width: 72px; height: 42px;
  background: var(--ms-surface);
  border-radius: var(--ms-radius);
  display: flex; align-items: center; justify-content: center;
  padding: 5px 6px;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--ms-tr);
  margin-bottom: 14px;
}
.ms-rail-logo img { display: block; max-width: 100%; max-height: 100%; }
.ms-rail-logo:hover { opacity: .85; }

.ms-rail-group {
  width: 88px;
  border-radius: var(--ms-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 9px 4px 8px;
  cursor: pointer; color: var(--ms-rail-text);
  border: none; background: none;
  transition: background var(--ms-tr), color var(--ms-tr);
  position: relative; text-decoration: none;
}
.ms-rail-group:hover  { background: rgba(255,255,255,.09); color: rgba(255,255,255,.9); }
.ms-rail-group.is-active { background: rgba(99,91,255,.22); color: #fff; }
.ms-rail-group.is-active .ms-rail-tip { font-weight: 700; }
.ms-rail-group svg { width: 20px; height: 20px; flex-shrink: 0; }

.ms-rail-tip {
  font-size: 10px; font-weight: 600; line-height: 1.25;
  color: inherit; text-align: center;
  word-break: break-word; hyphens: auto;
  max-width: 84px;
}

.ms-rail-groups {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; overflow-y: auto;
  scrollbar-width: none;
}
.ms-rail-groups::-webkit-scrollbar { display: none; }

.ms-rail-divider { width: 28px; height: 1px; background: rgba(255,255,255,.1); margin: 4px 0; flex-shrink: 0; }

.ms-rail-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ms-accent), #9b8ffc);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
  cursor: pointer; position: relative;
  border: 2px solid rgba(255,255,255,.15);
  transition: border-color var(--ms-tr);
  margin-top: 6px;
}
.ms-rail-avatar:hover { border-color: rgba(255,255,255,.4); }

/* ── Nav popup ── */
.ms-nav-popup {
  position: fixed;
  left: calc(var(--ms-rail-w) + 6px);
  min-width: 210px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-md);
  z-index: 210;
  padding: 5px;
  overflow: hidden;
}
.ms-nav-popup.is-hidden { display: none; }

.ms-nav-popup-group {
  font-size: 10px; font-weight: 700;
  color: var(--ms-muted-lt); text-transform: uppercase; letter-spacing: .08em;
  padding: 7px 10px 5px;
}

.ms-nav-popup-panel { display: none; flex-direction: column; }
.ms-nav-popup-panel.is-active { display: flex; }

.ms-nav-popup-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-sm); font-weight: 500;
  color: var(--ms-muted); text-decoration: none;
  transition: background var(--ms-tr), color var(--ms-tr);
  white-space: nowrap; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
}
.ms-nav-popup-item:hover { background: var(--ms-bg); color: var(--ms-text); }
.ms-nav-popup-item.is-active {
  background: var(--ms-accent-soft); color: var(--ms-accent); font-weight: 600;
}
.ms-nav-popup-item--disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.ms-nav-popup-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .5; }
.ms-nav-popup-item.is-active svg { opacity: 1; }
.ms-nav-popup-item-text { flex: 1; }

.ms-nav-popup-sep { height: 1px; background: var(--ms-line); margin: 4px 0; }

.ms-nav-popup-user {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--ms-line); margin-top: 2px;
}
.ms-nav-popup-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ms-accent), #9b8ffc);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: white;
}
.ms-nav-popup-user-name { font-size: 12px; font-weight: 600; color: var(--ms-text); line-height: 1.2; }
.ms-nav-popup-user-logout { font-size: 11px; color: var(--ms-muted-lt); }
.ms-nav-popup-user-logout a { color: inherit; text-decoration: none; }
.ms-nav-popup-user-logout a:hover { color: var(--ms-red); }

/* ── Sino de notificações ── */
.ms-rail-notif-badge {
  position: absolute;
  top: 4px;
  right: 10px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.ms-notif-marcar-todas {
  background: none; border: none; cursor: pointer;
  color: var(--ms-accent); font-size: 10px; font-weight: 600;
  padding: 0; text-transform: none; letter-spacing: normal;
}
.ms-notif-marcar-todas:hover { text-decoration: underline; }
.ms-notif-vazio {
  font-size: var(--ms-text-sm); color: var(--ms-muted-lt);
  text-align: center; padding: 16px 10px;
}
.ms-notif-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: var(--ms-radius-sm);
  text-decoration: none;
  max-width: 260px;
}
.ms-notif-item:hover { background: var(--ms-bg); }
.ms-notif-item.is-nao-lida { background: var(--ms-accent-soft); }
.ms-notif-item-titulo {
  font-size: var(--ms-text-sm); font-weight: 500; color: var(--ms-text);
  white-space: normal; word-break: break-word;
}
.ms-notif-item-dt { font-size: 10px; color: var(--ms-muted-lt); }

/* ── Main wrapper (wrapper semântico; layout real fica em .ms-content) ── */
.ms-main { /* sem CSS de layout — ms-content é position:fixed */ }

/* ── Topbar (full-width; título empurrado para além do brand) ── */
.ms-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: var(--ms-topbar-h);
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-line);
  padding: 0 24px 0 calc(var(--ms-rail-w) + 24px);
  display: flex; align-items: center; gap: 12px;
}
.ms-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  color: var(--ms-muted); font-size: 13px; flex-shrink: 0;
}
.ms-breadcrumb-sep { color: var(--ms-line); }
.ms-breadcrumb-cur { color: var(--ms-text); font-weight: 600; }
.ms-breadcrumb-sub { color: var(--ms-muted); }

.ms-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ms-tb-btn {
  width: 34px; height: 34px; border-radius: var(--ms-radius);
  display: grid; place-items: center;
  color: var(--ms-muted); cursor: pointer;
  border: none; background: transparent;
  transition: background var(--ms-tr), color var(--ms-tr);
}
.ms-tb-btn:hover { background: var(--ms-bg); color: var(--ms-text); }

.ms-tb-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ms-accent); color: var(--ms-on-accent);
  height: 36px; padding: 0 16px; border-radius: var(--ms-radius);
  font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; text-decoration: none;
  transition: background var(--ms-tr); white-space: nowrap;
  box-sizing: border-box;
}
.ms-tb-primary:hover { background: var(--ms-accent-hover); color: var(--ms-on-accent); }

.ms-tb-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ms-surface); color: var(--ms-muted);
  height: 36px; padding: 0 14px; border-radius: var(--ms-radius);
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--ms-line-strong); cursor: pointer; text-decoration: none;
  transition: border-color var(--ms-tr), color var(--ms-tr); white-space: nowrap;
  box-sizing: border-box;
}
.ms-tb-secondary:hover { border-color: var(--ms-accent); color: var(--ms-accent); }

/* ── Content area ── */
/*
  Posicionamento universal: cola exatamente no espaço entre topbar e viewport,
  respeitando sidebar aberta (220px) ou recolhida (52px) via CSS puro.
  Não depende de cadeia flex nem de margin/height calculados por JS.
*/
.ms-content {
  position: fixed;
  top: var(--ms-topbar-h);
  left: var(--ms-rail-w);
  right: 0;
  bottom: 0;
  padding: 24px 28px;
  overflow-y: auto;
}

/* Modo tela cheia (Fullscreen API) — telas pensadas pra rodar numa TV
   (ex.: Dashboard Inbound) chamam requestFullscreen() no <html> e o rail +
   topbar + barra de filtro somem, sobrando só o conteúdo (quem olha uma TV
   não mexe em filtro). Dormant em toda tela que não aciona fullscreen —
   sem custo pra quem não usa. */
:fullscreen .ms-rail,
:fullscreen .ms-topbar,
:fullscreen .ms-filterbar,
:fullscreen .op-filterbar { display: none; }
:fullscreen .ms-content { top: 0; left: 0; }

/* Some o botão de entrar em tela cheia junto com a topbar — sem ele visível
   pra sair, sobra só o Back do controle (nem todo remoto de Fire TV aciona
   Esc de forma confiável). Botão flutuante próprio, só some quando
   :fullscreen está ativo. */
.ms-fullscreen-exit {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 300;
  width: 36px; padding: 0; justify-content: center;
  font-size: 20px; line-height: 1;
}
:fullscreen .ms-fullscreen-exit { display: inline-flex; }

/*
  Variante para SPAs com painéis de altura total (Flow, Operacional, etc.).
  Impede scroll na página; cada painel gerencia seu próprio scroll interno.
*/
.ms-content--fill {
  overflow: hidden;
  padding-bottom: 0;
}
/* Qualquer filho direto de --fill preenche a altura disponível */
.ms-content--fill > * {
  height: 100%;
}

/* ── Command palette ── */
.ms-cmd-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,37,64,.38); backdrop-filter: blur(3px);
  z-index: 500; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.ms-cmd-overlay.ms-open { display: flex; }
.ms-cmd-box {
  width: 540px; background: var(--ms-surface);
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xl); overflow: hidden;
}
.ms-cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--ms-line);
}
.ms-cmd-input {
  flex: 1; border: none; outline: none;
  font-size: var(--ms-text-md); color: var(--ms-text); background: transparent;
}
.ms-cmd-results { padding: 6px; }
.ms-cmd-section {
  font-size: var(--ms-text-xs); font-weight: 700; color: var(--ms-muted);
  text-transform: uppercase; letter-spacing: .07em; padding: 8px 10px 4px;
}
.ms-cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--ms-radius-sm); cursor: pointer;
  transition: background var(--ms-tr); text-decoration: none; color: var(--ms-text);
}
.ms-cmd-item:hover { background: var(--ms-bg); }
.ms-cmd-item-icon {
  width: 28px; height: 28px; border-radius: var(--ms-radius-sm);
  display: grid; place-items: center;
  background: var(--ms-bg); font-size: 14px; flex-shrink: 0;
}
.ms-cmd-item-label { font-size: var(--ms-text-sm); font-weight: 500; }

/* ── Scrollbar ── */
.ms-content::-webkit-scrollbar { width: 4px; }
.ms-content::-webkit-scrollbar-thumb { background: var(--ms-line); border-radius: var(--ms-radius-full); }

/* ── Disabled nav items ── */

/* ── Utilitário global ── */
.is-hidden { display: none !important; }