/**
 * Nefarious IRC Web Client - Styles
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* High-quality image scaling for all images (avatars, emoji, embedded media) */
img {
    /* Force GPU compositing for smoother downscaling */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* CSS variables are defined in themes.css */

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    background: var(--light-bg);
    color: var(--text-color);
    /* Use dynamic viewport height for mobile keyboard support */
    height: var(--app-height, 100dvh);
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: var(--app-height, 100dvh);
}

/* Header */
.app-header {
    background: var(--dark-bg);
    color: var(--text-inverse);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Sidebar title row with status indicator (h2 element) */
h2.sidebar-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    line-height: 1;
}

/* Sidebar nickname (h3) - contains avatar + text */
.sidebar-nickname {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    text-transform: none !important;
    margin: 0 !important;
}

/* Sidebar avatar - clickable profile picture inside h3 */
.sidebar-avatar {
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 3px;
    cursor: pointer;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.15s ease;
    image-rendering: auto;
}

.sidebar-avatar:hover {
    opacity: 0.8;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
}

.status-dot.connected {
    background: var(--warning-color);
    box-shadow: 0 0 8px var(--warning-color);
}

.status-dot.offline {
    background: var(--status-offline);
}

/* Main Container */
.app-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: var(--darker-bg);
    color: var(--text-inverse);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--dark-bg);
    overflow-y: auto;
}

.sidebar-section {
    padding: 1rem;
    border-bottom: 1px solid var(--dark-bg);
}

.sidebar-section h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--light-text);
    margin-bottom: 0.75rem;
}

.channel-list {
    list-style: none;
}

/* Unified sidebar button styles - match channel-item exactly */
.sidebar .btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    text-align: left;
}

.channel-item {
    padding: 0 0.75rem;
    margin: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.channel-item:hover {
    background: rgba(255,255,255,0.1);
}

.channel-item.active {
    background: var(--primary-color);
}

.channel-item.server-channel {
    min-height: 44px; /* Match height of close button on other channel items */
}

.channel-name {
    font-weight: 600;
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
}

.channel-close-btn {
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    margin-left: 0.5rem;
    transition: color 0.2s;
    opacity: 0;
}

.channel-item:hover .channel-close-btn {
    opacity: 1;
}

.channel-close-btn:hover {
    color: var(--danger-color);
}

/* Unread message indicators */
.channel-item.has-unread .channel-name,
.dm-item.has-unread .dm-name {
    font-weight: 700;
    color: var(--text-inverse);
}

.channel-item.has-unread,
.dm-item.has-unread {
    background: rgba(255, 255, 255, 0.05);
}

.unread-badge {
    color: var(--primary-color);
    font-size: 0.6rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

/* Hide close button when unread badge is shown */
.channel-item.has-unread .channel-close-btn,
.dm-item.has-unread .dm-close-btn {
    display: none;
}

.channel-item.has-unread:hover .channel-close-btn,
.dm-item.has-unread:hover .dm-close-btn {
    display: block;
}

.channel-item.has-unread:hover .unread-badge,
.dm-item.has-unread:hover .unread-badge {
    display: none;
}

/* New messages divider in chat */
.new-messages-divider {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    color: var(--danger-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.new-messages-divider::before,
.new-messages-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--danger-color);
}

.new-messages-divider::before {
    margin-right: 0.5rem;
}

.new-messages-divider::after {
    margin-left: 0.5rem;
}

/* Load more history indicator */
.history-indicator {
    text-align: center;
    padding: 0.75rem;
    color: var(--light-text);
    font-size: 0.875rem;
}

.history-indicator .load-more-btn {
    background: var(--primary-color);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
}

.history-indicator .load-more-btn:hover {
    background: var(--primary-hover);
}

.history-indicator .load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-end {
    text-align: center;
    padding: 0.5rem;
    color: var(--light-text);
    font-size: 0.75rem;
    font-style: italic;
}

/* Drag and drop styles for channel reordering */
.channel-item {
    cursor: move;
}

.channel-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.channel-item.drag-over-top {
    border-top: 2px solid var(--primary-color);
}

.channel-item.drag-over-bottom {
    border-bottom: 2px solid var(--primary-color);
}

.server-info {
    font-size: inherit;
    line-height: inherit;
}

.server-info p {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
}

/* Chat Area */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    position: relative;
}

.chat-header {
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--chat-bg);
}

.chat-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    padding: .25rem 0;
}

/* Chat Header Content - contains channel name and topic */
.chat-header-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 .5em;
}

/* Topic Display - subtitle under channel name */
.topic-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
}

.topic-text {
    flex: 1;
    color: var(--light-text);
    max-height: 20vh;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    overflow-wrap: break-word;
    /* Multi-line ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12; /* Approximate 20vh worth of lines */
}

.topic-text:empty::before {
    content: 'No topic set';
    font-style: italic;
    opacity: 0.5;
}

.topic-edit-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--light-text);
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.topic-edit-btn:hover {
    opacity: 1;
}

/* Topic Editor - inline editing */
.topic-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.topic-input {
    flex: 1;
    height: 1.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.3;
}

.topic-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.btn-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

/* Wrapper for messages container - provides position context for scroll indicators */
.messages-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.messages {
    height: 100%;
    padding: 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: max(var(--emoji-size, 2rem), 1);
    gap: .05rem;
    /* Hide scrollbar completely (Firefox) */
    scrollbar-width: none;
    /* Column layout: DOM order matches visual order (fixes text selection).
       Newest messages at visual bottom via appendChild.
       scrollTop=scrollHeight-clientHeight = at bottom (newest). */
    display: flex;
    flex-direction: column;
    /* Disable browser scroll anchoring completely - we handle scroll manually.
       Browser default is 'auto' which causes unwanted position adjustments during resize. */
    overflow-anchor: none;
}

/* Hide scrollbar (WebKit/Blink - Chrome, Safari, Edge) */
.messages::-webkit-scrollbar {
    display: none;
}

.message {
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow shifted emoji to extend beyond message bounds */
    transition: background-color 0.05s ease !important;
}

.message:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Message layout: [avatar] [content area with header + text] */
.message-message, .media-message, .action-message {
    display: flex;
    flex-direction: row; /* Override .message column layout */
    gap: 0.5rem;
    align-items: flex-start;
}

/* Avatar column - left side of message */
.message-avatar {
    /* Size relative to emoji setting (150% of emoji size) */
    /* Only take space when containing an image */
    width: 0;
    height: 0;
    flex-shrink: 0;
    margin-top: 0;
}

/* When avatar has an image, expand to proper size */
.message-avatar:has(.avatar-img) {
    min-width: calc(var(--emoji-size, 2rem) * 1.5);
    width: calc(var(--emoji-size, 2rem) * 1.5);
    height: calc(var(--emoji-size, 2rem) * 1.5);
}

.message-avatar .avatar-img {
    width: 100%;
    height: calc(var(--emoji-size, 2rem) * 1.5);
    max-width: calc(var(--emoji-size, 2rem) * 1.5);
    border-radius: 3px;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: auto;
}

/* Hide avatars in Status window - no user avatars for server messages */
.messages[data-current-channel="status"] .message-avatar {
    display: none;
}

/* Content area - header and text stacked vertically */
.message-content {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink */
}

.message-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.message-nick {
    font-weight: bold;
    color: var(--primary-color);
}

.message-time {
    color: var(--light-text);
    font-size: 0.75rem;
    font-style: italic;
    margin-left: .5rem;
}

/* Message content layout - buttons flow inline after text */
.message-wrapper .message-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.25rem;
}

/* Remove header from layout flow, let children become direct flex items */
.message-wrapper .message-header {
    display: contents;
}

/* Nick and time come first */
.message-wrapper .message-nick {
    order: 0;
}
.message-wrapper .message-time {
    order: 1;
}

/* Line break after nick/time, before reply context/text/buttons */
.message-wrapper .message-content::before {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 2;
    pointer-events: none;
}

/* Reply context appears before text */
.message-wrapper .message-reply-context {
    order: 3;
    pointer-events: auto; /* Ensure clickable */
}

/* Line break after reply context, before message text */
.message-wrapper .reply-context-break {
    order: 4;
    flex-basis: 100%;
    height: 0;
    pointer-events: none;
}

/* Text comes after reply context break, shrinks to fit content */
.message-wrapper .message-text {
    order: 5;
    flex: 0 1 auto;
}

/* Button container flows inline with text, trailing the last line */
.message-wrapper .message-buttons,
.marker-message .message-buttons,
.marker-message .marker-buttons {
    display: inline;
    white-space: nowrap;
    font-size: 1rem; /* Reset font-size to prevent emoji sizing from affecting buttons */
}

/* Line break before reactions */
.message-wrapper .reactions-break-before {
    order: 7;
    flex-basis: 100%;
    height: 0;
    pointer-events: none;
}

/* Reactions appear on their own line after buttons */
.message-wrapper .message-reactions {
    order: 8;
}

/* Line break after reactions (for any future elements) */
.message-wrapper .reactions-break-after {
    order: 9;
    flex-basis: 100%;
    height: 0;
    pointer-events: none;
}

/* Grouped messages - hide sender info for subsequent messages from same user within 60s */
/* Use .message.grouped-message to override .message padding (higher specificity) */
.message.grouped-message {
    padding: 0; /* Collapse spacing between grouped messages */
}
/* Head message (followed by grouped message) - remove bottom padding for tight grouping */
.message:has(+ .grouped-message) {
    padding-bottom: 0;
}
.message:has(+ .grouped-message) .message-text {
    padding-bottom: 0;
}
.message-wrapper.grouped-message .message-avatar {
    visibility: hidden;
    height: 1em; /* Collapse to text line height */
    min-height: 0;
}
.message-wrapper.grouped-message .message-avatar .avatar-img {
    display: none; /* Hide image completely to ensure height collapse */
}
.message-wrapper.grouped-message .message-nick,
.message-wrapper.grouped-message .message-time {
    display: none;
}
/* Hide the line break when header is hidden */
.message-wrapper.grouped-message .message-content::before {
    display: none;
}

.message-text {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible; /* Allow shifted emoji to extend beyond text bounds */
    min-width: 0;
    white-space: pre-wrap; /* Preserve newlines while still wrapping long lines */
    line-height: max(1.4em, var(--emoji-size, 2rem)); /* At least emoji height */
    /* padding-bottom: calc(var(--emoji-size, 2rem) * 0.15); */ /* Space for 15% shifted emoji */
}

/* Messages without new layout (old render paths) - add padding for alignment */
.message > .message-text {
    display: block;
    /* Match indentation: 0.5rem base + avatar width (1.5x emoji) + 0.5rem gap */
    padding-left: calc(0.5rem + (var(--emoji-size, 2rem) * 1.5) + 0.5rem);
}

.system-message .message-text {
    color: var(--light-text);
    font-style: italic;
}

.info-message .message-text {
    color: var(--primary-color);
}

.error-message .message-text {
    color: var(--danger-color);
    font-weight: 500;
}

/* Inline media styling moved to media.css */

/* Markdown formatting */
.md-code {
    font-family: var(--monospace-font);
    background-color: var(--hover-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.9em;
}

.md-code-block {
    font-family: var(--monospace-font);
    background-color: var(--hover-bg);
    padding: .25em .5em;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.85em;
    overflow-x: auto;
    margin: .25rem 0;
    white-space: pre;
    display: inline-block;
    max-width: 100%;
}

.md-code-block code {
    background: none;
    padding: 0;
}

.md-bold {
    font-weight: 800;
    text-shadow: 0.3px 0 0 currentColor;
}

.md-italic {
    font-style: oblique 14deg;
    display: inline-block;
    transform: skewX(-4deg);
}

.md-strike {
    text-decoration: line-through;
    opacity: 0.7;
}

.md-spoiler {
    background-color: currentColor;
    border-radius: 3px;
    padding: 0 0.2rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.md-spoiler.revealed {
    background-color: var(--hover-bg);
}

.md-link {
    color: var(--primary-color);
    text-decoration: underline;
}

.md-link:hover {
    text-decoration: none;
}

.md-blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 0.75rem;
    margin: 0.25rem 0;
    color: var(--text-secondary);
    font-style: italic;
    display: block;
}

/* Notification highlight - shows which message triggered a push notification */
.message.notification-highlight {
    background-color: rgba(var(--primary-color-rgb, 79, 70, 229), 0.15);
    border-left: 3px solid var(--primary-color);
    animation: notification-fade 5s ease-out forwards;
}

@keyframes notification-fade {
    0% {
        background-color: rgba(var(--primary-color-rgb, 79, 70, 229), 0.25);
    }
    70% {
        background-color: rgba(var(--primary-color-rgb, 79, 70, 229), 0.15);
    }
    100% {
        background-color: transparent;
        border-left-color: transparent;
    }
}

/* History messages now look the same as live messages */

/* Input Area */
.input-area {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem calc(0.75rem - 2px);
    border-top: 1px solid var(--border-color);
    background: var(--chat-bg);
    position: relative;
}

.input-area textarea {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--monospace-size);
    font-family: var(--monospace-font);
    background: var(--input-bg);
    color: var(--text-color);
    resize: none;
    overflow-y: auto;
    min-height: 38px;
    max-height: 150px;
    line-height: 1.4;
    transition: height 0.1s ease-out;
}

.input-area textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.input-area textarea:disabled {
    background: var(--light-bg);
    cursor: not-allowed;
}

/* Contenteditable message input (for rich emoji support) */
.message-input-contenteditable {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--monospace-size);
    font-family: var(--monospace-font);
    background: var(--input-bg);
    color: var(--text-color);
    overflow-y: auto;
    min-height: 38px;
    max-height: 150px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
}

.message-input-contenteditable:focus {
    border-color: var(--primary-color);
}

/* Disabled state */
.message-input-contenteditable[contenteditable="false"] {
    background: var(--light-bg);
    cursor: not-allowed;
    color: var(--muted-text);
}

/* Placeholder via ::before pseudo-element */
.message-input-contenteditable:empty::before {
    content: attr(data-placeholder);
    color: var(--muted-text);
    pointer-events: none;
}

/* Inline emoji images in contenteditable */
.message-input-contenteditable img.inline-emoji {
    width: var(--emoji-size, 2rem);
    height: var(--emoji-size, 2rem);
    vertical-align: middle;
    margin: 0 1px;
    object-fit: contain;
    object-position: center;
}

/* Unicode emoji in contenteditable input - match custom emoji sizing */
.message-input-contenteditable .inline-unicode-emoji {
    font-size: var(--emoji-size, 2rem);
    line-height: 1;
    vertical-align: middle;
}

/* Unicode emoji - scale to match custom emoji size */
.inline-unicode-emoji {
    font-size: var(--emoji-size, 2rem);
    line-height: 1;
    vertical-align: middle;
}

/* Generic inline emoji styles for messages */
img.inline-emoji {
    width: var(--emoji-size, 2rem);
    height: var(--emoji-size, 2rem);
    vertical-align: middle;
    margin: 0 1px;
    object-fit: contain;
    object-position: center;
}

/* Input area button placeholder (for eruda, etc.) */
.input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-btn:empty {
    display: none;
}

/* Hide default eruda floating button */
.eruda-entry-btn {
    display: none !important;
}

/* Input area icon buttons (eruda, etc.) */
.input-icon-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
    color: var(--text-color);
}

.input-icon-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Username Autocomplete */
.autocomplete-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--chat-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 -2px 8px var(--shadow-color);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: fit-content;
    min-width: 120px;
    max-width: 300px;
}

.autocomplete-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s;
    font-family: var(--monospace-font);
    font-size: var(--monospace-size);
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: var(--light-bg);
}

.autocomplete-item.selected {
    background-color: var(--primary-color);
    color: white;
}

/* Emoji autocomplete specific styles */
.emoji-autocomplete {
    min-width: 200px;
    max-width: 350px;
}

.emoji-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.emoji-autocomplete-item:hover,
.emoji-autocomplete-item.selected {
    background-color: var(--light-bg);
}

.emoji-autocomplete-item.selected {
    background-color: var(--primary-color);
    color: white;
}

.emoji-autocomplete-preview {
    font-size: var(--emoji-size, 2rem);
    line-height: 1;
    flex-shrink: 0;
    min-width: var(--emoji-size, 2rem);
    text-align: center;
}

.emoji-autocomplete-preview img {
    /* Use 1em since parent already has font-size: 2em */
    max-width: 1em;
    height: 1em;
    vertical-align: middle;
}

.emoji-autocomplete-name {
    font-family: var(--monospace-font);
    font-size: var(--monospace-size);
    color: var(--text-secondary);
}

.emoji-autocomplete-item.selected .emoji-autocomplete-name {
    color: white;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-secondary {
    background: var(--darker-bg);
    color: var(--text-inverse);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.modal-content {
    background: var(--modal-bg);
    color: var(--text-color);
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px var(--shadow-heavy);
}

/* Ensure all modal inputs use theme colors */
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="email"],
.modal-content input[type="number"] {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    caret-color: var(--text-color);
}

/* Override browser autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.modal-content h2 {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

/* Upload confirmation preview (for paste/drag-drop) */
#upload-confirm {
    text-align: center;
}

#upload-confirm-preview {
    max-width: 100%;
    max-height: 300px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#upload-confirm-preview img,
#upload-confirm-preview video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
    object-fit: contain;
}

.upload-confirm-filename {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    width: 100%;
}

.upload-confirm-filename label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: left;
}

.upload-confirm-filename input {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

.upload-confirm-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.upload-confirm-buttons .btn {
    min-width: 100px;
}

.file-preview-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    padding: 2rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    caret-color: var(--text-color);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Style select dropdown options */
.form-group select option {
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Help text styling */
.form-group small,
.form-group .help-text {
    color: var(--light-text);
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* Error text styling */
.error-text {
    color: var(--danger-color);
    margin-bottom: 15px;
}

.form-group input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Theme-aware checkbox styling */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--input-bg);
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}

input[type="checkbox"]:hover {
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.form-actions-center {
    justify-content: center;
}

.btn-full {
    width: 100%;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.modal-header h2 {
    margin: 0;
    padding: 0;
}

.modal-close {
    position: absolute;
    top: -0.25rem;
    right: -0.5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-muted, var(--light-text));
    padding: 0.5rem;
    line-height: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.modal-close:hover {
    color: var(--text-color);
    background: var(--hover-bg, rgba(128, 128, 128, 0.2));
}

/* Settings Row Layout */
.setting-row {
    margin-bottom: 1.25rem;
}

.setting-row > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.setting-row > small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8em;
    color: var(--light-text);
}

.setting-section-header {
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--text-color);
}

.setting-subsection {
    margin-left: 24px;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 13px;
}

.device-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.device-name {
    font-weight: 500;
}

.device-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.device-current {
    color: var(--accent-color);
    font-size: 11px;
    margin-left: 8px;
}

.device-actions button {
    padding: 4px 8px;
    font-size: 12px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.device-actions button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.device-actions button:active {
    transform: translateY(0);
}

.setting-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.setting-control select {
    flex: 1;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.setting-control-input input {
    flex: 1;
    max-width: 120px;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.setting-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.setting-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Status Indicators */
.setting-status {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.setting-status.saving,
.setting-status.success,
.setting-status.error {
    opacity: 1;
}

.setting-status.success {
    color: var(--success-color);
}

.setting-status.error {
    color: var(--danger-color);
}

.setting-status .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: setting-spin 0.6s linear infinite;
}

@keyframes setting-spin {
    to { transform: rotate(360deg); }
}

/* Login modal external links */
.form-links {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-links a {
    color: var(--accent-color, #007bff);
    text-decoration: none;
    font-size: 0.9rem;
}

.form-links a:hover {
    text-decoration: underline;
}

/* Channel Browser Modal */
.channel-browser-content {
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.channel-browser-content .modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.channel-browser-content .modal-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-badge {
    font-size: 0.875rem;
    color: var(--light-text);
    font-weight: normal;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--light-text);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.channel-browser-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.search-box {
    width: 100%;
}

.search-box input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: var(--input-bg);
    color: var(--text-color);
}

.search-box input::placeholder {
    color: var(--light-text);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sort-controls {
    display: flex;
    gap: 0.5rem;
}

.sort-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--chat-bg);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
    color: var(--text-color);
}

.sort-btn:hover {
    background: var(--light-bg);
}

.sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.results-info {
    font-size: 0.875rem;
    color: var(--light-text);
}

.channel-list-container {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.browser-channel-list {
    display: flex;
    flex-direction: column;
}

.browser-channel-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    gap: 1rem;
}

.browser-channel-item:last-child {
    border-bottom: none;
}

.browser-channel-item:hover:not(.joined) {
    background: var(--light-bg);
}

.browser-channel-item.selected {
    background: var(--selected-bg);
}

.browser-channel-item.joined {
    background: var(--joined-bg);
    cursor: default;
    opacity: 0.7;
}

.channel-checkbox {
    margin-top: 0.25rem;
    cursor: pointer;
}

.channel-checkbox:disabled {
    cursor: not-allowed;
}

.channel-info {
    flex: 1;
    min-width: 0;
}

.channel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.browser-channel-item .channel-name {
    font-weight: 600;
    color: var(--text-color);
}

.user-count-badge {
    background: var(--light-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--light-text);
}

.joined-badge {
    background: var(--success-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

.channel-topic {
    font-size: 0.875rem;
    color: var(--light-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loading-message,
.empty-message {
    padding: 2rem;
    text-align: center;
    color: var(--light-text);
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }

    .app-header {
        padding: 0.75rem 1rem;
    }

    .app-header h1 {
        font-size: 1.25rem;
    }

    .messages,
    .input-area,
    .control-bar {
        padding: 0.75rem 1rem;
    }

    .channel-item {
        margin: 0;
        padding: 0 0.75rem;
    }

    .channel-name {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Full screen settings modal on tablets/phones */
@media (max-width: 1024px) {
    #settings-modal {
        align-items: stretch;
        justify-content: stretch;
    }

    #settings-modal .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 1rem;
        padding-bottom: env(safe-area-inset-bottom, 1rem);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    #settings-modal .modal-header {
        flex-shrink: 0;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    #settings-modal .modal-header h2 {
        margin: 0;
        padding: 0;
        font-size: 1.25rem;
    }

    #settings-modal .modal-close {
        font-size: 2rem;
        width: 3rem;
        height: 3rem;
        top: -0.5rem;
        right: -0.5rem;
    }

    #settings-modal #settings-form {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem;
    }

    #settings-modal #settings-form.has-scroll {
        padding-right: 12px;
    }

    #settings-modal .form-actions {
        flex-shrink: 0;
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
}

/* Scrollbar - Global */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Authentication Status */
.auth-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-link {
    background: none;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 0.5rem;
}

.btn-link:hover {
    background: none;
    opacity: 0.8;
}

/* Form inputs for password and email */
.form-group input[type="password"],
.form-group input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: var(--input-bg);
    color: var(--text-color);
}

/* Error and Success Messages */
.error-message {
    background: var(--error-bg);
    color: var(--danger-color);
    padding: 0 .25rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--danger-color);
}

.success-message {
    background: var(--success-bg);
    color: var(--success-color);
    padding: 0 .25rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--success-color);
}

.success-message .message-content,
.error-message .message-content {
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Chat header with history button */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .25rem;
}

.chat-header h2 {
    margin: 0;
    padding: .25rem 0;
}

/* User List Panel */
.user-list-panel {
    width: 250px;
    background: var(--darker-bg);
    color: var(--text-inverse);
    border-left: 1px solid var(--dark-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease, transform 0.3s ease;
}

.user-list-panel.collapsed {
    width: 0;
    transform: translateX(100%);
}

.user-list-header {
    padding: 1rem;
    border-bottom: 1px solid var(--dark-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.user-list-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.user-list-controls {
    display: flex;
    gap: 0.5rem;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-inverse);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.icon-btn:hover {
    background: var(--hover-light);
}

.user-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    gap: 0.35rem;
    cursor: pointer;
    transition: background 0.2s;
    border-left: 3px solid transparent;
    position: relative;
}

.user-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.user-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.user-item.current-user {
    background: rgba(52, 152, 219, 0.2);
    border-left-color: var(--primary-color);
}

.permission-badge {
    font-size: 1.5em;
    opacity: 0.9;
    flex-shrink: 0;
    min-width: 1.2em;
    text-align: center;
}

/* Empty badge placeholder for alignment */
.permission-badge.badge-none {
    opacity: 0;
}

.user-nickname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-trigger {
    background: transparent;
    border: none;
    color: var(--text-inverse);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    margin-left: auto;
}

.user-item:hover .menu-trigger {
    opacity: 1;
}

.menu-trigger:hover {
    background: var(--hover-light);
}

.empty-message {
    padding: 1rem;
    text-align: center;
    color: var(--light-text);
    font-style: italic;
}

/* Context Menu */
.user-context-menu {
    position: fixed;
    background: var(--dark-bg);
    border: 1px solid var(--darker-bg);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 180px;
    padding: 0.5rem 0;
}

.user-context-menu button {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-inverse);
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.user-context-menu button:hover {
    background: var(--hover-light);
}

.user-context-menu .menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

/* Sidebar Title Section */
.sidebar-title {
    padding: 0 1rem 1rem 1rem;
}

.sidebar-title h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-inverse);
    margin: 0 0 0.75rem 0;
    text-align: center;
    padding: 1.25rem 0;
    position: relative;
}

.sidebar-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1rem;
    right: -1rem;
    border-bottom: 1px solid var(--dark-bg);
}

/* Connection Status in Title Section */
.sidebar-title .connection-status {
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

/* User Controls in Title Section */
.sidebar-title .user-controls {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.user-controls #user-info {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    color: var(--light-text);
    text-transform: none;
}

.user-buttons {
    display: flex;
    gap: 0.5rem;
}

.user-buttons .btn {
    flex: 1;
    margin-top: 0;
}

/* User controls button styles - text align override for sidebar buttons */
.user-controls .btn {
    text-align: left;
}

.user-controls .btn:hover {
    background: rgba(255,255,255,0.1);
    transform: none;
    opacity: 1;
}

/* Sidebar buttons (Join Channel, etc) - same hover as channel items */
.sidebar .btn:hover {
    background: rgba(255,255,255,0.1);
    transform: none;
    opacity: 1;
}

/* ============================================
   History Gradient Indicator
   ============================================ */

/* Fixed overlay indicator at top of chat area - positioned relative to .chat-area */
.history-gradient-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 50px;
    background: linear-gradient(to bottom,
        var(--gradient-top) 0%,
        var(--gradient-mid) 60%,
        var(--gradient-end) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.history-gradient-indicator.visible {
    opacity: 1;
    pointer-events: auto;
}

.history-gradient-indicator .indicator-content {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
}

.history-gradient-indicator:hover .indicator-content {
    color: var(--text-color);
}

/* Time jump buttons in history indicator */
.time-jump-buttons {
    display: flex;
    gap: .5rem;
    margin-left: 12px;
}

.time-jump-btn {
    padding: .1rem;
    font-weight: 600;
    background: rgba(var(--primary-color-rgb, 100, 150, 255), 0.2);
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Only show hover effect on devices that support hover (not touch) */
@media (hover: hover) {
    .time-jump-btn:hover {
        background: var(--primary-color);
        color: var(--text-color);
    }
}

/* Loading spinner for history */
.history-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Centered loading indicator for initial history load */
.history-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    z-index: 10;
    gap: 0.75rem;
    pointer-events: none; /* Allow scroll events to pass through */
}

.history-loading-overlay .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.history-loading-overlay .loading-text {
    color: var(--light-text);
    font-size: 0.875rem;
}

/* End of history marker (legacy class, now uses .marker-beginning) */
.history-end-marker,
.channel-marker.marker-beginning {
    text-align: left;
    padding: 0.5rem 0 0.5rem 1rem;
    color: var(--light-text);
    font-size: 0.75rem;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 0.5rem;
}

/* Channel event markers (JOIN, PART, KICK, MODE, etc.) */
.channel-marker {
    text-align: left;
    padding: 0;
    color: var(--light-text);
    margin: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Timestamp in channel markers */
.marker-time {
    color: var(--light-text);
    font-size: 0.75rem;
    font-style: italic;
    margin-left: .5rem;
}

/* Different marker type colors */
.marker-join {
    color: var(--marker-join);
}

.marker-part {
    color: var(--marker-part);
}

.marker-kick {
    color: var(--marker-kick);
}

.marker-mode {
    color: var(--marker-mode);
}

.marker-ban {
    color: var(--marker-ban);
}

.marker-unban {
    color: var(--marker-unban);
}

.marker-action {
    color: var(--marker-action);
    font-size: 1rem;
}

/* Loading history marker */
.channel-marker.marker-loading {
    text-align: left;
    padding: 0.5rem 0 0.5rem 1rem;
    color: var(--light-text);
    font-size: 0.75rem;
    border-top: 1px dashed var(--border-color);
    margin-top: 0.5rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Message containers that have markers should hide time/nick and span full width */
.message:has(.channel-marker) .message-time,
.message:has(.channel-marker) .message-nick {
    display: none;
}

.message:has(.channel-marker) .message-text {
    flex: none;
    width: 100%;
}

/* Marker message wrapper */
.marker-message {
    display: flex;
    padding: 0;
}

/* Marker row - inline layout for avatar + marker text + reaction button */
.marker-message .marker-row {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}

/* Marker avatar - shows profile picture at emoji size */
.marker-avatar {
    /* Size relative to emoji setting (1x emoji size, not 1.5x like message avatars) */
    /* Only take space when containing an image */
    width: 0;
    height: 0;
    flex-shrink: 0;
}

/* When marker avatar has an image, expand to emoji size */
.marker-avatar:has(.marker-avatar-img) {
    min-width: var(--emoji-size, 2rem);
    width: var(--emoji-size, 2rem);
    height: var(--emoji-size, 2rem);
}

.marker-avatar .marker-avatar-img {
    width: 100%;
    height: var(--emoji-size, 2rem);
    max-width: var(--emoji-size, 2rem);
    border-radius: 3px;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: auto;
    margin-left: calc(calc(calc(var(--emoji-size, 2rem) * 1.5) - calc(var(--emoji-size, 2rem))) * .5);
    margin-right: calc(calc(calc(var(--emoji-size, 2rem) * 1.5) - calc(var(--emoji-size, 2rem))) * .5);
}

.marker-message .marker-content {
    display: inline;
}


/* Marker button container - matches message-buttons layout */
.marker-buttons {
    display: inline;
    white-space: nowrap;
    font-size: 1rem;
}

/* Marker reaction button - inside button container */
.marker-reaction-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.marker-message:hover .marker-reaction-btn {
    display: inline-block;
}

/* Marker delete button - for action markers */
.marker-delete-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.marker-message:hover .marker-delete-btn {
    display: inline-block;
}


/* Marker reactions bar - indented to match message reactions (1.5x emoji size + gap) */
.marker-reactions {
    padding-left: calc((var(--emoji-size, 2rem) * 1.5) + 0.5rem);
    margin-bottom: .75rem;
}

/* ============================================
   Newer Messages Indicator (Bottom)
   ============================================ */

/* Fixed overlay indicator at bottom of chat area - positioned relative to .chat-area */
.newer-messages-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 50px;
    background: linear-gradient(to top,
        var(--gradient-top) 0%,
        var(--gradient-mid) 60%,
        var(--gradient-end) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.newer-messages-indicator.visible {
    opacity: 1;
    pointer-events: auto;
}

.newer-messages-indicator .indicator-content {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
}

.newer-messages-indicator:hover .indicator-content {
    color: var(--text-color);
}

/* Time jump buttons for "Now" indicator - buttons on right, same as history indicator */
.newer-messages-indicator .time-jump-buttons {
    margin-left: 12px;
    margin-right: 0;
}

/* Scroll sentinels for virtual scrolling */
.scroll-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

.sentinel-top {
    margin-bottom: -1px;
}

.sentinel-bottom {
    margin-top: -1px;
}

/* ============================================
   New Scroll System - Debug Overlay
   ============================================ */

/* Debug overlay container - only visible when DEBUG_SCROLL=true */
.scroll-debug-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* Lowest layer - only overlays chat text, below sidebars/modals */
}

/* Red line: Top of anchor message (first message after scroll position) */
.debug-anchor-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: red;
    box-shadow: 0 0 4px red, 0 0 8px rgba(255, 0, 0, 0.5);
    opacity: 0.2;
}

/* Debug stats panel - uses theme colors */
.debug-stats {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--dark-bg);
    color: var(--text-color);
    font: 11px/1.4 'Monaco', 'Consolas', 'Courier New', monospace;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    opacity: 0.6;
}

/* Container for the text lines - stacks vertically */
.debug-stats-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Debug keyboard line - shows when virtual keyboard is open */
.debug-keyboard-line {
    display: none;  /* Hidden by default, shown via JS when keyboard is open */
}

/* Debug loading spinner - inside debug-stats, reserves space on left */
.debug-loading-spinner {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    visibility: hidden;
}

.debug-stats-text {
    /* Text content of the stats panel */
}

/* ============================================
   New Scroll System - Loading Indicators
   ============================================ */

/* Progress bar at top and bottom of messages area */
.history-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-color);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
}

.history-progress-bar-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-color);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
}

.history-progress-bar.active,
.history-progress-bar-bottom.active {
    opacity: 1;
}

.history-progress-bar::after,
.history-progress-bar-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--primary-color);
    animation: progress-slide 1s ease-in-out infinite;
}

@keyframes progress-slide {
    0% { left: -30%; }
    100% { left: 100%; }
}

/* Loading block indicator (for older/newer message loading) */
.loading-block-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    color: var(--light-text);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.loading-block-indicator.active {
    opacity: 1;
}

.loading-block-indicator[data-direction="older"] {
    /* At visual top (older messages) */
    border-bottom: 1px solid var(--border-color);
}

.loading-block-indicator[data-direction="newer"] {
    /* At visual bottom (newer messages) */
    border-top: 1px solid var(--border-color);
}

/* Loading spinner */
.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-large {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Center loading spinner (for initial load) */
.loading-center-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    background: var(--chat-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--light-text);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
}

.loading-center-spinner.active {
    opacity: 1;
}

/* ============================================
   New Scroll System - Message Animations
   ============================================ */

/* Message fade-in animation */
.message {
    animation: message-fade-in 0.08s ease-out forwards;
}

@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skip animation for bulk history loads */
.message.no-animate {
    animation: none;
    opacity: 1;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .message {
        animation: none;
        opacity: 1;
    }
}

/* ============================================
   New Scroll System - Image Placeholders
   ============================================ */

/* Fixed-size placeholder for images (prevents layout shift) */
.media-placeholder {
    position: relative;
    background: var(--placeholder-bg, rgba(128, 128, 128, 0.1));
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default dimensions - will be overridden by inline styles from settings */
    max-width: var(--image-width, 100%);
    max-height: var(--image-height, 20em);
}

/* Skeleton loading animation for placeholders */
.placeholder-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Image inside placeholder */
.media-placeholder .inline-media-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.media-placeholder .inline-media-image.loaded {
    opacity: 1;
}

/* Hide skeleton when image is loaded */
.media-placeholder:has(.loaded) .placeholder-skeleton {
    display: none;
}

/* Fallback for browsers without :has() support */
.media-placeholder .placeholder-skeleton.hidden {
    display: none;
}

/* ==============================================
   Emoji Picker
   ============================================== */

/* Emoji button in input area */
.emoji-btn {
    background: transparent;
    border: none;
    font-size: 1.1em;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
    border-radius: 4px;
}

.emoji-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.emoji-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Emoji picker popup */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow-heavy);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    margin-bottom: 8px;
}

.emoji-picker.hidden {
    display: none;
}

/* Picker header with search */
.emoji-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.emoji-picker-header input {
    flex: 1;
    padding: 8px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.9em;
}

.emoji-picker-header input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.emoji-picker-header input::placeholder {
    color: var(--light-text);
}

.emoji-picker-close {
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1.4em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
}

.emoji-picker-close:hover {
    color: var(--text-color);
    background: var(--darker-bg);
}

/* Auto-close toggle switch */
.emoji-auto-close-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.emoji-auto-close-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.emoji-auto-close-toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--darker-bg);
    transition: 0.3s;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.emoji-auto-close-toggle .toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--light-text);
    transition: 0.3s;
    border-radius: 50%;
}

.emoji-auto-close-toggle input:checked + .toggle-slider {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.emoji-auto-close-toggle input:checked + .toggle-slider:before {
    transform: translateX(16px);
    background-color: #fff;
}

.emoji-auto-close-toggle input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}

/* Tab buttons */
.emoji-picker-tabs {
    display: flex;
    padding: 6px 10px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
}

.emoji-tab {
    flex: 1;
    padding: 3px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: var(--emoji-size, 2rem);
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.15s, opacity 0.15s;
}

.emoji-tab:hover {
    background: var(--darker-bg);
    opacity: 0.9;
}

.emoji-tab.active {
    background: var(--primary-color);
    opacity: 1;
}

/* Picker body with scrolling */
.emoji-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Category buttons bar */
.emoji-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.emoji-category-btn {
    background: transparent;
    border: none;
    font-size: var(--emoji-size, 2rem);
    padding: 6px 8px;
    cursor: pointer;
    opacity: 0.6;
    border-radius: 4px;
    transition: background 0.15s, opacity 0.15s;
}

.emoji-category-btn:hover {
    background: var(--darker-bg);
    opacity: 1;
}

/* Category headers in grid */
.emoji-category-header {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 4px 6px;
    margin-top: 8px;
}

.emoji-category-header:first-child {
    margin-top: 0;
}

/* Emoji grid */
.emoji-category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2px;
}

.emoji-grid {
    display: flex;
    flex-direction: column;
}

/* Individual emoji button */
.emoji-item {
    background: transparent;
    border: none;
    font-size: var(--emoji-size, 2rem);
    padding: 3px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-item:hover {
    background: var(--darker-bg);
    transform: scale(1.15);
}

/* Custom emoji images - use 1em since parent .emoji-item already has scaled font-size */
.emoji-item.emoji-custom img {
    width: 1em;
    height: 1em;
    object-fit: contain;
    object-position: center;
}

/* Empty state */
.emoji-empty-message,
.emoji-empty-custom {
    padding: 20px;
    text-align: center;
    color: var(--light-text);
    font-size: 0.9em;
}

/* ==============================================
   Inline Emoji Rendering (in messages)
   ============================================== */

.emoji {
    display: inline;
    vertical-align: text-bottom; /* Align bottom with text to not shift baseline */
    user-select: none;
    -webkit-user-drag: none;
}

/* Move emoji down 15% only in message text, not in pickers/buttons */
/* Use inline-block so transform works on text emoji (transform doesn't work on inline) */
.message-text .emoji {
    display: inline-block;
    transform: translateY(15%);
    overflow: visible;
}

.emoji.emoji-unicode {
    font-size: var(--emoji-size, 2rem);
    line-height: 1; /* Prevent emoji from expanding line box height */
}

.emoji.emoji-custom {
    width: var(--emoji-size, 2rem);
    height: var(--emoji-size, 2rem);
    object-fit: contain;
    object-position: center;
    vertical-align: text-bottom; /* Align bottom with text to not shift baseline */
    margin: 0 4px;
}

/* Scale emoji in action messages */
.action-text span.emoji-unicode {
    font-size: calc(var(--emoji-size, 2rem) * 0.8);
}

.action-text img.emoji-custom {
    width: calc(var(--emoji-size, 2rem) * 0.8);
    height: calc(var(--emoji-size, 2rem) * 0.8);
}

/* ==============================================
   Profile Picture Manager (Settings)
   ============================================== */

/* Profile picture container in settings */
.profile-picture-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

/* Profile picture preview box */
.profile-picture-preview {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--darker-bg);
}

.profile-picture-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder when no picture */
.profile-picture-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-size: 0.7em;
    text-align: center;
}

/* Controls for upload/delete */
.profile-picture-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status message (e.g. "Uploading...") */
#profile-picture-status {
    color: var(--primary-color);
    font-size: 0.9em;
    margin-top: 8px;
}

/* ==============================================
   Message Avatars in Chat (New Layout)
   ============================================== */

/* Note: Avatars are positioned to the left of the entire message block.
   Layout is: [avatar] [content area with header + text]
   The header contains nick + timestamp, and text flows below it.
   See .message-message and .message-content styles earlier in this file. */

/* Wrapper element - no longer uses flex for avatar column */
.message-wrapper {
    /* Simple wrapper, no flex layout needed for avatar positioning */
}

/* Message content when wrapper is used */
.message-wrapper .message {
    flex: 1;
    min-width: 0;
    /* Remove padding from inner message since wrapper already has it */
    padding: 0;
}

/* ==============================================
   Message Delete Button & Confirmation Dialog
   ============================================== */

/* Delete button - appears on hover, inline with timestamp */
.message-delete-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--light-text);
    -webkit-text-fill-color: var(--light-text);
}

.message-wrapper:hover .message-delete-btn,
.message-header:hover .message-delete-btn,
.marker-message:hover .message-delete-btn {
    display: inline-block;
}

/* Edit button - appears on hover, inline with timestamp */
.message-edit-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--light-text);
    -webkit-text-fill-color: var(--light-text);
}

.message-wrapper:hover .message-edit-btn,
.message-header:hover .message-edit-btn,
.marker-message:hover .message-edit-btn {
    display: inline-block;
}

/* Add Reaction button in message header - appears on hover */
.message-add-reaction-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--light-text);
    -webkit-text-fill-color: var(--light-text);
}

.message-wrapper:hover .message-add-reaction-btn,
.message-header:hover .message-add-reaction-btn,
.marker-message:hover .message-add-reaction-btn {
    display: inline-block;
}


/* Reply button in message header - appears on hover */
.message-reply-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--light-text);
    -webkit-text-fill-color: var(--light-text);
}

.message-wrapper:hover .message-reply-btn,
.message-header:hover .message-reply-btn {
    display: inline-block;
}

/* Reply indicator bar above input */
.reply-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--reply-bg, rgba(88, 101, 242, 0.1));
    border-left: 3px solid var(--accent-color, #5865f2);
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--light-text, #b9bbbe);
    width: 100%;
    box-sizing: border-box;
}

.reply-indicator.hidden {
    display: none;
}

.reply-indicator-text {
    flex-shrink: 0;
}

.reply-indicator-excerpt {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.7;
    font-style: italic;
}

.reply-cancel-btn {
    background: transparent;
    border: none;
    color: var(--light-text, #b9bbbe);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.reply-cancel-btn:hover {
    opacity: 1;
}

/* Reply context in messages - shows what message is being replied to */
.message-reply-context {
    font-size: 12px;
    color: var(--dim-text, #72767d);
    padding: 4px 8px;
    background: var(--reply-bg, rgba(88, 101, 242, 0.05));
    border-left: 2px solid var(--accent-color, #5865f2);
    border-radius: 0 4px 4px 0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease;
    position: relative;
    z-index: 1;
}

.message-reply-context:hover {
    background: var(--reply-bg-hover, rgba(88, 101, 242, 0.1));
}

.message-reply-context .reply-arrow {
    color: var(--accent-color, #5865f2);
    margin-right: 4px;
}

.message-reply-context .reply-excerpt {
    font-style: italic;
    opacity: 0.8;
}

/* Message highlight for scroll-to-message
   Uses transition instead of animation to avoid interfering with message-fade-in animation.
   The fade-out happens via transition when class is removed. */
.message-wrapper {
    background-color: transparent;
    transition: background-color 2s ease-out;
}

.message-highlight {
    background-color: rgba(88, 101, 242, 0.3) !important;
    transition: none !important; /* Instant highlight on, fade via transition when removed */
}

/* Edit mode styling for input box */
.message-input-contenteditable.editing-mode {
    border-color: #f0ad4e !important;
    background: linear-gradient(to right, rgba(240, 173, 78, 0.08), var(--input-bg, #2d2d2d));
    box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.15);
}

/* Edit cancel button in input area */
.edit-cancel-btn {
    display: none;
    background: transparent;
    border: none;
    color: #f0ad4e;
    font-size: 1.2em;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s, transform 0.15s;
    margin-right: 8px;
}

.edit-cancel-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.input-area.editing .edit-cancel-btn {
    display: flex;
    align-items: center;
}

/* Message being edited highlight */
.message-wrapper.being-edited {
    background: rgba(240, 173, 78, 0.08);
    border-left: 3px solid #f0ad4e;
    margin-left: -3px;
    padding-left: 3px;
}

/* Edited indicator on messages */
.message-edited-indicator {
    display: inline-block;
    color: var(--light-text, #888);
    font-size: 0.75em;
    font-style: italic;
    margin-left: 0.5em;
    cursor: default;
}

/* Mobile long-press feedback */
.message-wrapper.press-active {
    background: var(--hover-light, rgba(255, 255, 255, 0.05));
}

/* Delete animation */
.message-wrapper.deleting {
    animation: message-delete 0.3s ease forwards;
    pointer-events: none;
}

@keyframes message-delete {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 200px;
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .message-wrapper.deleting {
        animation: none;
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

/* Delete confirmation overlay */
.delete-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Delete confirmation dialog */
.delete-confirm-dialog {
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 350px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: dialog-enter 0.2s ease;
}

@keyframes dialog-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.delete-confirm-dialog h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.delete-confirm-dialog p {
    margin: 0 0 1.5rem 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.delete-confirm-dialog .dialog-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.delete-confirm-dialog .btn-cancel {
    background: var(--button-secondary, #333);
    color: var(--text-primary, #e0e0e0);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.delete-confirm-dialog .btn-cancel:hover {
    background: var(--button-secondary-hover, #444);
}

.delete-confirm-dialog .btn-delete {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.delete-confirm-dialog .btn-delete:hover {
    background: #c82333;
}

/* Mobile bottom sheet style for delete dialog */
@media (max-width: 767px) {
    .delete-confirm-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
        animation: slide-up 0.25s ease;
    }

    @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

}

/* On touch devices, hide hover buttons - use long-press context menu instead */
@media (pointer: coarse) {
    .message-delete-btn,
    .message-edit-btn,
    .message-add-reaction-btn,
    .message-reply-btn,
    .marker-delete-btn,
    .marker-reaction-btn {
        display: none !important;
    }
}

/* ==============================================
   Message Context Menu (Long Press)
   ============================================== */

.message-context-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10001;
    animation: fade-in 0.2s ease;
}

.message-context-menu {
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    border-radius: 16px 16px 0 0;
    overflow: hidden; /* Clip child content to rounded corners */
    width: 100%;
    max-width: 400px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    animation: slide-up 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    color: var(--text-primary, #e0e0e0);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.context-menu-item:first-child {
    border-radius: 16px 16px 0 0;
}

.context-menu-item:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.1));
}

.context-menu-item:active {
    background: var(--bg-active, rgba(255, 255, 255, 0.15));
}

.context-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.context-menu-item.context-delete {
    color: #dc3545;
}

.context-menu-item.context-delete:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Desktop: center the context menu */
@media (min-width: 768px) {
    .message-context-overlay {
        align-items: center;
    }

    .message-context-menu {
        border-radius: 8px;
        overflow: hidden; /* Clip child content to rounded corners */
        max-width: 250px;
        padding-bottom: 0;
        animation: dialog-enter 0.2s ease;
    }

    .context-menu-item:first-child {
        border-radius: 8px 8px 0 0;
    }

    .context-menu-item:last-child {
        border-radius: 0 0 8px 8px;
    }

    .context-menu-item:only-child {
        border-radius: 8px;
    }
}

/* ==============================================
   Custom Emoji Manager (Settings)
   ============================================== */

/* Grid of custom emoji in settings */
.custom-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    min-height: 40px;
}

/* Note: "No custom emoji yet" message is handled in JS since the grid always has the add button */

/* Individual emoji item in manager - styled like input boxes */
.custom-emoji-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.custom-emoji-item:hover {
    border-color: var(--primary-color);
}

.custom-emoji-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.custom-emoji-item .emoji-shortcode {
    font-size: 0.75em;
    color: var(--light-text);
    white-space: nowrap;
}

/* Add button in emoji grid - matches emoji item height */
.emoji-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: var(--input-bg);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    color: var(--light-text);
    font-size: 1.2em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.emoji-add-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.emoji-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete button on emoji item */
.custom-emoji-item .emoji-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
}

.custom-emoji-item:hover .emoji-delete-btn {
    opacity: 1;
}

/* Always show delete button on touch devices (no hover capability) */
@media (hover: none) {
    .custom-emoji-item .emoji-delete-btn {
        opacity: 1;
    }
}

.custom-emoji-item .emoji-delete-btn:hover {
    background: #c82333;
}

/* Upload section */
.custom-emoji-upload {
    margin-bottom: 12px;
}

/* Upload form */
.emoji-upload-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--darker-bg);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.emoji-upload-preview {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-bg);
    border-radius: 8px;
    flex-shrink: 0;
}

.emoji-upload-preview img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.emoji-upload-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 150px;
}

.emoji-upload-fields label {
    font-size: 0.85em;
    color: var(--light-text);
    white-space: nowrap;
}

.shortcode-input-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    white-space: nowrap;
}

.shortcode-input-wrapper .shortcode-colon {
    color: var(--light-text);
    font-weight: bold;
    flex-shrink: 0;
}

.shortcode-input-wrapper input {
    flex: 1;
    min-width: 100px;
    padding: 6px 8px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 0.9em;
}

.emoji-upload-fields small {
    flex-basis: 100%;
    font-size: 0.75em;
    color: var(--light-text);
}

.emoji-upload-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85em;
}

/* ============================================
   Message Reactions
   ============================================ */

/* Container for reactions under a message */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: .75rem;
}

/* Individual reaction chip */
.reaction-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 2px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75em;
    color: var(--text-color);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.reaction-chip:hover {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: var(--primary-color);
}

/* When current user has reacted */
.reaction-chip.user-reacted {
    background: rgba(var(--primary-color-rgb), 0.3);
    border-color: var(--primary-color);
}

/* Emoji within reaction */
.reaction-emoji {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--emoji-size, 1.2em);
    max-width: var(--emoji-size, 1.2em);
    min-height: var(--emoji-size, 1.2em);
    max-height: var(--emoji-size, 1.2em);
    margin: 0.3em;
}

/* Custom emoji images within reactions */
.reaction-emoji img {
    max-width: var(--emoji-size, 1.2em);
    max-height: var(--emoji-size, 1.2em);
    object-fit: contain;
    vertical-align: middle;
}

/* Reaction count */
.reaction-count {
    font-size: 1.1em;
    color: var(--light-text);
    min-width: 8px;
    text-align: center;
    margin-right: 0.15em;
}


/* ============================================
   Reaction Picker
   ============================================ */

.reaction-picker {
    position: fixed;
    z-index: 1000;
    background: var(--chat-bg, #2f3136);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 6px;
}

.reaction-picker.hidden {
    display: none;
}

.reaction-picker-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.reaction-picker-quick {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
}

.reaction-picker-emoji {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.reaction-picker-emoji:hover {
    background: var(--selected-bg);
}

.reaction-picker-more {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px dashed var(--border-color);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.reaction-picker-more:hover {
    border-color: var(--primary-color, #5865f2);
    color: var(--primary-color, #5865f2);
}