* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

html, body {
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    background-color: #0d1117;
    color: #e6edf3;
}

/* Auth */
.auth-container { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 20px; }
.auth-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 32px; width: 100%; max-width: 400px; }
.auth-card h2 { margin-bottom: 8px; }
.auth-card .subtitle { color: #8b949e; margin-bottom: 24px; font-size: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; color: #8b949e; }
.form-group input { width: 100%; padding: 10px 14px; border-radius: 6px; background: #0d1117; border: 1px solid #30363d; color: #fff; outline: none; }
.form-group input:focus { border-color: #58a6ff; }
.auth-footer { margin-top: 18px; text-align: center; font-size: 14px; color: #8b949e; }
.auth-footer a { color: #58a6ff; text-decoration: none; }
.alert { padding: 10px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; }
.alert-error { background: #ffebe9; color: #cf222e; }
.alert-success { background: #dafbe1; color: #1a7f37; }

/* Gombok */
.btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
.btn-primary { background: #238636; color: #fff; width: 100%; }
.btn-secondary { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Elrendezés */
.app-layout { display: flex; height: 100%; height: 100dvh; width: 100%; position: relative; overflow: hidden; }

/* Oldalsáv */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: 290px;
    max-width: 85vw;
    background: #161b22;
    border-right: 1px solid #30363d;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #30363d; }
.sidebar-header-actions { display: flex; align-items: center; gap: 8px; }
.btn-close-sidebar { background: none; border: none; color: #8b949e; font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.btn-close-sidebar:hover { color: #fff; background: #30363d; }

.history-list { flex: 1; overflow-y: auto; padding: 10px; }
.history-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    color: #c9d1d9; margin-bottom: 5px; background: #111418;
    border: 1px solid transparent;
}
.history-item:hover { background: #21262d; }
.history-item.active { background: #21262d; border-color: #388bfd; }
.room-item-content { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.history-title { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.creator-tag { font-size: 11px; color: #8b949e; }
.delete-btn { background: none; border: none; color: #8b949e; font-size: 16px; cursor: pointer; padding: 0 4px; }
.delete-btn:hover { color: #f85149; }

.user-panel { padding: 14px 16px; border-top: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center; }
.btn-logout { color: #f85149; text-decoration: none; font-size: 13px; }

/* Fő chat konténer */
.chat-main { flex: 1; display: flex; flex-direction: column; background: #0d1117; min-width: 0; height: 100%; height: 100dvh; overflow: hidden; }

/* Fejléc */
.chat-header {
    flex-shrink: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #30363d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #161b22;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hamburger-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.hamburger-btn:hover { background: #30363d; }
.room-info h2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.action-btn {
    border: none;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.action-btn:hover { opacity: 0.9; }

.btn-gemini-chat { background: #1f6feb; color: #ffffff; }
.btn-gemini-chat .btn-tag { background: #388bfd; font-size: 11px; padding: 2px 5px; border-radius: 8px; }

.btn-gemini-code { background: #8957e5; color: #ffffff; }
.btn-gemini-code .btn-tag { background: #a371f7; font-size: 11px; padding: 2px 5px; border-radius: 8px; }

/* Üzenetek konténere */
.messages-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.message-row { display: flex; width: 100%; }
.message-row.me { justify-content: flex-end; }
.message-row.other, .message-row.bot { justify-content: flex-start; }

.message-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.message-author { font-size: 12px; font-weight: bold; margin-bottom: 4px; }

.message-row.me .message-bubble { background: #1f6feb; color: #fff; border-bottom-right-radius: 2px; }
.message-row.me .message-author { color: #d0e2ff; }

.message-row.other .message-bubble { background: #21262d; border: 1px solid #30363d; border-bottom-left-radius: 2px; }
.message-row.other .message-author { color: #58a6ff; }

.message-row.bot .message-bubble { background: #161b22; border: 1px solid #8957e5; border-bottom-left-radius: 2px; }
.message-row.bot .message-author { color: #d2a8ff; font-size: 12.5px; }

/* Pulzáló közös AI értesítés */
.ai-thinking-bubble {
    background: #161b22 !important;
    border: 1px dashed #8957e5 !important;
    border-left: 4px solid #8957e5 !important;
    color: #e6edf3;
}
.ai-thinking-header {
    font-size: 13px;
    color: #d2a8ff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pulsing-dot {
    color: #8957e5;
    font-size: 16px;
    animation: ai-pulse 1.2s infinite ease-in-out;
}
@keyframes ai-pulse {
    0% { opacity: 0.3; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.25); }
    100% { opacity: 0.3; transform: scale(0.85); }
}
.ai-thinking-text {
    font-size: 12.5px;
    color: #8b949e;
    font-style: italic;
}

/* Alsó beviteli sáv */
.chat-input-area {
    flex-shrink: 0;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid #30363d;
    background: #161b22;
}
.input-container { display: flex; gap: 10px; align-items: flex-end; }
.input-container textarea {
    flex: 1;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    outline: none;
    resize: none;
    font-size: 14px;
    max-height: 120px;
}
.input-container textarea:focus { border-color: #58a6ff; }
.btn-send { background: #238636; color: #fff; height: 39px; }

/* Kódkiemelés és másolás */
pre { position: relative; margin: 10px 0; border-radius: 6px; overflow: hidden; }
pre code { display: block; padding: 12px; overflow-x: auto; }
.copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #8b949e;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s ease;
}
.copy-btn:hover {
    color: #fff;
    background: #30363d;
}
.copy-btn.copied {
    background: #238636 !important;
    color: #ffffff !important;
    border-color: #2ea043 !important;
}

/* Mobil és Sötétítő háttér */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
}
.sidebar-backdrop.active { display: block; }

@media (max-width: 600px) {
    .hamburger-text { display: none; }
    .btn-tag { display: none; }
    .action-btn { padding: 6px 9px; font-size: 12px; }
    .room-info h2 { font-size: 13.5px; max-width: 90px; }
}

/* LISTÁK ÉS BULLETEK JAVÍTÁSA (nem lógnak ki többé a buborékból) */
.message-body ul, 
.message-body ol {
    padding-left: 26px !important;
    margin: 8px 0 !important;
}

.message-body li {
    margin-bottom: 5px;
    line-height: 1.5;
}

.message-body p {
    margin-bottom: 8px;
}
.message-body p:last-child {
    margin-bottom: 0;
}

/* Lakat ikon a privát szobáknál */
.lock-icon {
    font-size: 13px;
    margin-right: 4px;
}

/* LISTÁK ÉS BULLETEK JAVÍTÁSA */
.message-body ul, 
.message-body ol {
    padding-left: 26px !important;
    margin: 8px 0 !important;
}
.message-body li {
    margin-bottom: 5px;
    line-height: 1.5;
}
.message-body p {
    margin-bottom: 8px;
}
.message-body p:last-child {
    margin-bottom: 0;
}

/* LAKAT IKON */
.lock-icon {
    font-size: 13px;
    margin-right: 4px;
}

/* HÁROM PÖTTYÖS MENÜ A SZOBÁKNÁL */
.room-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.room-menu-btn {
    background: transparent;
    border: none;
    color: #8b949e;
    font-size: 18px;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
}
.room-menu-btn:hover {
    color: #fff;
    background: #30363d;
}

.room-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 1010;
    min-width: 170px;
    padding: 4px;
    flex-direction: column;
}
.room-dropdown-menu.show {
    display: flex;
}

.room-dropdown-menu button {
    background: transparent;
    border: none;
    color: #c9d1d9;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.room-dropdown-menu button:hover {
    background: #21262d;
    color: #fff;
}
.room-dropdown-menu button.danger-btn {
    color: #f85149;
}
.room-dropdown-menu button.danger-btn:hover {
    background: rgba(248, 81, 73, 0.15);
    color: #ff7b72;
}

/* TAGOK LISTÁZÁSA FELUGRÓ ABLAK (MODAL) */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-backdrop.show {
    display: flex;
}

.modal-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid #30363d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    font-size: 15px;
    color: #e6edf3;
}
.modal-close-btn {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 18px;
    cursor: pointer;
}
.modal-close-btn:hover { color: #fff; }

.modal-body {
    padding: 16px 18px;
    max-height: 320px;
    overflow-y: auto;
}

.modal-members-ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-members-ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-size: 14px;
}
.member-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #21262d;
    color: #8b949e;
}
.member-tag.creator {
    background: #1f6feb;
    color: #fff;
}

/* CSATOLMÁNY GOMB AZ INPUT SÁVBAN */
.btn-attach {
    background: transparent;
    border: none;
    color: #8b949e;
    font-size: 20px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-attach:hover {
    color: #fff;
    background: #21262d;
}

/* CSATOLT FÁJL ELŐNÉZETI CSÍK AZ INPUT FELETT */
.attachment-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.attachment-preview-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.attachment-icon {
    font-size: 18px;
}
.attachment-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.attachment-filename {
    font-size: 13px;
    font-weight: 600;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}
.attachment-filesize {
    font-size: 11px;
    color: #8b949e;
}
.upload-progress-wrapper {
    width: 100px;
    height: 6px;
    background: #21262d;
    border-radius: 3px;
    overflow: hidden;
    margin-left: 10px;
}
.upload-progress-bar {
    height: 100%;
    background: #238636;
    width: 0%;
    transition: width 0.2s;
}
.btn-remove-attachment {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}
.btn-remove-attachment:hover {
    color: #f85149;
    background: #21262d;
}

/* CHATBEN MEGJELENŐ KÉPEK */
.msg-attachment-container {
    margin-top: 8px;
}
.attachment-image-link {
    display: inline-block;
    max-width: 100%;
}
.chat-attachment-img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    border: 1px solid #30363d;
    object-fit: contain;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}
.chat-attachment-img:hover {
    opacity: 0.9;
}

/* CHATBEN MEGJELENŐ LETÖLTHETŐ FÁJLKÁRTYA (ZIP, PDF, KÓD STB.) */
.attachment-file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: #e6edf3;
    transition: background 0.2s, border-color 0.2s;
    max-width: 380px;
}
.attachment-file-card:hover {
    background: #161b22;
    border-color: #58a6ff;
}
.file-card-icon {
    font-size: 22px;
}
.file-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.file-card-name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-card-size {
    font-size: 11px;
    color: #8b949e;
}
.file-card-download-icon {
    font-size: 16px;
    color: #58a6ff;
}

/* HIÁNYZÓ / TÖRÖLT FÁJL JELZÉSE */
.missing-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(248, 81, 73, 0.1);
    border: 1px dashed #f85149;
    border-radius: 6px;
    font-size: 12px;
    color: #ff7b72;
    margin-top: 6px;
}

/* BEÉPÍTETT CHAT AUDIO / MP3 LEJÁTSZÓ */
.chat-audio-card {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    max-width: 360px;
    width: 100%;
}

.chat-audio-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #e6edf3;
}

.audio-card-icon {
    font-size: 16px;
}

.audio-card-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.audio-card-size {
    font-size: 11px;
    color: #8b949e;
}

.chat-audio-element {
    width: 100%;
    height: 38px;
    outline: none;
    border-radius: 20px;
}

/* DRAG & DROP LEBEGŐ FELÜLET */
.drag-drop-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(13, 17, 23, 0.88);
    backdrop-filter: blur(4px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.drag-drop-overlay.active {
    display: flex;
}

.drag-drop-box {
    border: 2px dashed #58a6ff;
    border-radius: 16px;
    padding: 40px 60px;
    text-align: center;
    background: #161b22;
    color: #e6edf3;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    transform: scale(1.02);
    transition: transform 0.2s;
}

.drag-drop-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.drag-drop-box h3 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #58a6ff;
}

.drag-drop-box p {
    font-size: 13px;
    color: #8b949e;
}

/* YOUTUBE GOMBOK / LINK KÁRTYÁK A CHATBEN */
.message-body a[href*="youtube.com"], 
.message-body a[href*="youtu.be"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff0000;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
    margin: 3px 2px;
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.3);
    transition: transform 0.15s, background 0.15s;
}

.message-body a[href*="youtube.com"]:hover, 
.message-body a[href*="youtu.be"]:hover {
    background: #cc0000;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.45);
}

/* SZOBA RÁDIÓ WIDGET AZ OLDALSÁV ALJÁN */
.sidebar-music-widget {
    background: #0d1117;
    border-top: 1px solid #30363d;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.music-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.music-widget-title {
    font-size: 12px;
    font-weight: 700;
    color: #58a6ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.music-widget-time {
    font-size: 11px;
    color: #8b949e;
    font-family: monospace;
}

.music-now-playing {
    font-size: 12.5px;
    font-weight: 600;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 6px;
    background: #161b22;
    border-radius: 6px;
    border: 1px solid #30363d;
}

.music-controls-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.music-controls-row input {
    flex: 1;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 6px 8px;
    color: #fff;
    font-size: 12px;
    outline: none;
    min-width: 0;
}
.music-controls-row input:focus {
    border-color: #58a6ff;
}

.btn-music-action {
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.btn-music-action.play {
    background: #238636;
    color: #fff;
}
.btn-music-action.play:hover {
    background: #2ea043;
}
.btn-music-action.stop {
    background: #da3633;
    color: #fff;
}
.btn-music-action.stop:hover {
    background: #f85149;
}

.music-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.vol-icon {
    font-size: 14px;
    cursor: pointer;
}

#music-volume-slider {
    flex: 1;
    height: 4px;
    background: #21262d;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    accent-color: #58a6ff;
}

/* FELHASZNÁLÓI PROFIL GOMB AZ OLDALSÁV ALJÁN */
.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
    user-select: none;
}
.user-profile-btn:hover {
    background: #21262d;
}
.settings-gear {
    font-size: 13px;
    opacity: 0.7;
    transition: transform 0.2s, opacity 0.2s;
}
.user-profile-btn:hover .settings-gear {
    opacity: 1;
    transform: rotate(45deg);
}

/* BEÁLLÍTÁSOK MODAL BELSŐ STÍLUSAI */
.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-section h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #e6edf3;
}
.form-group-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.form-group-compact label {
    font-size: 12px;
    color: #8b949e;
}
.form-group-compact input {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 8px 10px;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.form-group-compact input:focus {
    border-color: #58a6ff;
}
.settings-divider {
    border: none;
    border-top: 1px solid #30363d;
    margin: 6px 0;
}
.danger-section {
    background: rgba(248, 81, 73, 0.05);
    border: 1px dashed rgba(248, 81, 73, 0.4);
    border-radius: 8px;
    padding: 12px;
}
.danger-section h4 {
    color: #f85149;
}
.danger-desc {
    font-size: 12px;
    color: #8b949e;
    margin-bottom: 12px;
    line-height: 1.4;
}
.btn-danger {
    background: #da3633;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.btn-danger:hover {
    background: #f85149;
}

/* PINGELÉS ÉS @EMLÍTÉSEK */
.message-author {
    cursor: pointer;
    transition: opacity 0.15s;
}
.message-author:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Általános @Említés jelvény a sötét háttereken (más üzenetében) */
.mention-tag {
    background: rgba(88, 166, 255, 0.18);
    color: #58a6ff;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95em;
    display: inline-block;
    border: 1px solid rgba(88, 166, 255, 0.3);
}

/* JAVÍTÁS: A SAJÁT KÉK BUBORÉKUNKBAN (KONTRASZTOS FEHÉR KAPSZULA) */
.message-row.me .mention-tag {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
}

/* Ha ÉNGEM pingeltek meg (kiemelt aranysárga kapszula) */
.mention-tag.highlight-me {
    background: rgba(210, 153, 34, 0.35);
    color: #f1e05a;
    border: 1px solid rgba(210, 153, 34, 0.7);
    animation: ping-pulse 1s ease-in-out;
}

/* Ha a kék buborékban szerepel a saját nevem */
.message-row.me .mention-tag.highlight-me {
    background: rgba(255, 215, 0, 0.35) !important;
    color: #fffbdf !important;
    border: 1px solid rgba(255, 215, 0, 0.8) !important;
}

/* Arany fénykeret, ha az üzenet engem szólított meg */
.message-row.mentioned-me .message-bubble {
    border: 1.5px solid #d29922 !important;
    box-shadow: 0 0 14px rgba(210, 153, 34, 0.3);
}

@keyframes ping-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* MÉM KÉPEK A CHATBEN */
.message-body img {
    max-width: 100%;
    max-height: 420px;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
    object-fit: contain;
    border: 1px solid #30363d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* LEBEGŐ UGRÁS AZ ALJÁRA (↓) GOMB */
.scroll-bottom-btn {
    position: absolute;
    bottom: 75px;
    right: 22px;
    background: #21262d;
    border: 1px solid #30363d;
    color: #58a6ff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 100;
}
.scroll-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-bottom-btn:hover {
    background: #30363d;
    color: #fff;
    transform: translateY(-2px);
}

/* ÜZENET FEJLÉC ÉS IDŐBÉLYEG (ÓÓ:PP) */
.message-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.message-timestamp {
    font-size: 11px;
    color: #8b949e;
    font-weight: 500;
    user-select: none;
    white-space: nowrap;
    opacity: 0.85;
}

/* A saját kék buborékunkban diszkrét áttetsző fehér szín a jó olvashatóságért: */
.message-row.me .message-timestamp {
    color: rgba(255, 255, 255, 0.75);
}

/* SZOBA RÁDIÓ AUTOPLAY FELOLDÓ GOMB */
.music-autoplay-prompt {
    display: none;
    align-items: center;
    justify-content: center;
    background: #238636;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(35, 134, 54, 0.4);
    animation: prompt-pulse 1.5s infinite ease-in-out;
}
.music-autoplay-prompt:hover {
    background: #2ea043;
}

@keyframes prompt-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* MODERÁCIÓ ÉS KITILTÁS STÍLUSOK */
.owner-crown {
    margin-right: 4px;
    font-size: 13px;
}

.banned-tag {
    margin-right: 4px;
    font-size: 12px;
}

.history-item.banned-room {
    opacity: 0.55;
    background: rgba(248, 81, 73, 0.08) !important;
    border-color: rgba(248, 81, 73, 0.3) !important;
}

.modal-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.member-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ban-member {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.4);
    color: #ff7b72;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ban-member:hover {
    background: #da3633;
    color: #fff;
}

.btn-unban-member {
    background: rgba(35, 134, 54, 0.2);
    border: 1px solid rgba(46, 160, 67, 0.5);
    color: #3fb950;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-unban-member:hover {
    background: #238636;
    color: #fff;
}