:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: #eef1ff;
  background: #080a12;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(98, 85, 255, .15), transparent 30%),
    radial-gradient(circle at 85% 90%, rgba(32, 201, 151, .09), transparent 26%),
    #080a12;
}

button, textarea { font: inherit; }
button { color: inherit; }

.ambient {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(110px);
  opacity: .16;
  pointer-events: none;
}
.ambient-one { background: #7568ff; left: -180px; top: -170px; }
.ambient-two { background: #2ed5a7; right: -220px; bottom: -220px; }

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(13, 15, 25, .78);
  backdrop-filter: blur(24px);
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 7px 24px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: white;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.04em;
  background: linear-gradient(145deg, #7568ff, #5544dc);
  box-shadow: 0 10px 30px rgba(94, 79, 232, .35), inset 0 1px rgba(255,255,255,.25);
}
.brand strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.brand span { display: block; margin-top: 3px; color: #858ba1; font-size: 11px; }

.new-chat {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(127, 113, 255, .38);
  border-radius: 13px;
  background: rgba(107, 91, 244, .13);
  cursor: pointer;
  text-align: left;
  transition: .18s ease;
}
.new-chat:hover { background: rgba(107, 91, 244, .22); transform: translateY(-1px); }
.new-chat span { margin-right: 7px; color: #a99fff; font-size: 19px; }

.navigation { display: grid; gap: 5px; margin-top: 24px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  color: #9197aa;
  background: transparent;
  text-align: left;
}
.nav-item.active { color: #f4f5ff; background: rgba(255,255,255,.06); }
.nav-item:disabled { opacity: .5; }
.nav-item:not(:disabled) { cursor: pointer; }
.nav-item em { margin-left: auto; color: #777e94; font-size: 10px; font-style: normal; }

.status-card {
  margin-top: auto;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.status-heading { display: flex; align-items: center; justify-content: space-between; color: #bcc1d0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #64697a; box-shadow: 0 0 0 4px rgba(100,105,122,.12); }
.status-dot.online { background: #39d9a5; box-shadow: 0 0 0 4px rgba(57,217,165,.12), 0 0 14px rgba(57,217,165,.5); }
.status-dot.offline { background: #ff7a86; box-shadow: 0 0 0 4px rgba(255,122,134,.12); }
.status-card dl { display: grid; gap: 10px; margin: 15px 0 0; }
.status-card dl div { display: flex; justify-content: space-between; gap: 10px; }
.status-card dt { color: #73798e; font-size: 11px; }
.status-card dd { margin: 0; max-width: 135px; overflow: hidden; color: #cbd0df; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.integration-hint { margin: 12px 0 0; color: #73798e; font-size: 10px; line-height: 1.45; }
.lead-preview { margin-top: 12px; border: 1px solid rgba(141, 126, 255, .45); border-radius: 10px; background: rgba(85, 70, 170, .18); color: #d8d3ff; padding: 8px 10px; cursor: pointer; }
.lead-preview-output { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: rgba(10, 12, 23, .75); color: #cdd1e8; white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.privacy-note { margin: 13px 0 0; color: #666c80; font-size: 10px; text-align: center; }

.knowledge-dialog { width: min(820px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #eef1ff; background: #151827; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.knowledge-dialog::backdrop { background: rgba(4,5,11,.72); backdrop-filter: blur(5px); }
.knowledge-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 28px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.knowledge-dialog h2 { margin: 0; font-size: 26px; }
.management-dialog { width: min(900px, calc(100vw - 32px)); }
.management-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; color: #777e92; font-size: 11px; }
.management-report { margin: 0 28px 28px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: #d9dcea; background: rgba(255,255,255,.035); font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.marketing-funnel-panel { margin: 0 28px 28px; padding: 16px; border: 1px solid rgba(189,183,255,.18); border-radius: 14px; background: rgba(189,183,255,.035); }
.marketing-funnel-panel .lead-list-head { margin-bottom: 8px; }
.funnel-window { display: grid; gap: 4px; color: #8e94a8; font-size: 10px; }
.funnel-window select { border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 8px; color: #dfe4f5; background: #202439; font: 11px inherit; }
.marketing-funnel-note { margin: 0 0 12px; color: #777e92; font-size: 10px; line-height: 1.5; }
.marketing-funnel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.marketing-funnel-kpis div { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }
.marketing-funnel-kpis strong { color: #dfe4f5; font-size: 18px; }
.marketing-funnel-kpis span { color: #7f869a; font-size: 10px; }
.marketing-funnel-dimensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.funnel-dimension { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); }
.funnel-dimension h4 { margin: 0 0 9px; color: #c8ccda; font-size: 11px; font-weight: 600; }
.funnel-row { display: grid; gap: 5px; margin-top: 8px; }
.funnel-row-meta { display: flex; justify-content: space-between; gap: 7px; color: #9da3b6; font-size: 10px; }
.funnel-row-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-row-meta strong { color: #dfe4f5; font-weight: 600; }
.funnel-bar { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.funnel-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d82f7, #7ce2bf); }
.funnel-empty { margin: 0; color: #777e92; font-size: 10px; }
.crm-snapshot { margin: 0 28px 28px; padding: 16px; border: 1px solid rgba(124, 226, 191, .16); border-radius: 14px; background: rgba(124, 226, 191, .035); }
.crm-snapshot .lead-list-head { margin-bottom: 10px; }
.crm-snapshot-actions { display: flex; align-items: center; gap: 10px; }
.crm-snapshot-badge { color: #7ce2bf; font-size: 10px; }
.crm-snapshot-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.crm-snapshot-cards div { display: grid; gap: 5px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }
.crm-snapshot-cards strong { overflow-wrap: anywhere; color: #dfe4f5; font-size: 16px; }
.crm-snapshot-cards span { color: #7f869a; font-size: 10px; }
.crm-snapshot-note { margin: 11px 0 0; color: #777e92; font-size: 10px; line-height: 1.5; }
.whatsapp-onboarding { margin: 0 28px 28px; padding: 16px; border: 1px solid rgba(119, 183, 255, .18); border-radius: 14px; background: rgba(119, 183, 255, .035); }
.whatsapp-onboarding .lead-list-head { margin-bottom: 10px; }
.whatsapp-onboarding .lead-list-head { flex-wrap: wrap; }
.whatsapp-status-badge { display: inline-flex; align-items: center; border: 1px solid rgba(119, 183, 255, .35); border-radius: 999px; padding: 5px 8px; color: #9bc9ff; font-size: 10px; white-space: nowrap; }
.whatsapp-warning { margin: 0; border-left: 3px solid #e9b86f; border-radius: 6px; padding: 9px 11px; color: #e8d2aa; background: rgba(233, 184, 111, .08); font-size: 11px; line-height: 1.5; }
.whatsapp-warning strong { color: #f4c987; }
.whatsapp-steps { display: grid; gap: 7px; margin: 13px 0 0; padding-left: 22px; color: #c7ccdc; font-size: 11px; line-height: 1.45; }
.whatsapp-steps li::marker { color: #8dbdff; font-weight: 700; }
.crm-workflow-list { display: grid; gap: 7px; margin-top: 14px; max-height: 260px; overflow-y: auto; }
.crm-workflow-heading { margin: 3px 0; color: #8e94a8; font-size: 10px; }
.crm-workflow-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.025); }
.crm-workflow-row code { overflow: hidden; color: #bdb7ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.crm-status-select { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 7px; color: #dfe4f5; background: #202439; font: 11px inherit; }
.crm-status-save { border: 0; border-radius: 7px; padding: 7px 9px; color: #fff; background: #6257e8; cursor: pointer; font-size: 10px; }
.crm-status-save:disabled { cursor: default; opacity: .45; }
.dialog-close { width: 32px; height: 32px; border: 0; border-radius: 10px; color: #aeb3c5; background: rgba(255,255,255,.06); cursor: pointer; font-size: 22px; }
.knowledge-intro { margin: 0; padding: 14px 28px; color: #8e94a8; font-size: 12px; line-height: 1.5; }
.knowledge-list { display: grid; gap: 12px; max-height: 570px; padding: 0 28px 28px; overflow-y: auto; }
.knowledge-file { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.knowledge-file-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); color: #bdb7ff; font-size: 12px; }
.knowledge-file-head span { color: #72798d; font-size: 10px; }
.knowledge-file pre { max-height: 260px; margin: 0; padding: 14px; overflow: auto; color: #c8ccda; font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.knowledge-loading { color: #8e94a8; font-size: 12px; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 28px 18px; }
.lead-form input, .lead-form textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: #eef1ff; background: rgba(255,255,255,.05); font: inherit; }
.lead-form textarea { min-height: 70px; resize: vertical; grid-column: 1 / -1; }
.lead-form button { justify-self: start; border: 0; border-radius: 10px; padding: 10px 15px; color: #fff; background: #6257e8; cursor: pointer; }
.lead-dashboard { padding: 6px 28px 28px; border-top: 1px solid rgba(255,255,255,.07); }
.lead-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 18px 0 22px; }
.lead-summary div { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.lead-summary strong { font-size: 21px; line-height: 1; }
.lead-summary span { color: #7f869a; font-size: 10px; }
.lead-summary .hot strong { color: #ff8b95; }
.lead-summary .warm strong { color: #f4c26b; }
.lead-summary .assigned strong { color: #7ce2bf; }
.lead-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.lead-list-head h3 { margin: 0; font-size: 17px; }
.lead-refresh, .lead-clear-filters { border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 8px 10px; color: #aeb3c5; background: rgba(255,255,255,.04); cursor: pointer; font-size: 10px; }
.lead-refresh:disabled { opacity: .45; cursor: wait; }
.lead-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 9px; }
.lead-filters label { display: grid; gap: 6px; }
.lead-filters label span { color: #767d91; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lead-filters select { width: 100%; min-width: 0; padding: 9px 28px 9px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #daddE9; background: #1c1f30; font: inherit; font-size: 11px; }
.lead-result-count { min-height: 14px; margin: 11px 0 7px; color: #6f768a; font-size: 10px; }
.lead-list { display: grid; gap: 10px; max-height: 310px; overflow-y: auto; padding-right: 3px; }
.lead-card { padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.lead-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-card-head > div { display: grid; gap: 3px; }
.lead-card-head strong { color: #eff1fb; font-size: 13px; }
.lead-card-head div span { color: #626a7e; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.lead-temperature { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.lead-temperature.hot { color: #ffc1c6; background: rgba(255,101,116,.14); }
.lead-temperature.warm { color: #f8d898; background: rgba(241,180,68,.14); }
.lead-temperature.cold { color: #aebcda; background: rgba(120,145,190,.14); }
.lead-temperature.unknown { color: #aaaec0; background: rgba(255,255,255,.06); }
.lead-card dl { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr 1.2fr; gap: 10px; margin: 13px 0 0; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06); }
.lead-card dl div { min-width: 0; }
.lead-card dt { margin-bottom: 3px; color: #646b7f; font-size: 9px; }
.lead-card dd { margin: 0; overflow: hidden; color: #bdc2d2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lead-empty { margin: 0; padding: 24px 16px; border: 1px dashed rgba(255,255,255,.1); border-radius: 12px; color: #777e92; font-size: 11px; text-align: center; }
.lead-empty.error { color: #ff9ca5; }
@media (max-width: 600px) { .lead-form { grid-template-columns: 1fr; } .lead-form textarea { grid-column: auto; } }
@media (max-width: 600px) { .lead-summary { grid-template-columns: 1fr 1fr; } .lead-filters { grid-template-columns: 1fr; } .lead-card dl { grid-template-columns: 1fr 1fr; } }

.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; }
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 38px 19px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.eyebrow { margin: 0 0 6px; color: #7770df; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.chat-header h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; }
.online-pill { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #8c92a5; background: rgba(255,255,255,.035); font-size: 11px; }
.online-pill span { width: 7px; height: 7px; border-radius: 50%; background: #777c8e; }
.online-pill.online { color: #a7dbc9; }
.online-pill.online span { background: #39d9a5; box-shadow: 0 0 10px rgba(57,217,165,.7); }
.online-pill.offline { color: #ffabb2; }
.online-pill.offline span { background: #ff7a86; }

.messages { overflow-y: auto; padding: 30px 8%; scroll-behavior: smooth; }
.messages { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(255,255,255,.08); }
.welcome { display: grid; justify-items: center; max-width: 620px; margin: 8vh auto 0; text-align: center; }
.welcome[hidden] { display: none; }
.welcome-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(130,116,255,.35); border-radius: 20px; color: #b8afff; background: linear-gradient(145deg, rgba(119,104,255,.22), rgba(119,104,255,.06)); box-shadow: 0 14px 40px rgba(80,62,210,.18); font-size: 25px; }
.welcome h2 { margin: 22px 0 8px; font-size: 26px; letter-spacing: -.035em; }
.welcome p { max-width: 510px; margin: 0; color: #8e94a8; font-size: 14px; line-height: 1.65; }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 25px; }
.suggestions button { padding: 9px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: #aeb3c5; background: rgba(255,255,255,.035); cursor: pointer; font-size: 11px; transition: .18s ease; }
.suggestions button:hover { border-color: rgba(130,116,255,.4); color: white; background: rgba(130,116,255,.1); }

.message-row { display: flex; gap: 12px; max-width: 820px; margin: 0 auto 22px; animation: enter .22s ease both; }
.message-row.user { justify-content: flex-end; }
.avatar { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #c8c3ff; background: rgba(117,104,255,.16); font-size: 12px; }
.message-row.user .avatar { order: 2; color: #b7ead9; background: rgba(46,213,167,.13); }
.message-content { max-width: min(680px, 78%); }
.message-meta { margin: 0 0 6px 3px; color: #656b7e; font-size: 10px; }
.message-row.user .message-meta { text-align: right; }
.bubble { padding: 13px 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 5px 16px 16px 16px; color: #d9dcea; background: rgba(255,255,255,.045); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.user .bubble { border-color: rgba(117,104,255,.24); border-radius: 16px 5px 16px 16px; color: #f1efff; background: linear-gradient(145deg, rgba(112,96,238,.3), rgba(89,72,204,.22)); }
.typing .bubble { display: flex; gap: 5px; align-items: center; min-height: 45px; }
.typing .bubble i { width: 5px; height: 5px; border-radius: 50%; background: #8f87e7; animation: pulse 1s infinite ease-in-out; }
.typing .bubble i:nth-child(2) { animation-delay: .15s; }
.typing .bubble i:nth-child(3) { animation-delay: .3s; }

.composer-wrap { padding: 16px 8% 20px; background: linear-gradient(transparent, rgba(8,10,18,.84) 25%); }
.composer { display: flex; align-items: flex-end; gap: 12px; max-width: 820px; margin: 0 auto; padding: 10px 10px 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(18,20,32,.92); box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); transition: .18s ease; }
.composer:focus-within { border-color: rgba(125,111,255,.5); box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 0 3px rgba(112,96,238,.08); }
.composer textarea { flex: 1; max-height: 140px; padding: 8px 0; resize: none; border: 0; outline: 0; color: #eef0fa; background: transparent; font-size: 13px; line-height: 1.5; }
.composer textarea::placeholder { color: #686e82; }
.send-button { display: flex; align-items: center; gap: 8px; padding: 10px 11px 10px 14px; border: 0; border-radius: 11px; color: white; background: linear-gradient(145deg, #7465f2, #5947d5); cursor: pointer; box-shadow: 0 8px 22px rgba(82,64,208,.32); }
.send-button:disabled { opacity: .45; cursor: wait; }
.send-button span { font-size: 11px; font-weight: 700; }
.send-button b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.13); }
.composer-hint { max-width: 820px; margin: 7px auto 0; color: #555b6d; font-size: 9px; text-align: center; }

@keyframes enter { from { opacity: 0; transform: translateY(7px); } }
@keyframes pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .chat-header { padding: 20px 20px 15px; }
  .online-pill b { display: none; }
  .messages { padding: 22px 16px; }
  .welcome { margin-top: 5vh; }
  .composer-wrap { padding: 12px 14px 14px; }
  .send-button span { display: none; }
  .message-content { max-width: 86%; }
  .crm-snapshot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-workflow-row { grid-template-columns: 1fr; }
  .marketing-funnel-panel { margin-right: 16px; margin-left: 16px; }
  .marketing-funnel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-funnel-dimensions { grid-template-columns: 1fr; }
  .whatsapp-onboarding { margin-right: 16px; margin-left: 16px; }
}