:root {
  --navy:#0b2742;
  --navy-soft:#183b59;
  --blue:#397bb8;
  --aqua:#74cfc5;
  --aqua-pale:#e7f8f5;
  --sky:#eaf6fd;
  --text:#294155;
  --muted:#687d8d;
  --line:#d9e7ef;
  --white:#fff;
  --shadow:0 24px 70px rgba(15,54,80,.14);
}

* { box-sizing:border-box }
html { min-height:100%; background:#edf7fc }
body { margin:0; min-height:100vh; color:var(--text); background:linear-gradient(145deg,#f7fcff,#e9f7fc 58%,#fff6ec); font-family:'DM Sans',sans-serif }
button,input,textarea { font:inherit }
button,a { -webkit-tap-highlight-color:transparent }
a { color:inherit; text-decoration:none }
button { cursor:pointer }
[hidden] { display:none !important }

.agent-nav { position:fixed; z-index:20; inset:0 0 auto; height:72px; padding:0 clamp(20px,4vw,56px); display:flex; align-items:center; justify-content:space-between; background:rgba(249,253,255,.82); border-bottom:1px solid rgba(213,230,239,.75); backdrop-filter:blur(18px) }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); font:800 1.18rem 'Manrope',sans-serif; letter-spacing:-.03em }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:var(--aqua); background:var(--navy); border-radius:11px; transform:rotate(-3deg) }
.brand-mark svg { width:20px }
.home-link { color:#526b7d; font-size:.86rem; font-weight:700 }
.home-link:hover { color:var(--blue) }

.gate { min-height:100vh; padding:112px 20px 54px; display:grid; place-items:center; position:relative; overflow:hidden }
.gate::before,.gate::after { content:''; position:absolute; border-radius:50%; pointer-events:none }
.gate::before { width:430px; height:430px; top:-140px; right:-100px; background:rgba(116,207,197,.2) }
.gate::after { width:330px; height:330px; bottom:-170px; left:-120px; border:1px solid rgba(57,123,184,.2); box-shadow:0 0 0 65px rgba(255,255,255,.14),0 0 0 130px rgba(255,255,255,.1) }
.gate-card { width:min(100%,500px); position:relative; z-index:1; padding:44px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.9); border-radius:30px; box-shadow:var(--shadow); backdrop-filter:blur(16px) }
.gate-icon { width:58px; height:58px; margin-bottom:25px; display:grid; place-items:center; color:#26776f; background:var(--aqua-pale); border-radius:18px }
.gate-icon svg { width:28px }
.eyebrow { display:block; margin-bottom:12px; color:#357695; font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase }
.gate h1,.chat-sidebar h1 { margin:0 0 16px; color:var(--navy); font:800 clamp(2rem,5vw,3rem)/1.08 'Manrope',sans-serif; letter-spacing:-.045em }
.gate-card>p,.chat-sidebar>div>p { margin:0; color:var(--muted); line-height:1.65 }
.login-form { margin-top:30px }
.login-form label { display:block; margin-bottom:8px; color:var(--navy); font-size:.8rem; font-weight:700 }
.password-field { display:flex; align-items:center; background:#f7fafc; border:1px solid var(--line); border-radius:14px; transition:.2s }
.password-field:focus-within { border-color:#75acc8; box-shadow:0 0 0 4px rgba(57,123,184,.1) }
.password-field input { width:100%; height:52px; padding:0 14px; border:0; outline:0; background:transparent; color:var(--navy) }
.reveal-password { height:38px; margin-right:7px; padding:0 10px; border:0; background:transparent; color:#527087; font-size:.76rem; font-weight:700 }
.form-error { min-height:22px; margin:7px 0 3px !important; color:#a94242 !important; font-size:.78rem }
.primary-button { width:100%; min-height:54px; padding:0 19px; display:flex; align-items:center; justify-content:space-between; color:white; background:var(--navy); border:0; border-radius:14px; font-weight:700; box-shadow:0 12px 30px rgba(11,39,66,.2); transition:.2s }
.primary-button:hover { transform:translateY(-2px); background:#123b60 }
.primary-button:disabled { cursor:wait; opacity:.65; transform:none }
.privacy-note { margin:22px 0 0 !important; display:flex; align-items:center; justify-content:center; gap:7px; color:#728797 !important; font-size:.75rem }
.privacy-note svg { width:15px; color:#38857d }

.chat-page { width:min(1440px,100%); min-height:100vh; margin:auto; padding:100px 28px 28px; display:grid; grid-template-columns:330px minmax(0,860px); justify-content:center; gap:30px }
.chat-sidebar { min-height:calc(100vh - 128px); padding:35px 28px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75); border-radius:26px; backdrop-filter:blur(14px) }
.chat-sidebar h1 { font-size:2.25rem }
.agent-scope { margin:32px 0 auto; padding-top:28px }
.agent-scope strong { color:var(--navy); font-size:.8rem }
.agent-scope ul { margin:14px 0 0; padding:0; list-style:none }
.agent-scope li { position:relative; margin:10px 0; padding-left:22px; color:#5d7485; font-size:.83rem }
.agent-scope li::before { content:'✓'; position:absolute; left:0; color:#2d8479; font-weight:800 }
.logout-button { width:100%; padding:12px; color:#4e6879; background:transparent; border:1px solid var(--line); border-radius:12px; font-size:.78rem; font-weight:700 }
.logout-button:hover { background:white }

.chat-shell { min-height:calc(100vh - 128px); display:grid; grid-template-rows:auto minmax(250px,1fr) auto auto; overflow:hidden; background:rgba(255,255,255,.94); border:1px solid white; border-radius:28px; box-shadow:var(--shadow) }
.chat-header { min-height:76px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e7eff3 }
.agent-identity { display:flex; align-items:center; gap:12px }
.agent-avatar,.message-avatar { display:grid; place-items:center; color:var(--navy); background:var(--aqua); border-radius:13px }
.agent-avatar { width:42px; height:42px }
.agent-identity strong,.agent-identity span { display:block }
.agent-identity strong { color:var(--navy); font:700 .9rem 'Manrope',sans-serif }
.agent-identity span { margin-top:2px; color:#718595; font-size:.67rem }
.agent-identity i { display:inline-block; width:6px; height:6px; margin-right:5px; background:#4aa99c; border-radius:50% }
.voice-toggle { display:flex; align-items:center; gap:8px; color:#607687; font-size:.73rem; font-weight:700; cursor:pointer }
.voice-toggle input { accent-color:var(--navy) }

.messages { overflow-y:auto; padding:28px 28px 10px; scroll-behavior:smooth }
.message { max-width:85%; margin-bottom:22px; display:flex; gap:11px; animation:message-in .25s ease }
.message.user-message { margin-left:auto; flex-direction:row-reverse }
.message-avatar { flex:0 0 32px; height:32px; border-radius:10px; font-size:.75rem }
.user-message .message-avatar { color:white; background:var(--navy) }
.message-body { min-width:0 }
.message-label { display:block; margin:0 0 5px 3px; color:#738697; font-size:.65rem; font-weight:700 }
.message-body p { margin:0; padding:12px 15px; color:#405a6b; background:#f1f7fa; border-radius:4px 16px 16px 16px; font-size:.9rem; line-height:1.6; white-space:pre-wrap }
.user-message .message-label { text-align:right; margin-right:3px }
.user-message .message-body p { color:white; background:var(--navy); border-radius:16px 4px 16px 16px }
.message.loading .message-body p { display:flex; gap:5px; align-items:center; min-height:46px }
.message.loading i { width:6px; height:6px; background:#78909f; border-radius:50%; animation:bounce 1s infinite }
.message.loading i:nth-child(2) { animation-delay:.15s }
.message.loading i:nth-child(3) { animation-delay:.3s }

.starter-area { padding:10px 24px 14px }
.starter-area>p { margin:0 0 9px; color:#8092a0; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em }
.suggestions { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px }
.suggestions button { flex:1; min-width:180px; padding:11px 12px; text-align:left; color:#486579; background:#f8fbfc; border:1px solid var(--line); border-radius:12px; font-size:.72rem; line-height:1.4; transition:.2s }
.suggestions button:hover { border-color:#8dbbd0; background:#f0f8fb }

.composer { padding:10px 24px 19px }
.composer-box { min-height:58px; padding:8px 8px 8px 15px; display:flex; align-items:flex-end; gap:10px; background:#f6fafc; border:1px solid var(--line); border-radius:17px }
.composer-box:focus-within { border-color:#75acc8; box-shadow:0 0 0 4px rgba(57,123,184,.08) }
.composer textarea { width:100%; max-height:130px; padding:9px 0; resize:none; overflow-y:auto; color:var(--navy); background:transparent; border:0; outline:0; line-height:1.4 }
.composer textarea::placeholder { color:#93a3af }
.composer-actions { display:flex; gap:6px }
.mic-button,.send-button { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:12px }
.mic-button { color:#4b7086; background:white; border:1px solid var(--line) }
.mic-button.listening { color:white; background:#d56e6e; border-color:#d56e6e; animation:pulse 1.4s infinite }
.send-button { color:white; background:var(--navy); border:0 }
.send-button:disabled { opacity:.45; cursor:wait }
.mic-button svg,.send-button svg { width:20px }
.composer-note { margin:8px 0 0; text-align:center; color:#8b9aa5; font-size:.65rem }

@keyframes message-in { from { opacity:0; transform:translateY(6px) } }
@keyframes bounce { 0%,60%,100% { transform:none } 30% { transform:translateY(-4px) } }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(213,110,110,.16) } }

@media (max-width:850px) {
  .chat-page { grid-template-columns:1fr; padding:88px 14px 14px }
  .chat-sidebar { min-height:auto; padding:22px; display:block }
  .chat-sidebar h1 { font-size:1.8rem }
  .agent-scope,.logout-button { display:none }
  .chat-shell { min-height:calc(100vh - 280px) }
}

@media (max-width:540px) {
  .agent-nav { height:64px; padding:0 15px }
  .home-link { font-size:.75rem }
  .gate { padding:89px 14px 25px }
  .gate-card { padding:30px 22px; border-radius:24px }
  .chat-page { padding-top:76px }
  .chat-sidebar { display:none }
  .chat-shell { min-height:calc(100vh - 90px); border-radius:21px }
  .chat-header { padding:0 16px }
  .voice-toggle span { display:none }
  .messages { padding:22px 15px 8px }
  .message { max-width:94% }
  .starter-area,.composer { padding-left:14px; padding-right:14px }
}

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