:root {
  color-scheme: dark;
  --bg: #060812;
  --panel: rgba(13, 17, 31, 0.78);
  --panel-solid: #0d111f;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.075);
  --line: rgba(160, 177, 211, 0.14);
  --line-bright: rgba(102, 236, 255, 0.28);
  --text: #edf3ff;
  --muted: #8995ad;
  --cyan: #5cecff;
  --blue: #5978ff;
  --violet: #9a6cff;
  --green: #67f7ba;
  --danger: #ff6f91;
  --radius: 22px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

.ambient {
  position: fixed;
  z-index: -3;
  border-radius: 999px;
  filter: blur(120px);
  opacity: .18;
  pointer-events: none;
}

.ambient-one { width: 520px; height: 520px; background: #135dff; top: -260px; right: 8%; }
.ambient-two { width: 420px; height: 420px; background: #7441d7; bottom: -250px; left: 18%; }

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .055;
  background-image: linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 60% 40%, #000 10%, transparent 70%);
}

.app-shell { height: 100vh; min-height: 620px; padding: 18px; }

.topbar {
  height: 68px;
  max-width: 1280px;
  margin: 0 auto 14px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 11, 21, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: linear-gradient(145deg, rgba(92,236,255,.18), rgba(89,120,255,.15));
  border: 1px solid rgba(92,236,255,.22); box-shadow: inset 0 0 18px rgba(92,236,255,.08);
}
.brand-mark svg { width: 27px; fill: var(--cyan); filter: drop-shadow(0 0 8px rgba(92,236,255,.45)); }
.brand strong { display: block; font-size: 14px; letter-spacing: .13em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.inline-form { display: contents; }

.status-pill {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(137,149,173,.08); }
.status-pill.ready { color: var(--green); border-color: rgba(103,247,186,.2); }
.status-pill.ready .status-dot { background: var(--green); box-shadow: 0 0 10px rgba(103,247,186,.7); }
.status-pill.error { color: var(--danger); border-color: rgba(255,111,145,.2); }
.status-pill.error .status-dot { background: var(--danger); box-shadow: 0 0 10px rgba(255,111,145,.7); }
.status-pill.loading .status-dot { animation: statusPulse 1.1s ease infinite; }

.icon-button {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); cursor: pointer; transition: .2s ease;
}
.icon-button:hover { background: var(--surface-hover); border-color: var(--line-bright); transform: translateY(-1px); }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.export-button {
  min-height: 36px;
  padding: 0 13px 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(92,236,255,.2);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(92,236,255,.1), rgba(89,120,255,.1));
  color: #bcefff;
  font: 650 9px/1 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: .2s ease;
}
.export-button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(92,236,255,.4); background: linear-gradient(135deg, rgba(92,236,255,.17), rgba(89,120,255,.16)); box-shadow: 0 10px 28px rgba(31,160,210,.12); }
.export-button:disabled { opacity: .35; cursor: not-allowed; }
.export-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.workspace {
  height: calc(100vh - 100px);
  min-height: 520px;
  max-width: 1280px;
  margin: 0 auto;
  display: block;
}

.sidebar, .chat-panel {
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(20px);
  box-shadow: 0 30px 100px rgba(0,0,0,.3);
}

.sidebar { padding: 14px; border-radius: var(--radius); overflow-y: auto; }
.sidebar-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); }
.sidebar-card + .sidebar-card { margin-top: 12px; }
.section-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.live-indicator { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.live-indicator i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.base-picker { display: grid; gap: 7px; margin-top: 16px; }
.base-picker > span { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.base-picker select {
  width: 100%; min-height: 39px; padding: 0 34px 0 11px; border: 1px solid var(--line);
  border-radius: 10px; outline: 0; appearance: none; color: #dbe7ff; background-color: #101627;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  font: 10px/1 var(--mono); cursor: pointer;
}
.base-picker select:focus { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(92,236,255,.045); }
.base-picker select:disabled { opacity: .55; cursor: wait; }

.knowledge-title { display: flex; gap: 12px; align-items: center; margin: 16px 0 18px; }
.database-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(89,120,255,.12); border: 1px solid rgba(89,120,255,.22); }
.database-icon svg { width: 21px; fill: none; stroke: #89a0ff; stroke-width: 1.5; }
.knowledge-title h2 { margin: 0; font-size: 14px; font-weight: 650; }
.knowledge-title p { margin: 5px 0 0; color: var(--muted); font: 10px/1.3 var(--mono); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0; border-block: 1px solid var(--line); }
.metrics div { min-width: 0; text-align: center; }
.metrics div + div { border-left: 1px solid var(--line); }
.metrics strong { display: block; font: 600 17px/1.1 var(--mono); color: #dbe7ff; }
.metrics span { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.model-row { margin-top: 14px; display: grid; gap: 7px; }
.model-row span { color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .1em; }
.model-row code { color: #9baaff; font: 9px/1.45 var(--mono); overflow-wrap: anywhere; }

.pipeline-card { padding-bottom: 12px; }
.pipeline { list-style: none; padding: 8px 0 0; margin: 0; }
.pipeline li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; }
.pipeline li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 39px; height: 25px; width: 1px; background: linear-gradient(var(--line-bright), var(--line)); }
.pipeline li > span { z-index: 1; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #101627; border: 1px solid var(--line); color: var(--muted); font: 9px/1 var(--mono); }
.pipeline li.active > span { color: var(--cyan); border-color: rgba(92,236,255,.28); box-shadow: 0 0 20px rgba(92,236,255,.08); }
.pipeline b { display: block; font-size: 11px; font-weight: 600; }
.pipeline small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }

.privacy-note { display: flex; gap: 11px; align-items: flex-start; padding: 18px 8px 4px; }
.privacy-note svg { width: 18px; flex: 0 0 auto; fill: none; stroke: var(--green); stroke-width: 1.5; }
.privacy-note strong { display: block; font-size: 10px; }
.privacy-note span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.chat-panel { width: 100%; height: 100%; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--radius); overflow: hidden; }
.chat-header { min-height: 88px; padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(6,8,18,.22); }
.eyebrow { color: var(--cyan); font: 600 9px/1 var(--mono); letter-spacing: .18em; }
.chat-header h1 { margin: 8px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.trust-badge { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.pulse-ring { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(92,236,255,.75); }
.pulse-ring::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(92,236,255,.22); border-radius: 50%; animation: ring 2s ease-out infinite; }
.trust-badge small { display: block; color: var(--muted); font: 8px/1 var(--mono); letter-spacing: .1em; }
.trust-badge strong { display: block; max-width: 220px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; color: #c9d2ff; font: 10px/1 var(--mono); }

.messages { min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 24px clamp(20px, 5vw, 76px); }
.welcome-state { min-height: 100%; max-width: 720px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 0; animation: rise .7s ease both; }
.orb { position: relative; width: 92px; height: 92px; margin-bottom: 30px; display: grid; place-items: center; }
.orb-core { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c3f9ff 0, var(--cyan) 12%, #4f69ff 46%, #1a184c 74%); box-shadow: 0 0 24px rgba(92,236,255,.42), 0 0 70px rgba(89,120,255,.28); animation: breathe 4s ease-in-out infinite; }
.orbit { position: absolute; inset: 5px; border: 1px solid rgba(92,236,255,.2); border-radius: 50%; transform: rotateX(65deg) rotateZ(18deg); }
.orbit::before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); left: 8px; top: 17px; box-shadow: 0 0 8px var(--cyan); }
.orbit-b { inset: 14px -3px; border-color: rgba(154,108,255,.28); transform: rotateY(65deg) rotateZ(-28deg); }
.welcome-state h2 { margin: 13px 0 14px; font-size: clamp(28px, 4vw, 48px); line-height: 1.07; letter-spacing: -.045em; font-weight: 620; }
.welcome-state h2 em { color: transparent; background: linear-gradient(90deg, var(--cyan), #9aa8ff, #bd8cff); background-clip: text; font-style: normal; }
.welcome-state > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.72; }
.suggestions { width: 100%; max-width: 660px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
.suggestions button { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 15px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: .2s ease; }
.suggestions button:hover { transform: translateY(-2px); border-color: var(--line-bright); background: var(--surface-hover); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.suggestions span { font-size: 10px; font-weight: 550; line-height: 1.35; }
.suggestions svg { width: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.5; }

.message { max-width: 900px; margin: 0 auto 28px; display: flex; gap: 14px; animation: rise .32s ease both; }
.message-avatar { width: 33px; height: 33px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.message.user .message-avatar::before { content: "TÚ"; color: var(--muted); font: 8px/1 var(--mono); }
.message.assistant .message-avatar { border-color: rgba(92,236,255,.24); background: linear-gradient(145deg, rgba(92,236,255,.13), rgba(89,120,255,.1)); }
.message.assistant .message-avatar::before { content: "AI"; color: var(--cyan); font: 700 9px/1 var(--mono); }
.message-body { min-width: 0; flex: 1; }
.message-label { height: 24px; color: var(--muted); font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.message-content { padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: rgba(255,255,255,.035); color: #dce5f7; font-size: 13px; line-height: 1.72; overflow-wrap: anywhere; }
.message.user .message-content { display: inline-block; background: rgba(89,120,255,.1); border-color: rgba(89,120,255,.2); }
.message-content p { margin: 0 0 11px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content strong { color: #fff; }
.message-content code { padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.3); color: #aeefff; font-family: var(--mono); font-size: .9em; }
.message-content pre { overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #050812; }
.message-content pre code { padding: 0; background: none; }
.message-content ul, .message-content ol { padding-left: 22px; }
.message-content a { color: var(--cyan); }
.message.error .message-content { border-color: rgba(255,111,145,.24); color: #ffb3c4; }
.message-sources { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.source-chip { padding: 7px 9px; border: 1px solid rgba(92,236,255,.15); border-radius: 8px; background: rgba(92,236,255,.05); color: #9eabbf; font: 9px/1 var(--mono); }
.source-chip b { color: var(--cyan); font-weight: 600; }
.typing { display: inline-flex; gap: 5px; align-items: center; min-height: 20px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: dots 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }

.composer-wrap { padding: 12px clamp(20px, 5vw, 76px) 18px; border-top: 1px solid var(--line); background: rgba(6,8,18,.36); }
.composer { max-width: 900px; min-height: 58px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(12,16,29,.92); transition: .2s ease; box-shadow: 0 18px 55px rgba(0,0,0,.22); }
.composer:focus-within { border-color: var(--line-bright); box-shadow: 0 0 0 3px rgba(92,236,255,.045), 0 18px 55px rgba(0,0,0,.22); }
.composer textarea { flex: 1; min-height: 40px; max-height: 150px; resize: none; padding: 11px 0 7px; outline: none; border: 0; background: transparent; color: var(--text); line-height: 1.45; font-size: 13px; }
.composer textarea::placeholder { color: #647088; }
.composer button { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 12px; background: linear-gradient(145deg, #6defff, #637dff); color: #06101d; cursor: pointer; box-shadow: 0 8px 25px rgba(89,120,255,.28); transition: .2s ease; }
.composer button:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 32px rgba(92,236,255,.3); }
.composer button:disabled { opacity: .4; cursor: wait; transform: none; }
.composer button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.composer-meta { max-width: 900px; margin: 9px auto 0; display: flex; justify-content: space-between; color: #657086; font: 8px/1 var(--mono); letter-spacing: .04em; }
kbd { padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font: inherit; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.login-panel {
  position: relative;
  width: min(100%, 980px);
  min-height: min(720px, calc(100vh - 44px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(10, 14, 27, .8);
  backdrop-filter: blur(24px);
  box-shadow: 0 38px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.025);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .7;
}

.login-panel::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 55%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(70, 79, 255, .12);
  filter: blur(100px);
  transform: translate(-50%, -50%);
}

.login-header {
  min-height: 78px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(6,8,18,.3);
}

.login-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.login-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92,236,255,.25);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(92,236,255,.18), rgba(89,120,255,.14));
  box-shadow: inset 0 0 20px rgba(92,236,255,.08);
}

.login-brand-mark svg { width: 29px; fill: var(--cyan); filter: drop-shadow(0 0 8px rgba(92,236,255,.5)); }
.login-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; letter-spacing: .1em; }
.login-brand small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.login-security { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 11px; border: 1px solid rgba(103,247,186,.16); border-radius: 999px; background: rgba(103,247,186,.04); color: var(--green); font: 600 8px/1 var(--mono); letter-spacing: .09em; }
.login-security i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }

.login-content {
  min-height: calc(min(720px, calc(100vh - 44px)) - 79px);
  padding: 46px 30px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-orb { position: relative; width: 90px; height: 90px; margin-bottom: 28px; display: grid; place-items: center; }
.login-orb-core { z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bdf8ff, #58ddec 20%, #546dff 55%, #1a184c 80%); box-shadow: 0 0 25px rgba(92,236,255,.38), 0 0 72px rgba(89,120,255,.25); animation: breathe 4s ease-in-out infinite; }
.login-orb-core svg { width: 21px; fill: none; stroke: #07101d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-orbit { position: absolute; inset: 4px; border: 1px solid rgba(92,236,255,.21); border-radius: 50%; transform: rotateX(65deg) rotateZ(18deg); }
.login-orbit::before { content: ""; position: absolute; width: 5px; height: 5px; left: 8px; top: 17px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.login-orbit-b { inset: 14px -3px; border-color: rgba(154,108,255,.3); transform: rotateY(65deg) rotateZ(-28deg); }
.login-content h1 { max-width: 700px; margin: 14px 0 12px; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; font-weight: 620; }
.login-content h1 em { color: transparent; background: linear-gradient(90deg, var(--cyan), #9aa8ff, #bd8cff); background-clip: text; font-style: normal; }
.login-content > p { max-width: 510px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.login-form { width: min(100%, 470px); margin-top: 30px; text-align: center; }
.login-form label { display: block; margin-bottom: 9px; color: #aab6ca; font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.login-input-wrap {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(5,8,18,.8);
  transition: .2s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.login-input-wrap:focus-within { border-color: rgba(92,236,255,.42); box-shadow: 0 0 0 3px rgba(92,236,255,.055), 0 18px 50px rgba(0,0,0,.26); }
.login-input-wrap svg { width: 18px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 15px/1 var(--sans); text-align: center; letter-spacing: .04em; }
.login-input-wrap input::placeholder { color: #5f6b82; letter-spacing: 0; }
.input-status { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #4c566c; transition: .2s ease; }
.login-input-wrap:focus-within .input-status { background: var(--cyan); box-shadow: 0 0 10px rgba(92,236,255,.7); }

.login-submit {
  position: relative;
  width: 100%;
  min-height: 56px;
  margin-top: 13px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(115deg, #69efff 0%, #6d8cff 58%, #926fff 100%);
  color: #06101d;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 15px 36px rgba(89,120,255,.3);
  transition: .2s ease;
}

.login-submit::before { content: ""; position: absolute; width: 90px; height: 160%; left: -120px; top: -30%; background: rgba(255,255,255,.28); filter: blur(20px); transform: skewX(-20deg); transition: left .55s ease; }
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 19px 44px rgba(92,236,255,.31); }
.login-submit:hover::before { left: calc(100% + 30px); }
.login-submit-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(4,12,25,.12); }
.login-submit-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-submit-arrow { position: absolute; right: 20px; font-size: 17px; font-weight: 500; transition: transform .2s ease; }
.login-submit:hover .login-submit-arrow { transform: translateX(3px); }
.login-error { margin-top: 10px; padding: 11px 13px; border: 1px solid rgba(255,111,145,.24); border-radius: 11px; background: rgba(255,111,145,.07); color: #ffb3c4; font-size: 10px; line-height: 1.45; text-align: center; }
.login-footnote { margin-top: 24px; display: flex; align-items: center; gap: 7px; color: #657086; font: 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.login-footnote span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(103,247,186,.55); }

.print-header { display: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(160,177,211,.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(160,177,211,.24); }

@keyframes statusPulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes ring { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.08); filter: hue-rotate(12deg); } }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; padding: 10px; }
  .workspace { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
  .sidebar-card + .sidebar-card { margin-top: 0; }
  .privacy-note { display: none; }
  .chat-panel { min-height: 720px; }
}

@media (max-width: 520px) {
  .login-shell { padding: 10px; }
  .login-panel { min-height: calc(100vh - 20px); border-radius: 20px; }
  .login-header { min-height: 68px; padding: 0 15px; }
  .login-brand small { max-width: 190px; }
  .login-security { display: none; }
  .login-content { min-height: calc(100vh - 89px); padding: 34px 20px 30px; }
  .login-orb { margin-bottom: 22px; }
  .login-content h1 { font-size: 31px; }
  .login-content > p { font-size: 12px; }
  .login-form { margin-top: 26px; }
  .export-button { width: 36px; padding: 0; justify-content: center; }
  .export-button span { display: none; }
}

@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    width: auto;
    min-height: 0;
    height: auto;
    overflow: visible !important;
    background: #fff !important;
    color: #162238 !important;
  }

  .ambient, .grid-overlay, .topbar, .chat-header, .composer-wrap, .welcome-state {
    display: none !important;
  }

  .app-shell {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .workspace {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .chat-panel {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .print-header {
    display: block;
    margin-bottom: 12mm;
    padding: 0 0 8mm;
    border-bottom: 2px solid #667cff;
  }

  .print-brand-row { display: flex; align-items: center; gap: 4mm; }
  .print-brand-mark { width: 11mm; height: 11mm; display: grid; place-items: center; border-radius: 3mm; background: linear-gradient(145deg, #58ddec, #667cff); color: #07101d; font: 800 15pt/1 var(--sans); }
  .print-brand-row span { display: block; color: #69758a; font: 700 7.5pt/1 var(--mono); letter-spacing: .12em; }
  .print-brand-row strong { display: block; margin-top: 2mm; color: #17233a; font: 650 12pt/1.15 var(--sans); }
  .print-header h1 { margin: 9mm 0 2mm; color: #111d32; font: 650 25pt/1.1 var(--sans); letter-spacing: -.035em; }
  .print-header > p { margin: 0; color: #68758a; font: 10pt/1.5 var(--sans); }
  .print-meta { margin-top: 6mm; display: flex; justify-content: space-between; gap: 8mm; color: #778399; font: 7.5pt/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

  .messages {
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .message {
    max-width: none;
    margin: 0 0 6mm;
    display: block;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .message-avatar, .message-sources { display: none !important; }
  .message-body { width: 100%; }
  .message-label { height: auto; margin-bottom: 2mm; color: #53627a; font: 750 7.5pt/1 var(--mono); letter-spacing: .11em; }
  .message-content {
    padding: 4mm 5mm;
    border: 1px solid #dbe2ee;
    border-left: 3px solid #687cff;
    border-radius: 2mm;
    background: #f7f9fd;
    color: #1e2a40;
    font: 9.5pt/1.55 var(--sans);
    box-shadow: none;
  }
  .message.user .message-content { display: block; border-color: #cce9ee; border-left-color: #26b6c9; background: #f2fbfc; }
  .message-content h2, .message-content h3, .message-content h4 { color: #15223a; break-after: avoid; }
  .message-content p, .message-content ul, .message-content ol { orphans: 3; widows: 3; }
  .message-content strong { color: #111c30; }
  .message-content code, .message-content pre { color: #17243b; background: #edf1f7; }
}

@media (max-height: 780px) and (min-width: 901px) {
  .welcome-state { padding: 10px 0; }
  .orb { width: 70px; height: 70px; margin-bottom: 17px; }
  .orb-core { width: 38px; height: 38px; }
  .welcome-state h2 { margin: 10px 0; font-size: clamp(27px, 3.2vw, 39px); }
  .welcome-state > p { font-size: 12px; line-height: 1.55; }
  .suggestions { margin-top: 18px; }
  .suggestions button { min-height: 48px; }
}

@media (max-width: 620px) {
  .topbar { height: 62px; padding: 0 12px; }
  .brand small, .status-pill span:last-child { display: none; }
  .status-pill { width: 34px; padding: 0; justify-content: center; }
  .sidebar { display: block; }
  .pipeline-card { display: none; }
  .chat-panel { min-height: calc(100vh - 250px); }
  .chat-header { min-height: 76px; padding: 16px; }
  .chat-header h1 { font-size: 16px; }
  .trust-badge { padding: 8px; }
  .trust-badge div { display: none; }
  .messages { padding: 18px 14px; }
  .welcome-state { padding: 35px 4px; justify-content: flex-start; }
  .welcome-state h2 { font-size: 31px; }
  .suggestions { grid-template-columns: 1fr; margin-top: 24px; }
  .suggestions button { min-height: 48px; }
  .composer-wrap { padding: 10px 12px 14px; }
  .composer-meta span:first-child { display: none; }
  .message { gap: 9px; }
  .message-avatar { width: 29px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}