[x-cloak] { display: none !important; }

/* ── Variáveis — Tema Indigo Pro ── */
:root {
    --brand:          #6366f1;
    --brand-dark:     #4f46e5;
    --brand-deep:     #3730a3;
    --brand-light:    #e0e7ff;
    --brand-glow:     rgba(99,102,241,.35);
    --safe-top:       env(safe-area-inset-top, 0px);
    --safe-right:     env(safe-area-inset-right, 0px);
    --safe-bottom:    env(safe-area-inset-bottom, 0px);
    --safe-left:      env(safe-area-inset-left, 0px);
    --mobile-nav-height: 66px;
    --mobile-header-height: 56px;
    --app-height: calc(var(--vh, 1vh) * 100);
}

/* ── Safe areas ── */
.pb-safe { padding-bottom: max(var(--safe-bottom), 8px); }
.pt-safe { padding-top: max(var(--safe-top), 3px); }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

@supports (height: 100dvh) {
    :root { --app-height: 100dvh; }
}

.app-shell {
    box-sizing: border-box;
    height: var(--app-height);
    min-height: 0;
    max-height: var(--app-height);
    padding-top: max(var(--safe-top), 3px);
    overflow: hidden;
}

.mobile-bottom-nav {
    box-sizing: border-box;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    padding-bottom: max(var(--safe-bottom), 8px) !important;
    min-height: calc(var(--mobile-nav-height) + max(var(--safe-bottom), 0px)) !important;
    transition: transform .22s ease;
    max-width: 100vw;
    overscroll-behavior-x: contain;
}

.keyboard-open .mobile-bottom-nav {
    transform: translateY(calc(100% + max(var(--safe-bottom), 0px)));
}

/* ── Scroll ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.smooth-scroll-container { -webkit-overflow-scrolling: touch; }

/* ── Scrollbar elegante ── */
.scroll-elegant::-webkit-scrollbar { width: 4px; height: 4px; }
.scroll-elegant::-webkit-scrollbar-track { background: transparent; }
.scroll-elegant::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 99px; }
.scroll-elegant::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.55); }

/* ── Drag ── */
.smooth-drag-card { cursor: grab; transition: transform 0.15s, box-shadow 0.15s; }
.smooth-drag-card:active { cursor: grabbing; transform: scale(0.98); }

/* ── Node canvas ── */
.node-canvas { background-color: #f1f4f9; background-image: radial-gradient(#c7cfe0 1.5px, transparent 1.5px); background-size: 24px 24px; }
.dark .node-canvas { background-color: #0d1117; background-image: radial-gradient(#21262d 1.5px, transparent 1.5px); }
.node-port { width: 12px; height: 12px; background: var(--brand); border: 2px solid white; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; }
.dark .node-port { border-color: #0d1117; }
.port-left { left: -6px; }
.port-right { right: -6px; }

/* ── Background pattern ── */
.bg-pattern { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V4h4V2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V4h4V2H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* ── Glass ── */
.glass { background: rgba(255,255,255,0.98) !important; }
.dark .glass { background: rgba(22,27,34,0.98) !important; }
@media (min-width: 768px) {
    .glass { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .dark .glass { background: rgba(22,27,34,0.92) !important; }
}

/* ── Form modals: desktop centralizado, mobile bottom sheet ── */
.crm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 750;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.crm-form-modal {
    position: fixed;
    z-index: 760;
    left: 50%;
    top: 50%;
    width: min(92vw, 640px);
    max-height: min(88vh, 760px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}

.crm-form-modal-wide {
    width: min(94vw, 780px);
}

.crm-form-modal > .p-4,
.crm-form-modal > .p-5 {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-form-modal > .px-4,
.crm-form-modal > .px-5 {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .crm-form-modal {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: calc((var(--vh, 1vh) * 92) - max(var(--safe-top), 3px));
        transform: none;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding-bottom: max(var(--safe-bottom), 0px);
    }

    .crm-form-modal > .p-4,
    .crm-form-modal > .p-5 {
        padding-bottom: calc(max(var(--safe-bottom), 0px) + 1rem);
    }
}

/* ── Kanban ── */
.kanban-col { min-width: 78vw; max-width: 78vw; height: calc(var(--app-height) - 180px); scroll-snap-align: start; }
@media (min-width: 768px) { .kanban-col { min-width: 320px; max-width: 320px; height: calc(var(--app-height) - 200px); } }
.kanban-container { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; }

/* ── Modal bottom sheet ── */
.modal-sheet {
    position: relative; width: 100%; background: white;
    border-radius: 2rem 2rem 0 0; overflow: visible;
    display: flex; flex-direction: column;
    max-height: calc(var(--vh, 1vh) * 92);
}
.dark .modal-sheet { background: #161b22; }
@media (min-width: 768px) {
    .modal-sheet { max-width: 448px; border-radius: 2rem; width: 100%; max-height: 90vh; overflow: hidden; }
}
.modal-sheet-inner {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; flex: 1 1 auto; max-height: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal-task-wrap, .modal-notif-wrap {
    height: 100dvh; height: calc(var(--vh, 1vh) * 100);
}

/* ── Flatpickr dark ── */
.dark .flatpickr-calendar { background: #161b22; border: 1px solid #30363d; }
.dark .flatpickr-day { color: #e6edf3; }
.dark .flatpickr-day.selected { background: var(--brand); border-color: var(--brand); }
.dark .flatpickr-time input { color: #e6edf3; }
.dark .flatpickr-months .flatpickr-month { color: #f8fafc; fill: #f8fafc; }
.dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: #161b22; }

/* ── Transições ── */
button { transition: opacity 0.15s ease, transform 0.15s ease; }
input, select, textarea { transition: box-shadow 0.15s ease; }
@media (min-width: 768px) {
    button, input, select, textarea, a { transition: all 0.18s cubic-bezier(0.4,0,0.2,1); }
}

/* ── Card hover ── */
.card-hover { transition: box-shadow 0.2s ease; }
@media (min-width: 768px) {
    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(99,102,241,.18), 0 4px 12px -4px rgba(0,0,0,.08); }
    .dark .card-hover:hover { box-shadow: 0 12px 32px -8px rgba(99,102,241,.28), 0 4px 12px -4px rgba(0,0,0,.3); }
}

/* ── Btn glow ── */
@media (min-width: 768px) {
    .btn-glow { box-shadow: 0 4px 14px -4px rgba(99,102,241,.5); }
    .btn-glow:hover { box-shadow: 0 6px 20px -4px rgba(99,102,241,.65); transform: translateY(-1px); }
    .btn-glow:active { transform: scale(0.97); }
    .btn-success-glow { box-shadow: 0 4px 14px -4px rgba(99,102,241,.45); }
    .btn-success-glow:hover { box-shadow: 0 6px 20px -4px rgba(99,102,241,.65); transform: translateY(-1px); }
}

/* ── Input focus ── */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2.5px rgba(99,102,241,.28); }
.dark input:focus, .dark textarea:focus, .dark select:focus { box-shadow: 0 0 0 2.5px rgba(99,102,241,.38); }

/* ── Nav lateral indicator ── */
.nav-item { position: relative; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); }
.nav-item::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 60%; background: var(--brand);
    border-radius: 0 4px 4px 0;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }

/* ── Sidebar ── */
aside { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,244,249,0.96) 100%) !important; }
.dark aside { background: linear-gradient(180deg, rgba(22,27,34,0.98) 0%, rgba(13,17,23,0.97) 100%) !important; }

/* ── Screen fade ── */
@media (min-width: 768px) {
    .screen-fade { animation: screenFadeIn 0.2s ease; }
    @keyframes screenFadeIn { from { opacity:0; } to { opacity:1; } }
}

/* ── Notif toast ── */
.notif-item { box-shadow: 0 8px 28px -8px rgba(99,102,241,.22); }

/* ── Badge pulse ── */
.badge-pulse { animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes badgePop { from { transform:scale(0.7); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ── Ripple ── */
.ripple { position: relative; overflow: hidden; }
.ripple::after { content:''; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%); opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
.ripple:active::after { opacity:1; transition:none; }

/* ── Header shadow ── */
header { box-shadow: 0 1px 0 rgba(99,102,241,.1); }

/* ── Nav mobile ── */
nav.fixed { background: rgba(255,255,255,0.99) !important; }
.dark nav.fixed { background: rgba(22,27,34,0.99) !important; }
@media (min-width: 768px) {
    nav.fixed { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,0.94) !important; }
    .dark nav.fixed { background: rgba(22,27,34,0.94) !important; }
}

/* ── Text selection ── */
::selection { background: rgba(99,102,241,.18); color: inherit; }
.dark ::selection { background: rgba(99,102,241,.3); }

/* ── Checkbox/radio ── */
input[type="checkbox"]:checked, input[type="radio"]:checked { transform: scale(1.08); }

/* ── Divider ── */
.divider-glow { height:1px; background: linear-gradient(90deg, transparent, rgba(99,102,241,.35), transparent); }

/* ── Tab Bar ── */
.wa-tab-bar { display:flex; border-bottom: 2px solid #e2e8f0; }
.dark .wa-tab-bar { border-bottom-color: #30363d; }
.wa-tab { position:relative; flex:1; text-align:center; padding:13px 8px; font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; cursor:pointer; border:none; background:transparent; transition:color .2s; }
.dark .wa-tab { color:#8b949e; }
.wa-tab::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:var(--brand); transform:scaleX(0); transition:transform .22s cubic-bezier(0.4,0,0.2,1); border-radius:3px 3px 0 0; }
.wa-tab.active { color:var(--brand); }
.wa-tab.active::after { transform:scaleX(1); }

/* ── Status Bar gradient ── */
.wa-status-bar { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); height: 3px; width: 100%; }

/* ── Touch targets ── */
.touch-target { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767px) { button { min-height: 36px; } }

/* ── Font size mobile ── */
@media (max-width: 767px) { html { font-size: 15px; } }

/* ── Previne zoom iOS ── */
@media (max-width: 767px) {
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], textarea, select { font-size: 16px !important; }
}

/* ── Nav item mobile ── */
.nav-item-mobile { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.nav-item-mobile span:last-child {
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.05;
}
@media (max-width: 380px) { .nav-item-mobile span { font-size: 8px; } }

/* ── Chat status select compact mobile ── */
@media (max-width: 767px) {
    .chat-status-select { max-width: 75px; padding: 6px 4px !important; font-size: 8px !important; }
}

/* ── Notif toast mobile ── */
@media (max-width: 767px) {
    .notif-toast-wrap { left: 12px !important; right: 12px !important; width: auto !important; top: 12px !important; }
}

/* ── Áudio responsivo ── */
@media (max-width: 767px) { 
    audio { max-width: 100%; height: 40px !important; }
    #chat-box audio { width: 100% !important; min-width: 180px; }
}

/* ── Scroll containment ── */
#chat-box { overscroll-behavior: contain; }
.chat-list-wrap { overscroll-behavior: contain; }

/* ── Seção interna padding bottom ── */
@media (max-width: 767px) {
    .section-inner { padding-bottom: max(calc(env(safe-area-inset-bottom) + 80px), 100px) !important; }
}

/* ── Main header mobile ── */
@media (max-width: 767px) { .main-header { height: 54px !important; } }

/* ── CSS Containment ── */
.chat-list-wrap > div > div { contain: layout style; }

/* ── Chat header actions ── */
.chat-header-right {
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; max-width: calc(100vw - 160px); flex-wrap: nowrap;
}
@media (min-width: 768px) { .chat-header-right { max-width: none; gap: 6px; } }

/* ══════════════════════════════════════
   MOBILE FIXES — EvoPRO
══════════════════════════════════════ */

/* ── Main scrollable section ── */
section.flex-1.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── Screens inside main section ── */
@media (max-width: 767px) {
    /* IA screen full scroll */
    [x-show="screen === 'ia_atendimento'"],
    .max-w-4xl.mx-auto { width: 100%; }

    /* Logs list height adaptável ao mobile */
    .logs-list { max-height: calc(50vh - 80px) !important; }

    /* Tabs IA: scroll horizontal no mobile */
    .ia-tabs-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .ia-tabs-bar::-webkit-scrollbar { display: none; }
    .ia-tabs-bar > button { white-space: nowrap; flex-shrink: 0; flex: 0 0 auto !important; }

    /* Cards internos — sem bordas excessivas no mobile */
    .rounded-\[2rem\] { border-radius: 1.25rem !important; }
    .rounded-\[2\.5rem\] { border-radius: 1.5rem !important; }

    /* Grid 2 colunas → 1 coluna em telas muito pequenas */
    .grid-cols-2.mobile-single { grid-template-columns: 1fr !important; }

    /* Botões do header hero IA — empilhar em telas pequenas */
    .ia-hero-header { flex-wrap: wrap; gap: 8px; }

    /* Status badges — scroll horizontal */
    .ia-status-badges { overflow-x: auto; flex-wrap: nowrap !important; }
    .ia-status-badges::-webkit-scrollbar { display: none; }
    .ia-status-badges > span { white-space: nowrap; flex-shrink: 0; }
}

/* ── Logs: fix z-index e overflow ── */
.logs-panel {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.logs-list {
    max-height: 384px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
}

/* ── Telas menores que 380px ── */
@media (max-width: 380px) {
    .ia-tabs-bar > button { font-size: 10px !important; padding: 8px 10px !important; }
    .grid-cols-2 { grid-template-columns: 1fr 1fr; }
}

/* ── Previne overflow de conteúdo sobre nav mobile ── */
@media (max-width: 767px) {
    .section-inner, section.flex-1 {
        padding-bottom: max(calc(env(safe-area-inset-bottom) + 80px), 96px) !important;
    }
    /* Força kanban overflow correto */
    .kanban-col { height: calc((var(--vh, 1vh) * 100) - 160px); }
}

/* ── Touch feedback mais responsivo ── */
@media (max-width: 767px) {
    button:active { opacity: 0.75; }
    .modal-sheet { max-height: calc((var(--vh, 1vh) * 100) - var(--safe-top)); }
}

/* ══════════════════════════════════════
   MODAL IA — Mobile fixes
══════════════════════════════════════ */

/* Modal de prompt de IA: no mobile ocupa a tela inteira como bottom sheet */
@media (max-width: 767px) {
    /* Overlay alinha embaixo */
    [x-show="iaShowModal"] > div {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Textarea do prompt: altura adaptável no mobile */
    [x-show="iaModalTab==='prompt'"] textarea {
        min-height: 160px !important;
        max-height: 260px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Inputs do modal não disparam zoom no iOS */
    [x-show="iaShowModal"] input,
    [x-show="iaShowModal"] select,
    [x-show="iaShowModal"] textarea {
        font-size: 16px !important;
    }

    /* Tabs do modal não quebram linha */
    [x-show="iaShowModal"] .flex.border-b > button {
        font-size: 10px !important;
        padding: 10px 4px !important;
    }

    /* Grid 2 cols → 1 col no modal mobile */
    [x-show="iaModalTab==='prompt'"] .grid-cols-2,
    [x-show="iaModalTab==='avancado'"] .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Confirmação agendamentos — badge visual */
.agenda-confirmacao-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 800;
    padding: 2px 8px; border-radius: 99px;
    background: #fef3c7; color: #d97706;
    border: 1px solid #fde68a;
}

/* ══════════════════════════════════════
   MODAL PROMPT IA — Fix mobile completo
══════════════════════════════════════ */

/* Overlay cobre 100% da tela sem conflitos */
.ia-modal-overlay {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
}

/* Desktop: centralizado */
@media (min-width: 768px) {
    .ia-modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    .ia-modal-panel {
        width: 100%;
        max-width: 672px;
        border-radius: 2rem;
        max-height: 92vh;
        height: 92vh;
    }
}

/* Mobile: bottom-sheet fixo, ocupa largura total */
@media (max-width: 767px) {
    .ia-modal-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        height: calc(var(--vh, 1vh) * 92) !important;
        max-height: calc(var(--vh, 1vh) * 92) !important;
    }

    /* Corpo com scroll e padding menor */
    .ia-modal-panel .flex-1.overflow-y-auto .p-6 {
        padding: 1rem !important;
    }

    /* Grid 2 colunas → 1 coluna */
    .ia-modal-panel .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Tabs compactas */
    .ia-modal-panel .flex.border-b > button {
        font-size: 11px !important;
        padding: 10px 4px !important;
    }

    /* Textarea altura generosa */
    .ia-modal-panel textarea {
        min-height: 140px !important;
        max-height: 200px !important;
        resize: none !important;
    }

    /* Sem zoom no iOS */
    .ia-modal-panel input,
    .ia-modal-panel select,
    .ia-modal-panel textarea {
        font-size: 16px !important;
    }

    /* Footer: botões empilhados, salvar em cima */
    .ia-modal-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ── Mobile Kanban touch drag ── */
#kanban-ghost {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
[data-kanban-col] {
  transition: outline 0.12s ease;
}


/* ── Kanban touch drag – long press ativa o drag ── */
.smooth-drag-card { touch-action: pan-x pan-y; }

.finance-hero {
    background:
        linear-gradient(135deg, rgba(15,23,42,.98) 0%, rgba(30,41,59,.96) 38%, rgba(30,64,80,.96) 70%, rgba(6,78,59,.98) 100%);
}

/* Mobile shell hardening */
@media (max-width: 767px) {
    html {
        min-height: 100%;
        overscroll-behavior: none;
    }

    body {
        min-height: 100%;
        overflow-x: hidden;
    }

    .app-shell {
        height: calc(var(--vh, 1vh) * 100);
        max-height: calc(var(--vh, 1vh) * 100);
        padding-top: max(var(--safe-top), 4px);
    }

    #main-content {
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    #main-content > section {
        min-height: 0;
        overflow: hidden;
    }

    .mobile-safe-header {
        height: var(--mobile-header-height) !important;
        min-height: var(--mobile-header-height);
        gap: .5rem;
        overflow: hidden;
        padding-left: max(.75rem, var(--safe-left)) !important;
        padding-right: max(.75rem, var(--safe-right)) !important;
    }

    .mobile-header-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-header-title h2 {
        max-width: min(36vw, 140px);
    }

    .mobile-header-title span[x-text] {
        max-width: 76px;
    }

    .mobile-header-actions {
        flex: 0 0 auto;
        gap: .35rem !important;
        max-width: 58vw;
        overflow: hidden;
    }

    .mobile-header-actions button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0 !important;
        border-radius: .75rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
    }

    .mobile-header-actions button svg,
    .mobile-header-actions button i {
        width: 18px !important;
        height: 18px !important;
    }

    .section-inner,
    section.flex-1 {
        padding-bottom: max(calc(var(--safe-bottom) + var(--mobile-nav-height) + 14px), 96px) !important;
    }

    [data-screen-partial-content] > .absolute.inset-0:not(.kanban-container) {
        padding-left: max(.75rem, var(--safe-left)) !important;
        padding-right: max(.75rem, var(--safe-right)) !important;
        padding-top: .75rem !important;
        padding-bottom: max(calc(var(--safe-bottom) + var(--mobile-nav-height) + 14px), 96px) !important;
    }

    [data-screen-partial-content] > .kanban-container {
        padding-left: max(.75rem, var(--safe-left)) !important;
        padding-right: max(.75rem, var(--safe-right)) !important;
        padding-top: .75rem !important;
        padding-bottom: max(calc(var(--safe-bottom) + var(--mobile-nav-height) + 14px), 96px) !important;
    }

    .kanban-col {
        min-width: min(86vw, 360px) !important;
        max-width: min(86vw, 360px) !important;
        height: calc((var(--vh, 1vh) * 100) - var(--mobile-header-height) - var(--mobile-nav-height) - max(var(--safe-top), 4px) - 34px) !important;
        max-height: calc((var(--vh, 1vh) * 100) - var(--mobile-header-height) - var(--mobile-nav-height) - max(var(--safe-top), 4px) - 34px) !important;
    }

    .mobile-bottom-nav {
        left: 0;
        right: 0;
        width: 100%;
        justify-content: flex-start !important;
        gap: .25rem;
        padding-left: max(.5rem, var(--safe-left)) !important;
        padding-right: max(.5rem, var(--safe-right)) !important;
        scroll-snap-type: x proximity;
    }

    .mobile-bottom-nav .nav-item-mobile {
        flex: 0 0 58px;
        min-width: 58px;
        max-width: 58px;
        scroll-snap-align: start;
        transform-origin: center;
    }

    .mobile-bottom-nav .nav-item-mobile.scale-110 {
        transform: scale(1.04) !important;
    }

    .mobile-bottom-nav .nav-item-mobile svg,
    .mobile-bottom-nav .nav-item-mobile i {
        width: 19px !important;
        height: 19px !important;
    }

    .mobile-chat-panel {
        top: max(var(--safe-top), 3px) !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: calc((var(--vh, 1vh) * 100) - max(var(--safe-top), 3px));
    }

    .mobile-chat-header {
        min-height: var(--mobile-header-height);
        padding-left: max(1rem, var(--safe-left)) !important;
        padding-right: max(1rem, var(--safe-right)) !important;
    }
}

@media (max-width: 420px) {
    .mobile-header-title span[x-text] {
        display: none !important;
    }

    .mobile-header-title h2 {
        max-width: min(32vw, 116px);
    }

    .mobile-header-actions {
        max-width: 62vw;
        gap: .25rem !important;
    }

    .mobile-header-actions button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        flex-basis: 34px;
    }

    .mobile-bottom-nav .nav-item-mobile {
        flex-basis: 56px;
        min-width: 56px;
        max-width: 56px;
    }
}

@media (max-width: 360px) {
    .mobile-header-actions button:nth-of-type(3),
    .mobile-header-actions button:nth-of-type(4) {
        display: none !important;
    }

    .mobile-header-title h2 {
        max-width: 42vw;
    }
}

/* Tema claro premium: menos branco puro, mais camadas e conforto visual */
:root {
    --light-canvas: #edf4fb;
    --light-canvas-2: #e7eff8;
    --light-surface: rgba(248, 251, 255, .92);
    --light-surface-soft: rgba(238, 245, 252, .92);
    --light-border: rgba(102, 118, 150, .22);
    --light-border-soft: rgba(118, 134, 166, .16);
    --light-ink: #172033;
}

html:not(.dark) body {
    background:
        radial-gradient(circle at 14% -8%, rgba(99, 102, 241, .16), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(20, 184, 166, .14), transparent 28%),
        linear-gradient(135deg, var(--light-canvas) 0%, #f4f8fc 42%, var(--light-canvas-2) 100%) !important;
    color: var(--light-ink);
}

html:not(.dark) .bg-pattern {
    background-image:
        radial-gradient(circle at 18% 0%, rgba(99, 102, 241, .12), transparent 24%),
        radial-gradient(circle at 88% 8%, rgba(6, 182, 212, .10), transparent 25%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236366f1' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

html:not(.dark) .glass {
    background: rgba(248, 251, 255, .84) !important;
    border-color: var(--light-border-soft) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 14px 38px rgba(38, 50, 72, .07);
}

@media (min-width: 768px) {
    html:not(.dark) .glass {
        background: rgba(248, 251, 255, .78) !important;
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
    }
}

html:not(.dark) .desktop-sidebar {
    background: linear-gradient(180deg, rgba(250, 252, 255, .92), rgba(235, 243, 252, .9)) !important;
    border-right-color: rgba(99, 102, 241, .16) !important;
    box-shadow: 18px 0 55px rgba(38, 50, 72, .06);
}

html:not(.dark) .desktop-sidebar .sidebar-brand,
html:not(.dark) .desktop-sidebar .sidebar-full,
html:not(.dark) .desktop-sidebar .sidebar-compact-only {
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(238,245,252,.34)) !important;
}

html:not(.dark) .bg-white {
    background-color: var(--light-surface) !important;
}

html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-\[\#f1f4f9\] {
    background-color: var(--light-surface-soft) !important;
}

html:not(.dark) .border-slate-200,
html:not(.dark) .border-gray-200,
html:not(.dark) .border-\[\#e6edf3\] {
    border-color: var(--light-border) !important;
}

html:not(.dark) .border-slate-100,
html:not(.dark) .border-gray-100 {
    border-color: var(--light-border-soft) !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: rgba(250, 252, 255, .86) !important;
    border-color: rgba(103, 119, 151, .24) !important;
    color: var(--light-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #8a96aa;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: rgba(99, 102, 241, .55) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .11), inset 0 1px 0 rgba(255, 255, 255, .8);
}

html:not(.dark) [data-screen-partial-content] > .absolute.inset-0:not(.kanban-container) {
    background:
        radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .10), transparent 26%),
        radial-gradient(circle at 96% 12%, rgba(16, 185, 129, .09), transparent 25%),
        linear-gradient(135deg, #edf4fb 0%, #f6f9fc 44%, #e9f1fa 100%) !important;
}

html:not(.dark) [data-screen-partial-content] section:not(.finance-hero),
html:not(.dark) .crm-form-modal,
html:not(.dark) .crm-form-modal-wide {
    box-shadow: 0 18px 48px rgba(38, 50, 72, .08), 0 1px 0 rgba(255, 255, 255, .72) inset;
}

html:not(.dark) .finance-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(99, 102, 241, .26), transparent 34%),
        radial-gradient(circle at 96% 4%, rgba(20, 184, 166, .28), transparent 30%),
        linear-gradient(135deg, #172033 0%, #243a53 46%, #075b52 100%) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
}

html:not(.dark) .mobile-bottom-nav {
    background: rgba(248, 251, 255, .9) !important;
    border-top-color: var(--light-border-soft) !important;
    box-shadow: 0 -18px 45px rgba(38, 50, 72, .08);
}