#chat-window,
.chat-sidebar-root {
    flex-shrink: 0;
    width: clamp(240px, 22vw, 320px);
    min-width: 240px;
    min-height: 0;
    background: linear-gradient(175deg, #1f1510 0%, #1a0f0a 30%, #0f0a06 100%);
    border-left: 2px solid rgba(201, 162, 39, 0.25);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --chat-accent: #c9a227;
}
.chat-history-wrap {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
}
.radio-chat-veil {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}
#chat-window.radio-panel-open .radio-chat-veil,
.chat-sidebar-root.radio-panel-open .radio-chat-veil {
    display: block;
}
#chat-history {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    font-size: 14px;
    color: #e5d4b8;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
    isolation: isolate;
    /* Fond opaque : évite l’effet « voilé » si l’ombre du panneau radio passe au-dessus */
    background: linear-gradient(175deg, #1f1510 0%, #1a0f0a 28%, #0f0a06 100%);
    scrollbar-color: var(--ch-scroll-thumb, #5c3a2a) var(--ch-scroll-track, transparent);
    scrollbar-width: thin;
}
#chat-history::-webkit-scrollbar {
    width: 6px;
}
#chat-history::-webkit-scrollbar-track {
    background: #0f0a06;
}
#chat-history::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5c3a2a, #3d2518);
    border-radius: 3px;
}
.chat-emoji-panel::-webkit-scrollbar { width: 5px; }
.chat-emoji-panel::-webkit-scrollbar-track { background: transparent; }
.chat-emoji-panel::-webkit-scrollbar-thumb {
    background: #5c3a2a;
    border-radius: 3px;
}
.chat-msg {
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(92, 58, 42, 0.4) 0%, rgba(139, 69, 19, 0.2) 100%);
    border-radius: 8px;
    border-left: 3px solid var(--chat-accent);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.chat-msg.chat-msg-private {
    background: linear-gradient(135deg, rgba(45, 55, 92, 0.5) 0%, rgba(70, 50, 100, 0.3) 100%);
    border-left: 3px solid rgba(140, 160, 230, 0.9);
    box-shadow: 0 1px 4px rgba(40, 50, 90, 0.35);
    position: relative;
    padding-left: 10px;
}
.chat-msg.chat-msg-private .pseudo {
    font-style: normal;
    font-weight: 700;
    color: rgba(180, 195, 255, 0.95);
}
.chat-msg.chat-msg-private-sent {
    background: linear-gradient(135deg, rgba(35, 50, 80, 0.45) 0%, rgba(55, 45, 85, 0.25) 100%);
}
.chat-msg.chat-msg-system {
    background: linear-gradient(135deg, rgba(60, 40, 28, 0.55) 0%, rgba(45, 32, 24, 0.4) 100%);
    border-left-color: rgba(201, 162, 39, 0.65);
    font-size: 0.95em;
}
.chat-msg.chat-msg-system .pseudo {
    color: rgba(230, 200, 140, 0.95);
    font-weight: 600;
}
.chat-msg.chat-msg-system .chat-msg-body {
    color: rgba(255, 245, 230, 0.92);
}
.chat-msg .pseudo {
    color: var(--chat-accent);
    font-weight: 600;
    margin-right: 8px;
    white-space: nowrap;
}
/* Clic → préremplissage MP (@pseudo) : zone principale seulement (pas le menu ⋮) */
#chat-history .chat-msg[data-chat-private-target] .chat-msg-main {
    cursor: pointer;
}
#chat-history .chat-msg[data-chat-private-target]:hover .chat-msg-main {
    filter: brightness(1.05);
    border-radius: 6px;
}
.chat-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.chat-msg-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
}
.chat-msg-actions {
    flex-shrink: 0;
    position: relative;
    align-self: flex-start;
    margin-top: 2px;
}
.chat-msg-menu-btn {
    width: 28px;
    min-height: 28px;
    padding: 0 2px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    color: rgba(200, 180, 150, 0.85);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-msg-menu-btn:hover {
    background: rgba(201, 162, 39, 0.2);
    color: #f0e4c8;
}
.chat-msg-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 140px;
    padding: 4px 0;
    border-radius: 8px;
    background: linear-gradient(165deg, rgba(36, 28, 22, 0.98), rgba(18, 12, 10, 0.99));
    border: 1px solid rgba(201, 162, 39, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    z-index: 30;
}
.chat-msg-dropdown.is-open {
    display: block;
}
.chat-msg-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #e8d5b5;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.chat-msg-dropdown-item:hover {
    background: rgba(201, 162, 39, 0.15);
}

#chat-form {
    flex-shrink: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, #0f0a06 0%, #1a0f0a 100%);
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 110;
}
.chat-emoji-root {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.chat-emoji-toggle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    background: linear-gradient(180deg, #2a1a12 0%, #1a0f0a 100%);
    color: #f5e6c8;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.chat-emoji-toggle:hover {
    border-color: rgba(201, 162, 39, 0.6);
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.2);
}
.chat-emoji-toggle:active {
    transform: scale(0.96);
}
.chat-emoji-panel {
    position: fixed;
    box-sizing: border-box;
    max-height: min(200px, 40vh);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--ch-scroll-thumb, #5c3a2a) var(--ch-scroll-track, transparent);
    scrollbar-width: thin;
    padding: 8px;
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    background: linear-gradient(175deg, #2c2016 0%, #1a0f0a 100%);
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    z-index: 999999;
}
.chat-emoji-panel.is-open {
    display: grid;
}
.chat-emoji-item {
    width: 100%;
    aspect-ratio: 1;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: rgba(92, 58, 42, 0.25);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.chat-emoji-item:hover,
.chat-emoji-item:focus-visible {
    background: rgba(201, 162, 39, 0.25);
    outline: none;
}
.chat-emoji-item:active {
    transform: scale(0.92);
}
.chat-msg .chat-msg-body {
    font-size: 15px;
    line-height: 1.55;
}
.chat-msg .chat-msg-body .chat-msg-emoji {
    font-size: 1.45em;
    line-height: 1;
    vertical-align: -0.12em;
}
#chat-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 15px;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    background: #1a0f0a;
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    color: #f5e6c8;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#chat-input::placeholder { color: #8b7355; }
#chat-input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15);
}
#chat-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #a0522d 0%, #8b4513 50%, #6b3410 100%);
    color: #f5e6c8;
    border: 1px solid rgba(201, 162, 39, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}
#chat-send:hover {
    background: linear-gradient(180deg, #b87333 0%, #a0522d 50%, #8b4513 100%);
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}
#chat-send:active {
    transform: scale(0.97);
}
#chat-send svg {
    width: 16px;
    height: 16px;
}
#wallet-display {
    position: relative;
    z-index: 110;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 72px;
    box-sizing: border-box;
    background-color: #1a120e;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    font-family: 'Noto Serif JP', 'Noto Sans JP', 'Meiryo', serif;
    text-align: center;
    letter-spacing: 0.08em;
    overflow: visible;
}

/*
 * Tant que le canvas n'a pas révélé son bg-image (≈ écran de loading),
 * on cache complètement #wallet-display, qu'il soit dans la sidebar
 * ou en mode flottant (sidebar repliée). La classe `canvas-not-ready`
 * est posée sur <html> au plus tôt (script inline en <head> de
 * play.html / entrance.html) puis retirée à la réception du message
 * `loadingComplete` envoyé par l'iframe Phaser.
 */
html.canvas-not-ready #wallet-display,
html.canvas-not-ready #wallet-display.wallet-floating,
html.canvas-not-ready #wallet-display.wallet-fx-pulse {
    display: none !important;
}
/* Fond bois : `background-image` injecté en JS (blob URL) après un seul fetch — pas de url() ici. */
#wallet-display.wallet-bg-loaded {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
/* Montant seul sur la plaque (残高 / ¥ sont dans le visuel) — lisible sur le bois */
#wallet-display .value {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f5e6c8;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.75),
        0 0 14px rgba(201, 162, 39, 0.45);
    margin-right: 10px;
}

/* Modale ログアウト — plein écran, au-dessus du jeu + chat */
.logout-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}
.logout-modal-overlay.is-open {
    display: flex;
}
.logout-modal-box {
    width: 100%;
    max-width: 400px;
    padding: 28px 24px 24px;
    border-radius: 14px;
    border: 1px solid rgba(201, 162, 39, 0.45);
    background: linear-gradient(165deg, #2a1e18 0%, #1a120e 50%, #120c0a 100%);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    text-align: center;
}
.logout-modal-box h2 {
    margin: 0 0 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #e8d5b5;
    letter-spacing: 0.06em;
}
.logout-modal-box p {
    margin: 0 0 24px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #c4b49a;
}
.logout-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.logout-modal-actions button {
    min-width: 120px;
    padding: 11px 18px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid rgba(201, 162, 39, 0.35);
}
.logout-modal-cancel {
    background: rgba(40, 32, 28, 0.95);
    color: #e8d5b5;
}
.logout-modal-cancel:hover {
    border-color: rgba(201, 162, 39, 0.55);
}
.logout-modal-confirm {
    background: linear-gradient(180deg, #7a3030, #4a1818);
    color: #f5d0d0;
    border-color: rgba(180, 80, 80, 0.5);
}
.logout-modal-confirm:hover {
    filter: brightness(1.08);
}
.logout-modal-confirm:disabled {
    opacity: 0.55;
}

/* ===== Base nav (landscape desktop) =====
 * Sans cette base, `.chat-nav-icon-btn` n'a aucune taille hors media queries
 * (portrait + landscape étroit). En landscape desktop normal, le SVG sans
 * width/height retombait sur la taille par défaut du remplacé (~300×150 px)
 * et le bouton devenait énorme — visible uniquement sur les pages qui rendent
 * la chat-nav en DOM (entrance.html), pas sur play.html où chat-collapse-control
 * déplace ces boutons dans le canvas Phaser.
 */
#chat-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #1a0f0a 0%, #120a06 100%);
    border-bottom: 1px solid rgba(201, 162, 39, 0.18);
}
.chat-nav-icon-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.32);
    color: #e8d5b5;
    border: 1px solid rgba(201, 162, 39, 0.22);
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.18s ease;
}
.chat-nav-icon-btn > svg {
    width: 20px;
    height: 20px;
}
.chat-nav-icon-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 210, 90, 0.7);
    color: #ffe9b8;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.4), inset 0 0 8px rgba(255, 210, 90, 0.08);
}
.chat-nav-icon-btn:active {
    transform: scale(0.94);
}
.chat-nav-icon-btn:focus-visible {
    outline: 2px solid rgba(255, 210, 90, 0.7);
    outline-offset: 2px;
}

/* ===== Portrait: chat en bloc vertical en bas de l'écran =====
 * Ratio chat/jeu : 45% pour le chat, 55% pour le canvas Phaser. L'ancienne
 * valeur de 60% étouffait le jeu sur mobile portrait (smartphone vertical).
 * Cibles tactiles : 44px (Apple HIG) pour la barre nav, 40px pour emoji/send
 * (input ≥ 16px sinon Safari iOS zoom au focus).
 */
@media (orientation: portrait) {
    #chat-window,
    .chat-sidebar-root {
        width: 100%;
        min-width: 0;
        flex: 0 0 45%;
        height: auto;
        min-height: 0;
        max-height: 45%;
        flex-direction: column;
        border-left: none;
        border-top: 2px solid rgba(201, 162, 39, 0.25);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
        overscroll-behavior: contain;
        touch-action: manipulation;
    }

    #chat-nav {
        padding: 6px 10px;
        gap: 6px;
    }
    .chat-nav-icon-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 22px;
        border-radius: 10px;
    }
    .chat-nav-icon-btn > svg {
        width: 22px;
        height: 22px;
    }
    .chat-collapse-toggle {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 10px;
    }

    #radio-panel {
        position: fixed;
        top: auto;
        bottom: 46%;
        left: 6px;
        right: 6px;
        width: auto;
        z-index: 1000001;
        transform: none;
    }
    #radio-panel.visible {
        animation: none;
        transform: none;
    }
    #radio-panel.visible.closing {
        transform: translateY(6px) scale(0.96);
    }
    #radio-panel::before,
    #radio-panel::after {
        display: none;
    }

    #chat-history {
        padding: 8px 10px;
        font-size: 14px;
        gap: 5px;
    }
    .chat-msg {
        padding: 6px 9px;
        border-radius: 7px;
    }

    #chat-form {
        padding: 8px 10px;
        gap: 8px;
    }
    #chat-input {
        /* 16px : empêche le zoom automatique de Safari iOS au focus sur input. */
        font-size: 16px;
        padding: 9px 12px;
    }
    .chat-emoji-toggle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    #chat-send {
        width: 40px;
        height: 40px;
    }
    #chat-send svg {
        width: 18px;
        height: 18px;
    }

    #wallet-display {
        min-height: 52px;
        padding: 8px 12px;
    }
    #wallet-display .value {
        font-size: 17px;
    }
}

/* ===== Portrait + écran très étroit : compactage supplémentaire =====
 * iPhone SE / Android compact (≤360px). On garde les cibles tactiles à 44px
 * mais on serre les paddings pour ne pas perdre de place pour le texte.
 */
@media (orientation: portrait) and (max-width: 360px) {
    #chat-nav {
        padding: 5px 6px;
        gap: 4px;
    }
    #chat-history {
        padding: 6px 8px;
        font-size: 13px;
    }
    .chat-msg {
        padding: 5px 7px;
    }
    #chat-form {
        padding: 6px 7px;
        gap: 6px;
    }
    #wallet-display {
        min-height: 46px;
        padding: 6px 10px;
    }
    #wallet-display .value {
        font-size: 16px;
    }
}

/* ===== Paysage mobile (hauteur ≤ 500px, orientation landscape) =====
 * Smartphone tenu horizontalement : le layout reste « chat à droite » mais
 * la sidebar à 240px minimum vole 40 % de la largeur d'un écran 568×320. On
 * resserre à clamp(180px, 32vw, 240px) et on compacte la nav / wallet pour
 * laisser un maximum d'espace au canvas Phaser.
 */
@media (orientation: landscape) and (max-height: 500px) {
    #chat-window,
    .chat-sidebar-root {
        width: clamp(180px, 32vw, 240px);
        min-width: 180px;
    }

    #chat-nav {
        padding: 4px 6px;
        gap: 4px;
    }
    .chat-nav-icon-btn {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 8px;
    }
    .chat-nav-icon-btn > svg {
        width: 18px;
        height: 18px;
    }
    .chat-collapse-toggle {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 8px;
    }

    #chat-history {
        padding: 6px 8px;
        font-size: 13px;
        gap: 4px;
    }
    .chat-msg {
        padding: 5px 8px;
        border-radius: 6px;
    }
    #chat-form {
        padding: 5px 8px;
        gap: 5px;
    }
    #chat-input {
        font-size: 16px;
        padding: 7px 9px;
    }
    .chat-emoji-toggle {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    #chat-send {
        width: 34px;
        height: 34px;
    }
    #chat-send svg {
        width: 16px;
        height: 16px;
    }
    #wallet-display {
        min-height: 44px;
        padding: 4px 10px;
    }
    #wallet-display .value {
        font-size: 16px;
    }
}

/* ===== Tablette (600–1024px, paysage) =====
 * iPad / Surface : sidebar légèrement plus large que sur petit desktop pour
 * conserver une bonne lisibilité du chat, mais clampée pour ne pas écraser
 * le canvas (le ratio 16:9 reste forcé sur #game-container).
 */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1024px) {
    #chat-window,
    .chat-sidebar-root {
        width: clamp(220px, 26vw, 290px);
        min-width: 220px;
    }
    #chat-history {
        font-size: 14px;
    }
    #chat-input {
        font-size: 15px;
    }
}

/* ===== Cibles tactiles globales (pointer: coarse) =====
 * S'applique quelle que soit l'orientation pour tout périphérique tactile
 * (mobile, tablette, écran hybride). Minimum 40px sur les boutons d'action
 * en sidebar landscape, sans casser la maquette desktop souris.
 */
@media (pointer: coarse) {
    .chat-nav-icon-btn,
    .chat-collapse-toggle {
        min-width: 40px;
        min-height: 40px;
    }
    .chat-emoji-toggle,
    #chat-send {
        min-width: 40px;
        min-height: 40px;
    }
    .chat-msg-menu-btn {
        min-width: 32px;
        min-height: 32px;
        font-size: 18px;
    }
    .chat-emoji-item {
        min-height: 38px;
    }
}

/* ── Money transfer chat messages ── */
.chat-msg-transfer {
    border-left-color: #c9a227 !important;
    background: rgba(201, 162, 39, 0.08);
}
.chat-transfer-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0;
}
.chat-transfer-text {
    color: #e8d5b5;
    font-size: 13px;
    line-height: 1.4;
}
.chat-transfer-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.chat-transfer-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.chat-transfer-btn:disabled {
    opacity: 0.4;
}
.chat-transfer-btn-accept {
    background: rgba(39, 174, 96, 0.25);
    color: #6bff9e;
    border-color: rgba(39, 174, 96, 0.5);
}
.chat-transfer-btn-accept:hover:not(:disabled) {
    background: rgba(39, 174, 96, 0.4);
}
.chat-transfer-btn-refuse {
    background: rgba(201, 39, 39, 0.2);
    color: #ff8080;
    border-color: rgba(201, 39, 39, 0.4);
}
.chat-transfer-btn-refuse:hover:not(:disabled) {
    background: rgba(201, 39, 39, 0.35);
}
.chat-transfer-btn-cancel {
    background: rgba(180, 160, 100, 0.15);
    color: #d4c088;
    border-color: rgba(180, 160, 100, 0.4);
}
.chat-transfer-btn-cancel:hover:not(:disabled) {
    background: rgba(180, 160, 100, 0.3);
}

.chat-transfer-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-transfer-loader {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(201, 162, 39, 0.25);
    border-top-color: #e8c860;
    border-radius: 50%;
    animation: chat-transfer-spin 0.65s linear infinite;
}
.chat-transfer-loading-label {
    font-size: 12px;
    font-weight: 600;
    color: #c9a227;
    letter-spacing: 0.02em;
}
.chat-msg-transfer--loading .chat-transfer-text {
    opacity: 0.85;
}
@keyframes chat-transfer-spin {
    to {
        transform: rotate(360deg);
    }
}

/* MP : citation (réponse) */
.chat-msg-reply-ref {
    width: 100%;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 4px 0;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    border-left: 3px solid rgba(201, 162, 39, 0.45);
    font-size: 12px;
    line-height: 1.35;
    color: rgba(220, 200, 170, 0.9);
}
.chat-msg-reply-author {
    font-weight: 700;
    color: rgba(201, 162, 39, 0.95);
    font-size: 11px;
}
.chat-msg-reply-snippet {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0.9;
    max-height: 3.2em;
    overflow: hidden;
}
#mp-reply-banner {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 6px 0;
    padding: 6px 8px 6px 10px;
    border-radius: 8px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.35);
    font-size: 12px;
    color: #e8d5b5;
    line-height: 1.35;
}
#mp-reply-banner[hidden] {
    display: none !important;
}
.mp-reply-banner-label {
    font-weight: 700;
    color: #f0d78a;
    max-width: 100%;
}
.mp-reply-banner-snippet {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 11px;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-reply-banner-dismiss {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: #c8a86a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.mp-reply-banner-dismiss:hover {
    background: rgba(201, 162, 39, 0.2);
    color: #fff2d0;
}