/* ============================================================
   LIÈGE INSIDE · Guide IA · Patrimoine liégeois
   guide.css — thème Liège Patrimoine
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:           #0e0c09;
  --surface:      #13110d;
  --surface-2:    #1c1912;
  --border:       #2a2418;
  --border-warm:  #3d3020;
  --ochre:        #c4966a;
  --ochre-dim:    #8a6a44;
  --ochre-faint:  rgba(196,150,106,0.08);
  --ochre-glow:   rgba(196,150,106,0.15);
  --emerald:      #4a7c5e;
  --emerald-dim:  #2d5040;
  --emerald-faint: rgba(74,124,94,0.10);
  --crystal:      #7a9eb5;
  --text-primary: #f0e6d2;
  --text-secondary: #9a8e7a;
  --text-muted:   #5a5246;
  --serif-display: 'Playfair Display', Georgia, serif;
  --serif-body:    'Lora', Georgia, serif;
  --mono:          'JetBrains Mono', monospace;

  /* Zone fiche */
  --fiche-bg:          #171208;
  --fiche-bg-grad:     linear-gradient(160deg, #1e1808 0%, #171208 50%, #0e0c09 100%);
  --fiche-border:      #3a2c14;
  --fiche-tag-bg:      #2a1e0c;
  --fiche-tag-border:  #4a3418;
  --fiche-tag-text:    #b88a50;
  --fiche-tag-val:     #f0ddb8;
  --fiche-section-border: #382a14;
  --fiche-section-h:   #9a7040;
  --fiche-section-p:   #c8b090;
  --fiche-section-em:  #f0e6d2;
  --fiche-statut-text: #d4a850;
  --fiche-statut-bg:   #1e1600;
  --fiche-statut-border: #4a3400;

  /* Zone guide */
  --guide-bg:          #121810;
  --guide-bg-grad:     linear-gradient(160deg, #1a2214 0%, #121810 50%, #0e0c09 100%);
  --guide-border:      #283820;
  --guide-bubble-ai-bg:     #1e2c18;
  --guide-bubble-ai-border: #364e28;
  --guide-bubble-ai-text:   #ddf0c8;
  --guide-bubble-user-bg:   #161e12;
  --guide-bubble-user-border:#263620;
  --guide-bubble-user-text:  #a8c090;
  --guide-label-ai:    #8acc58;
  --guide-label-user:  #526844;
  --guide-accent:      #7acc48;
  --guide-accent-dim:  #507830;
  --guide-dot:         #6acc38;
  --guide-suggestion-bg:     #1e2c18;
  --guide-suggestion-border: #364e28;
  --guide-suggestion-text:   #b0de88;
  --guide-input-bg:    #121810;
  --guide-input-border:#364e28;
  --guide-input-focus: #5a8c30;
  --guide-send-bg:     #364e28;
  --guide-send-hover:  #4a6838;
}

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

html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--serif-body);
  background: var(--bg);
  color: var(--text-primary);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100vw;
}

/* ═══════════════════════════════════════════════════════════
   HEADER — barre du titre de l'œuvre
   ═══════════════════════════════════════════════════════════ */
#header {
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* Filet ochre sous le header */
#header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--ochre-dim) 25%, var(--ochre-dim) 75%, transparent 100%);
  opacity: 0.30;
}

/* Bloc titres */
#header .titles {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Titre de l'œuvre */
#header .titles h1 {
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

/* Musée / lieu */
#header .titles p {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.08em;
}

/* Bouton Guide IA */
#toggle-guide-btn {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--guide-accent);
  background: var(--emerald-faint);
  border: 1px solid var(--emerald-dim);
  padding: 6px 14px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#toggle-guide-btn:hover {
  background: rgba(74,124,94,0.20);
  border-color: var(--emerald);
}
#toggle-guide-btn.active {
  background: rgba(36,56,24,0.85);
  border-color: var(--guide-accent-dim);
  color: #c0e888;
}

/* Point pulsant "live" */
#toggle-guide-btn::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--guide-dot);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(106,204,56,0.50);
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.25;transform:scale(0.8)} }

/* Bouton langue */
#lang-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-warm);
  padding: 5px 11px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
#lang-btn:hover  { border-color: var(--ochre-dim); color: var(--ochre); }
#lang-btn.active { border-color: var(--ochre-dim); color: var(--ochre); }


/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ═══════════════════════════════════════════════════════════ */
#main { flex: 1; display: flex; overflow: hidden; position: relative; min-height: 0; }
#viewer-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#viewer { flex: 1; min-height: 0; overflow: hidden; position: relative; }


/* ═══════════════════════════════════════════════════════════
   BARRE NAV — Précédent / Accueil / Suivant
   ═══════════════════════════════════════════════════════════ */
#nav-bar {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
}

.nav-btn {
  background: none;
  border: 1px solid var(--border-warm);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-btn:hover {
  border-color: var(--ochre-dim);
  color: var(--ochre);
  background: var(--ochre-faint);
}
.nav-btn:disabled { opacity: 0.20; cursor: default; pointer-events: none; }
.nav-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }

#nav-home {
  background: none;
  border: 1px solid var(--border-warm);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
#nav-home:hover {
  border-color: var(--ochre-dim);
  color: var(--ochre);
  background: var(--ochre-faint);
}
#nav-home svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }


/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
#sidebar {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
  transition: margin-right 0.35s cubic-bezier(0.4,0,0.2,1);
}
#sidebar.collapsed { margin-right: -350px; }


/* ── TABS ── */
#tabs {
  display: flex;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.tab {
  flex: 1;
  background: none;
  border: none;
  padding: 15px 12px 13px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  transition: color 0.2s, background 0.2s;
}

/* Zones chromatiques permanentes */
.tab[data-tab="fiche"] {
  background: linear-gradient(170deg, #1e1808 0%, #171208 60%, #0e0c09 100%);
  color: var(--fiche-tag-text);
  border-right: 1px solid var(--border);
}
.tab[data-tab="guide"] {
  background: linear-gradient(170deg, #1a2214 0%, #121810 60%, #0e0c09 100%);
  color: var(--guide-label-ai);
}

.tab[data-tab="fiche"]:hover  { color: var(--ochre); }
.tab[data-tab="guide"]:hover  { color: #c0e888; }
.tab[data-tab="fiche"].active { color: var(--ochre); }
.tab[data-tab="guide"].active { color: #c0e888; }

/* Indicateur actif — barre en bas */
.tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; right: 50%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transition: left 0.3s ease, right 0.3s ease, opacity 0.3s;
}
.tab.active::after { left: 0; right: 0; opacity: 0.55; }

/* Point de notification guide */
.tab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--guide-dot);
  opacity: 0;
  transition: opacity 0.25s;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(106,204,56,0.55);
}
.tab-dot.visible { opacity: 1; animation: pulse 2.5s infinite; }


/* ── TAB CONTENT ── */
#tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.tab-pane {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-warm) transparent;
}
.tab-pane.active { display: flex; }


/* ═══════════════════════════════════════════════════════════
   FICHE — onglet informations sur l'œuvre
   ═══════════════════════════════════════════════════════════ */
#fiche-content {
  background: var(--fiche-bg-grad);
  padding: 22px 20px 26px;
  gap: 14px;
}

/* Titre de l'œuvre (grand, italic) */
.fiche-titre {
  font-family: var(--serif-display);
  font-size: 21px;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.28;
}

/* Artiste et dates */
.fiche-artiste {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--fiche-tag-text);
  margin-top: 5px;
  font-style: normal;
}

/* Tags métadonnées */
.fiche-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.fiche-tag {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--fiche-tag-bg);
  border: 1px solid var(--fiche-tag-border);
  color: var(--fiche-tag-text);
  padding: 4px 10px;
  border-radius: 2px;
  line-height: 1.3;
}
.fiche-tag strong {
  color: var(--fiche-tag-val);
  font-weight: 500;
}

/* Bandeau statut collection */
.fiche-statut {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fiche-statut-text);
  background: var(--fiche-statut-bg);
  border: 1px solid var(--fiche-statut-border);
  padding: 5px 11px;
  border-radius: 2px;
  line-height: 1.5;
}
.fiche-statut::before {
  content: '★';
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Sections — L'ARTISTE, LE SUJET, etc. */
.fiche-section {
  border-top: 1px solid var(--fiche-section-border);
  padding-top: 12px;
}

.fiche-section h3 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--fiche-section-h);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche-section h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fiche-section-border);
  opacity: 0.5;
}

.fiche-section p {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--fiche-section-p);
  line-height: 1.72;
}
.fiche-section p em {
  color: var(--fiche-section-em);
  font-style: normal;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   GUIDE IA — onglet conversation
   ═══════════════════════════════════════════════════════════ */
#messages {
  background: var(--guide-bg-grad);
  padding: 16px 16px 18px;
  gap: 13px;
}

.msg-ai, .msg-user { display: flex; flex-direction: column; gap: 4px; }

.msg-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.msg-ai   .msg-label { color: var(--guide-label-ai); }
.msg-user .msg-label { color: var(--guide-label-user); text-align: right; }

.msg-bubble {
  font-family: var(--serif-body);
  font-size: 13px;
  line-height: 1.68;
  padding: 10px 13px;
}

.msg-ai .msg-bubble {
  background: var(--guide-bubble-ai-bg);
  color: var(--guide-bubble-ai-text);
  border: 1px solid var(--guide-bubble-ai-border);
  border-radius: 2px 8px 8px 8px;
}

.msg-user .msg-bubble {
  background: var(--guide-bubble-user-bg);
  color: var(--guide-bubble-user-text);
  border: 1px solid var(--guide-bubble-user-border);
  border-radius: 8px 2px 8px 8px;
  text-align: right;
}

/* Typing animation */
.typing-dots { display: flex; gap: 4px; padding: 2px 0; align-items: center; }
.typing-dots span {
  width: 5px; height: 5px;
  background: var(--guide-accent);
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:0.22} 30%{transform:translateY(-5px);opacity:1} }


/* ═══════════════════════════════════════════════════════════
   ZONE GUIDE PERMANENTE — welcome + suggestions + input
   ═══════════════════════════════════════════════════════════ */

/* Message d'accueil du guide */
#welcome-message {
  padding: 14px 16px 10px;
  border-top: 1px solid var(--guide-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  background: var(--guide-bg);
}

.welcome-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--guide-label-ai);
}

.welcome-text {
  font-family: var(--serif-body);
  font-size: 13px;
  line-height: 1.68;
  padding: 10px 13px;
  background: var(--guide-bubble-ai-bg);
  color: var(--guide-bubble-ai-text);
  border: 1px solid var(--guide-bubble-ai-border);
  border-radius: 2px 8px 8px 8px;
}
.welcome-text strong { color: var(--text-primary); font-weight: 600; }


/* Boutons de suggestions */
#suggestions {
  padding: 10px 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  background: var(--guide-bg);
}

.suggestion-btn {
  background: var(--guide-suggestion-bg);
  border: 1px solid var(--guide-suggestion-border);
  color: var(--guide-suggestion-text);
  font-family: var(--serif-body);
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
}
.suggestion-btn:hover {
  background: #283c1c;
  border-color: #4a6830;
  color: #e0ffb8;
}


/* Zone de saisie */
#input-area {
  padding: 8px 12px 12px;
  background: var(--guide-bg);
  border-top: 1px solid var(--guide-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

#user-input {
  flex: 1;
  background: #0e120a;
  border: 1px solid var(--guide-input-border);
  border-radius: 4px;
  padding: 9px 13px;
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--text-primary);
  resize: none;
  min-height: 38px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#user-input:focus {
  border-color: var(--guide-input-focus);
  box-shadow: 0 0 0 2px rgba(90,140,48,0.18);
}
#user-input::placeholder { color: var(--guide-label-user); }

#send-btn {
  width: 38px;
  height: 38px;
  background: var(--guide-send-bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
#send-btn:hover    { background: var(--guide-send-hover); }
#send-btn:disabled { background: #141a10; cursor: default; }
#send-btn svg      { fill: #c0e898; }
#send-btn:disabled svg { fill: var(--border-warm); }


/* ═══════════════════════════════════════════════════════════
   MOBILE ≤ 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #header {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  #header .titles {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  #header .titles h1 {
    font-size: 13px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #header .titles p { display: none; }
  #toggle-guide-btn { padding: 5px 10px; font-size: 9px; }
  #lang-btn { padding: 4px 8px; }
  #main { flex-direction: column; overflow: hidden; }
  #viewer-col { flex: 1; min-height: 0; overflow: hidden; }
  #viewer { overflow: hidden; max-width: 100vw; }
  #viewer > *, .pnlm-container { max-width: 100vw !important; }
  #sidebar {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100vw;
    margin-right: 0 !important;
    border-left: none;
    z-index: 50;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  #sidebar.open { transform: translateY(0); }
  #sidebar.collapsed { margin-right: 0 !important; }
  /* welcome + suggestions déplacés dans #messages via JS — cacher leur position originale */
  #sidebar > #welcome-message,
  #sidebar > #suggestions { display: none; }
  /* Dans #messages, les afficher normalement */
  #messages > #welcome-message { display: flex; flex-direction: column; gap: 3px; }
  #messages > #suggestions { display: flex; flex-wrap: wrap; padding: 4px 0 8px; }
  #messages { padding: 10px 12px; gap: 10px; }
  #welcome-message { padding: 6px 12px 4px; gap: 3px; }
  .welcome-label { font-size: 8px; }
  .welcome-text { padding: 6px 10px; font-size: 12px; line-height: 1.55; }
  #suggestions { padding: 4px 0 4px; flex-wrap: wrap; }
  .suggestion-btn { font-size: 11px; padding: 4px 8px; }
  #input-area { padding: 6px 10px 8px; gap: 6px; }
  #user-input { font-size: 16px; padding: 7px 10px; min-height: 34px; }
  #send-btn { width: 34px; height: 34px; }
  .nav-btn span { display: none; }
  #nav-bar { padding: 0 12px; gap: 6px; }
}