/* ==========================================================
   TRAVAS ABSOLUTAS DE LAYOUT (IMPEDE ESTICAR A TELA)
========================================================== */

.hall-container {
    --font-palatino: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    display: flex;
    width: 100%;
    height: 100vh; /* 👈 TRAVA 1: O container nunca passa do tamanho da tela */
    max-height: 100%;
    background: radial-gradient(circle at top, #1a1010 0%, #050505 100%);
    font-family: var(--font-palatino);
    overflow: hidden;
    color: #d4c5b0;
}

.hall-sidebar { width: 280px; background: rgba(5, 5, 5, 0.6); border-right: 1px solid #2a1a1a; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 20px; box-shadow: 5px 0 20px rgba(0,0,0,0.8); z-index: 5; backdrop-filter: blur(10px); }
.hall-brand { padding: 25px 20px; border-bottom: 1px solid #2a1a1a; background: linear-gradient(to bottom, rgba(255,202,40,0.05), transparent); text-align: center;}
.hall-brand h2 { margin: 0; color: #ffca28; font-size: 22px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,202,40,0.4); }
.hall-brand p { margin: 5px 0 0 0; color: #888; font-size: 11px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;}

.hall-search-box { padding: 15px 20px; position: relative; }
.hall-search-box span { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #888; font-size: 12px; }
.hall-search-box input { width: 100%; background: #000; color: #fff; border: 1px solid #444; padding: 8px 10px 8px 30px; border-radius: 4px; font-family: sans-serif; box-sizing: border-box; font-size: 13px; transition: 0.3s; }
.hall-search-box input:focus { border-color: #ffca28; outline: none; box-shadow: inset 0 0 5px rgba(255,202,40,0.5); }

.hall-category { margin-top: 15px; }
.hall-cat-header { padding: 5px 20px; font-size: 11px; font-weight: bold; color: #aaa; text-transform: uppercase; font-family: sans-serif; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #222; margin-bottom: 5px; letter-spacing: 0.5px;}
.btn-add-channel { background: transparent; border: none; color: #aaa; cursor: pointer; font-weight: bold; font-size: 15px; transition: 0.2s; }
.btn-add-channel:hover { color: #ffca28; text-shadow: 0 0 8px #ffca28; transform: scale(1.2); }

.hall-channel { padding: 10px 20px 10px 25px; color: #bbb; font-size: 14px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid transparent; }
.hall-channel:hover { background: rgba(255,255,255,0.05); color: #fff; padding-left: 30px; }
.hall-channel.active { background: linear-gradient(90deg, rgba(255,202,40,0.1) 0%, transparent 100%); color: #ffca28; border-left-color: #ffca28; font-weight: bold; }

/* ==========================================================
   SUBCATEGORIAS COLAPSÁVEIS
========================================================== */
.hall-group { margin: 4px 0; }
.hall-group-header { display: flex; align-items: center; gap: 5px; padding: 6px 12px 6px 16px; cursor: pointer; color: #90a4ae; font-size: 11px; font-family: sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; border-radius: 4px; user-select: none; transition: 0.2s; }
.hall-group-header:hover { background: rgba(255,255,255,0.04); color: #cfd8dc; }
.hall-group-toggle { font-size: 9px; color: #546e7a; flex-shrink: 0; transition: 0.2s; }
.hall-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-group-count { color: #546e7a; font-size: 10px; flex-shrink: 0; }
.hall-group-actions { display: inline-flex; gap: 4px; align-items: center; opacity: 0; transition: 0.2s; margin-left: 4px; }
.hall-group-header:hover .hall-group-actions { opacity: 1; }
.hall-group-channels { padding-left: 8px; border-left: 2px solid rgba(84,110,122,0.25); margin-left: 18px; overflow: hidden; transition: max-height 0.25s ease; }
.hall-group-channels .hall-channel { padding-left: 18px; font-size: 13px; }
.hall-group-channels .hall-channel:hover { padding-left: 22px; }
.btn-add-group { background: transparent; border: none; color: #546e7a; cursor: pointer; font-size: 13px; transition: 0.2s; padding: 0 2px; margin-left: 2px; }
.btn-add-group:hover { color: #90a4ae; transform: scale(1.2); }

/* ÁREA PRINCIPAL E FEED */
.hall-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* 👈 TRAVA 2: Respeita a altura do container */
    overflow: hidden; /* 👈 TRAVA 3: Se o chat crescer, ele corta e não empurra nada! */
}

.hall-header { padding: 20px; border-bottom: 1px solid #2a1a1a; background: rgba(10, 10, 10, 0.8); box-shadow: 0 5px 20px rgba(0,0,0,0.8); z-index: 3; text-align: center; flex-shrink: 0; }
.hall-title { margin: 0 0 5px 0; color: #ffca28; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,202,40,0.4); }
.hall-desc { color: #888; font-size: 12px; font-style: italic; font-family: sans-serif;}

.hall-feed {
    flex: 1;
    padding: 30px;
    overflow-y: auto; /* 👈 A barra de rolagem só pode existir aqui! */
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
    min-height: 0; /* 👈 TRAVA 4: Permite que o Flexbox encolha e role */
}

.hall-empty-msg { text-align:center; color:#555; margin-top: 100px; font-style:italic; font-size: 16px; }

/* ==========================================================
   TIPOS DE POSTAGENS E CORES ESPECIAIS
========================================================== */
@keyframes hallPostEnter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.hall-post { display: flex; gap: 20px; background: rgba(15, 15, 15, 0.7); padding: 20px; border-radius: 8px; border: 1px solid #333; position: relative; box-shadow: 0 8px 25px rgba(0,0,0,0.5); animation: hallPostEnter 0.3s ease-out; backdrop-filter: blur(4px); transition: 0.2s; }
.hall-post:hover { border-color: #5a3c22; box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(255,202,40,0.05); }

/* Mestre */
.hall-post.is-gm { border-left: 3px solid #ffca28; background: linear-gradient(to right, rgba(255,202,40,0.05), rgba(15, 15, 15, 0.7) 30%); }
.hall-post.is-gm .hall-post-avatar { border-color: #ffca28; box-shadow: 0 0 10px rgba(255,202,40,0.5); }
.hall-post.is-gm .hall-post-author { color: #ffca28; font-family: var(--font-palatino); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; }

/* Tipos Especiais */
.hall-post.tipo-emergencia { border-left: 4px solid #f44336; background: linear-gradient(to right, rgba(244,67,54,0.1), rgba(15,15,15,0.8) 50%); border-top: 1px solid #f44336; }
.hall-post.tipo-emergencia .hall-post-text { color: #ff8a80; font-weight: bold; }
.hall-post.tipo-alerta { border-left: 4px solid #ff9800; background: linear-gradient(to right, rgba(255,152,0,0.1), rgba(15,15,15,0.8) 50%); }
.hall-post.tipo-lembrete { border-left: 4px solid #00e5ff; background: linear-gradient(to right, rgba(0,229,255,0.1), rgba(15,15,15,0.8) 50%); }

/* Pinado (Fixado) */
.hall-post.is-pinned { border: 2px solid #ffd700; box-shadow: 0 0 20px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.1); }
.pin-badge-ui { position: absolute; top: -12px; left: -12px; font-size: 18px; background: #111; border: 2px solid #ffd700; border-radius: 50%; padding: 4px; box-shadow: 0 0 10px rgba(255,215,0,0.8); z-index: 10; animation: floatPin 2s infinite ease-in-out; }
@keyframes floatPin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Avatar e Conteúdo */
.hall-post-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid #444; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.hall-post-content { flex: 1; min-width: 0; }
.hall-post-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; border-bottom: 1px dashed #333; padding-bottom: 8px; }
.hall-post-author { font-weight: bold; color: #4fc3f7; font-size: 16px; font-family: sans-serif; letter-spacing: 0.5px; }
.hall-post-date { color: #666; font-size: 11px; font-family: sans-serif; }
.hall-post-vis { color: #aaa; font-size: 10px; border: 1px solid #444; padding: 2px 6px; border-radius: 4px; background: #111; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px;}
.badge-tipo-post { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-family: sans-serif; font-weight: bold; text-transform: uppercase; }

/* AÇÕES DA POSTAGEM */
.hall-post-actions { position: absolute; top: 15px; right: 15px; display: flex; gap: 5px; opacity: 0; transition: 0.2s; }
.hall-post:hover .hall-post-actions { opacity: 1; }
.btn-action-post { background: #111; border: 1px solid #444; color: #aaa; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: 0.2s; }
.btn-action-post:hover { background: #222; color: #fff; border-color: #ffca28; }
.btn-action-post.del:hover { background: #b71c1c; border-color: #f44336; color:#fff; }
.btn-action-post.pin:hover { background: #ffd700; color: #000; border-color: #fff; }

/* SEPARADOR DE CENA ÉPICO */
.hall-scene-separator { display: flex; align-items: center; justify-content: center; margin: 35px 0; position: relative; animation: hallPostEnter 0.5s ease-out; }
.hall-scene-separator::before, .hall-scene-separator::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, #ffca28, transparent); opacity: 0.4; }
.hall-scene-diamond { margin: 0 20px; text-align: center; color: #ffca28; font-family: var(--font-palatino); font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 15px rgba(255,202,40,0.5); position: relative; }

/* POSTAGEM CINEMATOGRÁFICA */
.hall-banner-cinematic { width: 100%; aspect-ratio: 7/4; object-fit: cover; border-radius: 4px; border: 1px solid #4a3623; margin-bottom: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.8); cursor: pointer; transition: 0.3s; }
.hall-banner-cinematic:hover { border-color: #ffca28; box-shadow: 0 8px 25px rgba(255,202,40,0.2); }
.hall-post-composite { display: flex; flex-wrap: wrap; gap: 20px; background: rgba(0,0,0,0.4); border: 1px dashed #4a3623; padding: 15px; border-radius: 4px; margin-bottom: 15px; }
.comp-field { display: flex; flex-direction: column; }
.comp-lbl { font-size: 10px; color: #aaa; text-transform: uppercase; font-family: sans-serif; letter-spacing: 1px; margin-bottom: 4px;}
.comp-val { font-size: 18px; color: #fff; font-weight: bold; text-shadow: 1px 1px 3px #000; }
.comp-val.censored { color: #f44336; letter-spacing: 3px; font-family: monospace; text-shadow: 0 0 8px rgba(244,67,54,0.5); }
.hall-post-text { font-size: 16px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 10px; color: #d4c5b0; }
.hall-post-body {
    display: flex;
    flex-wrap: wrap; /* 👈 PERMITE QUEBRAR PARA BAIXO NO MOBILE */
    gap: 15px;
    align-items: flex-start;
    width: 100%;
}

.hall-post-image {
    max-width: 320px; /* Tamanho equilibrado para ficar ao lado do texto */
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    object-fit: contain;
    background: rgba(0,0,0,0.2);
    /* margin-top removido, o gap do pai resolve */
}

.hall-post-text {
    flex: 1;
    min-width: 280px; /* 👈 SE TIVER MENOS QUE ISSO DE ESPAÇO, O TEXTO VAI PARA BAIXO */
    color: #eee;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
}

/* ==========================================================
   CAIXA DE INPUT E EDITOR (A MÁGICA EXPANSIVA ACONTECE AQUI)
========================================================== */
.hall-input-area {
    background: rgba(10, 10, 10, 0.85);
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 202, 40, 0.15);
    z-index: 10;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.9);
    flex-shrink: 0;
    backdrop-filter: blur(20px) saturate(150%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Painel superior de opções (Canais e Imagens) */
.hall-advanced-panel { background: rgba(0,0,0,0.5); border: 1px solid #333; border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.hall-adv-header { display:flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px dashed #333; padding-bottom: 5px; }
.hall-adv-header span:first-child { color:#ffca28; font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing: 1px; font-family: sans-serif;}

/* Selects e Inputs padrão */
.hall-input {
    width: 100%;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s;
}
.hall-input:focus {
    border-color: #ffca28;
    outline: none;
    background: rgba(255, 202, 40, 0.05);
    box-shadow: 0 0 10px rgba(255,202,40,0.1);
}

/* Seletor Cinematográfico (Moderno) */
.hall-select-post-tipo {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffca28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 35px !important;
    cursor: pointer;
    background-color: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(255, 202, 40, 0.3) !important;
    height: 44px; /* Altura fixa para não esticar */
    font-weight: bold;
    color: #ffca28 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.hall-select-post-tipo:hover {
    border-color: #ffca28 !important;
    background-color: rgba(20, 20, 20, 0.9) !important;
}

/* Menu de Emojis Moderno (Pop-up) */
.hall-emoji-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 20px;
    width: 280px;
    background: rgba(15, 10, 15, 0.98);
    border: 1px solid rgba(255, 202, 40, 0.4);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255,202,40,0.1);
    z-index: 1000;
    backdrop-filter: blur(10px);
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 15px;
    animation: hallPopUpEnter 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes hallPopUpEnter { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.hall-emoji-popup span {
    cursor: pointer;
    font-size: 22px;
    text-align: center;
    transition: 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    border-radius: 8px;
}
.hall-emoji-popup span:hover {
    background: rgba(255, 202, 40, 0.15);
    transform: scale(1.2) rotate(5deg);
}

/* Toolbar de Ferramentas - Visual de Fita/Ribbon Moderna */
.hall-rt-toolbar {
    display: flex;
    gap: 6px;
    background: rgba(20, 20, 20, 0.6);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 10px 10px 0 0;
    backdrop-filter: blur(5px);
}
.hall-rt-toolbar button {
    background: rgba(0, 0, 0, 0.4);
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s;
    font-weight: 500;
}
.hall-rt-toolbar button:hover {
    background: #ffca28;
    color: #000;
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 202, 40, 0.3);
}
.hall-rt-toolbar button.active {
    background: #ffca28;
    color: #000;
}
.rt-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 6px;
}
.hall-color-picker {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    background: #000;
    transition: 0.2s;
}
.hall-color-picker:hover { transform: scale(1.1); border-color: #ffca28; }

/* O EDITOR PREMIUM */
.rt-editor {
    height: auto !important;
    min-height: 50px !important;
    max-height: 350px;
    overflow-y: auto;
    padding: 15px 20px;
    outline: none;
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 10px 10px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}
.rt-editor:focus {
    min-height: 160px !important;
    border-color: rgba(255, 202, 40, 0.5);
    background: rgba(10, 10, 10, 0.8);
    box-shadow: inset 0 2px 15px rgba(0,0,0,0.8), 0 0 20px rgba(255,202,40,0.1);
}

/* Formatação do texto gerado no Editor */
.rt-editor:empty:before { content: attr(data-placeholder); color: #666; font-style: italic; pointer-events: none; display: block; }
.rt-editor h1 { font-family: var(--font-palatino); color: #ffca28; margin-top: 5px; margin-bottom: 10px; border-bottom: 1px dashed #444; padding-bottom: 5px; }
.rt-editor h2 { font-family: var(--font-palatino); color: #4fc3f7; margin-top: 5px; margin-bottom: 8px; }
.rt-editor h3 { font-family: var(--font-palatino); color: #b39ddb; margin-top: 5px; margin-bottom: 5px; }
.rt-editor table { width: 100%; border-collapse: collapse; margin: 10px 0; border: 1px solid #444; }
.rt-editor th, .rt-editor td { border: 1px solid #444; padding: 8px; text-align: left; }
.rt-editor th { background: rgba(255, 202, 40, 0.1); color: #ffca28; }
.rt-editor a { color: #00e5ff; text-decoration: underline; cursor: pointer; transition: 0.2s;}
.rt-editor a:hover { color: #fff; }
.rt-editor ul, .rt-editor ol { margin-top: 5px; margin-bottom: 5px; padding-left: 20px; }

/* Botões Globais (Upload, Divisor, Enviar) */
.hall-btn-upload, .hall-btn-sep { background: #111; border: 1px solid #444; color: #aaa; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 11px; text-transform: uppercase; font-family: sans-serif; display:flex; align-items:center; justify-content:center; }
.hall-btn-upload:hover, .hall-btn-sep:hover { background: #222; color: #fff; border-color: #ffca28; }

.hall-btn-send-master {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
    border: 2px solid #ce93d8; color: #fff; padding: 0 20px;
    border-radius: 8px; font-weight: bold; font-family: var(--font-palatino);
    cursor: pointer; transition: 0.3s; height: 100%; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(106, 27, 154, 0.5);
}
.hall-btn-send-master:hover { background: linear-gradient(135deg, #6a1b9a, #8e24aa); border-color: #ffca28; color: #ffca28; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(156, 39, 176, 0.8); }

/* Spoilers e Novas Categorias (Lore, Notícia) */
.hall-spoiler { background: #1a1a1a; color: #1a1a1a; padding: 2px 8px; border-radius: 4px; cursor: pointer; transition: 0.3s; border: 1px solid #333; user-select: none; font-weight: bold; }
.hall-spoiler::selection { background: transparent; color: transparent; }
.hall-spoiler:hover { border-color: #ff9800; box-shadow: 0 0 5px rgba(255, 152, 0, 0.2); }
.hall-spoiler.revealed { background: rgba(255, 152, 0, 0.1); color: #ffb74d; border-color: #ff9800; user-select: text; }
.hall-spoiler.revealed::selection { background: rgba(255, 152, 0, 0.4); color: #fff; }

.hall-post.tipo-lore { border-left: 4px solid #9c27b0; background: linear-gradient(to right, rgba(156,39,176,0.1), rgba(15,15,15,0.7) 50%); }
.hall-post.tipo-patch { border-left: 4px solid #4caf50; background: linear-gradient(to right, rgba(76,175,80,0.1), rgba(15,15,15,0.7) 50%); }
.hall-post.tipo-noticia { border-left: 4px solid #ffeb3b; background: linear-gradient(to right, rgba(255,235,59,0.1), rgba(15,15,15,0.7) 50%); }

/* MODAIS CENTRALIZADOS - Usa 100% para não bugar a tela principal */
.hall-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 99999999 !important; }
.hall-modal-box { background: radial-gradient(circle at top, #1a1010 0%, #050505 100%); border: 2px solid #5a3c22; border-radius: 8px; padding: 30px; width: 90%; max-width: 450px; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 20px rgba(255,202,40,0.05); font-family: var(--font-palatino); }
.hall-modal-box h2 { color: #ffca28; font-size: 22px; border-bottom: 1px solid #333; padding-bottom: 10px; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 2px; }
.hall-modal-box p { color: #888; font-size: 13px; font-family: sans-serif; margin-bottom: 20px; }
.hall-modal-btns { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }
.hall-btn-confirm { flex: 2; background: transparent; border: 1px solid #4caf50; color: #4caf50; padding: 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: sans-serif; text-transform: uppercase; transition: 0.2s; }
.hall-btn-confirm:hover { background: #4caf50; color: #000; box-shadow: 0 0 15px rgba(76, 175, 80, 0.4); }
.hall-btn-cancel { flex: 1; background: #111; border: 1px solid #444; color: #aaa; padding: 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: sans-serif; text-transform: uppercase; transition: 0.2s; }
.hall-btn-cancel:hover { background: #333; color: #fff; }

/* MENÇÕES E BESTIARIO */
.mention-link { color: #ffca28; font-weight: bold; background: rgba(255, 202, 40, 0.15); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255, 202, 40, 0.4); cursor: pointer; transition: 0.2s; text-shadow: 0 0 5px rgba(255,202,40,0.5); }
.mention-link:hover { background: rgba(255, 202, 40, 0.3); transform: translateY(-2px); display: inline-block; }

.hall-mention-list { position: absolute; bottom: 100%; left: 0; width: 100%; max-height: 200px; background: rgba(10, 5, 10, 0.98); border: 2px solid #ffca28; border-radius: 8px 8px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.9), inset 0 0 15px rgba(255,202,40,0.1); z-index: 50; overflow-y: auto; backdrop-filter: blur(5px); }
.hall-mention-item { padding: 8px 15px; cursor: pointer; color: #fff; border-bottom: 1px dashed #331244; display: flex; align-items: center; gap: 15px; transition: 0.2s; font-family: sans-serif; font-size: 13px; }
.hall-mention-item:hover { background: linear-gradient(to right, rgba(255, 202, 40, 0.2), transparent); color: #ffca28; border-left: 3px solid #ffca28; padding-left: 12px; }
.hall-mention-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #ffca28; box-shadow: 0 0 10px rgba(0,0,0,0.8); }

/* CARD DE MONSTRO (EMBED) - CENTRALIZADO E PREMIUM */
.hall-monster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 10, 10, 0.95), rgba(15, 5, 5, 0.98));
    border: 1px solid rgba(244, 67, 54, 0.6);
    border-radius: 12px;
    padding: 0; /* Remove padding para a imagem colar nas bordas se desejar, ou manter uniforme */
    margin: 25px auto; /* Centraliza o card perfeitamente no corpo da mensagem */
    cursor: pointer;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 50px rgba(0,0,0,0.9), 0 0 30px rgba(244, 67, 54, 0.2);
    width: 95%; /* Ocupa quase tudo se for mobile, mas respeita o max-width */
    max-width: 500px; /* Tamanho imponente para o Grande Salão */
    backdrop-filter: blur(15px);
    overflow: hidden;
    user-select: none;
    position: relative;
}

.hall-monster-card:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,1), 0 0 40px rgba(244, 67, 54, 0.4);
    border-color: #ff5252;
}

.hmc-img {
    width: 100%;
    display: block;
    height: auto;
    max-height: 600px; /* Aumentado para dar mais espaço */
    object-fit: contain; /* 👈 AGORA NÃO CORTA MAIS A CABEÇA! Mostra a imagem inteira */
    background: #000;
    border-bottom: 2px solid rgba(244, 67, 54, 0.3);
}

.hmc-info {
    padding: 20px;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.hmc-name {
    color: #ff5252;
    font-family: inherit;
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(244, 67, 54, 0.9);
    background: linear-gradient(to right, #f44336, #ffca28, #f44336);
    -webkit-background-clip: text;
    background-clip: text; /* Corrigindo o warning de lint */
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/* ==========================================================
   O NOVO EDITOR DE TEXTO RICO (COMPACTO E EXPANSIVO)
========================================================== */
.hall-rt-toolbar { display: flex; gap: 4px; background: #1a1a1a; padding: 6px 10px; border-bottom: 1px solid #333; flex-wrap: wrap; align-items: center; border-radius: 4px 4px 0 0; }
.hall-rt-toolbar button { background: #000; color: #ccc; border: 1px solid #444; padding: 4px 8px; cursor: pointer; border-radius: 3px; font-size: 12px; font-family: sans-serif; transition: 0.2s; font-weight: bold; }
.hall-rt-toolbar button:hover { background: #ffca28; color: #000; border-color: #fff; }
.rt-divider { width: 1px; height: 18px; background: #555; margin: 0 4px; }
.hall-color-picker { width: 26px; height: 26px; padding: 0; border: 1px solid #444; border-radius: 3px; cursor: pointer; background: #000; }

/* O Editor Expansível - Minimalista até ser clicado */
.rt-editor {
    min-height: 40px;
    max-height: 250px; /* Se o texto ficar muito grande ele vai gerar a barra de rolagem */
    overflow-y: auto;
    padding: 10px;
    outline: none;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: min-height 0.3s ease;
}
.rt-editor:focus {
    min-height: 120px; /* Quando clikar para digitar ele vai expandir de forma elegante */
}

/* Tipografia dentro do editor */
.rt-editor:empty:before { content: attr(data-placeholder); color: #666; font-style: italic; pointer-events: none; display: block; }
.rt-editor h1 { font-family: var(--font-palatino); color: #ffca28; margin-top: 5px; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 5px; }
.rt-editor h2 { font-family: var(--font-palatino); color: #4fc3f7; margin-top: 5px; margin-bottom: 8px; }
.rt-editor h3 { font-family: var(--font-palatino); color: #b39ddb; margin-top: 5px; margin-bottom: 5px; }
.rt-editor table { width: 100%; border-collapse: collapse; margin: 10px 0; border: 1px solid #444; }
.rt-editor th, .rt-editor td { border: 1px solid #444; padding: 8px; text-align: left; }
.rt-editor th { background: rgba(255, 202, 40, 0.1); color: #ffca28; }
.rt-editor a { color: #00e5ff; text-decoration: underline; cursor: pointer; }
.rt-editor ul, .rt-editor ol { margin-top: 5px; margin-bottom: 5px; padding-left: 20px; }

/* ==========================================================
   SPOILER E NOVAS CATEGORIAS
========================================================== */
.hall-spoiler { background: #222; color: #222; padding: 2px 8px; border-radius: 4px; cursor: pointer; transition: 0.3s; border: 1px solid #444; user-select: none; font-weight: bold; }
.hall-spoiler::selection { background: transparent; color: transparent; }
.hall-spoiler:hover { border-color: #ff9800; box-shadow: 0 0 5px rgba(255, 152, 0, 0.4); }
.hall-spoiler.revealed { background: rgba(255, 152, 0, 0.1); color: #ffb74d; border-color: #ff9800; user-select: text; }
.hall-spoiler.revealed::selection { background: rgba(255, 152, 0, 0.4); color: #fff; }

.hall-post.tipo-lore { border-left: 4px solid #9c27b0; background: linear-gradient(to right, rgba(156,39,176,0.1), rgba(15,15,15,0.7) 50%); }
.hall-post.tipo-patch { border-left: 4px solid #4caf50; background: linear-gradient(to right, rgba(76,175,80,0.1), rgba(15,15,15,0.7) 50%); }
.hall-post.tipo-noticia { border-left: 4px solid #ffeb3b; background: linear-gradient(to right, rgba(255,235,59,0.1), rgba(15,15,15,0.7) 50%); }

/* ==========================================================
   RESPONSIVIDADE: O SALÃO SE ADAPTA
========================================================== */

/* TELAS MÉDIAS E NOTEBOOKS (< 1150px) */
@media (max-width: 1150px) {
    .hall-sidebar { width: 220px; }
    .hall-brand h2 { font-size: 18px; }
    .hall-feed { padding: 15px; }
    .hall-post { padding: 15px; gap: 15px; }
    .hall-input-area { padding: 15px; }
    .hall-post-actions { opacity: 1; } /* Mostra botões de post p/ evitar erro no hover em touchpad */
}

/* CELULARES E TABLETS RETRATO (< 768px) */
@media (max-width: 768px) {
    /* Container passa a empilhar elementos (topo e baixo) */
    .hall-container {
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* BARRA LATERAL NO TOPO - ESTILO COMPACTO */
    .hall-sidebar {
        width: 100% !important;
        flex: 0 1 140px !important; /* Permite esmagar se o teclado digital subir */
        max-height: 140px !important;
        border-right: none !important;
        border-bottom: 2px solid #4a3623 !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.8);
        z-index: 10;
        padding-bottom: 5px !important;
    }

    .hall-brand { padding: 8px 15px !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .hall-brand h2 { font-size: 15px !important; margin: 0; }
    .hall-brand p { font-size: 9px !important; margin: 0; white-space: nowrap; }
    .hall-search-box { padding: 5px 15px !important; }

    /* ÁREA PRINCIPAL E FEED */
    .hall-main {
        flex: 1 !important;
        min-height: 0; /* Crítico: permite scroll interno sem esticar a tela */
    }

    .hall-header { padding: 10px !important; }
    .hall-title { font-size: 16px !important; }
    .hall-desc { font-size: 11px !important; }

    .hall-feed {
        padding: 10px !important;
        gap: 15px !important;
    }

    .hall-post { padding: 12px !important; gap: 10px !important; flex-direction: column !important; }
    .hall-post-meta { flex-direction: column; align-items: flex-start; gap: 5px; }
    .hall-post-avatar { width: 35px !important; height: 35px !important; position: absolute; right: 10px; top: 10px; }
    .hall-post-actions { position: relative !important; right: auto !important; top: auto !important; opacity: 1 !important; justify-content: flex-end; margin-top: 10px; border-top: 1px dashed #333; padding-top: 8px; }

    /* Textos Expansivos */
    .hall-post-text { font-size: 14px !important; line-height: 1.5 !important; min-width: 0 !important; }
    .hall-post-image { max-width: 100% !important; margin-top: 10px; }

    /* CARDS MONSTER */
    .hall-monster-card { width: 100% !important; max-width: 100% !important; margin: 5px 0 !important; }
    .hmc-name { font-size: 16px !important; }
    .hmc-img { max-height: 300px !important; }

    /* COMPOSITE FIELDS (Nome, Título, Local) */
    .hall-post-composite { flex-direction: column !important; gap: 8px !important; padding: 10px !important; }
    
    /* EDITOR E PAINEL SOCIAL */
    .hall-input-area { padding: 10px !important; gap: 10px !important; }
    
    /* Configurações Avançadas */
    .hall-advanced-panel > div:last-child { flex-direction: column !important; gap: 10px !important; }
    .hall-input-main > div { flex-direction: column !important; gap: 8px !important; }
    
    /* Linha de Tipos e Botões (Em cima do Editor no mobile) */
    .hall-input-main > div > div:first-child { width: 100% !important; flex-direction: row !important; align-items: center; justify-content: space-between; }
    .hall-select-post-tipo { flex: 1; }
    .hall-btn-upload, .hall-btn-sep { padding: 8px !important; flex: 1; }
    
    /* Toolbar Rica e Editor Touch Friendly */
    .rt-editor { min-height: 40px !important; max-height: 100px !important; padding: 10px !important; font-size: 13px !important; }
    .hall-rt-toolbar { gap: 2px !important; padding: 5px !important; justify-content: center; background: #111; }
    .hall-rt-toolbar button { padding: 6px 8px !important; font-size: 12px !important; }
    .hall-color-picker { width: 26px !important; height: 26px !important; }
    
    /* Botão Final Poderoso */
    .hall-btn-send-master { width: 100% !important; min-height: 40px !important; height: 40px !important; font-size: 16px !important; margin-top: 5px; }

    /* =======================================================
       ✨ MAGIC FOCUS: MAXIMIZING SCREEN FOR MOBILE KEYBOARD
       ======================================================= */
    /* Quando o campo de texto é clicado, esconde elementos pesados para limpar a tela */
    .hall-container:has(.rt-editor:focus) .hall-sidebar { display: none !important; }
    .hall-container:has(.rt-editor:focus) .hall-header { display: none !important; }
    .hall-container:has(.rt-editor:focus) .hall-input-main > div > div:first-child { display: none !important; }
    
    /* Esconde botões desnecessários de formatação complexa (Tabela, etc) para poupar linha */
    .hall-rt-toolbar button[title="Título 1"],
    .hall-rt-toolbar button[title="Título 2"],
    .hall-rt-toolbar button[title="Tabela"],
    .hall-rt-toolbar button[title="Link"],
    .hall-rt-toolbar .hall-color-picker,
    .hall-rt-toolbar .rt-divider {
        display: none !important;
    }

    /* EMOJI BOX */
    .hall-emoji-popup { right: 50% !important; transform: translateX(50%) !important; width: 90% !important; max-width: 320px; z-index: 99999; }
    
    /* MODAIS */
    .hall-modal-box { padding: 15px !important; width: 95% !important; }
    .hall-modal-box h2 { font-size: 18px !important; }
    .hv-content { flex-direction: column !important; }
    .hv-left, .hv-right { flex: none !important; width: 100% !important; border-left: none !important; padding-left: 0 !important; }
}
/* --------------------------------------------------------------------------
   Migrado de hall.html (inline style=)
   -------------------------------------------------------------------------- */

/* gm-only oculto por padrão; JS mestre seta style.display (inline vence) */
.hall-container .gm-only { display: none; }

.hall-gm-secrets {
    border-top: 1px solid rgba(255,202,40,0.2);
    padding-top: 10px;
    margin-top: 15px;
}

.hall-cat-header--gold { color: #ffca28; }

/* áreas controladas por JS via style.display */
#hall-input-box { display: none; }
#hall-permissions-wrapper {
    display: none;
    gap: 15px;
    align-items: center;
}
#hall-advanced-inputs { display: none; }
#hall-post-alvos.hall-input-alvos {
    display: none;
    width: 150px;
    padding: 4px 8px;
    margin-left: 5px;
}
#hall-banner-preview.hall-banner-preview {
    color: #4caf50;
    font-size: 11px;
    display: none;
    font-weight: bold;
}
#hall-img-preview.hall-img-preview {
    display: none;
    color: #4caf50;
    font-size: 11px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    top: -25px;
    left: 0;
}
#hall-mention-autocomplete { display: none; }
#hc-alvos-div.hall-hc-alvos {
    display: none;
    margin-top: 10px;
}
#he-composite-area.he-composite-area {
    display: none;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #333;
    padding-bottom: 15px;
}

.hall-select-vis {
    width: auto;
    display: inline-block;
    margin-left: 5px;
    padding: 4px 8px;
}

.hall-file-hidden { display: none; }

.hall-adv-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.hall-btn-upload--banner {
    padding: 4px 12px;
    font-size: 10px;
}

.hall-adv-fields {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hall-adv-field {
    flex: 1;
    min-width: 150px;
}

.hall-composer-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.hall-composer-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 160px;
    flex-shrink: 0;
    justify-content: flex-end;
}

.hall-composer-side-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.hall-btn-sep { padding: 10px; }
.hall-btn-upload--attach { padding: 10px; }

.hall-composer-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.hall-btn-emoji {
    font-size: 16px;
    padding: 2px 8px;
}

.hall-btn-spoiler { color: #ff9800; }

.hall-btn-send-master {
    flex-shrink: 0;
    min-width: 120px;
}

.hall-btn-send-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 5px;
}

/* modais: ocultos por padrão; JS usa style.display = flex/none */
.hall-modal-overlay {
    display: none;
}

.hall-input--mt { margin-top: 10px; }

.hall-canal-perm-block {
    margin-top: 15px;
    border-top: 1px dashed #444;
    padding-top: 15px;
}

.hall-lbl-adv--cyan { color: #00e5ff; }

.hall-modal-box--wide { max-width: 600px; }

.he-composite-field { flex: 1; }

.hall-textarea-edit {
    height: 150px;
    resize: none;
}

.hall-modal-box--vision {
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.hv-title {
    color: #ffca28;
    font-family: 'Cinzel', serif;
    margin: 0;
}

.hv-subtitle {
    color: #aaa;
    margin: 5px 0 0 0;
    font-family: 'EB Garamond', serif;
}

.hv-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    gap: 20px;
    padding: 20px 0;
}

.hv-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hv-input-group {
    display: flex;
    gap: 5px;
}

.hv-upload-btn {
    background: #333;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #444;
}

.hv-target-container {
    background: rgba(0,0,0,0.3);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
}

.hv-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    min-height: 30px;
}

.hv-target-controls {
    display: flex;
    gap: 10px;
}

.hv-btn-clear { padding: 5px 10px; }

.hv-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hv-right {
    flex: 1;
    border-left: 1px dashed #444;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

.hv-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hall-lbl-adv--no-margin { margin: 0; }

.hv-btn-refresh {
    background: none;
    border: none;
    color: #ffca28;
    cursor: pointer;
    font-size: 11px;
}

.hv-gallery-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    min-height: 200px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 4px;
}

.hv-footer {
    margin-top: 20px;
    border-top: 1px solid #444;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hv-footer-hint {
    color: #666;
    font-size: 11px;
    font-style: italic;
}

.hv-footer-actions {
    display: flex;
    gap: 15px;
}

.hv-btn-manifest {
    background: linear-gradient(135deg, #ffca28 0%, #ff8f00 100%);
    color: #000;
    font-weight: bold;
    border: none;
    padding: 10px 25px;
    box-shadow: 0 0 15px rgba(255,202,40,0.3);
}