:root {
      --brown: #3d2e22;
      --gold: #c8a882;
      --cream: #faf8f5;
      --light: #f0ebe4;
      --text: #2d2d2d;
      --muted: #9a8a7a;
      --danger: #c0392b;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { height: 100%; overflow: hidden; }
    body {
      /* position: fixed + inset: 0 empêche iOS Safari de scroller vers l'input focusé */
      position: fixed;
      inset: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--cream);
      color: var(--text);
      display: grid;
      grid-template-rows: auto auto 1fr auto auto;
      overflow: hidden;
    }

    /* ── Header ── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #ece8e2;
      background: var(--cream);
    }
    #brand { color: var(--brown); font-weight: 700; font-size: 0.95rem; }
    #status { color: var(--muted); font-size: 0.72rem; text-align: right; min-width: 80px; }

    /* ── PTT : styles VAD supprimés (remplacé par push-to-talk) ── */

    /* ── Mode widget compact ── */
    body.widget header { padding: 0.45rem 0.85rem; }
    body.widget #brand { font-size: 0.85rem; }
    body.widget #video-panel { height: 260px; aspect-ratio: unset; }
    body.widget .tab { padding: 0.45rem 0.4rem; font-size: 0.75rem; }
    body.widget #conversation { padding: 0.6rem 0.85rem; }
    body.widget footer { padding: 0.55rem 0.85rem 0.65rem; }

    /* ── Mode tabs ── */
    #mode-bar {
      display: flex;
      gap: 0;
      border-bottom: 2px solid #ece8e2;
      background: #fff;
    }
    .tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: 0.65rem 0.5rem;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.15s;
    }
    .tab.active {
      color: var(--brown);
      border-bottom-color: var(--gold);
      font-weight: 700;
    }
    .tab:hover:not(.active) { color: var(--brown); background: var(--light); }

    /* ── Video frame — portrait centré, transition shrink ── */
    #video-frame {
      width: min(88vw, 340px);
      margin: 0.5rem auto;
      border: 2px solid #c8a882;
      border-radius: 16px;
      overflow: hidden;
      align-self: start;
      transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:
        0 0 0 4px #ece8e2,
        0 0 0 6px rgba(200,168,130,0.22),
        0 6px 24px rgba(61,46,34,0.09);
    }
    #video-frame.hidden  { display: none; }
    /* Après l'intro : réduit de ~25% */
    #video-frame.shrunk  { width: min(72vw, 270px); }
    /* Shelf ouvert : réduit davantage pour faire de la place */
    #video-frame.shelf-open { width: min(58vw, 215px); }

    /* Conversation cachée en mode vidéo */
    body.video-active #conversation { display: none; }

    /* En mode vidéo : grille sans 1fr vide — les rangs s'empilent naturellement */
    body.video-active {
      grid-template-rows: auto auto auto auto auto;
    }

    /* ── Video panel — ratio 3/4 portrait ── */
    #video-panel {
      position: relative;
      background: #17120f;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 3 / 4;
    }

    /* Video stream */
    #video {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      background: #17120f;
    }

    /* Dégradé bas uniquement — backdrop de la caption */
    #video-panel::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 40%;
      pointer-events: none;
      z-index: 2;
      background: linear-gradient(
        to top,
        rgba(250,248,245,0.96) 0%,
        rgba(250,248,245,0.45) 55%,
        transparent 100%
      );
    }

    /* ── Caption — overlay bas de la vidéo (tiers inférieur max) ── */
    #video-caption {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 4;
      padding: 1.2rem 0.9rem 0.65rem;
      max-height: 32%;
      overflow-y: auto;
      scrollbar-width: none;
      display: flex;
      align-items: flex-end;
      gap: 0.4rem;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    #video-caption::-webkit-scrollbar { display: none; }
    /* Pendant le thinking : masquer le texte/icon pour éviter le placeholder "est disponible" */
    #video-caption.thinking #caption-icon,
    #video-caption.thinking #caption-text { display: none; }
    /* Repliée pendant la saisie utilisateur */
    #video-caption.collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
      opacity: 0;
    }
    #caption-icon {
      color: var(--gold);
      font-size: 0.68rem;
      flex-shrink: 0;
      margin-bottom: 0.1rem;
    }
    #caption-text {
      font-size: 0.84rem;
      line-height: 1.55;
      color: var(--brown);
      flex: 1;
    }
    #caption-text:empty::before {
      content: 'Hélène est disponible pour vous conseiller, appelez-là !';
      color: var(--muted);
      font-style: italic;
      font-size: 0.8rem;
    }

    /* ── Typing dots — "Hélène réfléchit" ── */
    #caption-typing {
      display: none;
      align-items: center;
      gap: 5px;
      padding: 3px 0 6px;
      flex: 1;
    }
    #caption-typing.visible { display: flex; }
    #caption-typing span {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--brown);
      opacity: 0.35;
      flex-shrink: 0;
      animation: typing-bounce 1.4s ease-in-out infinite;
    }
    #caption-typing span:nth-child(1) { animation-delay: 0s;    }
    #caption-typing span:nth-child(2) { animation-delay: 0.22s; }
    #caption-typing span:nth-child(3) { animation-delay: 0.44s; }
    /* Label texte à côté des dots */
    #caption-typing em {
      font-size: 0.76rem;
      color: var(--muted);
      font-style: italic;
      margin-left: 3px;
    }
    @keyframes typing-bounce {
      0%, 55%, 100% { transform: translateY(0);    opacity: 0.35; }
      28%           { transform: translateY(-6px); opacity: 1;    }
    }

    /* ── Border pulse quand Hélène réfléchit ── */
    #video-frame.thinking {
      animation: frame-pulse 1.8s ease-in-out infinite;
    }
    @keyframes frame-pulse {
      0%, 100% {
        box-shadow:
          0 0 0 4px #ece8e2,
          0 0 0 6px rgba(200,168,130,0.22),
          0 6px 24px rgba(61,46,34,0.09);
      }
      50% {
        box-shadow:
          0 0 0 4px #e8dfd0,
          0 0 0 9px rgba(200,168,130,0.55),
          0 6px 28px rgba(61,46,34,0.14);
      }
    }

    /* ── Pré-appel : photo Hélène ── */
    #video-placeholder {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 0.9rem;
      background: linear-gradient(160deg, #2a1f16 0%, #3d2e22 60%, #1e150e 100%);
      pointer-events: none; padding: 1.5rem; text-align: center;
      z-index: 5;                     /* au-dessus du dégradé ET de la caption */
      transition: opacity 0.6s ease;
    }
    #video-placeholder.fading { opacity: 0; pointer-events: none; }
    #helene-portrait {
      width: 90px; height: 90px;
      border-radius: 50%;
      object-fit: cover; object-position: center top;
      border: 3px solid #c8a882;
      box-shadow: 0 0 0 4px rgba(200,168,130,0.25), 0 4px 20px rgba(0,0,0,0.4);
    }
    #video-placeholder p {
      color: rgba(255,255,255,0.75);
      font-size: 0.8rem; line-height: 1.5; max-width: 200px;
    }
    #video-placeholder strong { color: #c8a882; font-size: 1rem; font-weight: 600; }

    /* Bouton appel vidéo */
    #connection-bar {
      position: absolute;
      left: 0; right: 0; bottom: 0.9rem;
      display: flex; justify-content: center;
      z-index: 6;
    }

    /* Mobile portrait */
    @media (max-width: 480px) {
      #video-frame            { width: min(92vw, 340px); margin: 0.3rem auto; }
      #video-frame.shrunk     { width: min(76vw, 270px); }
      #video-frame.shelf-open { width: min(62vw, 215px); }
      #caption-text           { font-size: 0.81rem; }
    }
    @media (max-width: 360px) {
      #video-frame            { width: 94vw; }
      #video-frame.shrunk     { width: 80vw; }
      #video-frame.shelf-open { width: 66vw; }
    }

    /* Bouton connexion caché après établissement de l'appel */
    #connection-bar.connected {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    #connect-btn {
      border: none; background: var(--gold); color: #fff;
      border-radius: 999px; padding: 0.5rem 0.85rem;
      font-weight: 650; cursor: pointer;
      box-shadow: 0 3px 12px rgba(0,0,0,0.22); font-size: 0.82rem;
    }
    #connect-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    #session-label { display: none; }

    /* ── Conversation ── */
    #conversation {
      min-height: 0; overflow-y: auto;
      padding: 0.85rem 1rem;
      display: flex; flex-direction: column; gap: 0.6rem;
    }
    .bubble {
      padding: 0.65rem 0.85rem; border-radius: 16px;
      font-size: 0.88rem; line-height: 1.45;
      max-width: 86%; white-space: pre-wrap;
    }
    .bubble.user {
      align-self: flex-end; background: var(--brown); color: #fff;
      border-bottom-right-radius: 5px;
    }
    .bubble.helene {
      align-self: flex-start; background: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,0.08);
      border-bottom-left-radius: 5px;
    }
    .bubble.transcript {
      align-self: flex-end; background: #e8f4fd; color: #1a5276;
      font-size: 0.78rem; border-bottom-right-radius: 5px;
      font-style: italic;
    }
    .bubble.error {
      align-self: center; background: #fdecea; color: var(--danger);
      font-size: 0.78rem; max-width: 94%;
    }
    .mode-badge {
      font-size: 0.62rem; opacity: 0.55; margin-top: 2px;
    }
    .bubble.helene a {
      color: var(--brown); font-weight: 600;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .bubble.helene a:hover { color: var(--gold); }
    .bubble.helene p { margin-bottom: 0.4em; }
    .bubble.helene p:last-child { margin-bottom: 0; }
    .bubble.helene ul { padding-left: 1.1em; margin: 0.3em 0; }
    .bubble.helene li { margin-bottom: 0.2em; }

    /* ── Quick replies ── */
    #quick-replies {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 4px 0 8px; align-self: flex-start; max-width: 100%;
    }
    .qr-chip {
      background: #fff; border: 1.5px solid var(--gold);
      color: var(--brown); border-radius: 20px;
      padding: 5px 13px; font-size: 0.78rem;
      cursor: pointer; transition: background 0.18s, color 0.18s;
      white-space: nowrap;
    }
    .qr-chip:hover { background: var(--gold); color: #fff; }

    /* ── Product shelf ── */
    #product-shelf {
      flex-shrink: 0; background: #fff;
      border-top: 1px solid #ece8e2; overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
      max-height: 48px; display: none;
    }
    #product-shelf.open { max-height: 200px; }
    #shelf-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 1rem; height: 48px;
      cursor: pointer; user-select: none;
    }
    #shelf-bar:active { background: var(--light); }
    #shelf-title { font-size: 0.8rem; font-weight: 700; color: var(--brown); }
    #shelf-count {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--gold); color: #fff;
      font-size: 0.62rem; font-weight: 700; margin-left: 6px;
    }
    #shelf-sub { font-size: 0.68rem; color: var(--muted); margin-top: 1px; }
    #shelf-chevron {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--light); display: flex; align-items: center;
      justify-content: center; font-size: 0.68rem; color: var(--brown);
      transition: transform 0.3s ease; flex-shrink: 0;
    }
    #product-shelf.open #shelf-chevron { transform: rotate(180deg); }
    #shelf-cards {
      display: flex; gap: 0.65rem;
      padding: 0 1rem 0.85rem; overflow-x: auto;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #shelf-cards::-webkit-scrollbar { display: none; }
    .product-card {
      display: flex; flex-direction: column; align-items: center;
      gap: 0.35rem; text-decoration: none; flex-shrink: 0; width: 88px;
    }
    .product-card img {
      width: 88px; height: 88px; object-fit: cover;
      border-radius: 12px; background: var(--light);
      box-shadow: 0 2px 8px rgba(0,0,0,0.09);
      transition: transform 0.2s;
    }
    @media (hover: hover) { .product-card:hover img { transform: scale(1.04); } }
    .product-card span {
      font-size: 0.65rem; color: var(--brown);
      text-align: center; line-height: 1.25;
    }
    /* Produits compacts en mode vidéo (space limité) */
    body.video-active .product-card {
      width: 68px;
    }
    body.video-active .product-card img {
      width: 68px; height: 68px;
      border-radius: 10px;
    }
    body.video-active #product-shelf.open { max-height: 160px; }
    body.video-active #shelf-cards { padding-bottom: 0.6rem; }

    /* ── Footer ── */
    footer {
      border-top: 1px solid #ece8e2;
      background: var(--cream);
      padding: 0.7rem 1rem 0.9rem;
      display: flex; gap: 0.4rem; align-items: center;
    }
    #text-input {
      flex: 1; border: 1.5px solid #ddd; border-radius: 22px;
      padding: 0.65rem 0.9rem;
      font-size: 1rem; /* ≥16px — empêche le zoom automatique iOS Safari sur focus */
      outline: none; background: #fff;
    }
    #text-input:focus { border-color: var(--gold); }
    #mic-btn {
      border: none; border-radius: 50%;
      width: 42px; height: 42px;
      background: var(--light); color: var(--brown);
      font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    #mic-btn.recording { background: #c0392b; color: #fff; animation: pulse 1s infinite; }
    #mic-btn.hidden { display: none; }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
    #stop-btn {
      border: none; border-radius: 50%;
      width: 42px; height: 42px;
      background: #c0392b; color: #fff;
      font-size: 1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: opacity 0.15s;
    }
    #stop-btn:hover { opacity: 0.85; }
    #stop-btn.hidden { display: none; }
    #send-btn {
      border: none; border-radius: 22px;
      padding: 0.65rem 1rem;
      background: var(--brown); color: #fff;
      font-weight: 650; cursor: pointer; font-size: 0.88rem;
      flex-shrink: 0;
    }
    #send-btn:disabled { background: #ccc; cursor: not-allowed; }

    /* ── Info banner ── */
    #info-banner {
      font-size: 0.7rem; color: var(--muted);
      text-align: center; padding: 3px 8px;
      background: var(--light);
    }

    /* ── Mode vidéo : footer épuré — PTT centré ─────────────────── */
    body.video-active footer {
      justify-content: center;
      gap: 1.5rem;
      padding: 0.6rem 1rem 1rem;
    }
    body.video-active #text-input,
    body.video-active #send-btn { display: none; }

    /* Micro PTT : grand et doré en mode vidéo */
    body.video-active #mic-btn {
      width: 64px; height: 64px;
      font-size: 1.6rem;
      background: var(--gold);
      color: #fff;
      box-shadow: 0 4px 18px rgba(200,168,130,0.45);
    }
    body.video-active #mic-btn.recording {
      background: var(--danger);
      box-shadow: 0 4px 22px rgba(192,57,43,0.5);
    }
    body.video-active #stop-btn {
      width: 50px; height: 50px;
      font-size: 1.1rem;
    }