:root {
    --ink: #1a1611;
    --paper: #f5f0e6;
    --paper-2: #ebe3d1;
    --gold: #b08440;
    --gold-deep: #8a6428;
    --rust: #a8442a;
    --moss: #4a5d3a;
    --line: rgba(26, 22, 17, 0.15);
    --shadow: 0 1px 0 rgba(26, 22, 17, 0.04), 0 8px 32px rgba(26, 22, 17, 0.08);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%;
    font-family: 'Manrope', sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
  }

  body {
    background-image:
      radial-gradient(circle at 15% 20%, rgba(176, 132, 64, 0.08) 0%, transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(74, 93, 58, 0.06) 0%, transparent 40%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .app {
    display: grid;
    grid-template-columns: 1fr 380px;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* ============ HEADER ============ */
  .topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 36px;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 240, 230, 0.85);
    backdrop-filter: blur(10px);
  }

  .brand {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .brand-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.5px;
    font-style: italic;
  }
  .brand-mark::after {
    content: " & Co.";
    color: var(--gold);
    font-style: normal;
    font-weight: 400;
  }
  .brand-tag {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 500;
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
  }
  .topbar-right span:first-child::before {
    content: "●";
    color: var(--moss);
    margin-right: 6px;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
  .currency-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 1;
  }
  .currency-selector .currency-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
  }
  .currency-selector select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 4px 22px 4px 8px;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 600;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
                      linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  .currency-selector select:hover {
    border-color: var(--gold);
    color: var(--ink);
  }
  .currency-selector select:focus {
    outline: none;
    border-color: var(--gold);
  }

  /* ============ CHAT ============ */
  .chat {
    display: flex;
    flex-direction: column;
    /*height: calc(100vh - 73px);*/
    height: 100vh;
    border-right: 1px solid var(--line);
    overflow: hidden;
  }
  .chat .currency-selector {
    justify-content: flex-end;
    padding: 7px 48px 0px;
  }

  .chat-header {
    padding: 18px 48px 20px;
    border-bottom: 1px solid var(--line);
  }
  .chat-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.5px;
  }
  .chat-header h1 em {
    color: var(--gold);
    font-weight: 600;
  }
  .chat-header p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink);
    opacity: 0.65;
    max-width: 560px;
  }

  .trip-types {
    padding: 18px 48px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .chip {
    padding: 7px 14px;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.2px;
  }
  .chip:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
  }
  .chip.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px 48px;
    scroll-behavior: smooth;
  }
  .messages::-webkit-scrollbar { width: 6px; }
  .messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

  .msg {
    margin-bottom: 22px;
    max-width: 88%;
    animation: rise 0.4s ease-out;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .msg.user {
    margin-left: auto;
  }
  .msg-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-deep);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .msg.user .msg-label {
    text-align: right;
    color: var(--ink);
    opacity: 0.5;
  }
  .msg-bubble {
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.55;
  }
  .msg.assistant .msg-bubble {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
  }
  /* Markdown-rendered children inside assistant bubbles */
  .msg.assistant .msg-bubble h2,
  .msg.assistant .msg-bubble h3,
  .msg.assistant .msg-bubble h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin: 16px 0 8px;
  }
  .msg.assistant .msg-bubble h2 { font-size: 24px; letter-spacing: -0.3px; }
  .msg.assistant .msg-bubble h3 { font-size: 19px; }
  /* Flex layout only when the h3 carries a Google-Images pill (i.e. it's an
     itinerary day heading). Non-day h3s (Transport Summary, Estimated Cost,
     Overview, etc.) render as plain block headings. */
  .msg.assistant .msg-bubble h3:has(.gimg-pill) {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .msg.assistant .msg-bubble h3 .md-section-name { flex: 1; min-width: 0; }
  .msg.assistant .msg-bubble h4 { font-size: 15px; font-weight: 600; font-family: 'Manrope', sans-serif; }
  .msg.assistant .msg-bubble > h2:first-child,
  .msg.assistant .msg-bubble > h3:first-child,
  .msg.assistant .msg-bubble > h4:first-child,
  .msg.assistant .msg-bubble > p:first-child,
  .msg.assistant .msg-bubble > ul:first-child { margin-top: 0; }
  .msg.assistant .msg-bubble > :last-child { margin-bottom: 0; }
  .msg.assistant .msg-bubble p {
    margin: 0 0 10px;
  }
  .msg.assistant .msg-bubble ul {
    margin: 0 0 10px;
    padding-left: 22px;
  }
  .msg.assistant .msg-bubble li {
    margin-bottom: 4px;
  }
  .msg.assistant .msg-bubble strong { font-weight: 600; }
  .msg.assistant .msg-bubble em { font-style: italic; }
  .msg.assistant .msg-bubble a {
    color: var(--gold-deep);
    text-decoration: underline;
  }
  .msg.assistant .msg-bubble a:hover {
    color: var(--ink);
  }
  .msg.assistant .msg-bubble table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.45;
  }
  .msg.assistant .msg-bubble th,
  .msg.assistant .msg-bubble td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .msg.assistant .msg-bubble th {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    border-bottom: 1.5px solid var(--gold);
    white-space: nowrap;
  }
  .msg.assistant .msg-bubble tbody tr:last-child td {
    border-bottom: none;
  }
  .msg.user .msg-bubble {
    background: var(--ink);
    color: var(--paper);
  }
  /* Google-Images footer wrapper (assistant turns with an imageQuery).
     Sits inside the bubble so it inherits the gold left-rule. */
  .msg-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  /* Shared pill style — used both in the message footer and beside each
     rec-section heading. Small, rounded, gold-tinted; reads as a chip
     not a link. The 🖼 glyph anchors it visually. */
  .gimg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--gold);
    border-radius: 100px;
    background: rgba(176, 132, 64, 0.06);
    color: var(--gold-deep);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .gimg-pill:hover {
    background: var(--gold);
    color: var(--paper);
  }
  .msg.system .msg-bubble {
    background: rgba(74, 93, 58, 0.08);
    border: 1px dashed var(--moss);
    color: var(--moss);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    padding: 10px 14px;
  }

  /* Old dot-pulse typing animation, retained as a legacy class in case
     anything else uses it. The active wait indicator is .typing-bubble. */
  .typing {
    display: inline-flex;
    gap: 4px;
    padding: 14px 18px;
  }
  .typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: blink 1.4s infinite;
  }
  .typing span:nth-child(2) { animation-delay: 0.2s; }
  .typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
  }

  /* Rotating concierge-toned "thinking" line that replaces the dot pulse */
  .typing-bubble {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--gold-deep);
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
  }
  .typing-text {
    display: inline-block;
    transition: opacity 0.3s ease;
    animation: typing-breathe 3.2s ease-in-out infinite;
  }
  @keyframes typing-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
  }

  .composer {
    padding: 20px 48px 28px;
    border-top: 1px solid var(--line);
    background: rgba(245, 240, 230, 0.6);
  }
  .composer-label {
    margin-bottom: 8px;
  }
  .composer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
  }
  .composer textarea {
    flex: 1;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    padding: 14px 16px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    resize: none;
    min-height: 50px;
    max-height: 140px;
    transition: border-color 0.2s;
  }
  .composer textarea:focus {
    outline: none;
    border-color: var(--gold);
  }
  .send-btn {
    background: var(--ink);
    color: var(--paper);
    border: none;
    padding: 0 22px;
    align-self: stretch;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .send-btn:hover { background: var(--gold-deep); }
  .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Mic button (voice input via Web Speech API).
     Hidden by default; JS reveals it only when the browser supports
     SpeechRecognition. Idle: light gold tones. Active (listening): solid
     rust-red with a soft pulsing ring so it's obvious the mic is hot. */
  .mic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    padding: 0;
    border: 1px solid var(--gold);
    background: rgba(176, 132, 64, 0.06);
    color: var(--gold-deep);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .mic-btn:hover { background: var(--gold); color: var(--paper); }
  .mic-btn:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
  }
  .mic-btn-icon { display: block; }
  .mic-btn-active,
  .mic-btn-active:hover {
    background: var(--rust, #b04040);
    border-color: var(--rust, #b04040);
    color: var(--paper);
    animation: micPulse 1.4s ease-in-out infinite;
  }
  @keyframes micPulse {
    0%   { box-shadow: 0 0 0 0   rgba(176, 64, 64, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(176, 64, 64, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(176, 64, 64, 0);    }
  }
  /* Transcribing state: the recording stopped and we're waiting for Whisper.
     Different signal from "listening" — calmer, indicates "thinking". */
  .mic-btn-transcribing,
  .mic-btn-transcribing:hover {
    background: var(--paper-2);
    border-color: var(--gold-deep);
    color: var(--gold-deep);
    cursor: progress;
  }
  .mic-btn-transcribing .mic-btn-icon { animation: micSpin 1.2s linear infinite; }
  .mic-btn:disabled { cursor: progress; }
  @keyframes micSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mic-btn-active { animation: none; }
    .mic-btn-transcribing .mic-btn-icon { animation: none; }
  }

  /* Conversation-mode toggle. Sits to the LEFT of the mic button; same size
     family so the row reads as a logical button group. Idle: gold border like
     the mic. Active: solid moss-green fill — signals "live call" without
     stealing the rust-red recording emphasis. Sub-state classes layer on
     subtle pulses so the user always knows what the loop is doing. */
  .conv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    padding: 0;
    border: 1px solid var(--gold);
    background: rgba(176, 132, 64, 0.06);
    color: var(--gold-deep);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .conv-btn:hover { background: var(--gold); color: var(--paper); }
  .conv-btn:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
  }
  .conv-btn-icon { display: block; }
  .conv-btn-active,
  .conv-btn-active:hover {
    background: var(--moss);
    border-color: var(--moss);
    color: var(--paper);
  }
  /* Sub-state pulses — different colour rings so the user can tell at a glance
     whether the app is listening (green), processing (gold), or speaking (rust). */
  .conv-btn-listening { animation: convPulseListen 1.6s ease-in-out infinite; }
  .conv-btn-thinking  { animation: convPulseThink  1.4s ease-in-out infinite; }
  .conv-btn-speaking  { animation: convPulseSpeak  1.2s ease-in-out infinite; }
  @keyframes convPulseListen {
    0%   { box-shadow: 0 0 0 0   rgba(74, 93, 58, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(74, 93, 58, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(74, 93, 58, 0);    }
  }
  @keyframes convPulseThink {
    0%   { box-shadow: 0 0 0 0   rgba(176, 132, 64, 0.50); }
    70%  { box-shadow: 0 0 0 10px rgba(176, 132, 64, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(176, 132, 64, 0);    }
  }
  @keyframes convPulseSpeak {
    0%   { box-shadow: 0 0 0 0   rgba(168, 68, 42, 0.50); }
    70%  { box-shadow: 0 0 0 10px rgba(168, 68, 42, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(168, 68, 42, 0);    }
  }
  @media (prefers-reduced-motion: reduce) {
    .conv-btn-listening,
    .conv-btn-thinking,
    .conv-btn-speaking { animation: none; }
  }

  /* ============ BRIEF PANEL ============ */
  .brief {
    background: var(--paper-2);
    border-left: 1px solid var(--line);
    /*height: calc(100vh - 73px);*/
    height: 100vh;
    overflow-y: auto;
    padding: 32px 28px;
  }
  .brief-header {
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .brief-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 500;
  }
  .brief-header p {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-deep);
    margin-top: 4px;
  }

  .field {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line);
  }
  .field:last-of-type { border-bottom: none; }
  .field-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--ink);
    opacity: 0.5;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .field-value {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
  }
  .field-value.empty {
    color: var(--ink);
    opacity: 0.3;
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
  }
  .field-value.filled {
    color: var(--ink);
  }

  .submit-area {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--ink);
  }
  .submit-area-top {
    margin-top: 0;
    padding-top: 16px;
    border-top: none;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--line);
  }
  .submit-cta {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 16px;
    text-align: center;
  }
  .submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--rust);
    color: var(--paper);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
  }
  .submit-btn:hover { background: var(--ink); transform: translateY(-1px); }
  .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .completeness {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
    margin-bottom: 12px;
  }
  .completeness-bar {
    flex: 1;
    height: 2px;
    background: var(--line);
    border-radius: 1px;
    overflow: hidden;
  }
  .completeness-bar-fill {
    height: 100%;
    background: var(--gold);
    transition: width 0.4s ease;
  }

  /* ============ Recommendation block (in-chat) ============ */
  .rec-block-msg {
    margin-bottom: 24px;
    max-width: 100%;
    animation: rise 0.4s ease-out;
    /* Container queries below react to the rec-block's own width — more
       reliable than viewport media queries because the chat panel width
       differs depending on whether the brief is visible. */
    container-type: inline-size;
  }
  .rec-block {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    padding: 14px;
  }
  .rec-section {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
  }
  .rec-section:first-child { margin-top: 0; }
  .rec-section-name { flex: 1; min-width: 0; }
  .rec-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 12px;
  }
  .rec-section-grid:last-of-type { margin-bottom: 0; }
  @container (min-width: 480px) {
    .rec-section-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @container (min-width: 720px) {
    .rec-section-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .rec-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  }
  .rec-card:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
  }
  .rec-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold) inset, 0 4px 16px rgba(176, 132, 64, 0.18);
  }
  .rec-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: rgba(176, 132, 64, 0.08);
  }
  .rec-card-image.failed { display: none; }
  .rec-card-image.placeholder {
    background: linear-gradient(135deg, rgba(176, 132, 64, 0.22) 0%, rgba(176, 132, 64, 0.06) 100%);
    height: 100px;
  }
  .rec-card-body { padding: 14px 16px; }
  .rec-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
  }
  .rec-card-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .rec-card-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.7);
    flex: none;
    margin-top: 2px;
    position: relative;
  }
  .rec-card.selected .rec-card-check {
    background: var(--gold);
    border-color: var(--gold);
  }
  .rec-card.selected .rec-card-check::after {
    content: "✓";
    color: var(--paper);
    font-size: 13px;
    line-height: 1;
    position: absolute;
    top: 1px;
    left: 3px;
    font-weight: 700;
  }
  .rec-card-summary {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
    margin-bottom: 10px;
  }
  .rec-card-actions {
    display: flex;
    gap: 16px;
  }
  .rec-link {
    color: var(--gold-deep);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .rec-link:hover {
    color: var(--ink);
    text-decoration: underline;
  }
  .rec-alt-btn {
    /* Sits below all section grids inside .rec-block. */
    width: 100%;
    margin-top: 16px;
    padding: 11px;
    background: transparent;
    border: 1px dashed var(--gold);
    color: var(--gold-deep);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s, border-style 0.15s;
  }
  .rec-alt-btn:hover {
    background: var(--gold);
    color: var(--paper);
    border-style: solid;
  }
  .rec-alt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ============ Side-panel shortlist (selected recs summary) ============ */
  .shortlist {
    margin-top: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    border: 1px solid var(--line);
  }
  .shortlist h4 {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 10px;
    font-weight: 700;
  }
  .shortlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--line);
  }
  .shortlist-item:last-child { border-bottom: none; }
  .shortlist-name {
    flex: 1;
    line-height: 1.35;
  }
  .shortlist-remove {
    background: transparent;
    border: none;
    color: var(--ink);
    opacity: 0.35;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 2px;
  }
  .shortlist-remove:hover {
    opacity: 1;
    color: var(--rust);
  }

  /* Odysseus search-link system message */
  .msg.odysseus-search .msg-bubble {
    border-style: solid;
    border-left-width: 3px;
  }
  .odysseus-link {
    color: var(--gold-deep);
    font-style: normal;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
  }
  .odysseus-link:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  /* ============ FINAL BRIEF MODAL ============ */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 22, 17, 0.7);
    z-index: 100;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }
  .modal.show { display: flex; }
  .modal-content {
    background: var(--paper);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px;
    border-radius: 6px;
    box-shadow: var(--shadow);
    position: relative;
  }
  .modal-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    margin-bottom: 8px;
  }
  .modal-content pre {
    background: var(--ink);
    color: #d4c8a8;
    padding: 20px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    margin-top: 20px;
    line-height: 1.6;
  }
  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ink);
  }

  /* ============ CONTACT FORM (pre-submit modal state) ============ */
  .contact-form { margin-top: 24px; }
  .contact-field { margin-bottom: 16px; }
  .contact-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ink);
    opacity: 0.65;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .contact-field label .muted {
    opacity: 0.6;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.3px;
    font-size: 11px;
  }
  .contact-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    border-radius: 3px;
    transition: border-color 0.15s;
  }
  .contact-field input:focus {
    outline: none;
    border-color: var(--gold);
  }
  .contact-error {
    background: rgba(168, 68, 42, 0.08);
    border-left: 3px solid var(--rust);
    color: var(--rust);
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .contact-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
  }
  .primary-btn {
    background: var(--ink);
    color: var(--paper);
    border: none;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
  }
  .primary-btn:hover { background: var(--gold-deep); }
  .primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .muted-btn {
    background: transparent;
    border: none;
    color: var(--ink);
    opacity: 0.5;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 18px;
  }
  .muted-btn:hover { opacity: 1; color: var(--gold-deep); }

  @media (max-width: 1100px) {
    .app { grid-template-columns: 1fr; }
    .brief { display: none; }
  }