/* Tchat et fil des derniers coups (Components/Table/ChatPanel.razor). */

/* La barre d'actions de la carte touchée passe par-dessus le plateau au lieu de le repousser. */
/* Tous téléphones : la barre d'actions de la carte touchée s'affiche PAR-DESSUS le bas du plateau
   (au lieu de le repousser, ce qui ne laissait presque rien de visible sur un petit écran). La
   bulle du tchat s'efface le temps de la sélection. */
/* ---------- Tchat général, façon stream : en haut à droite, fond transparent ---------- */
.chat-overlay {
    position: fixed;
    top: 64px;
    right: 12px;
    z-index: 60;
    width: min(330px, 42vw);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    pointer-events: none;
}

.chat-overlay > * {
    pointer-events: auto;
}

.chat-toggle {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(3px);
    position: relative;
}

.chat-unread {
    margin-left: 0.3rem;
    background: #e53935;
    color: #fff;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
}

.chat-messages {
    width: 100%;
    max-height: 36vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    /* le plus récent en bas, défilement ancré en bas */
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 25%, rgba(0, 0, 0, 0.32) 100%);
    scrollbar-width: thin;
    box-sizing: border-box;
}

.chat-line {
    font-size: 0.84rem;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
    overflow-wrap: anywhere;
    animation: chat-in 0.25s ease-out;
}

.chat-empty {
    opacity: 0.7;
    font-style: italic;
}

.chat-time {
    font-size: 0.68rem;
    opacity: 0.6;
    margin-right: 0.3rem;
}

.chat-author {
    font-weight: 800;
    margin-right: 0.25rem;
}

.chat-author::after {
    content: " :";
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.chat-form {
    width: 100%;
    display: flex;
    gap: 0.3rem;
}

.chat-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.85rem;
    backdrop-filter: blur(3px);
}

.chat-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.chat-form input:focus {
    outline: none;
    border-color: var(--gold);
}

.chat-form button {
    flex: 0 0 auto;
    width: 34px;
    border-radius: 50%;
    border: none;
    background: var(--gold);
    color: #2a1e00;
    font-weight: 900;
    cursor: pointer;
}

.chat-form button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---------- Fil des derniers coups, sous le tchat (même présentation que le tchat) ---------- */
.log-feed {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.3rem 0.5rem 0.4rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    max-height: 30vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.log-feed-title {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--gold);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 0 0.1rem;
    cursor: pointer;
}

.feed-line {
    font-size: 0.78rem;
}

/* Les lignes plus anciennes s'estompent : l'œil va au dernier coup (en haut). */
.feed-line:nth-of-type(n + 4) {
    opacity: 0.72;
}

.feed-author {
    font-weight: 800;
}

.feed-art {
    margin-right: 0.12em;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

.feed-card {
    color: #ffe9a8;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .chat-line {
        animation: none;
    }
}

@media (min-width: 1000px) {
    /* Sur grand écran, la zone pioche/défausse/rivière laisse la place du tchat à droite
   (sinon les messages recouvrent les cartes de la rivière). */
    body:has(.chat-overlay.open) .table-piles {
        padding-right: calc(min(330px, 42vw) + 1rem);
    }

    /* Le tchat (fixé en haut à droite) ne recouvre pas les panneaux sur grand écran. */
    body:has(.chat-overlay.open) .game-shell > .floating-panel {
        margin-right: calc(min(330px, 42vw) + 1rem);
    }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    body:has(.hand-action-bar) .chat-overlay {
        bottom: calc(300px + env(safe-area-inset-bottom, 0px));
    }

    .chat-overlay.collapsed .log-feed {
        display: none;
    }

    /* Tchat ouvert sur téléphone : fond opaque (le plateau ne transparaît plus sous le texte) et,
       de haut en bas : derniers coups, messages, saisie, bouton du tchat. */
    .chat-overlay.open {
        width: min(360px, calc(100vw - 16px));
        background: rgba(6, 28, 18, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        padding: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
        box-sizing: border-box;
    }

    .chat-overlay .chat-toggle { order: 0; }
    .chat-overlay .chat-form { order: 1; }
    .chat-overlay .chat-messages { order: 2; max-height: 20vh; }
    .chat-overlay .log-feed { order: 3; }

    .log-feed {
        max-height: 22vh;
    }

    body:has(.hand-action-bar) .chat-overlay.collapsed {
        display: none;
    }

    /* Tchat : ancré en bas à droite, au-dessus de la main, pour ne plus cacher « Terminer le tour ». */
    .chat-overlay {
        top: auto;
        bottom: calc(165px + env(safe-area-inset-bottom, 0px));
        right: 8px;
        flex-direction: column-reverse;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .chat-overlay {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px), (orientation: landscape) and (max-height: 500px) {
    .chat-overlay {
        width: min(260px, 70vw);
    }

    .chat-messages {
        max-height: 28vh;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .chat-overlay {
        bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.hand-action-bar) .chat-overlay {
        bottom: calc(215px + env(safe-area-inset-bottom, 0px));
    }
}

@media (orientation: landscape) and (max-height: 340px) {
    .chat-overlay {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.hand-action-bar) .chat-overlay {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }

    .chat-overlay,
    body:has(.hand-action-bar) .chat-overlay {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    /* Paysage très bas : le tchat ouvert ne doit pas recouvrir la barre du haut (« Terminer le tour »). */
    /* Ouvert, le tchat passe par-dessus la main (le temps d'écrire) plutôt que sur la barre du haut. */
    .chat-overlay.open,
    body:has(.hand-action-bar) .chat-overlay.open {
        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100svh - 48px);
        overflow-y: auto;
    }

    .chat-overlay.open > * {
        flex-shrink: 0;
    }

    .chat-overlay .chat-messages {
        max-height: 70px;
    }

    .chat-overlay .log-feed {
        max-height: 84px;
    }
}

@keyframes chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}