/* Layout: one-screen phone app. Header with trip status, a day strip, three views
   (Plan / Concierge / Details) and a bottom tab bar. Sea-glass teal and conch pink. */
:root {
  --bg: #EDF4F3; --surface: #FFFFFF; --sunk: #E2ECEA; --ink: #0F2A33; --muted: #587077;
  --line: #CFDEDB; --accent: #0B7A75; --on-accent: #FFFFFF; --accent-soft: #D5ECE9;
  --conch: #D9634F; --conch-soft: #FBE4DE; --ok: #2C7A4B; --ok-soft: #DCEFE2;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0A181C; --surface: #11252B; --sunk: #0D1F24; --ink: #E4EFED; --muted: #8FA8AE;
  --line: #21404A; --accent: #45B9AE; --on-accent: #052023; --accent-soft: #143A3B;
  --conch: #F08A77; --conch-soft: #3A221E; --ok: #6CC490; --ok-soft: #173326; color-scheme: dark } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45;
  display: flex; flex-direction: column; overflow: hidden; -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--accent); }

header.top { padding-block: 14px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
header.top h1 { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1.1; margin: 0; }
header.top .sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.status-pill { flex: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--conch-soft); color: var(--conch); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 18px; -webkit-overflow-scrolling: touch; }

.strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.daychip { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px 10px 7px; min-width: 54px; text-align: center; line-height: 1.15; }
.daychip .dw { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.daychip .dn { font-family: var(--display); font-size: 1.1rem; }
.daychip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.daychip.on .dw { color: var(--on-accent); opacity: .85; }
.daychip.today:not(.on) { border-color: var(--conch); }
.daychip .dot { display: block; height: 4px; width: 4px; border-radius: 50%; margin: 3px auto 0; }
.daychip .dot.todo { background: var(--conch); }

.dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.dayhead h2 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin: 0; }
.eyebrow { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--body); margin-bottom: 2px; }
.actions { display: flex; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: .88rem; font-weight: 600; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent); padding-inline: 6px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active { transform: translateY(1px); }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.item { display: grid; grid-template-columns: 62px 1fr; gap: 10px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
.item .t { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.item .body { min-width: 0; }
.item .title { font-weight: 600; }
.item .meta { color: var(--muted); font-size: .84rem; margin-top: 2px; overflow-wrap: anywhere; }
.item .row1 { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.item.k-dinner { border-left: 3px solid var(--conch); }
.chip { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.s-booked { background: var(--ok-soft); color: var(--ok); }
.s-todo { background: var(--conch-soft); color: var(--conch); }
.s-walkin { background: var(--sunk); color: var(--muted); }
.s-idea { color: var(--accent); border: 1px dashed var(--accent); }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 18px; text-align: center; }
.note-bar { font-size: .82rem; color: var(--muted); margin: 6px 0; }
.mono { font-family: var(--mono); font-size: .86rem; }

.sect { margin: 10px 0 18px; }
.sect h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 0 0 8px; }
.kv { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kv .r { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); }
.kv .r.wide { grid-template-columns: 1fr; }
.kv .r:first-child { border-top: 0; }
.kv .k { color: var(--muted); font-size: .84rem; }
.kv .v { min-width: 0; overflow-wrap: anywhere; }
.copyable { font-family: var(--mono); font-size: .88rem; background: var(--sunk); border: 0; border-radius: 6px; padding: 2px 7px; }
.places { display: flex; flex-direction: column; gap: 8px; }
.place { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.place .pn { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.place .pw { color: var(--muted); font-size: .8rem; font-weight: 500; text-align: right; }
.place .pv { font-size: .88rem; margin-top: 3px; }

#view-chat { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 0 12px; -webkit-overflow-scrolling: touch; }
.msg { max-width: 88%; min-width: 0; }
.msg .who { font-size: .72rem; color: var(--muted); margin: 0 4px 3px; }
.msg .bub { padding: 9px 12px; border-radius: 16px; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; }
.msg.me .who { text-align: right; }
.msg.me .bub { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.msg.them .bub { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.bot .bub { background: var(--sunk); border-bottom-left-radius: 5px; }
.msg.bot .who { color: var(--accent); font-weight: 600; }
.bub p { margin: 0 0 .5em; } .bub p:last-child { margin-bottom: 0; }
.bub ul { margin: .2em 0 .5em; padding-left: 1.2em; }
.sources { margin: 5px 4px 0; font-size: .78rem; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sources a { color: var(--muted); }
.changes { margin-top: 6px; font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.changes .tag { background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 2px 7px; }
.thinking { color: var(--muted); font-style: italic; }
.starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.intro { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.intro h3 { font-family: var(--display); font-weight: 400; margin: 0 0 4px; font-size: 1.15rem; }
.composer { border-top: 1px solid var(--line); padding: 8px 0 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.composer .line { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 9px 13px; max-height: 120px; line-height: 1.35; font-size: 16px; }
.composer .opts { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--muted); gap: 8px; }
.toggle { display: inline-flex; gap: 6px; align-items: center; }

nav.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--bg); padding-bottom: env(safe-area-inset-bottom, 0px); }
nav.tabs button { border: 0; background: none; padding: 10px 4px 12px; font-size: .82rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
nav.tabs button .bar { height: 3px; width: 24px; border-radius: 3px; }
nav.tabs button.on { color: var(--accent); }
nav.tabs button.on .bar { background: var(--accent); }

.scrim { position: fixed; inset: 0; background: rgba(5, 20, 24, .45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface); width: 100%; max-width: 560px; border-radius: 18px 18px 0 0; max-height: 88%; overflow-y: auto;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet h3 { font-family: var(--display); font-weight: 400; margin: 0 0 12px; font-size: 1.2rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; min-width: 0; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 16px; color: var(--ink); font-weight: 400; min-width: 0; width: 100%; }
.sheet .foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.danger { color: var(--conch) !important; }

/* PIN gate */
.gate { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.gate .card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.gate h1 { font-family: var(--display); font-weight: 400; font-size: 2.1rem; margin: 0; line-height: 1.05; }
.gate p { margin: 0; color: var(--muted); }
.gate .who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gate .who button { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px; font-weight: 700; font-size: 1rem; }
.gate .who button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.gate input { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px; font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-family: var(--mono); width: 100%; }
.gate .err { color: var(--conch); font-size: .9rem; min-height: 1.3em; }
.gate .btn { padding: 13px; font-size: 1rem; }

@media (prefers-reduced-motion: no-preference) { .sheet { animation: up .18s ease-out; } @keyframes up { from { transform: translateY(24px); opacity: .6 } } }

/* Photos in chat */
.cam { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cam:active { transform: translateY(1px); }
.attach { display: flex; align-items: center; gap: 10px; }
.attach img { height: 64px; max-width: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.bub .photo { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin: 2px 0 6px; background: var(--sunk); min-height: 80px; min-width: 120px; object-fit: cover; }
.bub .photo:only-child { margin-bottom: 0; }