/* ===== HS Consultants — "Departures" theme ===================================
   Palette: night-flight navy, passport-stamp gold, horizon teal.
   Type: Fraunces (display), Inter (UI), IBM Plex Mono (departure-board data). */
:root {
  --bg:        #081726;   /* deep night sky */
  --bg-glow:   #0e2942;   /* horizon */
  --surface:   #0f2438;   /* panels */
  --surface-2: #16324b;   /* raised */
  --line:      #21445f;   /* hairlines */
  --text:      #eaf1f7;
  --muted:     #8ba6bd;
  --gold:      #f0b23f;   /* visa stamp / seal — the signature accent */
  --gold-soft: rgba(240,178,63,.14);
  --teal:      #38c6b4;   /* horizon / user voice */
  --teal-soft: rgba(56,198,180,.13);
  --danger:    #e06666;
  --radius:    16px;
  --shadow:    0 24px 70px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the html hidden attr must always win */
html, body { height: 100%; margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 50% -8%, var(--bg-glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
h1 { font-family: "Fraunces", Georgia, serif; }

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); display: block;
}

/* ---- Seal / visa-stamp monogram (signature element) ---- */
.seal {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: "Fraunces", serif; font-weight: 900; font-size: 22px; letter-spacing: 1px;
  color: var(--gold);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 3px rgba(240,178,63,.18);
  background: radial-gradient(circle at 30% 25%, rgba(240,178,63,.16), transparent 60%);
  transform: rotate(-6deg);
}
.seal.small { width: 42px; height: 42px; font-size: 15px; border-width: 1.5px; }

/* faint great-circle flight path */
.flightpath { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(240,178,63,.35); pointer-events: none; }

/* =================== LOGIN =================== */
.login-wrap { position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px; overflow: hidden; }
.login-wrap > .flightpath { color: rgba(240,178,63,.16); }

.pass {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, var(--surface), #0c1e30);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
}
.pass-head { display: flex; align-items: center; gap: 14px; }
.pass-meta h1 { margin: 4px 0 0; font-size: 24px; line-height: 1; }
.pass-note { color: var(--muted); margin: 2px 0 6px; font-size: 14px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted);
        font-family: "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
input, textarea {
  font-family: "Inter", sans-serif; font-size: 15px; color: var(--text);
  background: #0a1a2a; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; outline: none; width: 100%; transition: border-color .15s;
}
input::placeholder, textarea::placeholder { color: #5b7488; }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

.btn-primary {
  font: 600 15px "Inter", sans-serif; cursor: pointer; border: none;
  color: #241a06; background: linear-gradient(180deg, #f6c65e, var(--gold));
  border-radius: 11px; padding: 12px 18px; transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.error { color: var(--danger); font-size: 13px; margin: -4px 0 0; text-align: center; }

/* =================== CHAT =================== */
.chat-wrap { height: 100vh; height: 100dvh; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden; }
.chat-header {
  position: relative; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), rgba(15,36,56,.4));
}
.header-path { color: rgba(240,178,63,.12); }
.chat-id { display: flex; align-items: center; gap: 12px; z-index: 1; }
.chat-id strong { display: block; font-family: "Fraunces", serif; font-size: 17px; font-weight: 600; }
.chat-actions { display: flex; align-items: center; gap: 12px; z-index: 1; }
.btn-ghost { font: 500 13px "Inter", sans-serif; cursor: pointer; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px; }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }

/* messages */
.messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 76%; padding: 13px 16px; line-height: 1.55; font-size: 15px;
  border-radius: 16px; animation: rise .25s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 2px solid var(--gold); border-top-left-radius: 5px; }
.msg.user { align-self: flex-end; background: var(--teal-soft); border: 1px solid rgba(56,198,180,.3);
  border-bottom-right-radius: 5px; }
.msg.typing { color: var(--muted); font-style: italic; }
.msg .transcript { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted);
  margin-bottom: 6px; }

/* rendered markdown inside bot bubbles */
.msg p { margin: 0 0 10px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 6px 0 10px; padding-left: 20px; }
.msg li { margin: 3px 0; }
.msg h2, .msg h3, .msg h4 { font-family: "Fraunces", serif; margin: 10px 0 6px; line-height: 1.2; }
.msg h2 { font-size: 18px; } .msg h3 { font-size: 16px; } .msg h4 { font-size: 15px; }
.msg strong { color: #fff; font-weight: 600; }
.msg a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(56,198,180,.4); }
.msg a:hover { border-bottom-color: var(--teal); }
.msg code { font-family: "IBM Plex Mono", monospace; font-size: 13px;
  background: #0a1a2a; padding: 1px 5px; border-radius: 5px; }
.msg pre { background: #0a1a2a; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
.msg pre code { background: none; padding: 0; }

/* composer */
.composer { flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--line); background: linear-gradient(0deg, var(--surface), transparent); }
.composer textarea { flex: 1; resize: none; max-height: 150px; line-height: 1.5; }
.send { align-self: stretch; }
.btn-mic { flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); transition: all .15s; }
.btn-mic:hover { color: var(--gold); border-color: var(--gold); }
.btn-mic.recording { color: var(--danger); border-color: var(--danger); }

.recording-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--surface-2); border-top: 1px solid var(--line); }
.rec-label { font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.rec-timer { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--text); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger);
  animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.btn-send-voice { margin-left: auto; font: 600 14px "Inter", sans-serif; cursor: pointer;
  color: #241a06; background: linear-gradient(180deg, #f6c65e, var(--gold));
  border: none; border-radius: 10px; padding: 9px 16px; }

@media (max-width: 620px) {
  .msg { max-width: 88%; }
  .pass { padding: 22px 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .rec-dot { animation: none; }
}