/* =====================================================
   Message Board — chat / DM style, dark theme
   ===================================================== */

:root {
    --board-accent: #4fc1ff;
    --board-mine-1: #6366f1;
    --board-mine-2: #818cf8;
    --board-other: rgba(255, 255, 255, 0.05);
    --board-other-border: rgba(255, 255, 255, 0.09);
    --board-dim: #8b93a3;
}

/* --- Password gate --- */
.board-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(3, 4, 8, 0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.board-overlay.hidden { display: none; }
.board-gate {
    width: 100%; max-width: 360px; text-align: center; padding: 36px 28px;
    background: var(--card, rgba(15, 15, 25, 0.96));
    border: 1px solid var(--board-other-border); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(79, 193, 255, 0.1);
}
.board-gate.shake { animation: gateShake 0.4s; }
@keyframes gateShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.gate-icon { font-size: 2.6rem; filter: drop-shadow(0 0 14px rgba(79,193,255,0.5)); }
.gate-title { margin-top: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--board-accent); }
.gate-sub { margin: 4px 0 22px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--board-dim); }
#board-pw-form { display: flex; flex-direction: column; gap: 12px; }
#board-pw-input {
    padding: 12px 16px; border-radius: 10px; font-family: inherit; font-size: 0.95rem;
    background: rgba(0,0,0,0.3); border: 1px solid var(--board-other-border); color: #fff; outline: none;
}
#board-pw-input:focus { border-color: var(--board-accent); }
#board-pw-form button {
    padding: 12px; border: none; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-weight: 700; letter-spacing: 0.04em;
    background: linear-gradient(135deg, #4fc1ff, #79d0ff); color: #04121d;
}
.gate-error { margin-top: 14px; color: #f87171; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s; }
.gate-error.visible { opacity: 1; }

/* --- Chat layout --- */
.board-wrap {
    max-width: 900px; margin: 0 auto;
    padding: 92px 18px 150px;
    display: none;
}
.board-wrap.visible { display: block; }
.board-loading, .board-empty { text-align: center; color: var(--board-dim); padding: 50px 0; }

.chat-stream { display: flex; flex-direction: column; gap: 14px; }

/* --- Message rows --- */
.msg-row { display: flex; flex-direction: column; max-width: 74%; animation: msgIn 0.2s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-row.other { align-self: flex-start; align-items: flex-start; }
.msg-row.mine { align-self: flex-end; align-items: flex-end; }

.msg-bubble {
    position: relative;
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-row.other .msg-bubble {
    background: var(--board-other);
    border: 1px solid var(--board-other-border);
    color: #e6e9ef;
    border-bottom-left-radius: 5px;
}
.msg-row.mine .msg-bubble {
    background: linear-gradient(135deg, var(--board-mine-1), var(--board-mine-2));
    color: #fff;
    border-bottom-right-radius: 5px;
}
.msg-text { white-space: pre-wrap; }

/* Name (only shown for others, subtle) */
.msg-name { font-size: 0.74rem; font-weight: 700; color: var(--board-accent); margin: 0 6px 3px; }
.msg-row.mine .msg-name { display: none; }

/* Timestamp under bubble */
.msg-time { font-size: 0.7rem; color: var(--board-dim); margin: 4px 6px 0; font-variant-numeric: tabular-nums; }

/* Delete (moderation) on hover */
.msg-del {
    position: absolute; top: 4px; right: 6px;
    background: none; border: none; cursor: pointer; padding: 3px;
    color: inherit; opacity: 0; border-radius: 6px; transition: opacity 0.15s, background 0.15s;
}
.msg-bubble:hover .msg-del { opacity: 0.55; }
.msg-del:hover { opacity: 1; background: rgba(0,0,0,0.2); }
.msg-del svg { width: 13px; height: 13px; display: block; }

/* Code blocks inside messages */
.msg-code {
    margin: 8px 0 2px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow-x: auto;
}
.msg-row.mine .msg-code { background: rgba(0, 0, 0, 0.28); border-color: rgba(255,255,255,0.18); }
.msg-code code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.84rem; line-height: 1.5; color: #d6deeb; white-space: pre;
}
.inline-code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.85em; padding: 1px 6px; border-radius: 5px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1);
}

/* --- Attachments --- */
.msg-att { margin-top: 8px; }
.msg-bubble > .msg-att:first-child { margin-top: 0; }
.att-image { display: block; }
.att-image img, .att-video {
    display: block; max-width: 100%; max-height: 340px;
    border-radius: 10px; background: rgba(0,0,0,0.25);
}
.att-audio { width: 260px; max-width: 100%; }
.att-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.76rem; opacity: 0.88; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-dl {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; color: inherit; opacity: 0.8;
}
.att-dl:hover { opacity: 1; background: rgba(0,0,0,0.22); }
.att-dl svg { width: 15px; height: 15px; }

.att-chip {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 10px 12px; border-radius: 10px; max-width: 280px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); color: inherit;
    transition: border-color 0.15s ease;
}
.att-chip:hover { border-color: rgba(255,255,255,0.32); }
.att-chip-icon { flex-shrink: 0; display: flex; }
.att-chip-icon svg { width: 26px; height: 26px; opacity: 0.9; }
.att-chip-info { display: flex; flex-direction: column; min-width: 0; }
.att-chip-name { font-weight: 600; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip-size { font-size: 0.72rem; opacity: 0.7; }
.att-chip-dl { margin-left: auto; flex-shrink: 0; display: flex; opacity: 0.85; }
.att-chip-dl svg { width: 18px; height: 18px; }

.msg-row.pending .msg-bubble { opacity: 0.7; font-style: italic; }

/* --- Composer (fixed bottom) --- */
.board-composer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(5,5,8,0) 0%, rgba(5,5,8,0.94) 32%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.composer-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.composer-name {
    align-self: flex-start;
    max-width: 240px; width: 100%;
    padding: 7px 14px; box-sizing: border-box;
    background: rgba(255,255,255,0.04); border: 1px solid var(--board-other-border);
    border-radius: 999px; color: #e8e8e8; font-family: inherit; font-size: 0.82rem; outline: none;
}
.composer-name:focus { border-color: var(--board-accent); }
.composer-name::placeholder { color: var(--board-dim); }
.composer-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px 6px 8px;
    background: var(--card, rgba(20,20,30,0.96));
    border: 1px solid var(--board-other-border);
    border-radius: 999px;
}
.composer-plus {
    flex: 0 0 38px; width: 38px; height: 38px; min-width: 38px; padding: 0;
    box-sizing: border-box; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: none; color: var(--board-dim); transition: color 0.15s, background 0.15s;
}
.composer-plus:hover { color: var(--board-accent); background: rgba(79,193,255,0.1); }
.composer-plus svg { width: 22px; height: 22px; flex-shrink: 0; }
.composer-input {
    flex: 1 1 auto; min-width: 0; background: none; border: none; outline: none;
    color: #fff; font-family: inherit; font-size: 0.98rem; padding: 9px 4px;
}
.composer-input::placeholder { color: var(--board-dim); }
.composer-send {
    flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; padding: 0;
    box-sizing: border-box; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(135deg, var(--board-mine-1), var(--board-mine-2)); color: #fff;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.composer-send:hover { box-shadow: 0 6px 18px rgba(99,102,241,0.5); }
.composer-send:active { transform: scale(0.92); }
.composer-send svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Typing indicator --- */
.typing-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px 7px; font-size: 0.8rem; color: var(--board-dim);
}
.typing-indicator[hidden] { display: none; }
.typing-text { font-style: italic; }
.typing-dots { display: inline-flex; gap: 4px; align-items: flex-end; }
.typing-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--board-accent); display: inline-block;
    animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dots span { animation: none; opacity: 0.7; }
}

@media (max-width: 600px) {
    .msg-row { max-width: 86%; }
    .board-wrap { padding-top: 84px; }
}