/* Design tokens AND base typography copied verbatim from ebsb.de
   (assets/css/style.css + fonts.css) - not reinterpreted - so that anything
   the login page shares with the real site (headline, lede, layout, figure)
   renders at the exact same font sizes and positions. Only the login card
   itself and the chat app UI are custom, scoped under their own classes so
   they don't inherit these site-wide heading sizes. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --blue: #1b6dc1;
  --blue-dk: #14508f;
  --blue-soft: #eaf2fb;
  --amber: #ffb93e;
  --amber-soft: #fff5e2;
  --green: #327146;
  --green-dk: #275838;
  --green-soft: #e9f2ec;

  --ink: #10151c;
  --ink-soft: #444d59;
  --muted: #6b7480;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --border: #e2e8f0;
  --border-soft: #eef2f7;

  --shadow-sm: 0 1px 2px rgba(16, 30, 54, .05), 0 4px 12px rgba(16, 30, 54, .05);
  --shadow: 0 2px 4px rgba(16, 30, 54, .05), 0 12px 32px rgba(16, 30, 54, .08);
  --shadow-lg: 0 4px 8px rgba(16, 30, 54, .06), 0 24px 56px rgba(16, 30, 54, .12);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --max-w: 1200px;
  --header-h: 76px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Manrope', var(--font-body);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}

button { font: inherit; }

[hidden] { display: none !important; }

/* ==========================================================================
   Buttons (same recipe as ebsb.de)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); box-shadow: var(--shadow); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-arrow::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.btn-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ==========================================================================
   Login page - the .hero/.hero-grid/.hero-figure rules below are byte-for-
   byte copies of ebsb.de's own hero section, so the shared parts (headline,
   lede, figure, spacing) render identically. Only .login-card is custom.
   ========================================================================== */
/* Same box model as ebsb.de's own .hero (position/overflow/padding/
   background byte-for-byte identical) - no viewport-height flex-centering,
   since the real site doesn't center its hero either; content just flows
   from the top under its own padding. min-height only keeps the background
   covering the full screen on a page that (unlike the real homepage) has
   nothing below the hero to fill that space. */
#login-view.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: clamp(52px, 6.5vw, 92px) 0 clamp(48px, 6vw, 84px);
  /* The real site's hero sits below a 76px sticky header we deliberately
     don't have here - without this, our headline would render ~76px higher
     up the page than it does on ebsb.de. This adds that space back so the
     content lands at the same vertical position, just with no visible bar. */
  padding-top: calc(clamp(52px, 6.5vw, 92px) + var(--header-h));
  background:
    radial-gradient(1100px 520px at 88% -12%, var(--blue-soft) 0%, transparent 62%),
    radial-gradient(760px 420px at 4% 8%, var(--amber-soft) 0%, transparent 58%),
    var(--bg);
}
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: .3em; }
.hero h1 .accent { color: var(--blue-dk); }
.hero .lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); margin-bottom: .88em; }

.hero-figure { position: relative; display: grid; place-items: center; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -8% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 68%);
}
.hero-figure img {
  position: relative;
  width: min(100%, 400px);
  filter: drop-shadow(0 24px 48px rgba(16, 30, 54, .14));
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-figure img { width: min(66%, 250px); }
}

.login-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 32px);
  max-width: 640px;
  width: 100%;
}
.login-card h2 { font-size: 1.1rem; margin-bottom: 2px; }
.login-card .card-hint { color: var(--muted); font-size: .875rem; margin: 0 0 16px; }

/* Fields stack vertically - the card is wide/short via its own max-width
   and compact input padding, not by putting fields side by side (which
   breaks down for a long email address or password). */
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.field { margin-bottom: 0; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field input {
  width: 100%;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 42px; }
.toggle-password {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
}
.toggle-password:hover { color: var(--ink-soft); background: var(--border-soft); }
.toggle-password svg { width: 19px; height: 19px; }

.login-card .btn { margin-top: 2px; }
.form-msg { min-height: 1.3em; margin-top: 4px; font-size: .875rem; }
.form-msg.error { color: #b3261e; }
.form-msg.ok { color: var(--green-dk); }

#verify-code { text-align: center; font-size: 1.2rem; letter-spacing: .18em; font-family: var(--font-head); }
.login-switch { margin-top: 4px; font-size: .875rem; }
.login-switch button { background: none; border: none; color: var(--blue-dk); font-weight: 600; cursor: pointer; padding: 0; }

/* ==========================================================================
   Curtain transition - splits in two and parts to reveal the app underneath
   ========================================================================== */
.curtain-panel {
  position: fixed;
  top: 0; bottom: 0;
  width: 50vw;
  z-index: 500;
  background-image:
    radial-gradient(1100px 520px at 88% -12%, var(--blue-soft) 0%, transparent 62%),
    radial-gradient(760px 420px at 4% 8%, var(--amber-soft) 0%, transparent 58%);
  background-color: var(--bg);
  /* Both panels share one conceptual 100vw-wide image, sliced in half, so
     the seam lines up exactly with #login-view's own full-width gradient
     at the instant the curtain appears. */
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
.curtain-panel.left { left: 0; background-position: 0 0; }
.curtain-panel.right { right: 0; background-position: -50vw 0; }
.curtain-panel.opening.left { transform: translateX(-100%); }
.curtain-panel.opening.right { transform: translateX(100%); }

/* ==========================================================================
   Chat app
   ========================================================================== */
#app-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1400px 700px at 12% -8%, var(--amber-soft) 0%, transparent 55%),
    var(--bg);
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.app-topbar .brand-mini { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.app-topbar .brand-mini img { width: 26px; height: auto; }
.app-tabs { display: flex; gap: 4px; }
.app-tab {
  border: none;
  background: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--muted);
  cursor: pointer;
}
.app-tab.active { color: var(--blue-dk); background: var(--blue-soft); }
.app-tab.disabled { cursor: not-allowed; color: #c3cad3; }
.app-tab.disabled .soon {
  margin-left: 6px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--border-soft);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}
.app-topbar .spacer { flex: 1; }
.app-topbar .logout-link {
  border: none; background: none; color: var(--muted); font-size: .85rem; cursor: pointer;
}
.app-topbar .logout-link:hover { color: var(--ink); }

.app-body { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 264px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-align: left;
}
.sidebar-btn:hover { background: var(--bg-alt); }
.sidebar-btn .ico { width: 18px; text-align: center; color: var(--blue-dk); }

.sidebar-search { padding: 6px 12px 2px; }
.sidebar-search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font: inherit;
  font-size: .85rem;
}

.sidebar-divider { height: 1px; background: var(--border-soft); margin: 12px 4px; }

.sidebar-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 8px;
}

.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-item:hover { background: var(--bg-alt); }
.chat-list-item.active { background: var(--blue-soft); color: var(--blue-dk); font-weight: 600; }
.chat-list-empty { padding: 10px 12px; color: var(--muted); font-size: .82rem; }

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

/* Empty state: centered greeting + big input, like the inspo screenshot */
.main.empty { justify-content: center; }
.greeting-block { width: 100%; max-width: 720px; text-align: center; margin-bottom: 22px; }
.greeting-logo { width: 46px; margin: 0 auto 18px; display: block; }
.greeting-block h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.greeting-block .name { color: var(--blue-dk); }

.composer-shell { width: 100%; max-width: 720px; }
.composer-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 10px;
}
.composer-box textarea {
  width: 100%;
  border: none;
  resize: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  min-height: 28px;
  max-height: 200px;
  outline: none;
}
.composer-box textarea::placeholder { color: var(--muted); }
.composer-row { display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; }
.send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.send-btn:hover { background: var(--blue-dk); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; }

.quick-hint { margin-top: 16px; text-align: center; color: var(--muted); font-size: .85rem; }

/* Active state: scrollable transcript + input pinned at the bottom */
.main.active { justify-content: flex-start; padding-top: 20px; }
.transcript {
  width: 100%;
  max-width: 760px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}
.msg { max-width: 86%; padding: 12px 16px; border-radius: var(--radius); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); border-bottom-left-radius: 4px; }
.msg.assistant.pending { color: var(--muted); }
.msg.error { border-color: #f2c1bd; color: #b3261e; }
.msg .queries { margin-top: 10px; font-size: .75rem; }
.msg .queries summary { cursor: pointer; color: var(--muted); }
.msg .queries pre { background: var(--bg-alt); border-radius: 8px; padding: 8px 10px; overflow-x: auto; margin: 6px 0 0; }

.main.active .composer-shell { max-width: 760px; margin: 0 0 20px; flex-shrink: 0; }

/* Responsive */
@media (max-width: 760px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; background: #fff; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-topbar .menu-btn { display: inline-flex; }
}
.app-topbar .menu-btn { display: none; border: none; background: none; padding: 6px; cursor: pointer; }