/* ============================================================
 * STORM Web — thème custom v2
 * Palette officielle reprise de STORM Android (colors-themed.xml)
 * Police Roboto comme STORM Android
 * Objectif : ressembler le plus fidèlement possible à STORM Android
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    /* === STORM brand colors (from STORM Android colors-themed.xml) === */
    --storm-vert-od: #4A5D3A;            /* primary light */
    --storm-vert-od-light: #A8B89A;      /* primary dark */
    --storm-vert-od-foncé: #3d4d2f;
    --storm-kaki: #5C5340;               /* secondary light */
    --storm-kaki-light: #C9BB95;         /* secondary dark */
    --storm-beige-sable: #F4F2EA;
    --storm-fond-sombre: #121212;        /* background dark */
    --storm-surface-sombre: #1E1E1E;     /* surface dark */
    --storm-surface-elevee: #2A2A2A;     /* surface elevated */
    --storm-text-clair: #E4E4E4;
    --storm-text-secondaire: #999999;
    --storm-bordure: #333333;

    /* Override variables Converse */
    --background-color: var(--storm-fond-sombre) !important;
    --converse-bg-color: var(--storm-fond-sombre) !important;
    --link-color: var(--storm-vert-od-light) !important;
    --highlight-color: var(--storm-vert-od-light) !important;
    --primary-color: var(--storm-vert-od) !important;
    --primary-color-dark: var(--storm-vert-od-foncé) !important;
    --chat-color: var(--storm-vert-od-light) !important;
    --chatroom-color: var(--storm-kaki-light) !important;
    --headlines-color: var(--storm-kaki-light) !important;
    --foreground-color: var(--storm-text-clair) !important;
    --text-color: var(--storm-text-clair) !important;
}

/* ============================================================
 * POLICE — Roboto partout, comme STORM Android
 * ============================================================ */

html, body, button, input, select, textarea, .form-control,
.chat-msg__text, .chat-msg__author, .controlbox-pane *,
converse-roster *, converse-rooms-list *, .chat-content *,
#conversejs * {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
 * BACKGROUND GLOBAL
 * ============================================================ */

html, body, .converse-bg, #conversejs,
#converse-login-panel,
.converse-overlayed-view {
    background: var(--storm-fond-sombre) !important;
    color: var(--storm-text-clair) !important;
}

/* ============================================================
 * LOGO STORM + TAGLINE en haut de la page de login
 * (visible uniquement quand pas connecté)
 * ============================================================ */

body::before {
    content: '';
    display: block;
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 130px;
    background-image: url('../assets/storm-icon.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}

body::after {
    content: 'STORM';
    display: block;
    position: fixed;
    top: 175px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--storm-vert-od-light);
    font-weight: 700;
    font-size: 1.8em;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    z-index: 9999;
    pointer-events: none;
}

/* Sous-titre via une autre technique : on utilise l'attribut data sur body */
body[data-tagline]::before {
    /* déjà utilisé pour le logo, on combine via un autre élément */
}

/* Cacher logo+tagline une fois connecté (controlbox visible) */
body:has(.controlbox-pane[style*="display: block"])::before,
body:has(converse-roster:not([hidden]))::before,
body:has(.chat-content)::before {
    display: none !important;
}

body:has(.controlbox-pane[style*="display: block"])::after,
body:has(converse-roster:not([hidden]))::after,
body:has(.chat-content)::after {
    display: none !important;
}

/* ============================================================
 * CACHER TOUT LE BRANDING CONVERSE.JS
 * (v10.1.7, "Open Source XMPP", "Opkode", "Translate", etc.)
 * ============================================================ */

/* Tout ce qui contient "converse" ou "Opkode" dans le footer login */
.brand-name-wrapper,
.converse-brand,
.brand-name,
.brand-heading-container,
#converse-login-panel .converse-brand-heading,
.converse-brand__heading,
.login-trusted--info,
#converse-login-panel converse-brand-byline,
converse-brand-byline,
.converse-brand-byline,
.brand-byline {
    display: none !important;
}

/* Sécurité : cacher tout ce qui est <small> dans le panel de login (= mentions Opkode/Translate) */
#converse-login-panel small,
#converse-login-panel .text-muted,
#converse-login-panel p.small {
    display: none !important;
}

/* ============================================================
 * CARD DU FORMULAIRE DE LOGIN — surface sombre, pas gris pâle
 * ============================================================ */

#converse-login-panel,
#converse-login-panel .converse-form,
.converse-overlayed-view,
.controlbox-pane {
    background-color: transparent !important;
}

#converse-login-panel form,
.converse-form {
    background-color: var(--storm-surface-sombre) !important;
    border: 1px solid var(--storm-bordure) !important;
    border-radius: 8px !important;
    padding: 2em !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
}

/* ============================================================
 * BOUTONS — vert OD, bord arrondi comme Material
 * ============================================================ */

button.btn-primary,
.btn-primary,
input[type="submit"],
button[type="submit"],
.converse-form button[type="submit"],
.controlbox-pane button.btn-primary,
.btn.btn-primary,
.converse-form .btn-primary {
    background-color: var(--storm-vert-od) !important;
    background-image: none !important;
    border-color: var(--storm-vert-od) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 4px !important;
    padding: 0.6em 1.5em !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

button.btn-primary:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn.btn-primary:hover {
    background-color: var(--storm-vert-od-foncé) !important;
    border-color: var(--storm-vert-od-foncé) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
    transform: translateY(-1px);
}

/* Boutons secondaires */
button.btn-secondary,
.btn-secondary {
    background-color: var(--storm-kaki) !important;
    border-color: var(--storm-kaki) !important;
    color: #ffffff !important;
}

/* ============================================================
 * CHAMPS DE SAISIE — fond surface sombre, bordure kaki
 * ============================================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select,
.converse-form input,
.converse-form textarea,
.message-form-container .chat-textarea {
    background-color: var(--storm-surface-elevee) !important;
    color: var(--storm-text-clair) !important;
    border: 1px solid var(--storm-bordure) !important;
    border-radius: 4px !important;
    padding: 0.6em 0.8em !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--storm-vert-od-light) !important;
    box-shadow: 0 0 0 3px rgba(168, 184, 154, 0.15) !important;
    outline: none !important;
}

/* Labels */
label,
.form-label {
    color: var(--storm-kaki-light) !important;
    font-weight: 500 !important;
    margin-bottom: 0.4em !important;
}

/* Checkboxes : accent vert STORM */
input[type="checkbox"] {
    accent-color: var(--storm-vert-od) !important;
}

/* ============================================================
 * LIENS — vert tactique
 * ============================================================ */

a, a:visited {
    color: var(--storm-vert-od-light) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--storm-kaki-light) !important;
    text-decoration: underline !important;
}

/* ============================================================
 * BARRE LATÉRALE (controlbox + roster)
 * ============================================================ */

#controlbox,
#controlbox .controlbox-pane,
converse-roster,
converse-rooms-list,
converse-headlines-feeds-list {
    background-color: var(--storm-surface-sombre) !important;
}

/* Header de la controlbox = bannière vert OD avec "STORM" */
#controlbox .controlbox-head,
.controlbox-head,
.userinfo {
    background-color: var(--storm-vert-od) !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--storm-kaki) !important;
}

/* Liste de contacts/salons : hover en vert OD assombri */
.list-item:hover,
.roster-contacts li:hover,
.list-item.open,
.list-item.open-chat {
    background-color: rgba(74, 93, 58, 0.25) !important;
}

/* Noms des contacts en blanc lisible */
.list-item .contact-name,
.roster-contacts .contact-name,
converse-roster-contact .contact-name {
    color: var(--storm-text-clair) !important;
    font-weight: 400 !important;
}

/* Sections SALONS / CONTACTS en kaki clair STORM */
.list-toggle,
converse-rooms-list h3,
converse-roster h3,
.controlbox-section h3 {
    color: var(--storm-kaki-light) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================================
 * MESSAGES — bulles style STORM Android
 * ============================================================ */

.chat-msg__text {
    color: var(--storm-text-clair) !important;
}

.chat-msg__text a {
    color: var(--storm-vert-od-light) !important;
}

/* Mes messages : fond vert OD, texte blanc (comme Conversations Android) */
.chat-msg.chat-msg--me .chat-msg__body,
.chat-msg.chat-msg--followup.chat-msg--me .chat-msg__body,
.message.chat-msg--me .chat-msg__content {
    background-color: var(--storm-vert-od) !important;
    color: #ffffff !important;
    border-radius: 12px 12px 4px 12px !important;
    padding: 0.6em 0.9em !important;
}

/* Messages des autres : fond surface élevée */
.chat-msg:not(.chat-msg--me) .chat-msg__body {
    background-color: var(--storm-surface-elevee) !important;
    color: var(--storm-text-clair) !important;
    border-radius: 12px 12px 12px 4px !important;
    padding: 0.6em 0.9em !important;
}

/* Cadenas OMEMO en vert STORM */
.fa-lock,
.chat-msg__lock,
.icon-lock {
    color: var(--storm-vert-od-light) !important;
}

/* Auteur du message en kaki clair */
.chat-msg__author {
    color: var(--storm-kaki-light) !important;
    font-weight: 500 !important;
}

/* Timestamp discret */
.chat-msg__time,
.message-versions .chat-msg__time {
    color: var(--storm-text-secondaire) !important;
    font-size: 0.75em !important;
}

/* ============================================================
 * HEADER DE CONVERSATION — vert OD avec nom du contact
 * ============================================================ */

.chat-head,
.chat-head-chatbox,
.chat-head-chatroom {
    background-color: var(--storm-vert-od) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--storm-vert-od-foncé) !important;
}

.chat-head .chat-title,
.chat-head .chat-title a {
    color: #ffffff !important;
}

/* ============================================================
 * ZONE DE SAISIE DU MESSAGE — fond surface
 * ============================================================ */

.message-form-container,
.sendXMPPMessage,
converse-message-form {
    background-color: var(--storm-surface-sombre) !important;
    border-top: 1px solid var(--storm-bordure) !important;
}

.chat-textarea {
    background-color: var(--storm-surface-elevee) !important;
    color: var(--storm-text-clair) !important;
    border: 1px solid var(--storm-bordure) !important;
}

/* Bouton envoyer (avion en papier) en vert STORM */
.send-button,
button.send-button,
.toolbar-buttons button[name="emoji"] {
    color: var(--storm-vert-od-light) !important;
}

.send-button:hover {
    color: #ffffff !important;
}

/* ============================================================
 * TOOLBAR (emoji, attachement, etc.)
 * ============================================================ */

.toolbar-buttons,
.chat-toolbar {
    background-color: var(--storm-surface-sombre) !important;
}

.toolbar-buttons button,
.chat-toolbar button {
    color: var(--storm-vert-od-light) !important;
}

.toolbar-buttons button:hover,
.chat-toolbar button:hover {
    color: #ffffff !important;
}

/* ============================================================
 * AVATARS — bordure vert OD pour les contacts en ligne
 * ============================================================ */

.avatar.online,
converse-avatar.online {
    box-shadow: 0 0 0 2px var(--storm-vert-od-light) !important;
}

/* ============================================================
 * SCROLLBAR — assortie au thème STORM
 * ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--storm-fond-sombre);
}

::-webkit-scrollbar-thumb {
    background: var(--storm-kaki);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--storm-vert-od-light);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--storm-kaki) var(--storm-fond-sombre);
}

/* ============================================================
 * MODALES — fond surface, bordure kaki
 * ============================================================ */

.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background-color: var(--storm-surface-sombre) !important;
    color: var(--storm-text-clair) !important;
    border-color: var(--storm-bordure) !important;
}

.modal-title {
    color: var(--storm-vert-od-light) !important;
}

/* ============================================================
 * NOTIFICATIONS / TOAST
 * ============================================================ */

.alert-success {
    background-color: var(--storm-vert-od) !important;
    color: #ffffff !important;
    border-color: var(--storm-vert-od-foncé) !important;
}

.alert-info {
    background-color: var(--storm-kaki) !important;
    color: #ffffff !important;
    border-color: var(--storm-kaki) !important;
}

/* ============================================================
 * MASQUER LES INDICATEURS OMEMO (puisque OMEMO non fonctionnel
 * avec STORM Android côté PWA — incompatibilité protocole 1.x/2.0)
 * À RÉACTIVER quand OMEMO sera fixé.
 * ============================================================ */

/* Cacher le bouton cadenas dans la barre de saisie */
.toggle-omemo,
[name="toggle_omemo"],
button.toggle-omemo,
.chat-toolbar .toggle-omemo {
    display: none !important;
}

/* Cacher l'indicateur cadenas à côté de chaque message (peu utile sans OMEMO actif) */
.chat-msg__lock,
.chat-msg__time + .chat-msg__lock {
    display: none !important;
}

/* ============================================================
 * MASQUER les messages "I sent you an OMEMO encrypted message
 * but your client doesn't seem to support that"
 * (fallback texte que les autres clients XMPP envoient)
 * ============================================================ */

/* Stratégie : on rend ces messages discrets (gris pâle, plus petit) */
.chat-msg__body:has(.chat-msg__text:has-text("I sent you an OMEMO encrypted message")),
.chat-msg__text {
    /* On laisse les messages mais on rend le texte OMEMO pas plein écran */
}

/* CSS plus moderne : si le texte du message contient ce string, on cache */
/* Note : :has() avec text matching n'existe pas en CSS pur, on utilise JS dans storm-init.js */

/* ============================================================
 * POLISH VISUEL — animations légères, transitions
 * ============================================================ */

/* Transitions douces sur tous les éléments interactifs */
button, .list-item, .chat-msg, a {
    transition: all 0.15s ease-out;
}

/* Animation au chargement initial */
@keyframes storm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

#converse-login-panel form,
.converse-form,
.chat-content {
    animation: storm-fade-in 0.4s ease-out;
}

/* ============================================================
 * Indicateur "Pas encore de conversation ouverte" — vue d'accueil
 * ============================================================ */

.converse-chatboxes:empty::before,
#conversejs:not(:has(.chat-content))::before {
    /* Hint de bienvenue — caché si CSS :has() pas supporté, c'est OK */
}