/* ============================================================================
   CONECT FLOW - Design System
   Produto: Conect Integra
   ============================================================================ */
:root{
  --cf-bg:#080d18;
  --cf-bg-2:#0c1322;
  --cf-sidebar:#0d1424;
  --cf-surface:#111a2b;
  --cf-surface-soft:#162136;
  --cf-surface-hover:#1b2941;
  --cf-border:rgba(148,163,184,.13);
  --cf-border-strong:rgba(148,163,184,.20);
  --cf-text:#f7f9fc;
  --cf-text-soft:#d5dceb;
  --cf-muted:#8290aa;
  --cf-blue:#268cff;
  --cf-blue-2:#1a70e8;
  --cf-purple:#7557ff;
  --cf-purple-2:#925cff;
  --cf-cyan:#2dd4bf;
  --cf-success:#2dd49a;
  --cf-warning:#f7b955;
  --cf-danger:#ff667a;
  --cf-info:#55b8ff;
  --cf-radius:18px;
  --cf-radius-sm:12px;
  --cf-shadow:0 18px 45px rgba(0,0,0,.22);
  --cf-shadow-soft:0 8px 25px rgba(0,0,0,.14);
  --cf-brand-gradient:linear-gradient(135deg,#268cff 0%,#596eff 48%,#8a56ff 100%);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

html[data-theme="light"]{
  --cf-bg:#f3f6fb;
  --cf-bg-2:#edf2f8;
  --cf-sidebar:#ffffff;
  --cf-surface:#ffffff;
  --cf-surface-soft:#f7f9fc;
  --cf-surface-hover:#f0f4fa;
  --cf-border:#e6ebf2;
  --cf-border-strong:#d7deea;
  --cf-text:#172033;
  --cf-text-soft:#34425a;
  --cf-muted:#718099;
  --cf-shadow:0 15px 38px rgba(31,45,72,.08);
  --cf-shadow-soft:0 6px 20px rgba(31,45,72,.06);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;background:var(--cf-bg);color:var(--cf-text);-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{overflow:hidden;background:radial-gradient(circle at 75% -20%,rgba(117,87,255,.10),transparent 32%),var(--cf-bg)}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}

/* APP SHELL */
.cf-app{height:100dvh;display:grid;grid-template-columns:264px minmax(0,1fr);padding-top:var(--safe-top);background:transparent}
.cf-sidebar{position:relative;border-right:1px solid var(--cf-border);background:linear-gradient(180deg,rgba(38,140,255,.045),transparent 22%),var(--cf-sidebar);display:flex;flex-direction:column;min-height:0;z-index:30}
.cf-sidebar:after{content:"";position:absolute;right:-1px;top:0;width:1px;height:180px;background:linear-gradient(180deg,rgba(117,87,255,.55),transparent)}

.cf-brand{height:84px;display:flex;align-items:center;gap:13px;padding:0 19px;border-bottom:1px solid var(--cf-border)}
.cf-mark{position:relative;width:42px;height:42px;border-radius:13px;background:var(--cf-brand-gradient);display:grid;place-items:center;box-shadow:0 10px 27px rgba(76,92,255,.30);font-weight:900;color:#fff;letter-spacing:-.04em}
.cf-mark:before{content:"";position:absolute;inset:1px;border-radius:12px;border:1px solid rgba(255,255,255,.23)}
.cf-brand strong{display:block;font-size:15px;letter-spacing:.055em;color:var(--cf-text)}
.cf-brand small{display:block;color:var(--cf-muted);font-size:10px;margin-top:3px;letter-spacing:.025em}

.cf-nav{padding:14px 10px 18px;overflow:auto;scrollbar-width:none}.cf-nav::-webkit-scrollbar{display:none}
.cf-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--cf-muted);padding:14px 13px 7px;font-weight:800}
.cf-nav a{position:relative;display:flex;align-items:center;gap:12px;color:var(--cf-muted);text-decoration:none;padding:11px 13px;margin:3px 0;border-radius:12px;font-size:13px;font-weight:650;transition:background .18s,color .18s,transform .18s}
.cf-nav a:hover{background:var(--cf-surface-soft);color:var(--cf-text);transform:translateX(2px)}
.cf-nav a.active{background:linear-gradient(90deg,rgba(38,140,255,.15),rgba(117,87,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(91,113,255,.12)}
html[data-theme="light"] .cf-nav a.active{color:#24304a}
.cf-nav a.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--cf-blue),var(--cf-purple))}
.cf-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cf-sidebar-footer{margin-top:auto;padding:13px;border-top:1px solid var(--cf-border)}
.cf-user{display:flex;gap:10px;align-items:center;padding:9px;border-radius:13px;background:rgba(255,255,255,.018)}
.cf-user:hover{background:var(--cf-surface-soft)}
.cf-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#263b63,#192944);border:1px solid rgba(255,255,255,.06);font-size:12px;color:#fff;font-weight:850;letter-spacing:.02em}
.cf-user strong{display:block;font-size:12px}.cf-user small{display:block;color:var(--cf-muted);font-size:10px;margin-top:2px}

/* TOPBAR */
.cf-main{min-width:0;min-height:0;display:flex;flex-direction:column}
.cf-topbar{height:74px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid var(--cf-border);background:color-mix(in srgb,var(--cf-bg) 84%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:20}
.cf-top-left{display:flex;align-items:center;gap:12px}.cf-topbar h1{font-size:19px;line-height:1.1;margin:0;font-weight:780;letter-spacing:-.025em}.cf-topbar p{font-size:11px;color:var(--cf-muted);margin:5px 0 0}
.cf-actions{display:flex;align-items:center;gap:8px}
.cf-icon-btn,.cf-primary-btn{appearance:none;border:1px solid var(--cf-border);color:var(--cf-text);background:var(--cf-surface);border-radius:11px;min-height:40px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;cursor:pointer;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s}
.cf-icon-btn:hover{background:var(--cf-surface-hover);border-color:var(--cf-border-strong)}
.cf-icon-btn:active,.cf-primary-btn:active{transform:scale(.97)}
.cf-primary-btn{border:0;color:#fff;background:var(--cf-brand-gradient);box-shadow:0 10px 25px rgba(73,91,255,.24)}
.cf-primary-btn:hover{box-shadow:0 13px 31px rgba(73,91,255,.31);transform:translateY(-1px)}
.cf-menu-btn{display:none}

/* CONTENT */
.cf-content{flex:1;min-height:0;overflow:auto;padding:22px 25px calc(25px + var(--safe-bottom));scrollbar-width:thin;scrollbar-color:rgba(129,144,170,.25) transparent}
.cf-content::-webkit-scrollbar,.cf-conv-scroll::-webkit-scrollbar,.cf-messages::-webkit-scrollbar,.cf-customer::-webkit-scrollbar{width:7px;height:7px}
.cf-content::-webkit-scrollbar-thumb,.cf-conv-scroll::-webkit-scrollbar-thumb,.cf-messages::-webkit-scrollbar-thumb,.cf-customer::-webkit-scrollbar-thumb{background:rgba(129,144,170,.24);border-radius:10px}

.cf-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.cf-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 46%),var(--cf-surface);border:1px solid var(--cf-border);border-radius:var(--cf-radius);box-shadow:var(--cf-shadow-soft)}
.cf-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 28%)}
.cf-kpi{padding:17px 18px;min-height:132px;overflow:hidden}
.cf-kpi:after{content:"";position:absolute;width:85px;height:85px;right:-33px;top:-36px;border-radius:50%;background:radial-gradient(circle,rgba(80,105,255,.13),transparent 70%)}
.cf-kpi-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.cf-kpi .label{font-size:10px;letter-spacing:.06em;color:var(--cf-muted);font-weight:820}.cf-kpi .value{font-size:27px;font-weight:850;letter-spacing:-.035em;margin-top:13px;color:var(--cf-text)}.cf-kpi .hint{font-size:10.5px;color:var(--cf-muted);margin-top:8px}
.cf-dot{width:8px;height:8px;border-radius:50%;background:var(--cf-success);box-shadow:0 0 0 4px rgba(45,212,154,.10)}
.cf-badge{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:780;padding:5px 8px;border-radius:999px;background:rgba(117,87,255,.11);border:1px solid rgba(117,87,255,.13);color:#b8a8ff;white-space:nowrap}
html[data-theme="light"] .cf-badge{color:#6751ce;background:#f0edff;border-color:#e4defe}

.cf-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(300px,.78fr);gap:13px;margin-top:13px}
.cf-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}
.cf-panel{padding:18px;min-width:0}.cf-panel-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}.cf-panel-title h2{font-size:14px;letter-spacing:-.01em;margin:0;font-weight:760}.cf-panel-title span{color:var(--cf-muted);font-size:10.5px}.cf-panel-title>span{padding:5px 8px;border-radius:8px;background:var(--cf-surface-soft)}
.cf-bars{height:220px;display:flex;align-items:end;gap:10px;padding:19px 5px 8px;border-bottom:1px solid var(--cf-border)}
.cf-bar{flex:1;min-width:15px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--cf-purple-2),var(--cf-blue));opacity:.82;position:relative;box-shadow:0 -5px 16px rgba(74,96,255,.09);transition:opacity .15s,transform .15s}.cf-bar:hover{opacity:1;transform:translateY(-2px)}.cf-bar:after{content:attr(data-day);position:absolute;left:50%;transform:translateX(-50%);bottom:-24px;font-size:9px;color:var(--cf-muted)}
.cf-queue{display:grid;gap:8px}.cf-queue-item{display:flex;justify-content:space-between;align-items:center;background:var(--cf-surface-soft);border:1px solid var(--cf-border);padding:12px;border-radius:12px;transition:.16s}.cf-queue-item:hover{background:var(--cf-surface-hover);border-color:var(--cf-border-strong)}.cf-queue-item strong{font-size:12px}.cf-queue-item small{display:block;color:var(--cf-muted);font-size:10px;margin-top:4px}
.cf-list{display:grid;gap:5px}.cf-list-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;transition:background .15s}.cf-list-row:hover{background:var(--cf-surface-soft)}.cf-list-row .grow{flex:1;min-width:0}.cf-list-row strong{font-size:12px}.cf-list-row small{display:block;color:var(--cf-muted);font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ATENDIMENTO */
.cf-chat-layout{height:calc(100dvh - 74px - var(--safe-top));display:grid;grid-template-columns:340px minmax(360px,1fr) 305px;min-height:0;background:var(--cf-bg)}
.cf-conversations,.cf-customer{background:var(--cf-surface);min-height:0}.cf-conversations{border-right:1px solid var(--cf-border);display:flex;flex-direction:column}.cf-customer{border-left:1px solid var(--cf-border);overflow:auto;padding:17px}
.cf-search{padding:13px;border-bottom:1px solid var(--cf-border)}.cf-search input,.cf-compose textarea{width:100%;border:1px solid var(--cf-border);background:var(--cf-surface-soft);color:var(--cf-text);outline:0;border-radius:11px;padding:11px 12px;transition:border-color .15s,box-shadow .15s}.cf-search input:focus,.cf-compose textarea:focus{border-color:rgba(74,121,255,.45);box-shadow:0 0 0 3px rgba(61,112,255,.07)}
.cf-conv-scroll{overflow:auto;min-height:0}.cf-conv{display:flex;gap:10px;padding:12px 13px;border-bottom:1px solid var(--cf-border);cursor:pointer;transition:background .15s}.cf-conv:hover{background:var(--cf-surface-soft)}.cf-conv.active{background:linear-gradient(90deg,rgba(38,140,255,.12),rgba(117,87,255,.055));box-shadow:inset 3px 0 0 var(--cf-blue)}.cf-conv .grow{min-width:0;flex:1}.cf-conv-line{display:flex;justify-content:space-between;gap:10px}.cf-conv strong{font-size:12px}.cf-conv time{font-size:9px;color:var(--cf-muted)}.cf-conv p{margin:4px 0 0;font-size:10.5px;color:var(--cf-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cf-unread{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--cf-brand-gradient);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;margin-top:6px}
.cf-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(circle at 20% 0%,rgba(38,140,255,.055),transparent 34%),radial-gradient(circle at 80% 100%,rgba(117,87,255,.045),transparent 38%),var(--cf-bg)}
.cf-chat-head{height:64px;display:flex;align-items:center;padding:0 15px;gap:10px;border-bottom:1px solid var(--cf-border);background:color-mix(in srgb,var(--cf-surface) 92%,transparent);backdrop-filter:blur(12px)}.cf-chat-head .grow{flex:1}.cf-chat-head strong{display:block;font-size:13px}.cf-chat-head small{color:var(--cf-success);font-size:10px}
.cf-messages{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:8px}.cf-msg{max-width:min(72%,620px);padding:10px 12px;border-radius:14px;font-size:12px;line-height:1.45;box-shadow:0 5px 17px rgba(0,0,0,.07)}.cf-msg.in{align-self:flex-start;background:var(--cf-surface);border:1px solid var(--cf-border);border-bottom-left-radius:5px}.cf-msg.out{align-self:flex-end;background:linear-gradient(135deg,#287eea,#7557ff);color:white;border-bottom-right-radius:5px}.cf-msg small{display:block;text-align:right;opacity:.7;margin-top:5px;font-size:8.5px}
.cf-compose{display:flex;align-items:end;gap:8px;padding:11px 12px calc(11px + var(--safe-bottom));border-top:1px solid var(--cf-border);background:var(--cf-surface)}.cf-compose textarea{resize:none;min-height:43px;max-height:110px}
.cf-customer .profile{text-align:center;padding:8px 0 17px;border-bottom:1px solid var(--cf-border)}.cf-customer .profile .cf-avatar{width:62px;height:62px;margin:0 auto 10px;border-radius:18px}.cf-customer h3{margin:0;font-size:14px}.cf-customer p{margin:5px 0;color:var(--cf-muted);font-size:10.5px}.cf-section{padding:15px 0;border-bottom:1px solid var(--cf-border)}.cf-section-title{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--cf-muted);margin-bottom:10px;font-weight:750}.cf-tags{display:flex;flex-wrap:wrap;gap:6px}.cf-tag{font-size:9.5px;padding:6px 8px;border-radius:999px;background:var(--cf-surface-soft);border:1px solid var(--cf-border)}

/* MÓDULOS */
.cf-module{max-width:1120px;margin:0 auto}.cf-module-hero{padding:26px;background:linear-gradient(120deg,rgba(38,140,255,.055),rgba(117,87,255,.035)),var(--cf-surface)}.cf-module-hero h2{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}.cf-module-hero p{margin:0;color:var(--cf-muted);font-size:12px;line-height:1.6}.cf-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:13px}.cf-module-box{padding:18px;min-height:130px}.cf-module-box strong{display:block;margin-bottom:8px;font-size:13px}.cf-module-box span{font-size:10.5px;color:var(--cf-muted);line-height:1.5}

.cf-overlay{display:none}

/* TABLET */
@media(max-width:1180px){
  .cf-grid-4{grid-template-columns:repeat(2,1fr)}
  .cf-chat-layout{grid-template-columns:305px minmax(0,1fr)}
  .cf-customer{display:none}
}

/* MOBILE */
@media(max-width:820px){
  body{overflow:hidden}
  .cf-app{grid-template-columns:1fr}
  .cf-sidebar{position:fixed;inset:var(--safe-top) auto 0 0;width:min(84vw,292px);transform:translateX(-105%);transition:transform .23s cubic-bezier(.2,.8,.2,1);box-shadow:30px 0 65px rgba(0,0,0,.35)}
  .cf-app.menu-open .cf-sidebar{transform:none}
  .cf-overlay{display:block;position:fixed;inset:0;background:rgba(3,7,16,.60);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s;z-index:25}
  .cf-app.menu-open .cf-overlay{opacity:1;pointer-events:auto}
  .cf-menu-btn{display:inline-flex}
  .cf-topbar{height:64px;padding:0 12px}
  .cf-topbar p{display:none}.cf-topbar h1{font-size:17px}
  .cf-content{padding:12px 11px calc(17px + var(--safe-bottom))}
  .cf-grid-4{grid-template-columns:1fr 1fr;gap:9px}.cf-kpi{padding:13px;min-height:112px}.cf-kpi .value{font-size:21px;margin-top:10px}.cf-kpi .hint{font-size:9.5px}.cf-kpi .label{font-size:9px}
  .cf-dashboard-grid,.cf-bottom-grid{grid-template-columns:1fr;gap:9px;margin-top:9px}.cf-panel{padding:14px}.cf-bars{height:185px;gap:7px}
  .cf-module-grid{grid-template-columns:1fr}
  .cf-chat-layout{height:calc(100dvh - 64px - var(--safe-top));grid-template-columns:1fr}.cf-chat,.cf-customer{display:none}.cf-chat-layout.chat-open .cf-conversations{display:none}.cf-chat-layout.chat-open .cf-chat{display:flex}.cf-mobile-back{display:inline-flex!important}.cf-conversations{border:0}.cf-topbar .cf-primary-btn span{display:none}
  .cf-messages{padding:14px 11px}.cf-msg{max-width:86%}
}

@media(max-width:460px){
  .cf-grid-4{grid-template-columns:1fr 1fr}.cf-kpi .value{font-size:19px}.cf-actions{gap:5px}.cf-icon-btn,.cf-primary-btn{min-height:38px;padding:0 10px}.cf-panel-title h2{font-size:13px}.cf-panel-title>span{display:none}
}

.cf-btn.danger{color:#ff6b7a;border-color:rgba(255,91,110,.22)}
.cf-btn.danger:hover{background:rgba(255,91,110,.10);border-color:rgba(255,91,110,.38)}


/* ===== CONECT FLOW 2026: LIGHT THEME REFINEMENT ===== */
html[data-theme="light"]{--cf-bg:#f6f8fc;--cf-bg-2:#eef3f9;--cf-sidebar:#fff;--cf-surface:#fff;--cf-surface-soft:#f3f6fb;--cf-surface-hover:#edf3f9;--cf-border:#dfe6f0;--cf-border-strong:#ccd7e5;--cf-text:#172033;--cf-text-soft:#40506a;--cf-muted:#74839a;--cf-shadow:0 12px 34px rgba(35,52,80,.08);--cf-shadow-soft:0 6px 20px rgba(35,52,80,.055)}
html[data-theme="light"] body{background:linear-gradient(180deg,#f9fbfe,#f4f7fb)}
html[data-theme="light"] .cf-sidebar{box-shadow:8px 0 28px rgba(45,61,87,.035)}
html[data-theme="light"] .cf-topbar{background:rgba(255,255,255,.88);box-shadow:0 4px 20px rgba(38,54,80,.035)}
html[data-theme="light"] .cf-card{background:#fff;border-color:#e0e7f0;box-shadow:0 7px 24px rgba(38,54,80,.045)}
html[data-theme="light"] .cf-icon-btn{background:#fff;border-color:#dce4ef}
html[data-theme="light"] .cf-icon-btn:hover{background:#f7f9fc;border-color:#ccd7e5}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{color:#26354d}
html[data-theme="light"] .cf-content{scrollbar-width:none}html[data-theme="light"] .cf-content::-webkit-scrollbar{display:none}