/* ============================================================
   GUICHET DE L'ENTREPRENEUR — feuille de style de l'application

   Extrait tel quel du bloc <style> jusqu'alors inline dans app.py.
   Aucune règle n'a été ajoutée, retirée ni modifiée lors du
   déplacement : le rendu est identique.

   Les composants mode_selector.py et voice_dictation.py conservent
   leur CSS embarqué, car ils sont autonomes et réutilisables.
   ============================================================ */
/* ============================================================
           GUICHET DE L'ENTREPRENEUR
           Ajout : sidebar rétractable + layout horizontal
        ============================================================ */

        /* ── BOUTONS EXPORT ─────────────────────────────────────────── */
        .export-bar {
          display: flex;
          gap: 6px;
          margin-left: auto;
          flex-shrink: 0;
        }
        .export-btn {
          background-color: transparent;
          border: 1px solid #1a5276;
          border-radius: 6px;
          color: #1a5276;
          font-size: 11px;
          font-weight: 600;
          padding: 4px 8px;
          cursor: pointer;
          transition: background-color 0.15s, color 0.15s;
          text-decoration: none;
        }
        .export-btn:hover {
          background-color: #1a5276;
          color: #ffffff;
        }

        /* ── BOUTON ARRÊTER (visible uniquement pendant la génération) ── */
        .gc-stop-btn {
          margin-left: auto;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          background-color: #ffffff;
          border: 1px solid #c0392b;
          border-radius: 8px;
          color: #c0392b;
          font-size: 12px;
          font-weight: 600;
          line-height: 1;
          padding: 5px 10px;
          cursor: pointer;
          white-space: nowrap;
          transition: background-color 0.15s, color 0.15s;
        }
        /* L'attribut `hidden` doit l'emporter sur `display: inline-flex`.
   Une règle de classe simple ne suffit pas : la déclaration `display` de
   .gc-stop-btn prime sur le `[hidden] { display: none }` de la feuille du
   navigateur. Ce sélecteur, plus spécifique, rétablit le masquage. */
.gc-stop-btn[hidden] { display: none; }
.gc-stop-btn:hover  { background-color: #c0392b; color: #ffffff; }
        .gc-stop-btn:disabled { opacity: 0.5; cursor: default; }

        /* ── ACTIONS SOUS UNE RÉPONSE (mode + copie) ─────────────────── */
        /* Discrètes par défaut, révélées au survol du message.          */
        .gc-msg-actions {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-top: 6px;
          opacity: 0;
          transition: opacity 0.15s;
        }
        .shiny-chat-message:hover .gc-msg-actions,
        .gc-msg-actions:focus-within { opacity: 1; }

        /* `shiny-chat-message` est une grille « avatar | contenu » : sans
           cette ligne, la barre d'actions retomberait sous l'avatar. */
        .shiny-chat-message > .gc-msg-actions { grid-column: 2; }

        .gc-msg-mode {
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          color: #95a5a6;
        }
        .gc-copy-btn {
          background: transparent;
          border: none;
          padding: 0;
          font-size: 11px;
          font-weight: 600;
          color: #7f8c8d;
          cursor: pointer;
          transition: color 0.15s;
        }
        .gc-copy-btn:hover { color: #1a5276; }
        .gc-copy-btn.copie { color: #1e8449; }

        /* Sur écran tactile, pas de survol : les actions restent visibles. */
        @media (hover: none) {
          .gc-msg-actions { opacity: 1; }
        }

        /* ── AVATAR BOT : le drapeau à la place du robot ─────────────── */

        /* 1. L'image elle-même est fournie par `icon_assistant=` dans
              app.py. Shinychat l'insère dans `.message-icon`, qui porte
              déjà `border-radius: 50%` et `overflow: clip` ; il reste à
              annuler son `object-fit: contain` par défaut, qui laisserait
              des bandes blanches autour du drapeau. */
        .message-icon > .gc-bot-avatar {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

        /* 2. Cerclage aux couleurs de l'application. */
        .shiny-chat-message .message-icon {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px;
            border: 2px solid #1a5276 !important;
            flex-shrink: 0;
        }

                /* ── DRAPEAU INLINE DANS LE TITRE ────────────────────────────── */
        .header-flag-inline {
            width: 22px;
            height: auto;
            border-radius: 2px;
            vertical-align: middle;
            margin-left: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
            display: inline-block;
        }

        /* L'indicateur de frappe maison (.typing-indicator, .typing-dots,
           .dot, @keyframes bounce) vivait ici. Supprimé avec son balisage :
           shinychat anime déjà des points à la place de l'avatar tant que la
           réponse est vide, et au bon endroit dans le fil. */

        *, *::before, *::after { box-sizing: border-box; }

        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          font-size: 15px;
          color: #2c3e50;
          background-color: #f4f6f8;
        }

        .app-root {
          display: flex;
          flex-direction: column;
          height: 100dvh;
          overflow: hidden;
          padding: 0 !important;
          margin: 0 !important;
        }

        /* ── HEADER ──────────────────────────────────────────────────── */
        .app-header {
          flex-shrink: 0;
          background-color: #ffffff;
          border-bottom: 2px solid #1a5276;
          padding: 10px 24px;
          z-index: 100;
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .sidebar-toggle-btn {
          flex-shrink: 0;
          background: none;
          border: 1px solid #1a5276;
          border-radius: 6px;
          padding: 5px 9px;
          cursor: pointer;
          color: #1a5276;
          font-size: 16px;
          line-height: 1;
          transition: background-color 0.15s;
        }
        .sidebar-toggle-btn:hover { background-color: #eaf0f6; }

        .header-inner {
          flex: 1;
          text-align: center;
        }
        .header-title {
          font-size: 18px;
          font-weight: 700;
          color: #1a5276;
          margin: 0;
          line-height: 1.3;
          letter-spacing: 0.3px;
        }
        .header-country {
          font-weight: 400;
          color: #2e6da4;
        }
        .header-subtitle {
          font-size: 12px;
          color: #7f8c8d;
          font-style: italic;
          margin: 2px 0 0 0;
        }

        /* ── CORPS PRINCIPAL ─────────────────────────────────────────── */
        .main-body {
          display: flex;
          flex-direction: row;
          flex: 1 1 0;
          min-height: 0;
          overflow: hidden;
        }

        /* ── SIDEBAR ─────────────────────────────────────────────────── */
        .sidebar {
          flex-shrink: 0;
          width: 280px;
          background-color: #ffffff;
          border-right: 1px solid #dde1e7;
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          padding: 16px 14px;
          gap: 16px;
          transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
        }
        .sidebar.collapsed {
          width: 0;
          padding: 0;
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
        }
        .sidebar-section-title {
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          color: #95a5a6;
          margin: 0 0 6px 0;
        }
        .sidebar label {
          font-size: 12px;
          font-weight: 600;
          color: #4a5568;
          margin-bottom: 4px;
          display: block;
        }
        .filter-hint {
          font-size: 11px;
          color: #95a5a6;
          line-height: 1.4;
          margin: 0;
          padding: 8px 10px;
          background-color: #f8f9fa;
          border-radius: 6px;
          border-left: 3px solid #1a5276;
        }

        /* ── ZONE CHAT ───────────────────────────────────────────────── */
        .chat-column {
          flex: 1 1 0;
          min-width: 0;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: #f4f6f8;
        }
        .chat-messages-wrapper {
          flex: 1 1 0;
          min-height: 0;
          overflow: hidden;
          padding: 0 12px;
        }
        .shiny-chat-container {
          height: 100% !important;
          max-height: none !important;
          background: transparent;
        }

        /* Bulles utilisateur.
           L'élément réellement rendu par shinychat est `shiny-user-message` ;
           `.shiny-chat-message.user-message` ne correspondait à rien.
           `!important` sur les propriétés que shinychat pose lui-même : sa
           feuille est injectée en dépendance et passe après app.css. */
        .shiny-chat-user-message,
        .chat-message.user {
          background-color: #d6eaf8 !important;
          color: #1a3a52;
          border-radius: 16px 16px 4px 16px !important;
          padding: 10px 14px !important;
          margin: 6px 0 6px auto;
          max-width: 75%;
          box-shadow: 0 1px 3px rgba(0,0,0,0.08);
          font-size: 14px;
          line-height: 1.5;
        }
        /* Bulles assistant.
           `shiny-chat-message` est une grille « avatar + contenu » : la bulle
           est le contenu, pas l'élément entier, sinon le fond blanc engloberait
           aussi le drapeau. */
        .shiny-chat-message > .shiny-chat-message-content,
        .chat-message.assistant {
          display: block;
          align-self: start !important;
          background-color: #ffffff;
          color: #2c3e50;
          border-radius: 16px 16px 16px 4px;
          padding: 10px 14px;
          margin: 6px auto 6px 0;
          max-width: 80%;
          box-shadow: 0 1px 4px rgba(0,0,0,0.07);
          font-size: 14px;
          line-height: 1.6;
          border-left: 3px solid #1a5276;
        }

        /* Input chat */
        .shiny-chat-input-container,
        .chat-input-container {
          flex-shrink: 0;
          background-color: #ffffff;
          border-top: 1px solid #dde1e7;
          padding: 10px 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .shiny-chat-input-container textarea,
        .chat-input-container textarea {
          border: 1px solid #b2bec3;
          border-radius: 8px;
          padding: 8px 12px;
          font-size: 14px;
          resize: none;
          flex: 1;
          background: #f9fbfc;
          transition: border-color 0.2s;
        }
        .shiny-chat-input-container textarea:focus,
        .chat-input-container textarea:focus {
          outline: none;
          border-color: #1a5276;
          background: #ffffff;
        }
        .shiny-chat-input-container button,
        .chat-input-container button {
          background-color: #1a5276;
          color: #ffffff;
          border: none;
          border-radius: 8px;
          padding: 8px 16px;
          font-size: 14px;
          cursor: pointer;
          flex-shrink: 0;
          transition: background-color 0.2s; 
        }
        .shiny-chat-input-container button:hover,
        .chat-input-container button:hover { background-color: #154360; }


        /* ── BARRE D'OUTILS DU CHAT (mode + arrêter) ─────────────────── */
        /* Rangée stable, HORS de la zone de messages scrollable : le
           sélecteur de mode et le bouton « Arrêter » restent visibles
           pendant toute la génération, quel que soit le défilement.      */
        .gc-toolbar {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 8px;
          min-height: 38px;
          padding: 4px 20px;
          background-color: #ffffff;
          border-top: 1px solid #dde1e7;
        }
        /* La barre de mode occupe toute la largeur de la rangée : son
           bouton reste à gauche, le bouton « Arrêter » (margin-left:auto)
           part à droite. */
        .gc-toolbar .gc-mode-bar {
          flex: 1 1 auto;
          padding: 0;
        }

        /* ── BARRE DE NOTATION ───────────────────────────────────────── */
        .rating-bar {
          flex-shrink: 0;
          background-color: #ffffff;
          border-top: 1px solid #dde1e7;
          padding: 6px 20px;
        }
        .rating-inner {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }
        .rating-label {
          font-size: 12px;
          font-weight: 600;
          color: #4a5568;
          white-space: nowrap;
        }
        .rating-inner .shiny-input-container { margin: 0; }
        .rating-inner .shiny-options-group { display: flex; gap: 6px; flex-wrap: wrap; }
        .rating-inner .radio-inline { margin: 0; font-size: 13px; }
        
        .sidebar-close-btn { display: none; }
        .sidebar-overlay   { display: none; }
        
        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        /* ── RESPONSIVE ─────────────────────────────────────────────────
           Le `/` ouvrant de ce commentaire manquait : le navigateur lisait
           donc tout le bloc `@media` qui suit comme le corps d'une règle au
           sélecteur invalide, et le jetait. Toute la mise en page mobile
           était inerte. */
        @media (max-width: 768px) {
          .app-header {
            padding: 10px 12px;
            gap: 8px;
          }
          .header-inner {
            min-width: 0;           /* ← autorise le rétrécissement */
            overflow: hidden;
          }
          .header-title {
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .header-country { display: none; }
          .header-subtitle { display: none; }

          .sidebar {
            position: absolute;
            top: 0; left: 0;
            height: 100%;
            z-index: 200;
            box-shadow: 4px 0 12px rgba(0,0,0,0.12);
          }
          /* Bouton fermer visible uniquement sur mobile */
          .sidebar-close-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: flex-end;
            background: none;
            border: 1px solid #1a5276;
            border-radius: 6px;
            padding: 5px 10px;
            cursor: pointer;
            color: #1a5276;
            font-size: 14px;
            margin-bottom: 10px;
            gap: 4px;
          }
          .sidebar-close-btn:hover { background-color: #eaf0f6; }

          /* Barre d'outils et notation resserrées (auparavant dans un
             `@media` imbriqué redondant, à la même largeur). */
          .gc-toolbar { padding: 3px 10px; min-height: 34px; }
          .rating-bar { padding: 4px 10px; }
          .rating-label { font-size: 11px; }

          /* Bulles plus larges sur petit écran (repris de styles.css). */
          .shiny-chat-user-message { max-width: 88%; }
          .shiny-chat-message > .shiny-chat-message-content { max-width: 92%; }

          /* Overlay sombre */
          .sidebar-overlay {
            display: block;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.35);
            z-index: 150;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
          }
          .sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
          }
        }

        /* ── RESPONSIVE — très petit écran ───────────────────────────────
           Repris de styles.css, qui n'était chargé par aucune page. Seules
           les règles qui ajoutent quelque chose au palier 768px sont
           conservées : on récupère de la largeur utile de texte. */
        @media (max-width: 480px) {
          .chat-messages-wrapper { padding: 0 6px; }
          .rating-bar { padding: 5px 12px; }
          .shiny-chat-input-container button,
          .chat-input-container button {
            padding: 8px 10px;
            font-size: 13px;
          }
        }