:root {
  --cream: #f5eddc;
  --paper: #fffaf0;
  --ink: #2a1810;
  --tomato: #d4401f;
  --olive: #5e6b2e;
  --muted: #7c6e5d;
  --line: #ddd3c0;
  --soft: #ece3d2;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--ink); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body:has(.modal[open]) { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: default; opacity: .48; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea, select, a { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--olive); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; }
em { font-weight: 400; }
svg { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex: none; }
img { max-width: 100%; display: block; }
[hidden], .hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.demo-bar { min-height: 31px; padding: 6px 20px; background: #e8ddc7; color: #786851; display: flex; justify-content: center; align-items: center; gap: 14px; font: 9px/1.6 var(--mono); letter-spacing: .035em; }
.demo-bar button { background: transparent; color: inherit; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.shell { display: grid; grid-template-columns: 194px minmax(0, 1fr) 300px; height: calc(100vh - 31px); height: calc(100dvh - 31px); min-height: 0; }
.sidebar { min-width: 0; background: #efe5d2; border-right: 1px solid var(--line); padding: 29px 17px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.logo { font: 600 31px/1 var(--serif); letter-spacing: -.065em; text-decoration: none; display: flex; align-items: center; gap: 8px; margin: 0 9px 30px; background: transparent; padding: 0; }
.logo svg { color: var(--tomato); height: 26px; width: 21px; }
.new-project { padding: 10px 12px; min-height: 41px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d5c7ae; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 600; margin-bottom: 27px; }
.new-project:hover { background: #e6dac3; }
.new-project svg { height: 15px; width: 15px; }
.label, .side-eyebrow, .eyebrow { display: block; font: 9px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.side-eyebrow { margin: 0 11px 11px; font-size: 8px; }
.side-link { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; background: transparent; border-radius: 8px; padding: 11px; text-align: left; text-decoration: none; font-size: 11px; color: #6d5c48; line-height: 1.45; }
.side-link svg { width: 15px; height: 15px; }
.side-link:hover { background: #e8dcc6; }
.side-link.active, .side-link.on, .side-link[aria-current="page"] { color: var(--ink); background: #e4d7bf; font-weight: 600; }
.side-link .dot { width: 5px; height: 5px; margin-left: auto; }
.side-link .label, .new-project .label { color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
.side-link > small { margin-left: auto; font: 8px var(--mono); color: #968466; }
.side-bottom { margin-top: auto; padding-top: 45px; }
.side-bottom > p { color: var(--muted); font-size: 10px; padding: 0 11px; margin-bottom: 15px; }
.user-profile { display: flex; align-items: center; gap: 9px; border-top: 1px solid #d9ccb5; padding: 18px 5px 0; margin-top: 18px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #d9c8a7; color: #5c4b35; font: 11px var(--mono); }
.user-profile b, .user-profile strong { font-size: 11px; font-weight: 500; display: block; }
.user-profile small { display: block; color: var(--muted); font-size: 9px; }
.user-profile > div:last-child { font-size: 10px; }

.conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background: #fbf6eb; }
.chat-header { min-height: 75px; padding: 15px 31px; border-bottom: 1px solid #e6dece; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; }
.chat-title { font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0; min-width: 0; }
.chat-header > div > p { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; margin-top: 4px; }
.chat-title h1 { font: 600 13px/1.5 var(--sans); letter-spacing: 0; }
.chat-title small, .chat-title p { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.chat-title .eyebrow { margin-bottom: 3px; }
.header-actions { display: flex; align-items: center; gap: 17px; }
.header-actions > button { display: inline-flex; align-items: center; gap: 6px; background: transparent; font-size: 10px; color: var(--muted); padding: 6px 0; }
.header-actions > button:hover { color: var(--ink); }
.header-actions svg { width: 15px; height: 15px; }
.icon-btn { display: inline-grid; place-items: center; width: 23px; height: 23px; background: transparent; color: #978469; padding: 3px; }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { color: var(--ink); }
.status { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 9px; color: var(--olive); }
.dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: var(--olive); flex: none; }
.mobile-brief, .mobile-logo { display: none !important; }
.thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #d9ccb6 transparent; scrollbar-width: thin; scroll-behavior: smooth; }
.thread-inner { width: min(100%, 820px); padding: 33px 34px 28px; margin: 0 auto; }
.day-label { font: 7px/1.7 var(--mono); letter-spacing: .1em; color: #b09b7c; text-align: center; margin: -6px 0 26px; }
.message { margin: 0 0 30px; min-width: 0; }
.message:last-child { margin-bottom: 8px; }
.message.user { display: flex; justify-content: flex-end; margin: 6px 0 28px; }
.bubble { max-width: 86%; padding: 13px 18px; border-radius: 17px 17px 3px 17px; background: #eee5d4; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-head { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.assistant-head small { color: var(--muted); font-size: 9px; font-weight: 400; margin-left: 4px; }
.seed { display: inline-grid; place-items: center; background: var(--olive); color: var(--paper); border-radius: 50%; width: 24px; height: 24px; flex: none; }
.seed svg { width: 11px; height: 15px; }
.response { font-size: 13px; line-height: 1.8; color: #594a39; }
.response > p { margin-bottom: 12px; }
.response > p:last-child { margin-bottom: 0; }
.response > h2, .response > h3 { color: var(--ink); margin: 4px 0 12px; font-size: 29px; }
.response strong { color: var(--ink); font-weight: 600; }
.response ul { padding-left: 18px; margin: 12px 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 19px 0 12px; }
.venue-card { min-width: 0; border: 1px solid #ded3bf; border-radius: 12px; background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.photo-btn { width: 100%; padding: 0; display: block; background: #e5ddca; position: relative; }
.venue-photo { width: 100%; height: 128px; object-fit: cover; transition: transform .35s; }
.photo-btn { overflow: hidden; }
.photo-btn:hover .venue-photo { transform: scale(1.04); }
.photo-btn .source-label { position: absolute; left: 8px; top: 8px; padding: 3px 6px; border-radius: 3px; background: #fffaf0e8; color: #635442; font: 7px var(--mono); }
.photo-btn > span { position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; border-radius: 3px; background: #fffaf0ec; color: #635442; font: 6px/1.5 var(--mono); letter-spacing: .04em; }
.venue-info { padding: 12px 11px 10px; flex: 1; }
.area { color: var(--muted); font: 8px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.venue-name { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.12; letter-spacing: -.04em; margin: 0 0 8px; color: var(--ink); }
.venue-info p, .venue-info li { font-size: 10px; line-height: 1.65; color: #74634d; }
.venue-info p + p { margin-top: 7px; }
.venue-info ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.venue-info li { display: flex; gap: 5px; align-items: flex-start; }
.venue-info li svg { width: 11px; height: 11px; margin-top: 3px; color: var(--olive); }
.venue-actions { padding: 0 10px 11px; display: flex; gap: 7px; align-items: center; justify-content: space-between; }
.keep { border-radius: 6px; border: 1px solid #d4c8b3; background: transparent; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 9px; line-height: 1.4; min-height: 29px; }
.keep svg { width: 11px; height: 11px; }
.keep:hover { background: #f0e7d6; }
.keep.saved { background: #e7ead7; color: #4d5a27; border-color: #cdd4b4; }
.detail-link { padding: 5px 0; background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); white-space: nowrap; }
.source-label { font-size: 8px; color: var(--muted); }
.source-label > svg { width: 11px; height: 11px; margin-right: 6px; }
.disclaimer > svg, .mini-summary > svg { width: 12px; height: 12px; margin-right: 6px; }
.disclaimer, .table-note { font-size: 10px; line-height: 1.7; color: #8a795f; margin: 11px 0 15px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; background: transparent; border: 1px solid #d7cab3; border-radius: 99px; font-size: 10px; line-height: 1.5; font-weight: 500; min-height: 34px; text-decoration: none; transition: background .15s, border-color .15s; }
.action:hover { background: #f0e7d5; border-color: #bdaf96; }
.action svg { width: 13px; height: 13px; }
.action.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.action.primary:hover { background: #4b3222; }
.action.tomato { background: var(--tomato); color: var(--paper); border-color: var(--tomato); }
.action.tomato:hover { background: #bb381b; border-color: #bb381b; }

.composer-area { flex: none; padding: 0 30px 15px; background: #fbf6eb; position: relative; z-index: 1; }
.composer-inner { max-width: 752px; margin: 0 auto; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.quick-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 9px; background: transparent; border: 1px solid #ded2bc; border-radius: 99px; color: #7a6851; }
.quick-actions button:hover { color: var(--ink); background: #f0e7d5; }
.quick-actions svg { width: 11px; height: 11px; }
.composer { border: 1px solid #d3c6b0; border-radius: 16px; padding: 14px 15px 10px; background: #fffdf7; box-shadow: 0 4px 15px -9px #4e321c45; }
.composer:focus-within { border-color: #8f986c; box-shadow: 0 0 0 1px #a8b28535; }
.composer textarea { width: 100%; min-height: 42px; max-height: 150px; resize: none; padding: 0; border: 0; background: transparent; font-size: 13px; line-height: 1.65; outline: none; display: block; }
.composer textarea::placeholder { color: #9d8c75; }
.composer-bottom { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding-top: 5px; }
.composer-hint { display: flex; align-items: center; gap: 6px; color: #98856b; font-size: 9px; }
.composer-hint svg { width: 12px; height: 12px; }
.send { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tomato); color: #fffaf0; flex: none; }
.send:hover { background: #b8351b; }
.send svg { width: 16px; height: 16px; }
.under-composer { font-size: 8px; text-align: center; color: #98886e; padding-top: 9px; }

.right { min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); padding: 29px 23px 20px; background: var(--cream); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #d9ccb6 transparent; }
.brief-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.brief-header h2 { font-size: 25px; margin: 12px 0 0; }
.brief-header .eyebrow { font-size: 8px; }
.brief-header > svg { margin-top: 2px; color: #a39275; width: 15px; height: 15px; }
.brief-header .eyebrow { flex: 1; padding-top: 4px; }
.right > h2 { font-size: 26px; margin: 7px 0 12px; }
.sub { font-size: 10px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
.brief-rows { margin: 3px 0 13px; }
.brief-row { border-bottom: 1px solid #ded2bd; padding: 12px 0; display: flex; align-items: flex-start; gap: 10px; background: transparent; text-align: left; width: 100%; }
.brief-row > svg { width: 14px; height: 14px; color: #9a886b; margin-top: 2px; }
.brief-row > div { flex: 1; min-width: 0; }
.brief-row small, .brief-row dt { display: block; font-size: 8px; line-height: 1.5; color: #8f7c60; margin-bottom: 3px; }
.brief-row b, .brief-row strong, .brief-row dd { display: block; font-size: 11px; font-weight: 500; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.brief-row .empty { color: #aa987c; font-weight: 400; font-size: 10px; }
.brief-edit { background: transparent; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 6px 0; color: #6a5942; align-self: flex-start; }
.brief-edit:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.brief-edit svg { width: 11px; height: 11px; }
.selection { margin-top: 29px; padding-top: 18px; border-top: 1px solid #d9cbb3; }
.selection-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; font-size: 11px; font-weight: 600; }
.selection-top small, .selection-top span:last-child { color: var(--muted); font: 9px var(--mono); font-weight: 400; }
.selection-empty { border: 1px dashed #d5c5a9; border-radius: 9px; padding: 16px 13px; color: #9a876b; font-size: 10px; line-height: 1.7; }
.selected-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #dfd2bd; }
.selected-item img { width: 39px; height: 39px; border-radius: 7px; object-fit: cover; flex: none; }
.selected-item > div { min-width: 0; flex: 1; }
.selected-item b, .selected-item strong { font-size: 10px; font-weight: 500; line-height: 1.4; display: block; }
.selected-item small { display: block; color: var(--muted); font-size: 8px; margin-top: 3px; }
.selected-item button { background: transparent; color: #9c876a; padding: 3px; font-size: 16px; }
.selected-item button svg { width: 12px; height: 12px; }
.right-note { font-size: 9px; color: #9b886c; line-height: 1.7; margin: 16px 0; display: flex; gap: 7px; align-items: flex-start; }
.right-note svg { width: 12px; height: 12px; margin-top: 2px; }
.send-brief { margin-top: 19px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 99px; background: var(--ink); color: var(--paper); padding: 10px 12px; min-height: 38px; width: 100%; font-size: 10px; font-weight: 500; }
.send-brief:hover { background: #4b3222; }
.send-brief svg { width: 13px; height: 13px; }
.right-close { display: none; }

.inline-brief { background: #f4ecdb; border: 1px solid #dfd0b7; border-radius: 13px; padding: 16px 18px; margin: 15px 0; }
.inline-brief h3 { font-size: 23px; margin-bottom: 14px; }
.inline-brief dl { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 7px 15px; margin: 0; font-size: 11px; }
.inline-brief dt { color: #8b7759; }
.inline-brief dd { margin: 0; font-weight: 500; }
.inline-brief .actions { margin-top: 13px; }
.edit-inline { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; font-size: 10px; background: transparent; text-decoration: underline; text-underline-offset: 3px; color: #7a6548; }
.edit-inline svg { width: 11px; height: 11px; }
.comparison { border: 1px solid #dfd3bf; border-radius: 11px; overflow-x: auto; margin: 17px 0 10px; background: #fffaf1; }
.comparison table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 11px; line-height: 1.6; }
.comparison th, .comparison td { text-align: left; vertical-align: top; padding: 12px 13px; border-bottom: 1px solid #e8decb; border-right: 1px solid #e8decb; }
.comparison th { font-weight: 600; color: var(--ink); background: #efe6d4; }
.comparison th:first-child { min-width: 105px; }
.comparison th:last-child, .comparison td:last-child { border-right: 0; }
.comparison tr:last-child td, .comparison tr:last-child th { border-bottom: 0; }
.comparison td:first-child { color: #8a7658; font-size: 10px; }
.comparison td .action { font-size: 9px; padding: 6px 9px; min-height: 29px; }
.comparison small { display: block; color: #958364; font-size: 9px; }
.table-note { margin-top: 9px; }
.contact-block { background: var(--paper); border: 1px solid #dcd0ba; border-radius: 14px; padding: 21px; margin-top: 17px; }
.contact-block h3 { font-size: 25px; margin-bottom: 10px; }
.contact-block > p { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.send-summary { border-bottom: 1px solid #e1d5c0; margin-bottom: 18px; padding-bottom: 15px; font-size: 11px; line-height: 1.75; color: #6e5a3e; }
.send-summary strong { color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 13px 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 10px; line-height: 1.5; color: #786448; font-weight: 500; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid #d8c9ae; background: #fffdf6; border-radius: 8px; padding: 10px 11px; min-height: 40px; font-size: 12px; font-weight: 400; color: var(--ink); }
.field textarea { min-height: 82px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #ae9d82; }
.field input[readonly] { background: #f2eddf; color: #7c6c51; }
.consent { font-size: 10px; color: #827055; line-height: 1.7; display: flex; align-items: flex-start; gap: 8px; margin: 17px 0 13px; }
.consent input { accent-color: var(--olive); width: 14px; height: 14px; margin: 2px 0 0; flex: none; }
.otp-box { margin: 14px 0; background: #efe8d8; padding: 15px; border-radius: 9px; font-size: 11px; line-height: 1.7; }
.otp-box small { display: block; font-size: 9px; margin-top: 8px; color: #8c7858; }
.otp-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.otp-row input { width: 130px; min-width: 0; padding: 9px 12px; border: 1px solid #d6c8ad; border-radius: 8px; background: var(--paper); font: 14px var(--mono); letter-spacing: .18em; }
.verified { color: var(--olive); font-size: 11px; display: flex; align-items: center; gap: 6px; margin: 13px 0; }
.verified svg { width: 14px; height: 14px; }
.error { color: #a03620; font-size: 11px; line-height: 1.65; margin: 9px 0; }
.success-panel { border: 1px solid #d2d7b8; background: #eff0e2; border-radius: 13px; padding: 20px; margin: 16px 0; }
.success-panel h3 { font-size: 26px; color: #415022; margin-bottom: 10px; }
.success-panel p { font-size: 12px; color: #6e7557; }
.success-panel .eyebrow { color: var(--olive); font-size: 8px; margin-bottom: 12px; }
.timeline { list-style: none; margin: 20px 0 0; padding: 0; }
.timeline li { border-left: 1px solid #cfd3b7; position: relative; margin-left: 5px; padding: 0 0 17px 20px; font-size: 11px; }
.timeline li::before { content: ''; height: 8px; width: 8px; border-radius: 50%; background: #c9ceb0; position: absolute; left: -4px; top: 5px; }
.timeline li:first-child::before, .timeline li.done::before { background: var(--olive); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li.active::before { background: var(--tomato); }
.timeline b { font-weight: 500; color: #4c5439; }
.timeline small { display: block; font-size: 10px; color: #8b8f76; margin-top: 3px; }
.loading { display: flex; align-items: center; gap: 8px; color: #94846a; font-size: 11px; padding: 6px 0; }
.loading i { display: inline-block; width: 4px; height: 4px; background: var(--olive); border-radius: 50%; animation: pulse 1.2s infinite; }
.loading i:nth-child(2) { animation-delay: .15s; }
.loading i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 50% { opacity: .25; transform: translateY(-3px); } }

.intro { margin: 18px 0 25px; }
.intro .seed { width: 42px; height: 42px; margin-bottom: 24px; }
.intro .seed svg { width: 17px; height: 23px; }
.intro .eyebrow { margin-bottom: 14px; font-size: 8px; }
.intro h1, .intro h2 { font-size: clamp(33px, 3.2vw, 46px); line-height: 1.07; margin-bottom: 20px; color: var(--ink); }
.intro h1 em, .intro h2 em { color: var(--tomato); }
.intro > p { font-size: 13px; color: #8c795d; line-height: 1.8; max-width: 440px; }
.starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 27px 0 17px; }
.starter { padding: 15px 13px; border: 1px solid #e0d3bb; border-radius: 11px; background: #f8f0df; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; }
.starter:hover { background: #eee5d0; border-color: #c5b597; }
.starter svg { color: #8b8860; width: 18px; height: 18px; }
.starter b, .starter strong { font-size: 11px; font-weight: 500; color: #604a2e; line-height: 1.5; }
.starter small, .starter span { font-size: 9px; line-height: 1.7; color: #968162; }
.manual { padding: 5px 0; background: transparent; font-size: 10px; color: #8b7757; text-decoration: underline; text-underline-offset: 3px; }
.manual svg { width: 12px; height: 12px; margin-right: 5px; }

.modal { border: 1px solid #d8c9ae; border-radius: 18px; background: var(--cream); color: var(--ink); padding: 26px; width: min(590px, calc(100% - 30px)); max-height: 88vh; overflow-y: auto; box-shadow: 0 25px 100px #2a181045; }
.modal::backdrop { background: #30241473; backdrop-filter: blur(3px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.modal-head h2 { font-size: 32px; }
.modal-head p { margin-top: 9px; font-size: 11px; color: var(--muted); }
.modal > p { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.close { display: grid; place-items: center; width: 27px; height: 27px; background: #e9dcc6; border-radius: 50%; color: #88714f; flex: none; font-size: 20px; line-height: 1; }
.close svg { width: 13px; height: 13px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #d9cbb2; padding-top: 17px; margin-top: 21px; }
.detail-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin: 15px 0 5px; background: #e9deca; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 17px 0; }
.detail-facts { padding: 0; list-style: none; }
.detail-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.7; color: #7b6646; }
.detail-facts li svg { width: 12px; height: 12px; margin-top: 3px; color: var(--olive); }
.detail-facts > div { border-bottom: 1px solid #dfd1b8; padding-bottom: 11px; }
.detail-facts small { display: block; font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #99815f; margin-bottom: 6px; }
.detail-facts b { font-size: 12px; font-weight: 500; }
.photo-credit { font-size: 8px; text-align: right; color: #9a8667; margin-top: 5px; }
.detail-warning { background: #ede6d3; border-radius: 9px; padding: 13px; color: #847153; font-size: 10px; line-height: 1.75; margin-top: 17px; }
.toast { position: fixed; z-index: 100; bottom: 25px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(540px, calc(100% - 30px)); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 12px; text-align: center; font-size: 11px; line-height: 1.6; box-shadow: 0 8px 40px #2a181025; }
.mini-summary { background: #f0e6d1; border: 1px solid #ddcdb1; border-radius: 9px; padding: 13px 15px; margin: 14px 0; color: #7c6646; font-size: 11px; line-height: 1.8; }
.mini-summary strong { color: #5f472b; font-weight: 500; }
.empty-card { padding: 19px; border: 1px dashed #d6c6a9; border-radius: 11px; font-size: 11px; line-height: 1.8; color: #8d7755; margin: 15px 0; }
.empty-card h3 { font-size: 23px; color: #6c5435; margin-bottom: 9px; }
.undo { background: transparent; text-decoration: underline; text-underline-offset: 3px; color: #8a7150; padding: 3px 0; font-size: 10px; }
.stale .venue-photo { filter: saturate(.55); }
.stale .venue-card { opacity: .74; }
.stale-note { font-size: 10px; color: #977249; background: #f2e4cc; border-radius: 7px; padding: 9px 12px; margin-top: 10px; }

@media (min-width: 1600px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr) 330px; }
  .sidebar { padding-left: 22px; padding-right: 22px; }
  .right { padding: 34px 29px; }
  .thread-inner { padding-top: 45px; }
  .chat-header { padding-left: 40px; padding-right: 40px; }
  .venue-photo { height: 145px; }
}
@media (max-width: 1150px) {
  .shell { grid-template-columns: 174px minmax(0, 1fr) 270px; }
  .sidebar { padding-left: 13px; padding-right: 13px; }
  .right { padding-left: 19px; padding-right: 19px; }
  .thread-inner { padding-left: 24px; padding-right: 24px; }
  .chat-header { padding-left: 24px; padding-right: 24px; }
  .composer-area { padding-left: 24px; padding-right: 24px; }
  .cards { gap: 8px; }
  .venue-name { font-size: 18px; }
  .venue-photo { height: 110px; }
  .venue-actions { flex-wrap: wrap; }
  .starters { gap: 7px; }
  .starter { padding: 12px 10px; }
}
@media (max-width: 950px) {
  .shell { grid-template-columns: 174px minmax(0, 1fr); }
  .mobile-brief { display: inline-flex !important; align-items: center; gap: 6px; }
  .right { display: none; }
  .right.drawer, .right.open, .right.is-open { display: flex; position: fixed; z-index: 50; top: 31px; right: 0; bottom: 0; width: min(360px, 91vw); padding: 28px 25px; box-shadow: -15px 0 70px #2a181025; border-left: 1px solid #d4c5a9; }
  .right-close { display: grid; place-items: center; width: 27px; height: 27px; background: #e6d9bf; border-radius: 50%; font-size: 21px; color: #806a49; margin: 0 0 14px auto; }
  .right-close svg { width: 13px; height: 13px; }
  .right .brief-header h2 { font-size: 30px; }
  .right .brief-row { padding: 14px 0; }
  .right .brief-row small { font-size: 9px; }
  .right .brief-row b { font-size: 12px; }
  .right .sub, .right .selection-empty { font-size: 11px; }
  .thread-inner { max-width: 720px; }
  .intro { margin-top: 25px; }
  .intro h1, .intro h2 { font-size: 42px; }
  .venue-photo { height: 130px; }
}
@media (max-width: 620px) {
  .demo-bar { padding: 7px 8px; font-size: 7px; gap: 9px; min-height: 31px; line-height: 1.6; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .mobile-logo { display: inline-flex !important; font: 600 27px/1 var(--serif); letter-spacing: -.065em; text-decoration: none; color: var(--ink); }
  .mobile-logo svg { width: 17px; height: 23px; margin-right: 7px; color: var(--tomato); }
  .chat-header { min-height: 66px; padding: 14px 19px; gap: 10px; }
  .chat-title { font-size: 12px; }
  .chat-title .mobile-logo + p, .chat-title .mobile-logo + small { font-size: 8px; margin-top: 4px; }
  .header-actions { gap: 12px; }
  .header-actions .status { display: none; }
  .header-actions > button { font-size: 9px; }
  .header-actions svg { width: 14px; height: 14px; }
  .thread-inner { padding: 25px 20px 22px; }
  .message { margin-bottom: 26px; }
  .message.user { margin-bottom: 24px; }
  .bubble { font-size: 13px; max-width: 91%; padding: 12px 15px; }
  .assistant-head { font-size: 10px; margin-bottom: 12px; }
  .assistant-head small { font-size: 8px; }
  .response { font-size: 13px; line-height: 1.8; }
  .response > h2, .response > h3 { font-size: 28px; }
  .cards { display: flex; overflow-x: auto; gap: 12px; margin-left: -20px; margin-right: -20px; padding: 2px 20px 13px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #d4c4a8 transparent; }
  .venue-card { flex: 0 0 225px; scroll-snap-align: center; }
  .venue-photo { height: 145px; }
  .venue-info { padding: 13px 14px 11px; }
  .venue-name { font-size: 23px; margin-bottom: 10px; }
  .area { font-size: 8px; }
  .venue-info p, .venue-info li { font-size: 11px; }
  .venue-actions { padding: 0 13px 13px; flex-wrap: nowrap; }
  .keep { font-size: 10px; min-height: 32px; padding: 7px 11px; }
  .detail-link { font-size: 10px; }
  .disclaimer { margin-top: 7px; font-size: 9px; }
  .actions { gap: 7px; margin-top: 14px; }
  .action { font-size: 10px; padding: 9px 12px; min-height: 35px; }
  .composer-area { padding: 0 14px max(11px, env(safe-area-inset-bottom)); }
  .quick-actions { gap: 6px; padding: 9px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .quick-actions button { flex: none; font-size: 9px; padding: 6px 10px; white-space: nowrap; }
  .composer { padding: 12px 13px 9px; border-radius: 15px; }
  .composer textarea { font-size: 16px; min-height: 39px; line-height: 1.5; }
  .composer-hint { font-size: 8px; }
  .composer-hint svg { width: 11px; height: 11px; }
  .composer-bottom { padding-top: 3px; }
  .send { width: 32px; height: 32px; }
  .under-composer { font-size: 7px; line-height: 1.5; padding-top: 7px; }
  .intro { margin: 10px 0 20px; }
  .intro .seed { width: 36px; height: 36px; margin-bottom: 20px; }
  .intro .seed svg { width: 15px; height: 20px; }
  .intro h1, .intro h2 { font-size: 38px; margin-bottom: 18px; }
  .intro > p { font-size: 12px; }
  .starters { margin-top: 24px; gap: 7px; }
  .starter { border-radius: 10px; padding: 12px 10px; gap: 8px; }
  .starter b, .starter strong { font-size: 10px; }
  .starter small, .starter span { font-size: 8px; }
  .starter svg { width: 16px; height: 16px; }
  .manual { font-size: 10px; }
  .inline-brief { padding: 15px; }
  .inline-brief dl { grid-template-columns: 90px minmax(0, 1fr); gap: 8px 10px; font-size: 11px; }
  .contact-block { padding: 17px; }
  .contact-block h3 { font-size: 25px; }
  .form-grid { gap: 11px; }
  .field input, .field textarea, .field select { font-size: 16px; min-height: 43px; padding: 9px 10px; }
  .field { font-size: 10px; }
  .consent { font-size: 10px; }
  .otp-box { padding: 13px; }
  .otp-row input { width: 125px; font-size: 16px; }
  .modal { padding: 22px; width: calc(100% - 24px); }
  .modal-head { margin-bottom: 14px; }
  .modal-head h2 { font-size: 29px; }
  .modal .form-grid { grid-template-columns: 1fr; }
  .detail-facts { gap: 13px; }
  .detail-photo { aspect-ratio: 4 / 3; }
  .right.drawer, .right.open, .right.is-open { width: min(360px, 94vw); }
  .toast { bottom: 18px; font-size: 10px; padding: 12px 16px; }
  .success-panel { padding: 17px; }
  .success-panel h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Keep the conversation and its results prominent on small screens. */
@media(max-width:620px){
 .chat-header .chat-title{display:none}.chat-header{min-height:72px}.day-label{display:none}
 .thread-inner{padding-top:18px}.message.user{margin-top:0;margin-bottom:18px}.bubble{max-width:96%;font-size:12px;line-height:1.65;padding:11px 13px}
 .assistant-head{margin-bottom:9px}.response{font-size:12px;line-height:1.75}.response>p{margin-bottom:10px}
 .mini-summary{padding:10px 11px;font-size:10px;line-height:1.65}.cards{margin-top:13px}.venue-photo{height:125px}
 .composer textarea{min-height:32px}.composer-hint{font-size:8px}.form-grid{grid-template-columns:1fr}
}

/* Production shell: no prototype banner, remote images, server states. */
.shell{height:100vh;height:100dvh}.right.drawer,.right.open,.right.is-open{top:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px}.skip-link:focus{top:12px}
.notice{flex:none;border-bottom:1px solid #dcc2a3;background:#f4e4cd;padding:11px 25px;font-size:12px;color:#77542e;line-height:1.6}
.project-heading{margin-top:28px}.project-link{font-size:10px}.project-link small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.project-link.current{background:#e4d7bf}
#project-list{max-height:32vh;overflow-y:auto}.user-profile a{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.response>p{white-space:pre-line;overflow-wrap:anywhere}.response .send-summary p{white-space:normal}.send-summary strong{display:block;margin-bottom:6px}
.venue-placeholder{display:flex;align-items:center;justify-content:center;gap:8px;background:#e6e5d3;color:#89906c;min-height:100px;font:11px var(--sans)}.venue-placeholder svg{height:20px;width:20px}.selected-item .venue-placeholder{width:39px;height:39px;min-height:39px;border-radius:7px;flex:none}.selected-item .venue-placeholder span{display:none}.selected-item .venue-placeholder svg{width:14px;height:14px}
.venue-info p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.photo-credit{overflow-wrap:anywhere}
.manual-status{font-size:9px;color:var(--muted);padding:5px}.brief-header h2,.right>h2{overflow-wrap:anywhere}.source-label{margin-top:15px}.eyebrow{overflow-wrap:anywhere}.table-note{white-space:normal}
.no-script{position:fixed;inset:0;background:var(--cream);z-index:300;padding:clamp(25px,8vw,100px)}.no-script h1{font-size:40px;margin-bottom:20px}.no-script p{max-width:550px;margin-bottom:20px}
.timeline{display:block!important}.timeline li{border-left:1px solid #cfd3b7!important;border-top:0!important;text-align:left!important;padding:0 0 17px 20px!important}.timeline li:last-child{border-left-color:transparent!important;padding-bottom:0!important}.timeline li::before{left:-4px!important;top:5px!important}.timeline b{display:block}.timeline small{line-height:1.6}
@media(max-width:620px){.shell{height:100dvh}.notice{font-size:11px;padding:10px 19px}.chat-title{max-width:210px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.composer textarea{min-height:45px}.under-composer{font-size:8px}.modal{max-height:88dvh}.contact-block .form-grid{grid-template-columns:1fr}.detail-photo{height:auto}.user-profile{font-size:11px}}

html,body{height:100%;overflow:hidden}.venue-name,.selected-item b{overflow-wrap:anywhere}