:root{
  --purple-950:#33053f;
  --purple-800:#4d0860;
  --purple-600:#6e1282;
  --purple-500:#7f1a94;
  --purple-400:#8f1da6;
  --orange-300:#f9a12e;
  --orange-500:#e27235;
  --surface:#f7f5fa;
  --surface-alt:#efe9f4;
  --ink:#241128;
  --ink-soft:#5c4d63;
  --success:#1f9d56;
  --success-bg:#e6f6ec;
  --danger:#c24444;
  --danger-bg:#fbecec;
  --line:#e7e0ee;
  --shadow: 0 8px 24px rgba(51,5,63,0.10), 0 2px 6px rgba(51,5,63,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--surface);
}
h1,h2,h3{ font-family:'Sora',sans-serif; }

.screen{ display:none; min-height:100vh; }
.screen.active{ display:block; }

/* ================= LOGIN ================= */
#login{
  position:relative; min-height:100vh; flex-direction:column;
  background: radial-gradient(120% 140% at 8% 8%, var(--purple-400) 0%, var(--purple-600) 38%, var(--purple-800) 72%, var(--purple-950) 100%);
  overflow:hidden;
}
#login.active{ display:flex; }
#login .ribbon-motif{ position:absolute; inset:0; pointer-events:none; opacity:0.16; }
#login .ribbon-motif svg{ width:100%; height:100%; }
#login .ribbon-motif path{
  fill:none; stroke:url(#ribbonGrad); stroke-width:2.4; stroke-dasharray: 14 10;
  animation: flow 26s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-480; } }

.login-body{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:96px; padding:48px; position:relative; z-index:2; flex-wrap:wrap;
}
.login-brand{ max-width:460px; }
.login-brand img{ width:min(360px, 70vw); display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25)); }

.login-card{
  width:380px; background:#fff; border-radius:20px; padding:36px 32px;
  box-shadow: 0 24px 60px rgba(20,4,26,0.35);
}
.login-card h2{ font-size:22px; margin:0 0 4px; color:var(--ink); }
.login-card .sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:#fdfcfe;
}
.field input:focus{ outline:none; border-color:var(--purple-500); }
.btn-primary{
  width:100%; border:none; padding:13px 16px; border-radius:10px;
  background:linear-gradient(120deg, var(--orange-300), var(--orange-500));
  color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; margin-top:6px; box-shadow:0 10px 20px rgba(226,114,53,0.32);
}
.btn-primary:disabled{ opacity:0.6; cursor:default; }
.login-error{
  display:none; background:var(--danger-bg); color:var(--danger); font-size:13px;
  padding:10px 12px; border-radius:8px; margin-bottom:16px;
}

/* ================= DASHBOARD ================= */
#dashboard{ min-height:100vh; }
#dashboard.active{ display:flex; }
.sidebar{
  width:232px; flex-shrink:0;
  background:linear-gradient(190deg, var(--purple-800) 0%, var(--purple-950) 100%);
  color:#fff; display:flex; flex-direction:column; padding:24px 16px;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 26px; }
.sidebar .brand img{ width:34px; }
.sidebar .brand span{ font-family:'Sora',sans-serif; font-weight:700; font-size:16px; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  color:#e6d8ec; text-decoration:none; font-size:14px; font-weight:500;
  border-left:3px solid transparent; cursor:pointer;
}
.sidebar nav a .ico{ width:18px; text-align:center; }
.sidebar nav a.active{ background:rgba(255,255,255,0.08); color:#fff; border-left:3px solid var(--orange-500); }
.sidebar nav a:hover:not(.active){ background:rgba(255,255,255,0.05); }
.sidebar .user-box{
  padding-top:14px; margin-top:auto; border-top:1px solid rgba(255,255,255,0.12);
  font-size:12.5px; color:#e6d8ec;
}
.sidebar .user-box .name{ font-weight:600; color:#fff; margin-bottom:6px; }
.sidebar .user-box a{ color:#f4c98a; text-decoration:none; font-weight:600; }

.main{ flex:1; padding:36px 44px; }
.main-header .eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-500);
}
.main-header h1{ font-size:26px; margin:6px 0 6px; color:var(--ink); }
.main-header p{ margin:0 0 14px; color:var(--ink-soft); font-size:14.5px; }
.accent-rule{
  height:3px; width:64px; border-radius:3px;
  background:linear-gradient(90deg, var(--orange-500), var(--orange-300)); margin-bottom:28px;
}

.section{ display:none; }
.section.active{ display:block; }

.channel-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.channel-card{
  background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
}
.channel-card .top{ display:flex; align-items:flex-start; justify-content:space-between; }
.channel-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.03em; }
.pill.on{ background:var(--success-bg); color:var(--success); }
.pill.off{ background:var(--danger-bg); color:var(--danger); }
.channel-card h3{ font-size:16px; margin:0; color:var(--ink); }
.channel-card .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.channel-card .actions{ margin-top:auto; display:flex; gap:8px; }
.btn-sm{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:8px 14px; border-radius:9px; cursor:pointer; border:1.5px solid transparent; }
.btn-sm.primary{ background:var(--orange-500); color:#fff; }
.btn-sm.ghost{ background:#fff; color:var(--purple-600); border-color:var(--purple-400); }
.note{ font-size:12px; color:var(--ink-soft); background:var(--surface-alt); padding:8px 10px; border-radius:8px; line-height:1.4; }

.placeholder-box{
  background:#fff; border:1px dashed var(--line); border-radius:16px; padding:40px;
  text-align:center; color:var(--ink-soft); font-size:14px;
}

/* Atendimento (chat) */
.chat-layout{ display:flex; gap:20px; height:calc(100vh - 220px); min-height:420px; }
.conv-list-wrap{ width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.conv-tabs{ display:flex; gap:6px; }
.conv-tab{
  flex:1; border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  font-size:12.5px; font-weight:600; padding:8px; border-radius:9px; cursor:pointer;
}
.conv-tab.active{ background:var(--purple-600); color:#fff; border-color:var(--purple-600); }
.conv-list{
  flex:1; background:#fff; border-radius:16px; border:1px solid var(--line);
  overflow-y:auto; box-shadow:var(--shadow);
}
.conv-item{
  padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer;
  display:flex; flex-direction:column; gap:2px;
}
.conv-item:last-child{ border-bottom:none; }
.conv-item:hover{ background:var(--surface-alt); }
.conv-item.active{ background:#efe4f7; }
.conv-item .name{ font-weight:600; font-size:14px; color:var(--ink); }
.conv-item .preview{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-item .meta-row{ display:flex; justify-content:space-between; align-items:center; }
.conv-item .channel-tag{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--purple-500); background:#efe4f7; padding:2px 7px; border-radius:999px;
}

.chat-panel{
  flex:1; background:#fff; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
}
.chat-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:14px; }
.chat-open{ flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-header{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.chat-header strong{ font-size:15px; color:var(--ink); }
.chat-channel{
  font-size:11px; font-weight:700; text-transform:uppercase; color:var(--purple-500);
  background:#efe4f7; padding:2px 8px; border-radius:999px; margin-left:8px;
}
.ia-badge{
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; margin-left:8px;
}
.ia-badge.on{ background:#e2f6f4; color:#0f8a80; }
.ia-badge.off{ background:var(--surface-alt); color:var(--ink-soft); }
.chat-messages{ flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble{ max-width:70%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; }
.msg-bubble.cliente{ background:var(--surface-alt); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.msg-bubble.atendente{ background:var(--purple-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg-bubble.ia{ background:#0f8a80; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg-bubble .who{ font-size:10.5px; opacity:0.75; margin-bottom:3px; display:block; }
.chat-reply{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }
.chat-reply input{
  flex:1; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:14px; font-family:'Inter',sans-serif;
}
.chat-reply input:focus{ outline:none; border-color:var(--purple-500); }

/* Configurações / gestão de usuários */
.card{ background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow); border:1px solid var(--line); }
.card + .card{ margin-top:20px; }
.card h3{ font-size:16px; margin:0 0 4px; }
.card .sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }

.user-row{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.user-row:last-child{ border-bottom:none; }
.user-row .who{ display:flex; flex-direction:column; }
.user-row .who .email{ font-size:12.5px; color:var(--ink-soft); }
.role-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; margin-left:10px; }
.role-tag.gestor{ background:#efe4f7; color:var(--purple-600); }
.role-tag.atendente{ background:var(--success-bg); color:var(--success); }
.user-row .btn-remove{
  border:none; background:transparent; color:var(--danger); font-size:12.5px; font-weight:600; cursor:pointer;
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.form-grid input, .form-grid select{
  width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--line); font-size:14px; font-family:'Inter',sans-serif;
}
.form-msg{ font-size:13px; margin-top:8px; }
.form-msg.error{ color:var(--danger); }
.form-msg.ok{ color:var(--success); }

/* CRM */
.crm-layout{ display:flex; gap:20px; align-items:flex-start; }
.crm-list{
  width:300px; flex-shrink:0; background:#fff; border-radius:16px; border:1px solid var(--line);
  box-shadow:var(--shadow); max-height:calc(100vh - 220px); overflow-y:auto;
}
.crm-panel{ flex:1; min-width:0; }
.crm-open h2{ font-size:20px; margin:4px 0 2px; }
.crm-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 20px; }
.crm-conv-item{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:13.5px;
}
.crm-conv-item:last-child{ border-bottom:none; }
.crm-conv-item .status-tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.crm-conv-item .status-tag.aberta{ background:var(--success-bg); color:var(--success); }
.crm-conv-item .status-tag.fechada{ background:var(--surface-alt); color:var(--ink-soft); }
.sgp-financeiro{ margin-top:12px; font-size:13.5px; }
.sgp-financeiro .em-dia{ color:var(--success); font-weight:700; }
.sgp-financeiro .pendente{ color:var(--danger); font-weight:700; }

/* Relatórios */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card{
  background:#fff; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow);
  padding:18px 20px;
}
.stat-value{ font-family:'Sora',sans-serif; font-size:28px; font-weight:700; color:var(--purple-600); }
.stat-label{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.report-row{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:20px; }
.report-chart-card, .report-side-card{ margin:0; }

.bar-chart{ display:flex; align-items:flex-end; gap:12px; height:160px; margin-top:16px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.bar-col .bar{
  width:100%; max-width:34px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg, var(--orange-300), var(--orange-500));
}
.bar-col .bar-count{ font-size:11.5px; font-weight:700; color:var(--ink-soft); }
.bar-col .bar-label{ font-size:11px; color:var(--ink-soft); }

.canal-row, .atendente-row{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.canal-row:last-child, .atendente-row:last-child{ border-bottom:none; }
.canal-row .count, .atendente-row .count{
  font-weight:700; color:var(--purple-600); background:#efe4f7; padding:2px 10px; border-radius:999px; font-size:12.5px;
}