/* Epic Rides with Doug — "Sea to Sky" style with dashboard sidebar (mockup C2).
   Colours from the epicrides.ca theme: navy #003C6D, dark navy #13304A, red #D12800, Roboto. */
:root {
  --navy: #003c6d; --navy-dark: #13304a; --red: #d12800;
  --page: #e8eff5; --panel: #ffffff; --text: #13304a; --muted: #5f6f7d; --border: #ccd8e2;
  --scott: #13304a; --scott-text: #fff; --accent: #d12800; --accent-text: #fff; --chip: #f3f8fb;
  --ok: #2e7d4f; --warn: #b26a00; --idle: #8a99a8;
  --mtn-far: #93b0d0; --mtn-near: #003c6d; --sky-top: #cfe0ee; --sky-bottom: #e8eff5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0b1722; --panel: #132636; --text: #e4edf5; --muted: #9db0c2; --border: #233d55;
    --scott: #3c78b0; --accent: #ff6a4d; --accent-text: #1a0a06; --chip: #0f2030;
    --ok: #5cc98a; --warn: #f0b04a; --idle: #6f8296;
    --mtn-far: #1d3d5c; --mtn-near: #0a2540; --sky-top: #0d2236; --sky-bottom: #0b1722;
  }
}
:root[data-theme="dark"] {
  --page: #0b1722; --panel: #132636; --text: #e4edf5; --muted: #9db0c2; --border: #233d55;
  --scott: #3c78b0; --accent: #ff6a4d; --accent-text: #1a0a06; --chip: #0f2030;
  --ok: #5cc98a; --warn: #f0b04a; --idle: #6f8296;
  --mtn-far: #1d3d5c; --mtn-near: #0a2540; --sky-top: #0d2236; --sky-bottom: #0b1722;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--page); color: var(--text); font: 17px/1.5 Roboto, system-ui, sans-serif; display: flex; flex-direction: column; }
button { font-family: inherit; }

/* Header */
.hero { position: relative; height: 130px; background: linear-gradient(var(--sky-top), var(--sky-bottom)); overflow: hidden; flex: none; }
.hero svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 105px; }
.topbar { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px 24px; }
.title { display: flex; align-items: baseline; gap: 10px; color: #fff; text-shadow: 0 2px 0 #003c6d, 0 3px 6px rgba(0,30,60,.4); }
.wordmark { font: italic 700 30px/1 "Brush Script MT", "Segoe Script", cursive; }
.with { font: 500 20px/1 Roboto, sans-serif; letter-spacing: .02em; }
.sample { background: #fff3c4; color: #5a4300; font: 700 12px Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.spacer { flex: 1; }
.title, .tbtn, .sample { white-space: nowrap; }
.tbtn .short { display: none; }
.tbtn { background: rgba(255,255,255,.85); color: #13304a; border: 0; border-radius: 999px; padding: 8px 14px; font: 500 14px Roboto, sans-serif; cursor: pointer; }
.tbtn.new { background: var(--accent); color: var(--accent-text); }

/* Layout.
   Wide (>= 1300px): texting | chat (capped width) | summary dashboard.
   Medium (900–1299px): texting stacked over the dashboard on the left, chat on the right.
   Phone / small (< 900px): chat only. */
.layout {
  /* --space: the outer margins and the gaps between columns, kept equal (half of the
     earlier spacing). Half the spare width goes to these four spaces, never below 16px;
     the other half widens the texting column. */
  --space: max(16px, calc((100vw - 300px - 860px - 300px) / 8));
  flex: 1; min-height: 0; display: grid;
  column-gap: var(--space); row-gap: 16px; padding: 0 var(--space) 16px;
  margin-top: -40px; position: relative; z-index: 2;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 860px) 300px;
  grid-template-areas: "left chat right";
  justify-content: center;
}
.side-left { grid-area: left; }
.side-right { grid-area: right; }
.chat { grid-area: chat; }
.side, .chat { min-height: 0; }
.side { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
/* Quiet scrollbars: thin, and only visible while the pointer is over the panel. */
.side { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.side:hover { scrollbar-color: var(--border) transparent; }
.chat { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 8px 24px rgba(0,40,80,.08); }

@media (max-width: 1299px) {
  .layout {
    --space: 16px;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, max-content) minmax(0, 1fr);
    grid-template-areas: "left chat" "right chat";
  }
  .layout .texts { flex: none; height: 440px; }
}

[hidden] { display: none !important; }
.side-stack { display: flex; flex-direction: column; gap: 12px; }

/* Texting managers: the whole left sidebar. */
.side-left { overflow-y: auto; overflow-x: hidden; }
.texts { flex: 1; min-height: 420px; display: flex; flex-direction: column; padding-bottom: 12px; }
.texts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.texts-head h3 { margin: 0; white-space: nowrap; }
.texts-head select { margin-left: auto; flex: 1; min-width: 0; max-width: 140px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text); font: 14px Roboto, sans-serif; padding: 4px 6px; }
.texts-thread { flex: 1; min-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.to-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; margin-bottom: 6px; }
.to-row > span:first-child { color: var(--muted); }
.to-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.to-row input { width: 16px; height: 16px; accent-color: var(--navy); }
.texts textarea { width: 100%; resize: vertical; min-height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); color: var(--text); font: 15px/1.4 Roboto, sans-serif; padding: 8px 10px; }
.texts-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.texts-meta .over { color: var(--accent); font-weight: 700; }
.send.small { padding: 7px 14px; font-size: 14px; border-radius: 9px; }
.plain { background: none; border: 0; color: var(--muted); font: 500 14px Roboto, sans-serif; cursor: pointer; padding: 7px 10px; }
.confirm { margin-top: 8px; background: var(--chip); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.confirm p { margin: 0 0 8px; color: var(--text); font-size: 14px; }
.texts-status { margin: 6px 0 0; font-size: 13px; color: var(--ok); min-height: 0; }
.texts-status:empty { display: none; }
.texts-status.err { color: var(--accent); }
.stand-in-tag { font: 700 10px Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5a4300; background: #fff3c4; border-radius: 999px; padding: 2px 7px; margin-left: 4px; vertical-align: middle; }

/* Text bubbles, phone style */
.bubble-row { display: flex; flex-direction: column; max-width: 85%; }
.bubble-row.out { align-self: flex-end; align-items: flex-end; }
.bubble-row.in { align-self: flex-start; align-items: flex-start; }
.bubble { padding: 7px 11px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-row.out .bubble { background: var(--scott); color: var(--scott-text); border-bottom-right-radius: 4px; }
.bubble-row.in .bubble { background: var(--chip); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble-meta { font-size: 11px; color: var(--muted); margin: 2px 4px 0; }
.bubble-meta .warn { color: var(--warn); font-weight: 500; }
.texts-empty { color: var(--muted); font-size: 14px; text-align: center; margin: auto 0; }

/* Suggested questions in the right panel */
.suggest { display: block; width: 100%; text-align: left; background: var(--chip); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin: 6px 0 0; color: var(--text); font: 400 14px/1.4 Roboto, sans-serif; cursor: pointer; }
.suggest:hover { border-color: var(--accent); }

/* Sidebar tiles */
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(0,40,80,.06); }
.tile h3 { margin: 0 0 8px; font: 900 15px Roboto, sans-serif; display: flex; align-items: center; gap: 8px; }
.tile h3 .when { margin-left: auto; font: 400 12px Roboto, sans-serif; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.needs_scott { background: var(--accent); } .dot.ok { background: var(--ok); } .dot.problem { background: var(--warn); } .dot.idle { background: var(--idle); }
.tile.needs_scott { border-color: var(--accent); }
.tile.problem { border-color: var(--warn); }
.tile p { margin: 0; font-size: 15px; color: var(--muted); }
.tile ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.tile li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.tile li:first-child { border-top: 0; }
.seats { font-weight: 700; white-space: nowrap; }
.seats.low { color: var(--accent); }
.ask { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--accent); font: 500 14px Roboto, sans-serif; cursor: pointer; }
.section-label { font: 700 12px Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 4px 0; }
.tile.later { box-shadow: none; background: transparent; border-style: dashed; padding: 10px 14px; }
.tile.later h3 { font-weight: 500; color: var(--muted); margin: 0; }
.tile.error { border-color: var(--warn); }

/* Chat */
.thread { flex: 1; overflow-y: auto; padding: 28px 36px; display: flex; flex-direction: column; gap: 18px; }
.brief { background: var(--chip); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.brief-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.brief-head h2 { margin: 0; font: 900 19px Roboto, sans-serif; }
.brief-head small { color: var(--muted); }
.msg { display: flex; gap: 12px; }
.msg .av { width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; }
.msg .body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin: 0; }
.scott { align-self: flex-end; background: var(--scott); color: var(--scott-text); border-radius: 18px 18px 4px 18px; padding: 11px 18px; max-width: 75%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg ol { margin: 6px 0 10px; padding-left: 0; list-style: none; }
.msg ol li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; margin: 6px 0; background: var(--chip); }
.msg ol li .n { font-weight: 900; color: var(--accent); }
.preview { border-left: 4px solid var(--accent); background: var(--chip); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 8px 0; font-weight: 500; }
.rate { display: flex; align-items: center; gap: 6px; margin: -12px 0 0 50px; font-size: 13px; color: var(--muted); }
.rate-ask { margin-right: 2px; }
.rate-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.rate-btn:hover { border-color: var(--accent); }
.rate-note { flex: 1; max-width: 360px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--text); font: 14px Roboto, sans-serif; padding: 5px 8px; }
.rate-send { background: var(--accent); color: var(--accent-text); border: 0; border-radius: 8px; padding: 5px 12px; font: 500 13px Roboto, sans-serif; cursor: pointer; }
.thinking { color: var(--muted); font-style: italic; }
.thinking::after { content: " ▍"; font-style: normal; animation: blink 1s steps(1) infinite; }
.typing:has(> .thinking)::after { content: none; }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--muted); }
@keyframes blink { 50% { opacity: 0; } }
.composer-wrap { border-top: 1px solid var(--border); padding: 16px 36px 12px; margin: 0; }
.composer { display: flex; gap: 10px; background: var(--page); border: 1px solid var(--border); border-radius: 14px; padding: 6px 6px 6px 16px; }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: 17px/1.5 Roboto, sans-serif; min-height: 42px; max-height: 180px; padding-top: 9px; }
.send { background: var(--accent); color: var(--accent-text); border: 0; border-radius: 10px; padding: 0 20px; font: 700 15px Roboto, sans-serif; cursor: pointer; }
.send:disabled { opacity: .5; cursor: default; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 4px 0; }

/* Phones and small windows: chat only, no dashboard. */
@media (max-width: 899px) {
  html, body { height: 100%; }
  body { height: 100dvh; }
  .hero { height: 84px; }
  .hero svg { height: 60px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .wordmark { font-size: 24px; }
  .with { font-size: 15px; }
  .sample { font-size: 10px; padding: 3px 8px; }
  .tbtn { padding: 7px 11px; font-size: 13px; }
  .layout { display: flex; padding: 0 8px 8px; margin-top: -22px; }
  .side { display: none; }
  .chat { flex: 1; border-radius: 16px; }
  .thread { padding: 16px 14px; gap: 14px; }
  .composer-wrap { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; } /* 16px stops iPhone zooming in on focus */
  .hint { display: none; }
  .scott { max-width: 88%; }
  .msg .av { width: 32px; height: 32px; border-radius: 10px; }
}
@media (max-width: 899px) {
  .tbtn .long { display: none; }
  .tbtn .short { display: inline; font-size: 16px; line-height: 1; }
}
@media (max-width: 480px) {
  .sample { display: none; } /* the briefing card still says "sample data" */
}
@media (max-width: 360px) {
  .with { display: none; }
}
.stand-in-tag.live { color: #fff; background: var(--accent); }
.bubble-meta .ok { color: var(--ok); font-weight: 500; }

/* Sign-in page: same sky and mountains, one centred card. */
.login-page { min-height: 100dvh; }
.login-hero { height: 220px; }
.login-hero svg { height: 170px; }
.login-wrap { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 0 16px 32px; margin-top: -120px; position: relative; z-index: 2; }
.login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 12px 32px rgba(0,40,80,.12); padding: 28px 30px 30px; display: flex; flex-direction: column; }
.login-title { display: flex; align-items: baseline; gap: 10px; color: var(--navy); margin-bottom: 18px; }
.login-title .wordmark { font-size: 34px; color: var(--navy); text-shadow: none; }
.login-title .with { font-size: 20px; color: var(--navy-dark); }
:root[data-theme="dark"] .login-title, :root[data-theme="dark"] .login-title .wordmark, :root[data-theme="dark"] .login-title .with { color: #cfe0ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-title, :root:not([data-theme="light"]) .login-title .wordmark, :root:not([data-theme="light"]) .login-title .with { color: #cfe0ee; } }
.login-card h1 { margin: 0; font: 900 24px Roboto, sans-serif; }
.login-sub { margin: 4px 0 18px; color: var(--muted); font-size: 15px; }
.login-card label { font: 500 14px Roboto, sans-serif; margin-bottom: 6px; }
.login-card input[type="password"] { font: 17px Roboto, sans-serif; color: var(--text); background: var(--page); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; outline: none; }
.login-card input[type="password"]:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,60,109,.15); }
.login-btn { margin-top: 18px; padding: 12px 18px; font-size: 16px; border-radius: 12px; }
.login-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(209,40,0,.08); border: 1px solid var(--accent); color: var(--accent); font-size: 14px; }

/* Sign out button in the app header */
.tbtn.out { background: rgba(255,255,255,.85); color: #13304a; border: 1px solid #13304a; }
#sign-out { margin: 0; display: flex; }

/* Public front page (signed-out visitors at /). */
body.landing { height: auto; min-height: 100dvh; }
.landing-hero { position: relative; background: linear-gradient(var(--sky-top), var(--sky-bottom)); padding-bottom: 120px; overflow: hidden; }
.landing-hero svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 130px; }
.landing-top { display: flex; align-items: center; gap: 10px; padding: 16px 24px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.landing-top a.tbtn { text-decoration: none; }
.landing-intro { position: relative; z-index: 1; max-width: 760px; margin: 36px auto 0; padding: 0 24px; text-align: center; }
.landing-intro h1 { margin: 0 0 14px; font: 900 40px/1.15 Roboto, sans-serif; color: var(--navy-dark); }
.landing-intro p { margin: 0 auto 26px; max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--text); }
.landing-cta { display: inline-block; text-decoration: none; padding: 13px 34px; font-size: 17px; border-radius: 12px; }
.landing-main { max-width: 1100px; margin: 0 auto; padding: 8px 24px 40px; width: 100%; }
.landing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -10px; position: relative; z-index: 2; }
.landing-card { padding: 22px 22px 24px; }
.landing-card .dot { display: inline-block; width: 12px; height: 12px; }
.landing-card h2 { margin: 10px 0 6px; font: 900 19px Roboto, sans-serif; }
.landing-card p { margin: 0; font-size: 16px; line-height: 1.5; }
.landing-note { margin: 28px auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: 15px; }
.landing-note a { color: var(--accent); }
.landing-foot { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 18px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
:root[data-theme="dark"] .landing-intro h1 { color: #e4edf5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing-intro h1 { color: #e4edf5; } }
@media (max-width: 800px) {
  .landing-cards { grid-template-columns: 1fr; }
  .landing-intro h1 { font-size: 30px; }
  .landing-intro p { font-size: 17px; }
  .landing-top { padding: 12px 16px; }
  .landing-top .with { font-size: 15px; }
  .landing-top .wordmark { font-size: 24px; }
}