/* Whitman Independent Advisors — neutral professional theme.
   Rebrand by editing the CSS variables in :root. */
:root {
  --brand:        #172b63;   /* Whitman navy */
  --brand-dark:   #0f1c45;
  --accent:       #1c9bd7;   /* Whitman blue */
  --bg:           #f4f6f8;
  --surface:      #ffffff;
  --text:         #1a2332;
  --text-muted:   #5b6b7d;
  --border:       #dfe4ea;
  --user-bubble:  #1f3a5f;
  --user-text:    #ffffff;
  --bot-bubble:   #eef1f5;
  --bot-text:     #1a2332;
  --danger:       #b3261e;
  --ok:           #1f7a44;
  --radius:       12px;
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* ── Layout ── */
.app { display: flex; flex-direction: column; height: 100vh; }
.site-header {
  background: var(--brand);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.site-header .logo {
  height: 46px; border-radius: 8px;
  background: #fff; padding: 6px 12px;
  display: flex; align-items: center;
}
.site-header .logo img { height: 100%; width: auto; display: block; }
.site-header h1 { font-size: 17px; margin: 0; font-weight: 600; }
.site-header .sub { font-size: 12px; opacity: 0.8; margin: 0; }
.header-spacer { flex: 1; }
.header-link { color: #fff; opacity: 0.85; font-size: 13px; text-decoration: none; margin-left: 16px; }
.header-link:hover { opacity: 1; text-decoration: underline; }
.header-link.linklike { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

.chat-wrap { flex: 1; overflow: hidden; display: flex; justify-content: center; }
.thread {
  width: 100%; max-width: 780px;
  overflow-y: auto;
  padding: 24px 16px 8px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Messages ── */
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg.bot { align-items: flex-start; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.avatar.fallback { padding: 5px; background: #fff; border: 1px solid var(--border); }
.bubble {
  max-width: 80%;
  padding: 12px 15px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user .bubble { background: var(--user-bubble); color: var(--user-text); border-bottom-right-radius: 4px; }
.msg.bot .bubble  { background: var(--bot-bubble); color: var(--bot-text); border-bottom-left-radius: 4px; }

.citations { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.citations .label { font-size: 11px; color: var(--text-muted); width: 100%; text-transform: uppercase; letter-spacing: 0.04em; }
.chip {
  font-size: 12px; background: #fff; border: 1px solid var(--border);
  color: var(--brand); padding: 3px 9px; border-radius: 999px;
}

.welcome { color: var(--text-muted); text-align: center; margin: 32px auto; max-width: 560px; }
.welcome h2 { color: var(--text); font-size: 20px; margin-bottom: 6px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.suggestions button {
  background: var(--surface); border: 1px solid var(--border); color: var(--brand);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.suggestions button:hover { border-color: var(--brand); }

.typing .bubble { color: var(--text-muted); font-style: italic; }

/* Follow-up question chips shown under the latest answer */
.followups { margin: 2px 0 6px 46px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.followups .fu-label {
  width: 100%; font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}
.followups button {
  background: var(--surface); border: 1px solid var(--border); color: var(--brand);
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; text-align: left;
}
.followups button:hover { border-color: var(--brand); }

/* ── Composer ── */
.composer-wrap { display: flex; justify-content: center; background: var(--surface); border-top: 1px solid var(--border); }
.composer { width: 100%; max-width: 780px; padding: 12px 16px; display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font-family: inherit; font-size: 15px; max-height: 140px; color: var(--text);
}
.composer textarea:focus { outline: none; border-color: var(--brand); }
.composer button {
  background: var(--brand); color: #fff; border: none; border-radius: 10px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.composer button:hover { background: var(--brand-dark); }
.composer button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Disclaimer footer ── */
.disclaimer {
  background: var(--surface); border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 11.5px; text-align: center;
  padding: 10px 20px;
}

/* ── Admin ── */
.admin-body { background: var(--bg); }
.center-card { min-height: 100vh; display: grid; place-items: center; padding: 20px; }

/* Login: sign-in + building photo in one soft, rounded card floating on the page */
.login-split {
  min-height: 100vh; display: grid; place-items: center;
  padding: 28px; background: var(--bg);
}
.login-card {
  display: flex; width: 100%; max-width: 1040px;
  min-height: 560px; max-height: 90vh;
  background: var(--surface); border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(23, 43, 99, 0.13);
}
.login-form-pane {
  flex: 1 1 46%; min-width: 320px;
  display: grid; place-items: center; padding: 32px;
  background: linear-gradient(155deg, #ffffff 0%, #ffffff 25%, #e3eef9 100%);
}
.login-form-pane .card {
  border: none; box-shadow: none; background: transparent; padding: 0; max-width: 340px;
}
.login-photo {
  flex: 1 1 54%;
  background: var(--brand) url("/static/img/whitman-building.jpg") center center / cover no-repeat;
}
@media (max-width: 760px) {
  .login-split { padding: 0; }
  .login-card {
    flex-direction: column-reverse; max-width: 100%; min-height: 100vh;
    max-height: none; border-radius: 0; box-shadow: none;
  }
  .login-photo { flex: 0 0 auto; height: 180px; }
  .login-form-pane { min-width: 0; }
}
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; width: 100%; max-width: 400px; box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.card h2 { margin-top: 0; color: var(--brand); }

/* Brand lockup (login card) */
.brand-lockup { text-align: center; margin-bottom: 22px; }
.brand-lockup img { width: 210px; height: auto; max-width: 100%; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
}
.field input:focus { outline: none; border-color: var(--brand); }
.btn {
  background: var(--brand); color: #fff; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--brand-dark); }
.btn.secondary { background: #eef1f5; color: var(--brand); }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.admin-shell { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }
.admin-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.admin-topbar h2 { margin: 0; color: var(--brand); flex: 1; }
.doc-count {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: #eef1f5; border-radius: 999px; padding: 3px 11px; margin-left: 8px;
  vertical-align: middle; white-space: nowrap;
}
.companion-row td { color: var(--text-muted); background: #fafbfc; }
.tag-companion {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: #eef1f5; border-radius: 999px; padding: 1px 8px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle;
}

.uploader {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px;
  text-align: center; background: var(--surface); margin-bottom: 22px;
}
.uploader.drag { border-color: var(--brand); background: #f0f4fa; }
.uploader p { color: var(--text-muted); margin: 8px 0; font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: #f0f2f5; color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }

.status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; display: inline-block; }
.status.completed { background: #e4f3ea; color: var(--ok); }
.status.in_progress { background: #fdf3e0; color: #9a6b00; }
.status.failed { background: #fbe5e3; color: var(--danger); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--brand-dark); color: #fff; padding: 11px 18px; border-radius: 8px;
  font-size: 14px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; }
.toast.error { background: var(--danger); }
.muted { color: var(--text-muted); font-size: 13px; }
.hidden { display: none !important; }

/* ── Authenticated shell: header titles, back button, clickable logo ── */
.header-titles { display: flex; flex-direction: column; justify-content: center; }
.header-titles .sub { font-size: 12px; opacity: 0.85; margin: 2px 0 0; }
.site-header .logo { cursor: pointer; }
.back-btn { margin-left: 0; margin-right: 2px; font-size: 15px; }

/* ── Views (only one visible at a time inside the shell) ── */
.view { flex: 1; overflow-y: auto; }
.view.chat { display: flex; flex-direction: column; overflow: hidden; }
.view-title { color: var(--text); font-size: 23px; margin: 0 0 6px; text-align: center; }
.view-sub {
  color: var(--text-muted); font-size: 14px; text-align: center;
  max-width: 580px; margin: 0 auto 28px;
}
.hub-inner, .fp-inner { max-width: 900px; margin: 0 auto; padding: 44px 20px 36px; }

/* ── Hub: agent cards ── */
.agent-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.agent-card {
  flex: 0 1 240px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; cursor: pointer; text-align: left; font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.agent-card:hover {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(23,43,99,0.13);
}
.agent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #eaf2fb; color: var(--brand);
}
.agent-icon svg { width: 26px; height: 26px; display: block; }
.agent-name { font-size: 16px; font-weight: 600; color: var(--text); }
.agent-blurb { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* ── FP process flow ── */
.fp-flow {
  list-style: none; margin: 0 auto; padding: 0; max-width: 560px;
  display: flex; flex-direction: column;
}
.fp-flow li { position: relative; margin-bottom: 12px; }
.fp-flow li:last-child { margin-bottom: 0; }
.fp-flow li:not(:last-child)::after {
  content: ""; position: absolute; left: 32px; top: 100%;
  width: 2px; height: 12px; background: var(--border); transform: translateX(-50%);
}
.fp-step {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.fp-step:hover {
  border-color: var(--brand); transform: translateX(2px);
  box-shadow: 0 5px 15px rgba(23,43,99,0.12);
}
.fp-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700;
}
.fp-label { font-size: 15px; font-weight: 500; }

@media (max-width: 560px) {
  .agent-card { flex-basis: 150px; }
  .hub-inner, .fp-inner { padding: 26px 14px; }
}