/* ══ Variables & Reset ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0e0e0f; --surface: #1c1c21; --border: #32323a;
  --green: #c8f060; --blue: #60c8f0; --orange: #f0a060;
  --purple: #c060f0; --red: #f06060; --sage: #60f0a0;
  --text: #e8e8e4; --muted: #6b6b72;
}

body { background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px; min-height: 100vh; }

@keyframes rise { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink { 0%,60%,100%{opacity:1} 30%{opacity:.2} }
@keyframes flash { 0%{background:#1a2a0a} 100%{background:transparent} }
@keyframes spin { to { transform: rotate(360deg); } }

.btn { display:inline-flex; align-items:center; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 6px 14px; border-radius: 4px; font-size: 11px; cursor: pointer; font-family: 'DM Mono', monospace; transition: background .15s, color .15s, border-color .15s; white-space:nowrap; }
.btn:hover { border-color: var(--text); color: var(--text); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-search { border-color: var(--green); color: var(--green); }
.btn-search:hover { background: var(--green); color: var(--bg); }
.new-trip-btn { background: transparent; border: 1px solid var(--green); color: var(--green); padding: 5px 14px; border-radius: 3px; font-size: 11px; cursor: pointer; font-family: 'DM Mono', monospace; transition: background .15s, color .15s; flex-shrink: 0; }
.new-trip-btn:hover { background: var(--green); color: var(--bg); }

.loader { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 5px; }

/* ══ PHASE 1 — Chat ══ */

/* ── État initial : tout centré ── */
#phase-chat {
  max-width: 620px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}

/* Spacer qui pousse le groupe hero+champ vers le centre */
#phase-spacer-top    { flex: 1; }
#phase-spacer-bottom { flex: 1.2; }

.chat-hero { text-align: center; margin-bottom: 24px; }
.chat-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin-bottom: 8px; color: var(--text); }
.chat-title em { font-style: italic; color: var(--green); }
.chat-title .no-plane { color: var(--orange); }
.chat-tagline { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(1rem, 3vw, 1.3rem); color: var(--muted); line-height: 1.3; }

.input-bar { padding: 0 0 20px; }

/* ── État avec messages : champ en bas ── */
#phase-chat.has-messages #phase-spacer-top    { display: none; }
#phase-chat.has-messages #phase-spacer-bottom { display: none; }
#phase-chat.has-messages { justify-content: flex-start; padding-top: 0; }
#phase-chat.has-messages .chat-hero { margin-bottom: 12px; padding-top: 20px; }
#phase-chat.has-messages .chat-title { font-size: 1rem; }
#phase-chat.has-messages .chat-tagline { display: none; }
#phase-chat.has-messages .messages { flex: 1; overflow-y: auto; padding-bottom: 8px; }
#phase-chat.has-messages .input-bar { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 20px; }
.messages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.msg { display: flex; flex-direction: column; gap: 4px; animation: rise 0.22s ease both; }
.msg-user { align-items: flex-end; }
.msg-ai   { align-items: flex-start; }
.msg-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 0 3px; }
.bubble { max-width: 84%; padding: 10px 14px; font-size: 12.5px; line-height: 1.6; border: 1px solid var(--border); }
.bubble-user { background: #1e1e22; border-color: #3a3a42; border-radius: 6px 6px 2px 6px; }
.bubble-ai   { background: var(--surface); border-radius: 6px 6px 6px 2px; }
.bubble-typing { display: flex; align-items: center; gap: 5px; padding: 13px 16px; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: blink 1.1s infinite; }
.dot:nth-child(2){animation-delay:.18s} .dot:nth-child(3){animation-delay:.36s}
.tags-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; animation: rise 0.28s ease both; }
.ctx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s; }
.ctx-tag:hover { border-color: var(--green); color: var(--green); }
.inline-widget { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin-bottom: 12px; animation: rise 0.2s ease both; }
.widget-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.widget-row { display: flex; gap: 10px; }
.widget-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.widget-field small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.widget-field input, .widget-field select { padding: 6px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text); outline: none; width: 100%; transition: border-color .15s; }
.widget-field input:focus, .widget-field select:focus { border-color: var(--green); }
.widget-confirm { align-self: flex-end; padding: 6px 14px; background: transparent; border: 1px solid var(--green); color: var(--green); border-radius: 3px; font-family: 'DM Mono', monospace; font-size: 11px; cursor: pointer; transition: background .15s, color .15s; }
.widget-confirm:hover { background: var(--green); color: var(--bg); }
.input-zone { display: flex; gap: 8px; align-items: flex-end; margin-top: auto; padding-top: 8px; }
.input-zone textarea { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text); padding: 10px 12px; resize: none; outline: none; line-height: 1.5; max-height: 120px; overflow-y: auto; transition: border-color .15s; }
.input-zone textarea:focus { border-color: var(--green); }
.input-zone textarea::placeholder { color: var(--muted); }
.send-btn { width: 38px; height: 38px; background: transparent; border: 1px solid var(--green); color: var(--green); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 16px; transition: background .15s, color .15s; }
.send-btn:hover { background: var(--green); color: var(--bg); }
.input-hint { text-align: center; font-size: 10px; color: var(--muted); margin-top: 8px; letter-spacing: .05em; }