/* =============================================================================
   Gamma — messagerie des forces de l'ordre. Mobile d'abord ; sur ordinateur, une
   colonne centrée de 760 px. Pétrole #0b3b5c, sarcelle #14b8a6.
   ============================================================================= */
:root { --g-petrole: #0b3b5c; --g-sarcelle: #14b8a6; --g-fond: #e9eef2; --g-texte: #1f2937; --g-gris: #6b7280; --g-ligne: #e5e7eb;
        --g-moi: #d7f3ee; --g-autre: #ffffff; }
html, body { margin: 0; height: 100%; background: #cfd8de; font-family: Roboto, Helvetica, Arial, sans-serif; color: var(--g-texte); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
.material-symbols-outlined { font-size: 22px; vertical-align: middle; }
.material-symbols-outlined.petit { font-size: 16px; }

.g-chargement { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--g-petrole); color: #fff;
                font-size: 34px; font-weight: 800; letter-spacing: 1px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #c8102e; color: #fff; padding: 10px 14px; }
#blazor-error-ui a { color: #fff; margin-left: 10px; }

.g-app { max-width: 760px; margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #fff;
         position: relative; box-shadow: 0 0 24px rgba(0,0,0,.12); }
.g-hors-ligne { background: #b45309; color: #fff; font-size: 12px; text-align: center; padding: 3px; }

/* Barre du haut */
.g-barre { display: flex; align-items: center; gap: 8px; background: var(--g-petrole); color: #fff; padding: 10px;
           padding-top: calc(10px + env(safe-area-inset-top, 0px)); min-height: 56px; }
.g-barre-titre { flex: 1; font-size: 19px; font-weight: 700; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-barre-titre.cliquable { cursor: pointer; font-size: 16px; }
.g-barre-sous { font-size: 12px; font-weight: 400; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.g-icone { background: none; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: inline-flex;
           align-items: center; justify-content: center; flex: 0 0 40px; }
.g-icone:hover { background: rgba(255,255,255,.12); }
.g-icone.sombre { color: var(--g-petrole); }
.g-icone.sombre:hover { background: rgba(11,59,92,.08); }
.g-icone:disabled { opacity: .4; }

/* Recherche */
.g-recherche { display: flex; align-items: center; gap: 8px; margin: 8px 10px; padding: 0 12px; background: #f1f4f6; border-radius: 20px; color: var(--g-gris); }
.g-recherche input { flex: 1; border: 0; background: transparent; padding: 10px 0; font-size: 15px; outline: none; }

/* Listes */
.g-liste { flex: 1; overflow-y: auto; }
.g-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 14px; width: 100%; background: #fff; border: 0; text-align: left;
           cursor: pointer; font: inherit; color: inherit; }
.g-ligne:hover { background: #f5f7f9; }
.g-action b { color: var(--g-petrole); }
.g-avatar { position: relative; flex: 0 0 48px; height: 48px; border-radius: 50%; color: #fff; font-weight: 700; display: flex;
            align-items: center; justify-content: center; font-size: 16px; }
.g-avatar.petit { flex-basis: 38px; height: 38px; font-size: 14px; }
.g-pastille { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.g-ligne-corps { flex: 1; min-width: 0; border-bottom: 1px solid var(--g-ligne); padding-bottom: 10px; }
.g-ligne-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-ligne-haut b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ligne-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.g-apercu { color: var(--g-gris); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-heure { color: var(--g-gris); font-size: 12px; flex: 0 0 auto; }
.g-heure-nonlu { color: var(--g-sarcelle); font-weight: 700; }
.g-compteur { background: var(--g-sarcelle); color: #fff; border-radius: 12px; min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px;
              font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.g-section { padding: 10px 14px 4px; font-size: 13px; color: var(--g-sarcelle); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.g-coche { color: var(--g-sarcelle); }
.g-etiquette { font-size: 11px; color: var(--g-sarcelle); border: 1px solid var(--g-sarcelle); border-radius: 6px; padding: 0 5px; }
.g-vide { text-align: center; color: var(--g-gris); padding: 48px 24px; line-height: 1.5; }
.g-groupe-titre { padding: 4px 14px 8px; }

/* Bouton flottant */
.g-fab { position: absolute; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 16px;
         border: 0; background: var(--g-sarcelle); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); cursor: pointer; display: flex;
         align-items: center; justify-content: center; }
.g-fab .material-symbols-outlined { font-size: 26px; }

/* Fil de discussion */
.g-fil { flex: 1; overflow-y: auto; padding: 10px 8px 6px; background: var(--g-fond);
         background-image: radial-gradient(rgba(11,59,92,.05) 1px, transparent 1px); background-size: 18px 18px; }
.g-plus { display: block; margin: 4px auto 10px; border: 0; background: #fff; color: var(--g-petrole); border-radius: 14px; padding: 6px 14px;
          font-size: 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.g-jour, .g-systeme { text-align: center; margin: 10px 0; }
.g-jour span { background: #fff; color: var(--g-gris); font-size: 12px; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.g-systeme span { background: #fff8e1; color: #6b5a1e; font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.g-bulle-ligne { display: flex; margin: 2px 0; }
.g-bulle-ligne.moi { justify-content: flex-end; }
.g-bulle { max-width: 78%; background: var(--g-autre); border-radius: 10px; padding: 6px 9px 4px; box-shadow: 0 1px 1px rgba(0,0,0,.1);
           position: relative; overflow-wrap: anywhere; }
.g-bulle.moi { background: var(--g-moi); }
.g-bulle.supprime { color: var(--g-gris); font-size: 14px; }
.g-auteur { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.g-texte { font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.g-meta { font-size: 11px; color: var(--g-gris); text-align: right; margin-top: 2px; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.g-coches { font-size: 16px; color: var(--g-gris); }
.g-coches.lu { color: #0ea5e9; }
.g-photo { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; margin-bottom: 2px; }
.g-position { display: flex; gap: 8px; align-items: center; background: rgba(11,59,92,.06); border-radius: 8px; padding: 8px 10px; }
.g-position .material-symbols-outlined { color: #c8102e; font-size: 30px; }
.g-position small { color: var(--g-gris); }
.g-supprimer { display: block; margin-top: 6px; width: 100%; border: 0; border-radius: 8px; background: #fde2e4; color: #c8102e; padding: 6px; cursor: pointer; font-size: 13px; }
.g-saisie { font-size: 13px; color: var(--g-sarcelle); font-style: italic; padding: 4px 10px; }

/* Barre de saisie */
.g-pied { display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
          background: #f0f2f5; border-top: 1px solid var(--g-ligne); }
.g-pied label.g-icone { cursor: pointer; }
.g-saisie-texte { flex: 1; resize: none; border: 0; border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 15px; max-height: 120px;
                  outline: none; background: #fff; }
.g-envoyer { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 0; background: var(--g-sarcelle); color: #fff; cursor: pointer;
             display: flex; align-items: center; justify-content: center; }
.g-envoyer:disabled { background: #9ca3af; }

/* Infos de la discussion */
.g-infos { flex: 1; overflow-y: auto; background: #fff; padding-bottom: 20px; }

/* Connexion */
.g-ecran-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
                     background: linear-gradient(150deg, #072a42 0%, #0b3b5c 55%, #0f766e 120%); }
.g-carte-connexion { width: min(400px, 100%); background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.g-carte-connexion h1 { text-align: center; margin: 8px 0 0; color: var(--g-petrole); font-size: 28px; }
.g-logo { display: block; width: 72px; height: 72px; margin: 0 auto; border-radius: 18px; }
.g-sous { text-align: center; color: var(--g-gris); margin: 4px 0 20px; }
.g-carte-connexion label { display: block; font-size: 13px; color: var(--g-gris); margin: 12px 0 4px; }
.g-champ { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 15px; outline: none; }
.g-champ:focus { border-color: var(--g-sarcelle); box-shadow: 0 0 0 3px rgba(20,184,166,.18); }
.g-bouton { display: block; width: 100%; margin-top: 20px; border: 0; border-radius: 10px; background: var(--g-petrole); color: #fff;
            padding: 13px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.g-bouton:disabled { opacity: .6; }
.g-bouton.marge { width: calc(100% - 28px); margin: 14px; }
.g-bouton.danger { background: #fff; color: #c8102e; border: 1px solid #f3c2c8; }
.g-erreur { background: #fde2e4; color: #b4091f; border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 8px 0; }
.g-note { font-size: 12px; color: #9aa1ac; text-align: center; margin: 16px 0 0; }