/* ═══════════════════════════════════════════════════════════════
   APIZAP — Design System v2 (atendimento omnichannel)
   Prefixo ax- em tudo: convive com style2.css das telas legadas.
   Tema claro em todo o painel (escuro desativado até migrar as telas legadas).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ax-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ax-primary: #0b74f1;
    --ax-primary-hover: #0660cf;
    --ax-primary-soft: #e8f2ff;
    --ax-primary-text: #0a5fc4;
    --ax-on-primary: #ffffff;

    --ax-wa: #16a34a;
    --ax-wa-soft: #e7f7ed;
    --ax-web: #7c3aed;
    --ax-web-soft: #f1eafe;

    --ax-bg: #f3f5f9;
    --ax-surface: #ffffff;
    --ax-surface-2: #f8f9fc;
    --ax-surface-3: #eef1f6;
    --ax-border: #e3e7ee;
    --ax-border-strong: #cfd5df;

    --ax-text: #172033;
    --ax-text-2: #4a5568;
    --ax-text-3: #8a94a6;

    --ax-success: #16a34a;
    --ax-success-soft: #e7f7ed;
    --ax-warning: #d97706;
    --ax-warning-soft: #fef4e2;
    --ax-danger: #dc2626;
    --ax-danger-soft: #fdecec;
    --ax-note: #fff8db;
    --ax-note-border: #f3e2a0;

    --ax-bubble-in: #ffffff;
    --ax-bubble-out: #dcebff;
    --ax-chat-bg: #eef2f8;

    --ax-radius-sm: 8px;
    --ax-radius: 12px;
    --ax-radius-lg: 16px;
    --ax-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --ax-shadow: 0 4px 16px rgba(16, 24, 40, .08);
    --ax-shadow-lg: 0 16px 48px rgba(16, 24, 40, .16);

    --ax-sidebar-w: 260px; /* igual ao margin-left do .main-content legado */
    --ax-sidebar-w-collapsed: 72px;
}

/* Tema escuro desativado de proposito: as telas antigas (style2.css) so existem
   em claro, e seguir o modo escuro do sistema deixava o painel alternando entre
   telas claras e escuras. Reativar quando todas as telas usarem este design system. */

/* ── Base (somente telas novas) ───────────────────────────────── */
body.ax-body {
    margin: 0;
    font-family: var(--ax-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ax-text);
    background: var(--ax-bg);
    -webkit-font-smoothing: antialiased;
}
body.ax-body *, body.ax-body *::before, body.ax-body *::after { box-sizing: border-box; }
body.ax-body a { color: var(--ax-primary-text); text-decoration: none; }
body.ax-body h1, body.ax-body h2, body.ax-body h3, body.ax-body h4 { margin: 0; line-height: 1.25; color: var(--ax-text); }
body.ax-body p { margin: 0; }
body.ax-body button, body.ax-body input, body.ax-body select, body.ax-body textarea { font-family: inherit; font-size: inherit; color: inherit; }

.ax-main {
    margin-left: var(--ax-sidebar-w);
    min-height: 100vh;
    transition: margin-left .2s ease;
}
html.ax-collapsed .ax-main, html.ax-collapsed .main-content { margin-left: var(--ax-sidebar-w-collapsed) !important; }
.ax-page { padding: 28px 32px 48px; max-width: 1320px; margin: 0 auto; }
.ax-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ax-page-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ax-page-sub { color: var(--ax-text-3); margin-top: 4px; }
.ax-center-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--ax-bg, #f3f5f9); font-family: var(--ax-font); padding: 16px; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.ax-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1100;
    width: var(--ax-sidebar-w);
    background: var(--ax-surface, #fff);
    border-right: 1px solid var(--ax-border, #e3e7ee);
    display: flex; flex-direction: column;
    font-family: var(--ax-font);
    font-size: 14px;
    color: var(--ax-text, #172033);
    transition: width .2s ease, transform .25s ease;
}
.ax-sidebar * { box-sizing: border-box; }
.ax-sidebar a { text-decoration: none; }
.ax-sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px 14px; }
.ax-sb-logo img { height: 30px; width: auto; display: block; }
.ax-sb-logo .ax-sb-logo-mini { display: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ax-primary); color: #fff; font-weight: 800; align-items: center; justify-content: center; font-size: 15px; }
.ax-sb-toggle { border: 0; background: transparent; color: var(--ax-text-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ax-sb-toggle:hover { background: var(--ax-surface-3); color: var(--ax-text); }
.ax-sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; }
.ax-sb-group { margin-top: 14px; padding: 0 10px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ax-text-3); white-space: nowrap; }
.ax-sb-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px; margin: 1px 0;
    color: var(--ax-text-2); font-weight: 500; white-space: nowrap;
    transition: background .15s, color .15s;
}
.ax-sb-link:hover { background: var(--ax-surface-3); color: var(--ax-text); }
.ax-sb-link.active { background: var(--ax-primary-soft); color: var(--ax-primary-text); font-weight: 650; }
.ax-sb-link svg { flex-shrink: 0; width: 20px; height: 20px; }
.ax-sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ax-sb-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ax-primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ax-sb-badge[hidden] { display: none; }
.ax-sb-badge.late { background: var(--ax-danger); animation: ax-pulse 1.6s ease-in-out infinite; }
@keyframes ax-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); } 50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .ax-sb-badge.late { animation: none; } }
.ax-sb-foot { border-top: 1px solid var(--ax-border); padding: 12px; }
.ax-sb-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; cursor: pointer; position: relative; }
.ax-sb-user:hover { background: var(--ax-surface-3); }
.ax-sb-user-info { flex: 1; min-width: 0; line-height: 1.25; }
.ax-sb-user-name { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-sb-user-role { font-size: 12px; color: var(--ax-text-3); }
.ax-sb-menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; box-shadow: var(--ax-shadow-lg); padding: 6px; display: none; z-index: 5; }
.ax-sb-menu.open { display: block; }
.ax-sb-menu a, .ax-sb-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ax-text-2); background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.ax-sb-menu a:hover, .ax-sb-menu button:hover { background: var(--ax-surface-3); color: var(--ax-text); }
.ax-sb-menu .ax-danger-link { color: var(--ax-danger); }
.ax-sb-avail { display: flex; gap: 4px; padding: 6px; }
.ax-sb-avail button { flex: 1; justify-content: center; font-size: 12px; padding: 6px; border: 1px solid var(--ax-border); }
.ax-sb-avail button.active { border-color: var(--ax-primary); color: var(--ax-primary-text); background: var(--ax-primary-soft); }

html.ax-collapsed .ax-sidebar { width: var(--ax-sidebar-w-collapsed); }
html.ax-collapsed .ax-sb-label, html.ax-collapsed .ax-sb-group, html.ax-collapsed .ax-sb-user-info, html.ax-collapsed .ax-sb-logo img { display: none; }
html.ax-collapsed .ax-sb-logo .ax-sb-logo-mini { display: inline-flex; }
html.ax-collapsed .ax-sb-head { flex-direction: column; padding: 16px 8px 8px; }
html.ax-collapsed .ax-sb-link { justify-content: center; position: relative; }
html.ax-collapsed .ax-sb-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
html.ax-collapsed .ax-sb-menu { left: 0; right: auto; width: 220px; }

.ax-mobilebar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1050; background: var(--ax-surface, #fff); border-bottom: 1px solid var(--ax-border, #e3e7ee); align-items: center; gap: 12px; padding: 0 12px; font-family: var(--ax-font); }
.ax-mobilebar img { height: 26px; }
.ax-mobilebar button { border: 0; background: none; padding: 6px; border-radius: 8px; color: var(--ax-text-2, #4a5568); cursor: pointer; }
.ax-sb-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1090; }
.ax-sb-overlay.active { display: block; }

@media (max-width: 1024px) {
    .ax-sidebar { transform: translateX(-100%); width: 280px !important; }
    .ax-sidebar.open { transform: translateX(0); box-shadow: var(--ax-shadow-lg); }
    .ax-sb-toggle.ax-desktop-only { display: none; }
    html.ax-collapsed .ax-sb-label, html.ax-collapsed .ax-sb-group, html.ax-collapsed .ax-sb-user-info, html.ax-collapsed .ax-sb-logo img { display: initial; }
    html.ax-collapsed .ax-sb-logo .ax-sb-logo-mini { display: none; }
    .ax-mobilebar { display: flex; }
    .ax-main, html.ax-collapsed .ax-main, html.ax-collapsed .main-content { margin-left: 0 !important; padding-top: 56px; }
    .ax-page { padding: 20px 16px 40px; }
}

/* ── Botões ──────────────────────────────────────────────────── */
.ax-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 14px;
    white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    text-decoration: none !important; line-height: 1;
}
.ax-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ax-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ax-primary) 35%, transparent); outline-offset: 1px; }
.ax-btn:disabled { opacity: .55; cursor: not-allowed; }
.ax-btn-primary { background: var(--ax-primary); color: var(--ax-on-primary) !important; }
.ax-btn-primary:hover:not(:disabled) { background: var(--ax-primary-hover); }
.ax-btn-secondary { background: var(--ax-surface); border-color: var(--ax-border-strong); color: var(--ax-text) !important; }
.ax-btn-secondary:hover:not(:disabled) { background: var(--ax-surface-3); }
.ax-btn-ghost { background: transparent; color: var(--ax-text-2) !important; }
.ax-btn-ghost:hover:not(:disabled) { background: var(--ax-surface-3); color: var(--ax-text) !important; }
.ax-btn-danger { background: var(--ax-danger); color: #fff !important; }
.ax-btn-danger:hover:not(:disabled) { filter: brightness(.94); }
.ax-btn-soft { background: var(--ax-primary-soft); color: var(--ax-primary-text) !important; }
.ax-btn-wa { background: var(--ax-wa); color: #fff !important; }
.ax-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.ax-btn-xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; gap: 5px; }
.ax-btn-icon { width: 38px; padding: 0; }
.ax-btn-icon.ax-btn-sm { width: 32px; }
.ax-btn-block { width: 100%; }
.ax-btn-round { border-radius: 999px; }

/* ── Formulários ─────────────────────────────────────────────── */
.ax-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ax-label { font-size: 13px; font-weight: 600; color: var(--ax-text-2); }
.ax-hint { font-size: 12px; color: var(--ax-text-3); }
.ax-input, .ax-select, .ax-textarea {
    width: 100%; height: 40px; padding: 0 12px;
    background: var(--ax-surface); color: var(--ax-text);
    border: 1px solid var(--ax-border-strong); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s; outline: none;
}
.ax-textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus { border-color: var(--ax-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 18%, transparent); }
.ax-input-sm { height: 34px; font-size: 13px; }
.ax-search { position: relative; }
.ax-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ax-text-3); pointer-events: none; }
.ax-search .ax-input { padding-left: 34px; background: var(--ax-surface-2); border-color: var(--ax-border); }
.ax-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.ax-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--ax-text-2); }
.ax-check input { width: 16px; height: 16px; accent-color: var(--ax-primary); }

.ax-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ax-switch-track { width: 38px; height: 22px; border-radius: 11px; background: var(--ax-border-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.ax-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ax-switch input:checked + .ax-switch-track { background: var(--ax-primary); }
.ax-switch input:checked + .ax-switch-track::after { transform: translateX(16px); }
.ax-switch input:focus-visible + .ax-switch-track { outline: 3px solid color-mix(in srgb, var(--ax-primary) 35%, transparent); }

/* ── Cards / superfícies ─────────────────────────────────────── */
.ax-card { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-sm); }
.ax-card-body { padding: 20px; }
.ax-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ax-border); }
.ax-card-title { font-size: 15px; font-weight: 700; }
.ax-card-sub { font-size: 13px; color: var(--ax-text-3); margin-top: 2px; }
.ax-grid { display: grid; gap: 16px; }
.ax-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ax-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ax-grid-2, .ax-grid-3, .ax-grid-4 { grid-template-columns: minmax(0, 1fr); } }

.ax-stat { padding: 18px 20px; }
.ax-stat-label { font-size: 13px; color: var(--ax-text-3); font-weight: 600; }
.ax-stat-value { font-size: 28px; font-weight: 750; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ax-stat-foot { font-size: 12px; color: var(--ax-text-3); margin-top: 4px; }

/* ── Tabs ────────────────────────────────────────────────────── */
.ax-seg { display: flex; gap: 4px; padding: 4px; background: var(--ax-surface-3); border-radius: 12px; }
.ax-seg button, .ax-seg a {
    flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent;
    font-weight: 600; font-size: 12.5px; color: var(--ax-text-2); cursor: pointer; white-space: nowrap;
}
.ax-seg button.active, .ax-seg a.active { background: var(--ax-surface); color: var(--ax-primary-text); box-shadow: var(--ax-shadow-sm); }
/* Abas da lista de conversas: com 5 abas a coluna fica estreita — rolam para o lado. */
#tabs.ax-seg { flex-wrap: wrap; }
#tabs.ax-seg button { flex: 1 1 auto; padding: 0 10px; }
.ax-seg .ax-count { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; background: var(--ax-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ax-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-border); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ax-tabs button, .ax-tabs a { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--ax-text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.ax-tabs button.active, .ax-tabs a.active { color: var(--ax-primary-text); border-bottom-color: var(--ax-primary); }

/* ── Badges / etiquetas ──────────────────────────────────────── */
.ax-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--ax-surface-3); color: var(--ax-text-2); }
.ax-badge-primary { background: var(--ax-primary-soft); color: var(--ax-primary-text); }
.ax-badge-success { background: var(--ax-success-soft); color: var(--ax-success); }
.ax-badge-warning { background: var(--ax-warning-soft); color: var(--ax-warning); }
.ax-badge-danger { background: var(--ax-danger-soft); color: var(--ax-danger); }
.ax-badge-wa { background: var(--ax-wa-soft); color: var(--ax-wa); }
.ax-badge-web { background: var(--ax-web-soft); color: var(--ax-web); }
.ax-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ax-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ax-dot-online { background: var(--ax-success); }
.ax-dot-away { background: var(--ax-warning); }
.ax-dot-offline { background: var(--ax-text-3); }

/* ── Avatar ──────────────────────────────────────────────────── */
.ax-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--ax-primary); background-size: cover; background-position: center; }
.ax-avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.ax-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.ax-avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.ax-avatar-channel { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ax-surface); display: flex; align-items: center; justify-content: center; }
.ax-avatar-channel svg { width: 10px; height: 10px; color: #fff; }
.ax-avatar-channel.wa { background: var(--ax-wa); }
.ax-avatar-channel.web { background: var(--ax-web); }
.ax-avatar-stack { display: inline-flex; }
.ax-avatar-stack .ax-avatar { border: 2px solid var(--ax-surface); margin-left: -8px; }
.ax-avatar-stack .ax-avatar:first-child { margin-left: 0; }

/* ── Tabela ──────────────────────────────────────────────────── */
.ax-table-wrap { overflow-x: auto; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ax-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ax-text-3); padding: 10px 16px; border-bottom: 1px solid var(--ax-border); white-space: nowrap; }
.ax-table td { padding: 12px 16px; border-bottom: 1px solid var(--ax-border); vertical-align: middle; }
.ax-table tr:last-child td { border-bottom: 0; }
.ax-table tbody tr:hover td { background: var(--ax-surface-2); }
.ax-table .ax-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Modal / Drawer ──────────────────────────────────────────── */
.ax-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; }
.ax-backdrop.open { display: flex; }
.ax-modal { background: var(--ax-surface); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: ax-pop .16s ease-out; }
.ax-modal-lg { max-width: 820px; }
.ax-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--ax-border); }
.ax-modal-title { font-size: 16px; font-weight: 700; }
.ax-modal-body { padding: 20px; overflow-y: auto; }
.ax-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ax-border); }
.ax-drawer-backdrop { align-items: stretch; justify-content: flex-end; padding: 0; }
.ax-drawer { background: var(--ax-surface); width: 100%; max-width: 420px; height: 100%; display: flex; flex-direction: column; box-shadow: var(--ax-shadow-lg); animation: ax-slide .2s ease-out; }
@keyframes ax-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ax-slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Dropdown ────────────────────────────────────────────────── */
.ax-dropdown { position: relative; display: inline-block; }
.ax-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; box-shadow: var(--ax-shadow-lg); padding: 6px; z-index: 50; display: none; }
.ax-menu.open { display: block; }
.ax-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--ax-text-2); font-size: 14px; text-align: left; }
.ax-menu-item:hover { background: var(--ax-surface-3); color: var(--ax-text); }
.ax-menu-item svg { width: 16px; height: 16px; }
.ax-menu-item.danger { color: var(--ax-danger); }
.ax-menu-sep { height: 1px; background: var(--ax-border); margin: 6px 0; }

/* ── Toast ───────────────────────────────────────────────────── */
.ax-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.ax-toast { background: #172033; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--ax-shadow-lg); font-size: 14px; max-width: 360px; animation: ax-pop .16s ease-out; display: flex; gap: 10px; align-items: center; }
.ax-toast.error { background: var(--ax-danger); }
.ax-toast.success { background: #15803d; }

/* ── Estados ─────────────────────────────────────────────────── */
.ax-empty { text-align: center; padding: 48px 24px; color: var(--ax-text-3); max-width: 440px; margin: 0 auto; }
.ax-empty h2, .ax-empty h3 { color: var(--ax-text); margin: 12px 0 6px; font-size: 17px; }
.ax-empty p { margin-bottom: 16px; }
.ax-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ax-primary-soft); color: var(--ax-primary-text); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.ax-empty-icon svg { width: 26px; height: 26px; }
.ax-alert { padding: 12px 14px; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.ax-alert-info { background: var(--ax-primary-soft); color: var(--ax-primary-text); }
.ax-alert-warning { background: var(--ax-warning-soft); color: var(--ax-warning); }
.ax-alert-danger { background: var(--ax-danger-soft); color: var(--ax-danger); }
.ax-alert-success { background: var(--ax-success-soft); color: var(--ax-success); }
.ax-skel { background: linear-gradient(90deg, var(--ax-surface-3) 25%, var(--ax-surface-2) 37%, var(--ax-surface-3) 63%); background-size: 400% 100%; animation: ax-skel 1.3s ease infinite; border-radius: 6px; }
@keyframes ax-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ax-spinner { width: 18px; height: 18px; border: 2px solid var(--ax-border-strong); border-top-color: var(--ax-primary); border-radius: 50%; animation: ax-spin .7s linear infinite; display: inline-block; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* ── Utilitários ─────────────────────────────────────────────── */
.ax-flex { display: flex; align-items: center; gap: 8px; }
.ax-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-wrap { flex-wrap: wrap; }
.ax-grow { flex: 1; min-width: 0; }
.ax-muted { color: var(--ax-text-3); }
.ax-small { font-size: 12px; }
.ax-strong { font-weight: 700; }
.ax-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-mt-2 { margin-top: 8px; } .ax-mt-4 { margin-top: 16px; } .ax-mt-6 { margin-top: 24px; }
.ax-mb-2 { margin-bottom: 8px; } .ax-mb-4 { margin-bottom: 16px; }
.ax-hide { display: none !important; }
.ax-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--ax-surface-3); border: 1px solid var(--ax-border); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; word-break: break-all; color: var(--ax-text); }
.ax-copy-field { display: flex; gap: 8px; }
.ax-copy-field .ax-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--ax-surface-2); }
.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ═══════════════════════════════════════════════════════════════
   INBOX (atendimento)
   ═══════════════════════════════════════════════════════════════ */
.ax-inbox { display: grid; grid-template-columns: 360px minmax(0, 1fr) 340px; height: 100vh; overflow: hidden; }
.ax-inbox.no-details { grid-template-columns: 360px minmax(0, 1fr) 0; }
.ax-inbox.no-details .ax-details { display: none; }

.ax-list { display: flex; flex-direction: column; border-right: 1px solid var(--ax-border); background: var(--ax-surface); min-height: 0; }
.ax-list-head { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.ax-list-title { display: flex; align-items: center; justify-content: space-between; }
.ax-list-title h1 { font-size: 20px; font-weight: 750; }
.ax-list-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-list-filters .ax-select { flex: 1 1 0; min-width: 0; }
.ax-list-filters #fSort { flex-basis: 100%; }
.ax-list-filters .ax-select { height: 32px; font-size: 13px; padding: 0 8px; background: var(--ax-surface-2); border-color: var(--ax-border); }
.ax-list-body { flex: 1; overflow-y: auto; min-height: 0; }
.ax-conv { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ax-border); cursor: pointer; position: relative; transition: background .12s; }
.ax-conv:hover { background: var(--ax-surface-2); }
.ax-conv.active { background: var(--ax-primary-soft); }
.ax-conv.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ax-primary); }
.ax-conv-main { flex: 1; min-width: 0; }
.ax-conv.selected { background: var(--ax-primary-soft); }
.ax-conv-check { display: flex; align-items: center; flex-shrink: 0; }
.ax-conv-check input { width: 17px; height: 17px; accent-color: var(--ax-primary); pointer-events: none; }
.ax-list-tools { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ax-chips { display: flex; gap: 4px; min-width: 0; }
.ax-chips button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 14px; white-space: nowrap; border: 1px solid var(--ax-border); background: var(--ax-surface); color: var(--ax-text-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ax-chips button:hover { background: var(--ax-surface-2); }
.ax-chips button.active { background: var(--ax-primary-soft); color: var(--ax-primary-text); border-color: var(--ax-primary); }
.ax-chips button svg { flex-shrink: 0; }
#btnSelect { flex-shrink: 0; width: 28px; height: 28px; padding: 0; }
#btnSelect.active { background: var(--ax-primary); border-color: var(--ax-primary); color: #fff; }
.ax-bulk { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--ax-primary-soft); border: 1px solid var(--ax-border); }
.ax-bulk-row { display: flex; align-items: center; gap: 8px; }
.ax-bulk .ax-select { height: 32px; font-size: 13px; padding: 0 8px; min-width: 0; }
.ax-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--ax-surface); }
.ax-photo-actions { gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.ax-conv-top { display: flex; align-items: baseline; gap: 8px; }
.ax-conv-name { font-weight: 650; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-conv-time { font-size: 12px; color: var(--ax-text-3); flex-shrink: 0; }
.ax-conv-time.unread { color: var(--ax-success); font-weight: 700; }
.ax-conv-preview { font-size: 13px; color: var(--ax-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ax-conv.unread .ax-conv-preview { color: var(--ax-text); font-weight: 550; }
.ax-conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 22px; }
.ax-conv-meta .ax-grow { display: flex; gap: 4px; overflow: hidden; }
.ax-unread { min-width: 20px; height: 20px; border-radius: 10px; background: var(--ax-success); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }

.ax-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ax-chat-bg); }
.ax-thread-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ax-surface); border-bottom: 1px solid var(--ax-border); min-height: 64px; }
.ax-thread-head .ax-grow { line-height: 1.3; min-width: 0; }
.ax-thread-head #thSub { flex-wrap: nowrap !important; overflow: hidden; white-space: nowrap; }
.ax-thread-name { font-weight: 700; font-size: 15px; }
.ax-thread-actions { display: flex; gap: 6px; align-items: center; }
.ax-pinned { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--ax-note); border-bottom: 1px solid var(--ax-note-border); font-size: 13px; cursor: pointer; }
.ax-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--ax-border); background: var(--ax-warning-soft); color: var(--ax-warning); }
.ax-banner .ax-grow { color: var(--ax-text-2); }
.ax-messages { flex: 1; overflow-y: auto; padding: 16px 24px 8px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ax-day { align-self: center; margin: 12px 0 8px; font-size: 12px; font-weight: 600; color: var(--ax-text-3); background: var(--ax-surface); padding: 4px 12px; border-radius: 999px; box-shadow: var(--ax-shadow-sm); }
.ax-msg { max-width: min(72%, 620px); display: flex; flex-direction: column; margin-top: 4px; }
.ax-msg.in { align-self: flex-start; }
.ax-msg.out { align-self: flex-end; align-items: flex-end; }
.ax-msg-sender { font-size: 12px; font-weight: 650; color: var(--ax-text-3); margin: 0 4px 2px; display: flex; align-items: center; gap: 6px; }
.ax-msg.out .ax-msg-sender { justify-content: flex-end; }
.ax-msg-sender .ax-avatar-xs { width: 18px; height: 18px; font-size: 8px; }
.ax-bubble { padding: 8px 12px 6px; border-radius: 14px; background: var(--ax-bubble-in); box-shadow: var(--ax-shadow-sm); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; position: relative; }
.ax-msg.in .ax-bubble { border-top-left-radius: 4px; }
.ax-msg.out .ax-bubble { background: var(--ax-bubble-out); border-top-right-radius: 4px; }
.ax-msg.note .ax-bubble { background: var(--ax-note); border: 1px dashed var(--ax-note-border); }
.ax-msg.ai .ax-bubble { background: var(--ax-web-soft); }
.ax-bubble-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; color: var(--ax-text-3); margin-top: 2px; white-space: nowrap; }
.ax-bubble-foot svg { width: 13px; height: 13px; }
.ax-bubble-foot .ax-ch { display: inline-flex; align-items: center; gap: 3px; }
.ax-bubble img.ax-media, .ax-bubble video.ax-media { max-width: 280px; max-height: 320px; border-radius: 10px; display: block; margin-bottom: 4px; cursor: zoom-in; }
.ax-bubble audio { max-width: 260px; display: block; }
.ax-file { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--ax-surface) 60%, transparent); margin-bottom: 4px; color: var(--ax-text) !important; }
.ax-file-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--ax-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ax-sys { align-self: center; font-size: 12px; color: var(--ax-text-3); background: color-mix(in srgb, var(--ax-surface) 70%, transparent); padding: 4px 12px; border-radius: 999px; margin: 6px 0; text-align: center; max-width: 80%; }
.ax-msg.failed .ax-bubble { outline: 1px solid var(--ax-danger); }

.ax-composer { background: var(--ax-surface); border-top: 1px solid var(--ax-border); padding: 0 16px 12px; }
.ax-composer-tabs { display: flex; gap: 2px; padding-top: 6px; }
.ax-composer-tabs button { border: 0; background: none; padding: 8px 12px; font-weight: 600; font-size: 13px; color: var(--ax-text-3); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.ax-composer-tabs button.active { color: var(--ax-primary-text); border-bottom-color: var(--ax-primary); }
.ax-composer-tabs button[data-mode="note"].active { color: var(--ax-warning); border-bottom-color: var(--ax-warning); }
.ax-composer-box { border: 1px solid var(--ax-border-strong); border-radius: 14px; margin-top: 8px; background: var(--ax-surface); transition: border-color .15s, box-shadow .15s; position: relative; }
.ax-composer-box:focus-within { border-color: var(--ax-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 15%, transparent); }
.ax-composer-box.note { background: var(--ax-note); border-color: var(--ax-note-border); }
.ax-composer textarea { width: 100%; border: 0; outline: 0; resize: none; padding: 12px 14px 4px; min-height: 48px; max-height: 200px; background: transparent; line-height: 1.5; }
.ax-composer-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.ax-composer-bar .ax-grow { display: flex; align-items: center; gap: 8px; }
.ax-channel-pick { width: auto; max-width: 190px; height: 30px; border-radius: 8px; border: 1px solid var(--ax-border); background: var(--ax-surface-2); font-size: 12px; font-weight: 600; padding: 0 8px; }
.ax-sign { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ax-text-3); }
.ax-qr-pop { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; box-shadow: var(--ax-shadow-lg); max-height: 260px; overflow-y: auto; padding: 6px; display: none; z-index: 10; }
.ax-qr-pop.open { display: block; }
.ax-qr-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ax-qr-item:hover, .ax-qr-item.active { background: var(--ax-primary-soft); }
.ax-qr-item b { color: var(--ax-primary-text); font-size: 13px; }
.ax-qr-item div { font-size: 12px; color: var(--ax-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-closed-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--ax-surface); border-top: 1px solid var(--ax-border); color: var(--ax-text-3); flex-wrap: wrap; }

.ax-details { border-left: 1px solid var(--ax-border); background: var(--ax-surface); overflow-y: auto; min-height: 0; }
.ax-details-profile { text-align: center; padding: 24px 20px 16px; border-bottom: 1px solid var(--ax-border); }
.ax-details-profile .ax-avatar { margin: 0 auto 10px; }
.ax-details-name { font-size: 16px; font-weight: 700; }
.ax-section { padding: 16px 20px; border-bottom: 1px solid var(--ax-border); }
.ax-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ax-text-3); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.ax-kv { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; align-items: center; }
.ax-kv svg { width: 15px; height: 15px; color: var(--ax-text-3); flex-shrink: 0; }
.ax-kv span { overflow: hidden; text-overflow: ellipsis; }
.ax-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ax-thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.ax-back-btn { display: none; }

@media (max-width: 1280px) {
    .ax-inbox { grid-template-columns: 320px minmax(0, 1fr) 0; }
    .ax-inbox .ax-details { display: none; }
    .ax-inbox.show-details .ax-details { display: block; position: fixed; right: 0; top: 0; bottom: 0; width: 340px; z-index: 900; box-shadow: var(--ax-shadow-lg); }
}
@media (max-width: 1024px) {
    .ax-inbox { height: calc(100vh - 56px); }
}
@media (max-width: 760px) {
    .ax-inbox { grid-template-columns: minmax(0, 1fr); }
    .ax-inbox .ax-thread { display: none; }
    .ax-inbox.thread-open .ax-list { display: none; }
    .ax-inbox.thread-open .ax-thread { display: flex; }
    .ax-back-btn { display: inline-flex; }
    .ax-messages { padding: 12px; }
    .ax-msg { max-width: 88%; }
    .ax-inbox.show-details .ax-details { width: 100%; }
}

/* Avatar clicável (trocar foto) */
.ax-avatar-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.ax-avatar-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / 45% no-repeat; opacity: 0; transition: opacity .15s; }
.ax-avatar-btn:hover::after, .ax-avatar-btn:focus-visible::after { opacity: 1; }

/* ═════════════════════ Comunicação interna (chat, mural, base) ═════════════════════ */
.ws-chat { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; overflow: hidden; background: var(--ax-surface); }
.ws-chat.thread-open { grid-template-columns: 272px minmax(0, 1fr) 380px; }
.ws-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ax-border); background: var(--ax-surface-2); }
.ws-side-head { padding: 16px 14px 10px; display: grid; gap: 10px; }
.ws-side-head h1 { font-size: 18px; font-weight: 800; margin: 0; }
.ws-side-body { overflow-y: auto; padding: 4px 8px 16px; flex: 1; }
.ws-group { margin-bottom: 14px; }
.ws-group-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ax-text-3); padding: 6px 8px; }
.ws-ch { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ax-text-2); padding: 6px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.ws-ch:hover { background: var(--ax-surface-3); }
.ws-ch.active { background: var(--ax-primary-soft); color: var(--ax-primary-text); font-weight: 600; }
.ws-ch.unread { color: var(--ax-text); font-weight: 700; }
.ws-ch.muted { opacity: .6; }
.ws-ch .ax-truncate { flex: 1; }
.ws-hash { width: 18px; text-align: center; color: var(--ax-text-3); flex-shrink: 0; }
.ws-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ax-primary); color: var(--ax-on-primary); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ws-badge.mention { background: var(--ax-danger); }
.ws-main, .ws-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ws-thread { border-left: 1px solid var(--ax-border); }
.ws-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ws-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.ws-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ax-border); min-height: 60px; }
.ws-head-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; min-width: 0; }
.ws-head .active { color: var(--ax-warning); }
.ws-back { display: none; }
.ws-messages { flex: 1; overflow-y: auto; padding: 12px 0; }
.ws-more, .ws-first { text-align: center; padding: 8px 16px; color: var(--ax-text-3); font-size: 13px; }
.ws-day, .ws-divider { display: flex; align-items: center; gap: 10px; margin: 12px 16px; color: var(--ax-text-3); font-size: 12px; font-weight: 600; }
.ws-day::before, .ws-day::after, .ws-divider::before, .ws-divider::after { content: ""; flex: 1; border-top: 1px solid var(--ax-border); }
.ws-msg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 6px 16px; }
.ws-msg.grouped { padding-top: 1px; padding-bottom: 1px; }
.ws-msg:hover { background: var(--ax-surface-2); }
.ws-msg.flash { background: var(--ax-warning-soft); transition: background 1s; }
.ws-msg-time { font-size: 10px; color: var(--ax-text-3); visibility: hidden; text-align: right; padding-top: 3px; }
.ws-msg:hover .ws-msg-time { visibility: visible; }
.ws-msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.ws-msg-head span { font-size: 11px; color: var(--ax-text-3); }
.ws-body { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ws-body ul, .ws-body ol { margin: 4px 0; padding-left: 22px; }
.ws-body blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--ax-border-strong); color: var(--ax-text-2); }
.ws-body code { background: var(--ax-surface-3); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.ws-body .ws-code { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 6px 0; font-size: 13px; }
.ws-body .ws-code code { background: none; padding: 0; color: inherit; }
.ws-body hr { border: 0; border-top: 1px solid var(--ax-border); margin: 10px 0; }
.ws-gap { height: 8px; }
.ws-h { margin: 14px 0 6px; font-weight: 800; }
.ws-article { font-size: 15px; line-height: 1.65; }
.ws-edited, .ws-deleted { font-size: 12px; color: var(--ax-text-3); font-style: italic; }
.ws-mention { background: var(--ax-primary-soft); color: var(--ax-primary-text); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.ws-mention.me, .ws-mention.all { background: var(--ax-warning-soft); color: #92400e; }
.ws-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ws-img img { max-width: 260px; max-height: 200px; border-radius: 8px; border: 1px solid var(--ax-border); display: block; object-fit: cover; }
.ws-video { max-width: 320px; border-radius: 8px; }
.ws-file { max-width: 320px; }
.ws-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ws-rx { border: 1px solid var(--ax-border); background: var(--ax-surface); border-radius: 12px; padding: 1px 8px; font-size: 13px; cursor: pointer; }
.ws-rx.mine { border-color: var(--ax-primary); background: var(--ax-primary-soft); }
.ws-thread-link, .ws-kb-link { display: inline-flex; margin-top: 4px; margin-right: 8px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--ax-primary); cursor: pointer; text-decoration: none; }
.ws-thread-link:hover, .ws-kb-link:hover { text-decoration: underline; }
.ws-tools { position: absolute; right: 16px; top: -12px; display: none; gap: 2px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 8px; box-shadow: var(--ax-shadow-sm); padding: 2px; z-index: 2; }
.ws-msg:hover .ws-tools, .ws-tools:focus-within { display: flex; }
.ws-tools button { border: 0; background: none; width: 30px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.ws-tools button:hover { background: var(--ax-surface-3); }
.ws-rx-pop { position: absolute; right: 0; top: 32px; display: grid; grid-template-columns: repeat(8, 30px); gap: 2px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 10px; box-shadow: var(--ax-shadow); padding: 6px; }
.ws-rx-pop button { border: 0; background: none; font-size: 18px; cursor: pointer; border-radius: 6px; height: 30px; }
.ws-rx-pop button:hover { background: var(--ax-surface-3); }
.ws-composer { border-top: 1px solid var(--ax-border); padding: 10px 16px 8px; }
.ws-composer.drag { background: var(--ax-primary-soft); }
.ws-composer.sending { opacity: .6; pointer-events: none; }
.ws-composer-row { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--ax-border-strong); border-radius: 12px; padding: 6px; background: var(--ax-surface); }
.ws-composer-row:focus-within { border-color: var(--ax-primary); }
.ws-composer textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.45; padding: 6px 4px; max-height: 200px; background: transparent; color: var(--ax-text); }
.ws-hint { font-size: 11px; color: var(--ax-text-3); margin-top: 4px; }
.ws-hint code { font-size: 11px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ws-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ax-surface-3); border-radius: 8px; padding: 3px 4px 3px 10px; font-size: 12px; max-width: 260px; }
.ws-chip small { color: var(--ax-text-3); }
.ws-chip button { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ax-text-3); }
.ws-mention-pop { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; min-width: 240px; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 10px; box-shadow: var(--ax-shadow); padding: 4px; z-index: 20; }
.ws-mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ws-mention-item.active, .ws-mention-item:hover { background: var(--ax-primary-soft); }
.ws-checklist { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.ws-checklist .ax-check { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws-person, .ws-result { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--ax-text); }
.ws-result { display: block; border-bottom: 1px solid var(--ax-border); border-radius: 0; }
.ws-person:hover, .ws-result:hover { background: var(--ax-surface-2); }
@media (max-width: 1100px) { .ws-chat.thread-open { grid-template-columns: 240px minmax(0, 1fr) 340px; } }
@media (max-width: 900px) {
    .ws-chat, .ws-chat.thread-open { grid-template-columns: minmax(0, 1fr); }
    .ws-chat .ws-main { display: none; }
    .ws-chat.open .ws-side { display: none; }
    .ws-chat.open .ws-main { display: flex; }
    .ws-back { display: inline-flex; }
    .ws-chat.thread-open .ws-thread { position: fixed; inset: 0; z-index: 900; background: var(--ax-surface); }
}

/* Mural */
.ws-post { padding: 18px 20px; margin-bottom: 14px; }
.ws-post.pinned { border-color: var(--ax-warning); }
.ws-post.unread { box-shadow: inset 4px 0 0 var(--ax-primary); }
.ws-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ws-post-title { font-size: 19px; font-weight: 800; margin: 4px 0 8px; }
.ws-post-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ax-border); }

/* Base de conhecimento */
.ws-kb-search .ax-input { height: 46px; font-size: 15px; }
.ws-kb-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.ws-kb-nav { display: grid; gap: 2px; }
.ws-kb-nav button { display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; text-align: left; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--ax-text-2); }
.ws-kb-nav button:hover { background: var(--ax-surface-2); }
.ws-kb-nav button.active { background: var(--ax-primary-soft); color: var(--ax-primary-text); font-weight: 600; }
.ws-kb-item { display: flex; gap: 16px; padding: 14px 16px; margin-bottom: 10px; color: inherit; text-decoration: none; }
.ws-kb-item:hover { border-color: var(--ax-primary); }
.ws-kb-stats { display: grid; gap: 6px; width: 74px; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--ax-text-3); align-content: start; }
.ws-kb-stats > div:not(.ax-small) { display: grid; border-radius: 8px; padding: 4px 2px; }
.ws-kb-stats b { font-size: 16px; color: var(--ax-text); }
.ws-kb-stats .answered { border: 1px solid var(--ax-success); }
.ws-kb-stats .solved { background: var(--ax-success); color: #fff; }
.ws-kb-stats .solved b { color: #fff; }
.ws-kb-title { font-size: 16px; font-weight: 700; color: var(--ax-primary-text); }
.ws-kb-excerpt { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-kb-article, .ws-kb-answer { padding: 20px; margin-bottom: 14px; }
.ws-kb-answer.accepted { border-color: var(--ax-success); }
.ws-kb-row { display: flex; gap: 18px; }
.ws-kb-h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.ws-kb-h2 { font-size: 17px; font-weight: 800; margin: 22px 0 12px; }
.ws-vote { display: grid; justify-items: center; gap: 2px; width: 44px; flex-shrink: 0; }
.ws-vote button { border: 1px solid var(--ax-border); background: var(--ax-surface); width: 36px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--ax-text-3); }
.ws-vote button.on { background: var(--ax-primary); border-color: var(--ax-primary); color: #fff; }
.ws-vote button:disabled { opacity: .4; cursor: default; }
.ws-vote b { font-size: 18px; }
.ws-accept { display: grid; place-items: center; width: 36px; height: 36px; margin: 10px auto 0; border-radius: 50%; border: 2px solid var(--ax-border-strong); background: none; color: var(--ax-text-3); font-size: 18px; font-weight: 800; cursor: pointer; }
.ws-accept.on { border-color: var(--ax-success); background: var(--ax-success); color: #fff; }
.ws-preview { border: 1px solid var(--ax-border); border-radius: var(--ax-radius); padding: 12px; min-height: 200px; }
@media (max-width: 760px) { .ws-kb-layout { grid-template-columns: minmax(0, 1fr); } .ws-kb-stats { width: 56px; } .ws-kb-row { gap: 10px; } }

/* Resumo da IA no painel da conversa */
.ax-ai-summary { background: var(--ax-primary-soft); border-radius: var(--ax-radius); padding: 12px 14px !important; margin: 8px 12px; border-bottom: 0 !important; }
.ax-ai-summary details summary::-webkit-details-marker { display: none; }

/* ═════════════════════ Central de notificações (sininho) ═════════════════════ */
.ax-nt { position: relative; }
.ax-nt .ax-sb-toggle { position: relative; }
.ax-nt-count { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ax-danger); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ax-nt-panel { position: fixed; top: 58px; left: 12px; width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, 75vh); display: flex; flex-direction: column; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-lg); z-index: 3000; overflow: hidden; }
.ax-nt-panel[hidden] { display: none; }
.ax-nt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ax-border); }
.ax-nt-browser { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; background: var(--ax-primary-soft); }
.ax-nt-browser[hidden] { display: none; }
.ax-nt-browser span { flex: 1; }
.ax-nt-list { overflow-y: auto; }
.ax-nt-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ax-border); color: var(--ax-text); text-decoration: none; }
.ax-nt-item:hover { background: var(--ax-surface-2); }
.ax-nt-item.unread { background: var(--ax-primary-soft); }
.ax-nt-item.unread.lvl-danger { background: var(--ax-danger-soft); }
.ax-nt-item.unread.lvl-warning { background: var(--ax-warning-soft); }
.ax-nt-icon { font-size: 18px; line-height: 1.2; }
.ax-nt-text { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.ax-nt-text span { color: var(--ax-text-2); overflow-wrap: anywhere; }
.ax-nt-text small { color: var(--ax-text-3); font-size: 11px; }
.ax-nt-empty { padding: 28px 14px; text-align: center; color: var(--ax-text-3); font-size: 13px; }
.ax-nt-more { margin: 8px auto; display: flex; }
html.ax-collapsed .ax-nt-panel { left: 12px; }

/* ═════════════════════ Agenda ═════════════════════ */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-title { font-size: 18px; font-weight: 800; min-width: 180px; text-transform: capitalize; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); overflow: hidden; background: var(--ax-surface); }
.cal-dow { padding: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ax-text-3); border-bottom: 1px solid var(--ax-border); background: var(--ax-surface-2); }
.cal-day { min-height: 108px; padding: 6px; border-right: 1px solid var(--ax-border); border-bottom: 1px solid var(--ax-border); cursor: pointer; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: var(--ax-surface-2); color: var(--ax-text-3); }
.cal-day.today .cal-num { background: var(--ax-primary); color: #fff; }
.cal-day:hover { background: var(--ax-surface-2); }
.cal-num { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cal-chip { display: block; width: 100%; border: 0; text-align: left; font: inherit; font-size: 11px; padding: 2px 6px; margin-bottom: 2px; border-radius: 5px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.cal-chip.canceled { opacity: .45; text-decoration: line-through; }
.cal-chip.done { opacity: .7; }
.cal-more { font-size: 11px; color: var(--ax-text-3); padding: 0 6px; }
.cal-week { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); overflow: auto; max-height: calc(100vh - 220px); background: var(--ax-surface); }
.cal-week-head { position: sticky; top: 0; z-index: 2; background: var(--ax-surface-2); padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--ax-border); border-left: 1px solid var(--ax-border); }
.cal-week-head.today { color: var(--ax-primary); }
.cal-hours { position: relative; }
.cal-hour-label { height: 48px; font-size: 10px; color: var(--ax-text-3); text-align: right; padding-right: 6px; transform: translateY(-6px); }
.cal-col { position: relative; border-left: 1px solid var(--ax-border); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--ax-border) 47px, var(--ax-border) 48px); cursor: pointer; }
.cal-block { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 5px; font-size: 11px; color: #fff; overflow: hidden; cursor: pointer; box-shadow: var(--ax-shadow-sm); border: 0; text-align: left; font-family: inherit; }
.cal-block b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--ax-danger); z-index: 1; }
.cal-list-day { font-size: 13px; font-weight: 800; margin: 16px 0 8px; text-transform: capitalize; }
.cal-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 6px; cursor: pointer; border-left: 4px solid var(--ax-primary); }
.cal-list-time { width: 92px; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.cal-members { display: inline-flex; }
.cal-members .ax-avatar { border: 2px solid var(--ax-surface); margin-left: -6px; }
.cal-members .ax-avatar:first-child { margin-left: 0; }
@media (max-width: 760px) { .cal-day { min-height: 70px; } .cal-chip { font-size: 10px; } }