/* TFP brand — red #fe3535, clean editorial type */
:root {
  --tfp-red: #fe3535;
  --tfp-ink: #1a1a1a;
  --tfp-muted: #6a6a6a;
  --tfp-bg: #fafaf8;
  --tfp-card: #ffffff;
  --tfp-border: #e8e6e0;
  --tfp-soft: #f5f3ef;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; color: var(--tfp-ink); background: var(--tfp-bg); }
body { font-size: 15px; line-height: 1.55; }
button { font-family: inherit; cursor: pointer; }
textarea { font-family: inherit; }

.tfp-header {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--tfp-border);
  background: #fff;
  position: sticky; top: 0; z-index: 10;
  gap: 12px;
}
.brand {
  display: flex; align-items: center;
  color: var(--tfp-ink);
  text-decoration: none;
}
.tfp-logo {
  height: 38px;
  width: auto;
  display: block;
}
.brand-tagline {
  font-size: 13px; color: var(--tfp-muted); text-transform: uppercase;
  letter-spacing: 1.5px; text-decoration: none; margin-left: auto;
}
.brand-tagline:hover { color: var(--tfp-red); }

.layout {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) minmax(460px, 1.2fr);
  height: calc(100vh - 57px);
  gap: 0;
  transition: grid-template-columns 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.layout.single { grid-template-columns: 1fr; }
.layout.chat-collapsed { grid-template-columns: 0 1fr; }
.layout.chat-collapsed .chat-panel {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Hero mode: initial clean state with chat centered on the screen.
   The itinerary panel is completely hidden until the first real itinerary
   arrives, at which point .hero is removed and the layout slides into split view. */
.layout.hero {
  grid-template-columns: 1fr;
}
.layout.hero .itinerary-panel {
  display: none;
}
.layout.hero .chat-panel {
  /* Strict width, not max-width, so the frame never resizes as chat content
     changes. The composer and messages are centered inside this fixed frame. */
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  border-right: none;
  background: var(--tfp-bg);
}
.layout.hero .chat-intro {
  padding: 80px 40px 20px;
  border-bottom: none;
  text-align: center;
}
.layout.hero .chat-intro h1 { font-size: 40px; }
.layout.hero .chat-intro p { margin-left: auto; margin-right: auto; font-size: 17px; }
.layout.hero .starter-chips { justify-content: center; }
.layout.hero .composer {
  width: 100%;
  margin: 0;
  border-top: none;
  background: transparent;
  padding-bottom: 32px;
}
.layout.hero .composer textarea {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 16px 20px;
}
/* Hero mode: same top-left position — no special override needed */
.chat-intro.collapsed .starter-chips,
.chat-intro.collapsed p {
  display: none;
}
.chat-intro.collapsed h1 {
  font-size: 18px;
  margin: 0 0 4px;
}
.chat-intro.collapsed {
  padding: 14px 28px 6px;
  border-bottom: 1px solid var(--tfp-border);
}

/* Chat toggle button — sits inside the header bar, between the brand and the tagline.
   Swaps between "View map" and "View chat" to clearly indicate what happens on click. */
.chat-toggle {
  margin-left: 24px;
  background: var(--tfp-red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.chat-toggle:hover { background: #e02929; }
/* Hide button in hero mode (no itinerary to toggle yet) */
body:has(.layout.hero) .chat-toggle { display: none; }

/* ─── Chat panel ─────────────────────────────────────────────── */
.chat-panel {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--tfp-border);
  background: #fff;
  overflow: hidden;
}
.chat-intro {
  padding: 40px 32px 16px;
  border-bottom: 1px solid var(--tfp-border);
}
.chat-intro h1 { font-size: 28px; margin: 0 0 8px; font-weight: 800; }
.chat-intro p { color: var(--tfp-muted); margin: 0 0 16px; max-width: 48ch; }
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--tfp-soft); border: 1px solid var(--tfp-border);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--tfp-ink);
  transition: all 0.15s;
}
.chip:hover { background: var(--tfp-red); color: #fff; border-color: var(--tfp-red); }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.msg { max-width: 85%; }
.msg.user { align-self: flex-end; }
.msg.user .bubble {
  background: var(--tfp-red); color: #fff;
  padding: 10px 16px; border-radius: 18px 18px 4px 18px;
}
.msg.assistant { align-self: flex-start; }
.msg.assistant .bubble {
  background: var(--tfp-soft); color: var(--tfp-ink);
  padding: 12px 16px; border-radius: 18px 18px 18px 4px;
  white-space: pre-wrap;
}
.msg.hidden { display: none; }
.msg .tool-trace {
  font-size: 11px; color: var(--tfp-muted);
  margin-top: 4px; font-family: 'SF Mono', Menlo, monospace;
}
.msg .tool-trace.live {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-family: inherit;
  margin-top: 6px;
}
.tool-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--tfp-soft);
  color: var(--tfp-muted);
  border: 1px solid var(--tfp-border);
}
.tool-pill.running { color: var(--tfp-red); }
.tool-pill.done { background: #eafaed; color: #1a7a34; border-color: #c8e6c9; }
.tool-pill.error { background: #fdecec; color: var(--tfp-red); border-color: #f5c5c5; }
.answer-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.answer-chip {
  background: #fff;
  border: 1px solid var(--tfp-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tfp-ink);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  max-width: 100%;
}
.answer-chip:hover:not(:disabled) {
  background: var(--tfp-red);
  color: #fff;
  border-color: var(--tfp-red);
}
.answer-chip.selected {
  background: var(--tfp-red);
  color: #fff;
  border-color: var(--tfp-red);
}
.answer-chip:disabled:not(.selected) {
  opacity: 0.4;
  cursor: not-allowed;
}
.answer-chip.other {
  background: transparent;
  border-style: dashed;
  color: var(--tfp-muted);
}
.answer-chip.other:hover {
  background: var(--tfp-soft);
  color: var(--tfp-ink);
  border-style: solid;
  border-color: var(--tfp-border);
}
.thinking {
  display: inline-flex; gap: 4px;
}
.thinking span {
  width: 6px; height: 6px; background: var(--tfp-muted); border-radius: 50%;
  animation: blink 1.2s infinite;
}
.thinking span:nth-child(2) { animation-delay: 0.2s; }
.thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.thinking-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--tfp-soft);
  border-radius: 18px;
  min-width: 220px;
}
.thinking-status {
  font-size: 13px;
  color: var(--tfp-ink);
  flex: 1;
}
.thinking-timer {
  font-size: 11px;
  color: var(--tfp-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.composer {
  display: flex; gap: 8px; padding: 16px 24px;
  border-top: 1px solid var(--tfp-border); background: #fff;
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--tfp-border);
  border-radius: var(--radius); padding: 12px 16px; font-size: 15px;
  outline: none; max-height: 200px;
}
.composer textarea:focus { border-color: var(--tfp-red); }
.composer button {
  background: var(--tfp-red); color: #fff; border: none;
  border-radius: var(--radius); padding: 0 20px; font-size: 20px;
}
.composer button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Itinerary panel ────────────────────────────────────────── */
.itinerary-panel {
  background: var(--tfp-bg); overflow-y: auto; padding: 24px;
  position: relative;
}
.itinerary-panel.wide { max-width: 1100px; margin: 0 auto; padding: 32px; }

/* Map */
.itin-map-wrap {
  position: relative;
  margin-bottom: 20px;
}
.itin-map {
  height: 340px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--tfp-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #e8e6e0;
}
.route-btn {
  position: absolute;
  top: 12px; right: 12px;
  background: #fff;
  border: 1px solid var(--tfp-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tfp-ink);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  z-index: 500;
  transition: all 0.15s;
}
.route-btn:hover { background: var(--tfp-red); color: #fff; border-color: var(--tfp-red); }
.route-btn svg { width: 14px; height: 14px; }
.itin-map .leaflet-container { font-family: inherit; }
.pin-marker {
  width: 30px; height: 30px;
  background: var(--tfp-red);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12px;
  cursor: pointer;
}
.pin-marker span { transform: rotate(45deg); }
.pin-marker.highlight { background: #1a1a1a; transform: rotate(-45deg) scale(1.15); z-index: 1000; }
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; }
.leaflet-popup-content strong { display: block; margin-bottom: 2px; font-size: 14px; }
.leaflet-popup-content .popup-meta { color: var(--tfp-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.itinerary-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--tfp-muted); text-align: center;
}
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.hidden { display: none !important; }

/* Loading banner — shown briefly while photos/geocoding resolve */
.itin-loading-banner {
  background: var(--tfp-soft);
  border: 1px solid var(--tfp-border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--tfp-muted);
  animation: fade-in 0.3s;
}
.itin-loading-banner .spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--tfp-border);
  border-top-color: var(--tfp-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.itin-loading-banner.done { display: none; }

.itin-hero {
  background: #fff; border: 1px solid var(--tfp-border); border-radius: var(--radius);
  padding: 24px 28px; box-shadow: var(--shadow); margin-bottom: 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.itin-hero-body { flex: 1; min-width: 0; }
.itin-hero h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.itin-hero .dest { color: var(--tfp-red); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.itin-hero .profile { color: var(--tfp-muted); font-size: 14px; margin-top: 8px; }
.itin-dates { color: var(--tfp-muted); font-size: 13px; margin-top: 4px; }

.share-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  background: var(--tfp-red); color: #fff; border: none;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.share-btn:hover { background: #e02929; transform: translateY(-1px); }

/* ─── Share modal ────────────────────────────────────────────── */
.share-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: fade-in 0.2s;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.share-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 24px;
  width: min(460px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.share-modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.share-modal-sub { margin: 0 0 18px; color: var(--tfp-muted); font-size: 14px; }
.share-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tfp-soft); border: none;
  font-size: 16px; cursor: pointer;
}
.share-modal-close:hover { background: var(--tfp-red); color: #fff; }
.share-url-row {
  display: flex; gap: 8px;
}
.share-url-row.hidden { display: none; }
.share-url-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--tfp-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--tfp-ink);
  font-family: 'SF Mono', Menlo, monospace;
  outline: none;
}
.share-url-input:focus { border-color: var(--tfp-red); }
.share-copy-btn {
  padding: 10px 16px;
  background: var(--tfp-red); color: #fff;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.share-copy-btn:hover { background: #e02929; }

.day-card {
  background: #fff; border: 1px solid var(--tfp-border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow);
}
.day-header {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: none; background: #fff;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.day-header:hover { background: var(--tfp-soft); }
.day-number {
  background: var(--tfp-red); color: #fff; font-weight: 800;
  border-radius: 8px; padding: 4px 10px; font-size: 12px;
  flex-shrink: 0;
}
.day-location { font-weight: 700; font-size: 16px; flex: 1; }
.day-count {
  font-size: 11px; color: var(--tfp-muted); text-transform: uppercase; letter-spacing: 0.6px;
}
.day-toggle {
  font-size: 14px; color: var(--tfp-muted);
  transition: transform 0.2s;
  margin-left: 4px;
}
.day-card.collapsed .day-toggle { transform: rotate(-90deg); }
.day-body {
  border-top: 1px solid var(--tfp-border);
  max-height: 4000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s;
}
.day-card.collapsed .day-body {
  max-height: 0;
  border-top: none;
  opacity: 0;
}
.day-summary { padding: 12px 24px 4px; color: var(--tfp-muted); font-size: 14px; }

.item {
  display: flex; gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--tfp-border);
  cursor: pointer;
  transition: background 0.12s, opacity 0.3s;
}
.item:hover { background: var(--tfp-soft); }
.item.active { background: #fff4f4; }
.item:first-of-type { border-top: none; }
.item-thumb {
  flex: 0 0 72px; height: 72px; border-radius: 10px;
  background: var(--tfp-soft) center/cover no-repeat;
  position: relative;
}
.item-thumb-icon {
  position: absolute; top: -4px; left: -4px;
  width: 22px; height: 22px; border-radius: 6px;
  background: #fff; border: 1px solid var(--tfp-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.item-icon {
  flex: 0 0 36px; height: 36px; border-radius: 10px;
  background: var(--tfp-soft); display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.item-body { flex: 1; min-width: 0; }
.item-title { font-weight: 700; font-size: 15px; margin: 0 0 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-title a { color: var(--tfp-ink); text-decoration: none; border-bottom: 2px solid var(--tfp-red); }
.item-title a:hover { color: var(--tfp-red); }
.item-desc { color: var(--tfp-muted); font-size: 13px; margin: 0; line-height: 1.5; }
.item-price {
  color: var(--tfp-red);
  font-weight: 700;
  font-size: 14px;
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.detail-price {
  color: var(--tfp-red);
  font-weight: 800;
  font-size: 18px;
  margin: -4px 0 10px;
}
.item-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--tfp-muted); flex-wrap: wrap; }
.item-meta span { background: var(--tfp-soft); padding: 2px 8px; border-radius: 4px; }
.time-tag { font-size: 11px; color: var(--tfp-red); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.source-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: var(--tfp-red); color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
}
.source-badge.web { background: #888; }
.source-badge.general { background: #bbb; }

.itin-notes {
  background: var(--tfp-soft); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 16px; font-size: 13px; color: var(--tfp-muted);
}
.itin-notes strong { color: var(--tfp-ink); display: block; margin-bottom: 4px; }

/* ─── Detail drawer ──────────────────────────────────────────── */
.detail-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(560px, 45vw);
  max-height: 70vh;
  background: #fff;
  border-top-left-radius: 18px;
  border: 1px solid var(--tfp-border);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  z-index: 9999;
}
.detail-drawer.open { transform: translateY(0); }
.detail-hero {
  position: relative;
  height: 220px;
  background: var(--tfp-soft) center/cover no-repeat;
}
.detail-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.95); border: none;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.detail-close:hover { background: var(--tfp-red); color: #fff; }
.detail-body { padding: 20px 24px 16px; }
.detail-kicker {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--tfp-muted); margin-bottom: 6px;
}
.detail-kicker .day-tag { background: var(--tfp-red); color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.detail-body h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.detail-desc { color: var(--tfp-ink); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-meta span {
  background: var(--tfp-soft); padding: 4px 10px; border-radius: 20px;
  font-size: 12px; color: var(--tfp-ink);
}
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-btn {
  flex: 1; min-width: 140px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer; border: 1px solid var(--tfp-border);
  background: #fff; color: var(--tfp-ink);
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.detail-btn:hover { background: var(--tfp-soft); }
.detail-btn.primary { background: var(--tfp-red); color: #fff; border-color: var(--tfp-red); }
.detail-btn.primary:hover { background: #e02929; }
.detail-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--tfp-border);
  background: var(--tfp-soft);
}
.detail-nav button {
  background: #fff; border: 1px solid var(--tfp-border);
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.detail-nav button:hover:not(:disabled) { background: var(--tfp-red); color: #fff; border-color: var(--tfp-red); }
.detail-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.detail-nav-position { font-size: 12px; color: var(--tfp-muted); font-weight: 600; }

@media (max-width: 900px) {
  .detail-drawer { width: 100%; max-height: 85vh; border-top-right-radius: 18px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: calc(100vh - 57px); }
  .chat-panel { max-height: 65vh; border-right: none; border-bottom: 1px solid var(--tfp-border); transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .chat-intro { padding: 24px 16px 12px; }

  /* Hero mode: full width on mobile, no fixed 760px */
  .layout.hero { grid-template-columns: 1fr; }
  .layout.hero .chat-panel {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  .layout.hero .chat-intro {
    padding: 32px 20px 16px;
    text-align: left;
  }
  .layout.hero .chat-intro h1 { font-size: 28px; }
  .layout.hero .chat-intro p { font-size: 15px; }
  .layout.hero .starter-chips { justify-content: flex-start; }
  .layout.hero .composer {
    padding: 12px 16px 20px;
  }
  .layout.hero .composer textarea {
    padding: 12px 14px;
    font-size: 15px;
  }

  /* Mobile collapse: chat becomes a compact bar at the top, full-height itinerary below */
  .layout.chat-collapsed { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .layout.chat-collapsed .chat-panel {
    max-height: 0;
    opacity: 0;
    padding: 0;
    border-bottom: none;
  }

  /* Starter chips: wrap and don't overflow */
  .starter-chips { gap: 6px; }
  .chip { font-size: 12px; padding: 7px 12px; }

  /* Messages and composer: tighter on mobile */
  .messages { padding: 16px; }
  .composer { padding: 12px 16px; gap: 6px; }
  .composer textarea { font-size: 15px; padding: 10px 12px; }

  /* Answer chips: smaller on mobile */
  .answer-chip { font-size: 12px; padding: 7px 12px; }

  /* Itinerary panel: tighter padding */
  .itinerary-panel { padding: 16px; }
  .itin-hero { padding: 16px 18px; flex-direction: column; gap: 12px; }
  .itin-hero h2 { font-size: 20px; }
  .day-header { padding: 12px 16px; }
  .day-summary { padding: 8px 16px 4px; }
  .item { padding: 12px 16px; }
  .item-thumb { flex: 0 0 56px; height: 56px; }

  /* Detail drawer: full width on mobile */
  .detail-drawer { width: 100%; max-height: 85vh; border-top-right-radius: 18px; }
  .detail-hero { height: 180px; }

  /* Map: shorter on mobile */
  .itin-map { height: 240px; }

  /* Header: smaller on mobile */
  .tfp-header { padding: 10px 16px; }
  .tfp-logo { height: 30px; }
  .brand-tagline { font-size: 11px; letter-spacing: 1px; }
  .chat-toggle { margin-left: auto; padding: 6px 12px; font-size: 11px; }

  /* Share modal */
  .share-modal { padding: 24px 20px 18px; }
}