/**
 * Messaging Page Styles
 * Discord-inspired dark theme
 */

/* Page Layout - Desktop */
@media (min-width: 769px) {
    .main-content:has(.messaging-page) {
        min-height: 0;
        height: calc(100vh - 56px);
        overflow: hidden;
    }
}

.messaging-page {
    display: flex;
    height: 100%;
    background: var(--discord-bg-primary, #1a1a1e);
    overflow: hidden;
}

.messaging-page-sidebar {
    width: 240px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--discord-bg-secondary, #121214);
    overflow: hidden;
}

.messaging-page-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--discord-bg-primary, #1a1a1e);
    overflow: hidden;
}

/* =====================
 * Resizable Sidebar Splitters
 * ===================== */

.messaging-resize-handle {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
}

.messaging-resize-handle:hover,
.messaging-resize-handle.active {
    background: var(--discord-blurple, #5865f2);
}

.messaging-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
}

body.messaging-resizing {
    cursor: col-resize;
    user-select: none;
}

body.messaging-resizing * {
    cursor: col-resize !important;
}

/* Sidebar collapsed states */
.messaging-page-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

.messaging-page-sidebar.collapsed + .messaging-resize-handle {
    display: none;
}

/* =====================
 * Right Users Sidebar
 * ===================== */

.messaging-page-users-sidebar {
    width: 240px;
    min-width: 160px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background: var(--discord-bg-secondary, #121214);
    border-left: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.messaging-page-users-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-left: none;
    overflow: hidden;
}

/* Note: Right resize handle visibility is controlled via JS in _toggleUsersSidebar() */

.users-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--discord-channel-default, #80848e);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    height: 48px;
    box-sizing: border-box;
}

.users-sidebar-count {
    font-weight: 400;
    margin-left: 4px;
}

.users-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.users-sidebar-list::-webkit-scrollbar {
    width: 8px;
}

.users-sidebar-list::-webkit-scrollbar-track {
    background: transparent;
}

.users-sidebar-list::-webkit-scrollbar-thumb {
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 4px;
}

.users-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.users-sidebar-item:hover {
    background: var(--discord-bg-hover, #35373c);
}

.users-sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.users-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.users-sidebar-avatar .messaging-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: #5865f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50%;
}

.users-sidebar-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid var(--discord-bg-secondary, #121214);
    box-sizing: border-box;
}

.users-sidebar-status-dot.online {
    background: #23a55a;
}

.users-sidebar-status-dot.offline {
    background: #80848e;
}

.users-sidebar-name {
    font-size: 14px;
    color: var(--discord-text-normal, #dbdee1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.users-sidebar-empty {
    padding: 16px;
    text-align: center;
    color: var(--discord-text-muted, #949ba4);
    font-size: 13px;
}

/* =====================
 * Collapsible User Sections
 * ===================== */

.users-section {
    margin-bottom: 8px;
}

.users-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.users-section-header:hover {
    background: var(--discord-bg-hover, #35373c);
}

.users-section-chevron {
    color: var(--discord-text-muted, #949ba4);
    flex-shrink: 0;
}

.users-section.collapsed .users-section-chevron {
    transform: rotate(-90deg);
}

.users-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.users-section-dot.online {
    background: #23a55a;
}

.users-section-dot.offline {
    background: #80848e;
}

.users-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--discord-channel-default, #80848e);
    text-transform: uppercase;
    flex: 1;
}

.users-section-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--discord-text-muted, #949ba4);
    background: var(--discord-bg-tertiary, #1e1f22);
    padding: 2px 6px;
    border-radius: 10px;
}

.users-section-list {
    padding-left: 4px;
}

.users-section.collapsed .users-section-list {
    display: none;
}

/* =====================
 * User Profile Popup
 * ===================== */

.user-profile-popup {
    position: absolute;
    background: var(--discord-bg-floating, #111214);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    z-index: 1000;
}

.user-profile-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.user-profile-popup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.user-profile-popup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-popup-info {
    flex: 1;
    min-width: 0;
}

.user-profile-popup-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--discord-text-normal, #dbdee1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-popup-status {
    font-size: 12px;
    color: var(--discord-text-muted, #949ba4);
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-profile-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-profile-popup-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.user-profile-popup-btn:hover {
    background: var(--discord-bg-hover, #35373c);
}

.user-profile-popup-btn i {
    width: 16px;
    text-align: center;
    color: var(--discord-text-muted, #949ba4);
}

/* Sidebar */
.messaging-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messaging-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    height: 48px;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1.5px 0 rgba(0,0,0,.05), 0 2px 0 rgba(0,0,0,.025);
}

.messaging-sidebar-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-close-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--discord-text-muted, #949ba4);
    border-radius: 4px;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Hidden by default (desktop) */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.messaging-close-btn:hover {
    color: var(--discord-text-normal, #dbdee1);
}

/* New Message Link under DMs */
.messaging-new-dm-link {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 1px 0;
    cursor: pointer;
    border-radius: 4px;
    gap: 8px;
    color: var(--discord-channel-default, #80848e);
    font-size: 14px;
}

.messaging-new-dm-link:hover {
    background: var(--discord-bg-hover, #35373c);
    color: var(--discord-channel-hover, #dbdee1);
}

.messaging-new-dm-link i {
    font-size: 12px;
}

/* Search */
.messaging-sidebar-search {
    padding: 8px 8px 8px 8px;
}

.messaging-search-input {
    width: 100%;
    padding: 6px 8px;
    background: var(--discord-bg-tertiary, #1e1f22);
    border: none;
    border-radius: 4px;
    color: var(--discord-text-muted, #949ba4);
    font-size: 14px;
}

.messaging-search-input:focus {
    outline: none;
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-search-input::placeholder {
    color: var(--discord-text-muted, #949ba4);
}

/* Sections */
.messaging-sidebar-sections {
    flex: 1;
    overflow-y: auto;
    padding-top: 8px;
}

.messaging-sidebar-sections::-webkit-scrollbar {
    width: 8px;
}

.messaging-sidebar-sections::-webkit-scrollbar-track {
    background: transparent;
}

.messaging-sidebar-sections::-webkit-scrollbar-thumb {
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 4px;
}

.messaging-section {
    margin-bottom: 8px;
}

.messaging-section-header {
    display: flex;
    align-items: center;
    padding: 6px 8px 6px 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.messaging-section-header:hover {
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-section-toggle {
    width: 12px;
    font-size: 8px;
    color: var(--discord-channel-default, #80848e);
    margin-right: 4px;
}

.messaging-section-title {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--discord-channel-default, #80848e);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.messaging-section-header:hover .messaging-section-title,
.messaging-section-header:hover .messaging-section-toggle {
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-section-add {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--discord-channel-default, #80848e);
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.messaging-section-header:hover .messaging-section-add {
    opacity: 1;
}

.messaging-section-add:hover {
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-section-add.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.messaging-section-header:hover .messaging-section-add.disabled {
    opacity: 0.4;
}

.messaging-section-add.disabled:hover {
    color: var(--discord-channel-default, #80848e);
}

.messaging-section-items {
    padding: 0 8px;
}

.messaging-section-empty {
    padding: 4px 8px;
    font-size: 13px;
    color: var(--discord-text-muted, #949ba4);
    font-style: italic;
}

/* Channel Items - Discord style */
.messaging-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 1px 0;
    cursor: pointer;
    border-radius: 4px;
    gap: 8px;
    color: var(--discord-channel-default, #80848e);
}

.messaging-item:hover {
    background: var(--discord-bg-hover, #35373c);
    color: var(--discord-channel-hover, #dbdee1);
}

.messaging-item.selected {
    background: var(--discord-bg-active, #404249);
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-item-icon {
    font-size: 20px;
    width: 20px;
    text-align: center;
    opacity: 0.7;
}

.messaging-item.selected .messaging-item-icon,
.messaging-item:hover .messaging-item-icon {
    opacity: 1;
}

.messaging-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.messaging-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messaging-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: #5865f2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

.messaging-item-content {
    flex: 1;
    min-width: 0;
}

.messaging-item-name {
    font-size: 16px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messaging-item-preview {
    font-size: 13px;
    color: var(--discord-text-muted, #949ba4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread Badge - Discord red */
.messaging-item-badge {
    background: var(--discord-brand-red, #f23f43);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Area Empty State */
.messaging-page-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--discord-text-muted, #949ba4);
}

.messaging-page-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.messaging-page-empty-text {
    font-size: 16px;
}

/* Loading State */
.messaging-page-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--discord-text-muted, #949ba4);
    font-size: 14px;
}

/* Error State */
.messaging-page-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.messaging-page-error-text {
    color: var(--discord-brand-red, #f23f43);
    font-size: 14px;
}

.messaging-retry-btn {
    padding: 8px 16px;
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.messaging-retry-btn:hover {
    background: #4752c4;
}

/* Chat Container */
.messaging-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Modal Styles */
.messaging-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.messaging-modal {
    background: var(--discord-bg-primary, #313338);
    border-radius: 4px;
    width: 440px;
    max-width: 90vw;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.3);
}

.messaging-modal-header {
    padding: 16px;
}

.messaging-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--discord-text-normal, #dbdee1);
    text-align: center;
}

.messaging-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--discord-text-muted, #949ba4);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.messaging-modal-close:hover {
    color: var(--discord-text-normal, #dbdee1);
}

.messaging-modal-body {
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.messaging-modal-input {
    width: 100%;
    padding: 10px;
    background: var(--discord-bg-tertiary, #1e1f22);
    border: none;
    border-radius: 3px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 16px;
}

.messaging-modal-input:focus {
    outline: none;
}

.messaging-modal-input::placeholder {
    color: var(--discord-text-muted, #949ba4);
}

.messaging-modal-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 14px;
    cursor: pointer;
}

.messaging-modal-checkbox input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #5865f2;
}

.messaging-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    background: var(--discord-bg-secondary, #2b2d31);
    border-radius: 0 0 4px 4px;
}

.messaging-modal-cancel {
    padding: 10px 16px;
    background: transparent;
    color: var(--discord-text-normal, #dbdee1);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.messaging-modal-cancel:hover {
    text-decoration: underline;
}

.messaging-modal-confirm {
    padding: 10px 16px;
    background: #5865f2;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.messaging-modal-confirm:hover {
    background: #4752c4;
}

/* Mobile Backdrop */
.messaging-sidebar-backdrop,
.messaging-users-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Let the page scroll naturally */
    .messaging-page {
        height: auto;
        min-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .messaging-page-sidebar {
        position: fixed;
        left: 0;
        top: 48px;
        bottom: 50px;
        z-index: 100;
        width: 85%;
        max-width: 300px;
        transform: translateX(-100%);
    }

    .messaging-page-sidebar.open {
        transform: translateX(0);
    }

    .messaging-sidebar-backdrop.open,
    .messaging-users-sidebar-backdrop.open {
        display: block;
    }

    .messaging-page-main {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .messaging-chat-container {
        height: auto;
        overflow: visible;
    }

    /* Hide resize handles on mobile */
    .messaging-resize-handle {
        display: none;
    }

    /* Users sidebar on mobile - slide in from right */
    .messaging-page-users-sidebar {
        position: fixed;
        right: 0;
        top: 48px;
        bottom: 50px;
        z-index: 100;
        width: 85%;
        max-width: 280px;
        transform: translateX(100%);
    }

    .messaging-page-users-sidebar.open {
        transform: translateX(0);
        width: 85% !important;
        max-width: 280px !important;
        min-width: 200px !important;
    }

    /* Show close button on sidebar (mobile only) */
    .messaging-close-btn {
        display: flex;
    }

    /* Hide empty state text on mobile when sidebar is open */
    .messaging-page.sidebar-open .messaging-page-empty,
    .messaging-page.users-sidebar-open .messaging-page-empty {
        opacity: 0.3;
    }
}

/* =====================
 * Support & Bots Section
 * ===================== */

/* Section badge (unread count) */
.messaging-section-badge {
    background: var(--discord-brand-red, #f23f43);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

/* Bot conversation item */
.messaging-item-bot {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 1px 0;
    cursor: pointer;
    border-radius: 4px;
    gap: 8px;
    color: var(--discord-channel-default, #80848e);
}

.messaging-item-bot:hover {
    background: var(--discord-bg-hover, #35373c);
    color: var(--discord-channel-hover, #dbdee1);
}

.messaging-item-bot.selected {
    background: var(--discord-bg-active, #404249);
    color: var(--discord-text-normal, #dbdee1);
}

/* Bot icon circle */
.messaging-item-bot-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865f2 0%, #3b82f6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* BOT badge in sidebar */
.messaging-bot-badge {
    background: #5865f2;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 6px;
    vertical-align: middle;
}

/* =====================
 * Chat Bot Badge
 * ===================== */

/* BOT badge in messages */
.chat-bot-badge {
    background: #5865f2;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 6px;
    vertical-align: middle;
}

/* AI/Bot message styling */
.chat-message.ai-message .chat-message-sender {
    color: #7289da;
}

.chat-message.ai-message .chat-avatar-placeholder {
    background: linear-gradient(135deg, #5865f2 0%, #3b82f6 100%);
}

/* New Chat Button on Support Bot Items */
.messaging-new-chat-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--discord-channel-default, #80848e);
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.messaging-item-bot:hover .messaging-new-chat-btn {
    opacity: 1;
}

.messaging-new-chat-btn:hover {
    color: var(--discord-text-normal, #dbdee1);
    background: var(--discord-bg-tertiary, #1e1f22);
}

/* Add Bot Button in Section Header */
.messaging-add-bot-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--discord-channel-default, #80848e);
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0;
}

.messaging-add-bot-btn:hover {
    color: var(--discord-text-normal, #dbdee1);
    background: var(--discord-bg-modifier-hover, #35373c);
}

/* Delete All Bots Button */
.messaging-delete-all-bots-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--discord-channel-default, #80848e);
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.messaging-delete-all-bots-btn:hover {
    color: #ed4245;
    background: rgba(237, 66, 69, 0.1);
}

/* Bot Selection Dropdown - positioned relative to the section header */
.messaging-section-bots .messaging-section-header {
    position: relative;
}

.messaging-bot-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--discord-bg-floating, #111214);
    border: 1px solid var(--discord-bg-modifier-selected, #3f4147);
    border-radius: 4px;
    z-index: 1000;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-height: 300px;
    overflow-y: auto;
}

.messaging-bot-dropdown-loading,
.messaging-bot-dropdown-empty,
.messaging-bot-dropdown-error {
    padding: 12px;
    text-align: center;
    color: var(--discord-text-muted, #949ba4);
    font-size: 13px;
}

.messaging-bot-dropdown-error {
    color: #f23f43;
}

.messaging-bot-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 10px;
}

.messaging-bot-dropdown-item:hover {
    background: var(--discord-bg-modifier-hover, #35373c);
}

.messaging-bot-dropdown-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865f2 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.messaging-bot-dropdown-icon i {
    color: white;
    font-size: 14px;
}

.messaging-bot-dropdown-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.messaging-bot-dropdown-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--discord-text-normal, #dbdee1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messaging-bot-dropdown-desc {
    font-size: 12px;
    color: var(--discord-text-muted, #949ba4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Close chat button on bot items */
.messaging-close-chat-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--discord-text-muted, #949ba4);
    cursor: pointer;
    border-radius: 3px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    font-size: 10px;
    margin-left: auto;
}

.messaging-item-bot:hover .messaging-close-chat-btn,
.messaging-item:hover .messaging-close-chat-btn {
    display: flex;
}

.messaging-close-chat-btn:hover {
    color: #f23f43;
    background: rgba(242, 63, 67, 0.1);
}

/* =====================
 * User Panel at Bottom of Sidebar
 * ===================== */

.messaging-sidebar-user-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--discord-bg-secondary, #121214);
    border-top: 1px solid rgba(79, 84, 92, 0.4);
    flex-shrink: 0;
}

.user-panel-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.user-panel-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-panel-avatar .avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #5865f2;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.user-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid var(--discord-bg-secondary, #121214);
    box-sizing: border-box;
    background: #23a55a;
}

.user-status-dot.online {
    background: #23a55a;
}

.user-status-dot.idle {
    background: #f0b232;
}

.user-status-dot.dnd {
    background: #f23f43;
}

.user-status-dot.offline {
    background: #80848e;
}

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

.user-panel-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--discord-text-normal, #dbdee1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-panel-status {
    font-size: 12px;
    color: var(--discord-text-muted, #949ba4);
}

.user-panel-actions {
    display: flex;
    gap: 4px;
}

.user-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--discord-channel-default, #80848e);
    cursor: pointer;
}

.user-panel-btn:hover {
    background: rgba(79, 84, 92, 0.4);
    color: var(--discord-text-normal, #dbdee1);
}

.user-panel-btn .material-icons-outlined {
    font-size: 20px;
}

/* =====================
 * Chat Settings Modal
 * ===================== */

.chat-settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.chat-settings-modal {
    background: #1a1a1a;
    border-radius: 8px;
    width: 440px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.chat-settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}

.chat-settings-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.chat-settings-close {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-settings-close:hover {
    color: #fff;
}

.chat-settings-close .material-icons-outlined {
    font-size: 24px;
}

.chat-settings-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.chat-settings-section {
    margin-bottom: 24px;
}

.chat-settings-section:last-child {
    margin-bottom: 0;
}

.chat-settings-section h4 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
}

.chat-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.chat-settings-item-info {
    flex: 1;
    margin-right: 16px;
}

.chat-settings-item-title {
    font-size: 14px;
    color: #fff;
    margin-bottom: 2px;
}

.chat-settings-item-desc {
    font-size: 12px;
    color: #888;
}

.chat-settings-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #333;
}

.chat-settings-modal-footer .btn-cancel {
    background: #333;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.chat-settings-modal-footer .btn-cancel:hover {
    background: #444;
}

.chat-settings-modal-footer .btn-save {
    background: #5865f2;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.chat-settings-modal-footer .btn-save:hover {
    background: #4752c4;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4f545c;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #23a55a;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* =====================
 * Right Sidebars Container (users + settings)
 * ===================== */

.messaging-right-sidebars {
    display: flex;
    flex-shrink: 0;
}

/* =====================
 * Settings Sidebar
 * ===================== */

.messaging-page-settings-sidebar {
    width: 280px;
    min-width: 200px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    background: var(--discord-bg-secondary, #121214);
    border-left: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.messaging-page-settings-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-left: none;
    overflow: hidden;
}

.settings-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--discord-channel-default, #80848e);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    height: 48px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.settings-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.settings-sidebar-content::-webkit-scrollbar {
    width: 8px;
}

.settings-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.settings-sidebar-content::-webkit-scrollbar-thumb {
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 4px;
}

.settings-sidebar-empty,
.settings-sidebar-loading,
.settings-sidebar-error {
    color: var(--discord-text-muted, #949ba4);
    text-align: center;
    padding: 20px;
    font-size: 13px;
}

.settings-sidebar-error {
    color: #f23f43;
}

.settings-sidebar-error .btn-retry {
    margin-top: 10px;
    padding: 6px 16px;
    background: var(--discord-bg-tertiary, #1e1f22);
    color: var(--discord-text-normal, #dbdee1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.settings-sidebar-error .btn-retry:hover {
    background: var(--discord-bg-hover, #35373c);
}

/* Settings sections */
.settings-section {
    margin-bottom: 16px;
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.settings-section-header h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--discord-channel-default, #80848e);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
}

.settings-section-header .btn-view-prompt,
.settings-section-header .btn-add-task {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--discord-channel-default, #80848e);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.settings-section-header .btn-view-prompt:hover,
.settings-section-header .btn-add-task:hover {
    background: var(--discord-bg-hover, #35373c);
    color: var(--discord-text-normal, #dbdee1);
}

/* Full-width System Prompt Button */
.btn-view-prompt-full {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--discord-bg-tertiary, #1e1f22);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--discord-text-normal, #dbdee1);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.btn-view-prompt-full:hover {
    background: var(--discord-bg-hover, #35373c);
    border-color: rgba(255,255,255,0.12);
}

.btn-view-prompt-full i:first-child {
    color: var(--discord-channel-default, #80848e);
    font-size: 14px;
}

.btn-view-prompt-full span {
    flex: 1;
    text-align: left;
}

.btn-view-prompt-full i:last-child {
    color: var(--discord-channel-default, #80848e);
    font-size: 11px;
}

/* Processing State */
.processing-state-section {
    border-bottom: 1px solid var(--discord-bg-tertiary, #1e1f22);
    padding-bottom: 12px;
    margin-bottom: 8px;
}

.processing-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.processing-status.status-idle {
    color: var(--discord-text-muted, #949ba4);
    background: var(--discord-bg-tertiary, #1e1f22);
}

.processing-status.status-idle i {
    font-size: 6px;
}

.processing-status.status-processing {
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.15);
}

.processing-status.status-waiting {
    color: #eab308;
    background: rgba(234, 179, 8, 0.15);
}

/* Cancel action buttons */
.cancel-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn-cancel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: var(--discord-bg-tertiary, #1e1f22);
    color: var(--discord-text-muted, #949ba4);
}

.btn-cancel:hover:not(:disabled) {
    background: #ed4245;
    color: #fff;
}

.btn-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel i {
    font-size: 11px;
}

.btn-cancel-llm {
    border: 1px solid rgba(237, 66, 69, 0.3);
}

.btn-cancel-workflows {
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.btn-cancel-workflows:hover:not(:disabled) {
    background: #eab308;
    color: #000;
}

.pending-workflows {
    margin-top: 10px;
}

.pending-workflows-header {
    font-size: 10px;
    color: var(--discord-text-muted, #949ba4);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.pending-workflows-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pending-workflow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--discord-bg-tertiary, #1e1f22);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.pending-workflow-item .workflow-id {
    color: var(--discord-text-normal, #dbdee1);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-workflow-item .workflow-time {
    color: var(--discord-text-muted, #949ba4);
    font-size: 10px;
}

/* Pending messages info */
.pending-messages-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--discord-text-muted, #949ba4);
}

.pending-messages-info i {
    color: #faa61a;
}

/* Stats section */
.stats-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 6px;
}

.stat-label {
    font-size: 10px;
    color: var(--discord-text-muted, #949ba4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--discord-text-normal, #dbdee1);
    margin-top: 2px;
}

/* =====================
 * Workflows Section (Pending/Success/Error)
 * ===================== */

.workflows-section {
    max-height: 400px;
    overflow-y: auto;
}

.workflow-list {
    margin-bottom: 12px;
}

.workflow-list:last-child {
    margin-bottom: 0;
}

.workflow-list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    padding: 4px 0;
}

.workflow-list.pending .workflow-list-header {
    color: #eab308;
}

.workflow-list.pending .workflow-list-header i {
    color: #eab308;
}

.workflow-list.success .workflow-list-header {
    color: #3ba55c;
}

.workflow-list.success .workflow-list-header i {
    color: #3ba55c;
}

.workflow-list.error .workflow-list-header {
    color: #ed4245;
}

.workflow-list.error .workflow-list-header i {
    color: #ed4245;
}

.workflow-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workflow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--discord-bg-tertiary, #1e1f22);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.workflow-item.pending {
    border-left: 2px solid #eab308;
}

.workflow-item.success {
    border-left: 2px solid #3ba55c;
}

.workflow-item.error {
    border-left: 2px solid #ed4245;
}

.workflow-item .workflow-name {
    color: var(--discord-text-normal, #dbdee1);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.workflow-item .workflow-time {
    color: var(--discord-text-muted, #949ba4);
    font-size: 10px;
    flex-shrink: 0;
    margin-left: 8px;
}

.workflow-item .workflow-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.workflow-item .output-count {
    color: #5865f2;
    font-size: 11px;
    font-weight: 500;
}

.workflow-item .output-count::before {
    content: '\f03e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 3px;
    font-size: 9px;
}

/* Todo list */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-empty {
    color: var(--discord-text-muted, #949ba4);
    font-size: 12px;
    padding: 8px;
    text-align: center;
}

/* Todo item */
.task-item {
    background: var(--discord-bg-tertiary, #1e1f22);
    border-radius: 6px;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.task-item .task-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.1);
}

.task-item .task-progress-fill {
    height: 100%;
    background: #5865f2;
}

.task-item.priority-high .task-progress-fill {
    background: #f23f43;
}

.task-item.priority-medium .task-progress-fill {
    background: #faa61a;
}

.task-item.priority-low .task-progress-fill {
    background: #23a55a;
}

.task-item .task-description {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 12px;
    padding: 6px 8px;
    margin-top: 4px;
    resize: none;
    min-height: 24px;
    max-height: 240px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.4;
}

.task-item .task-description:focus {
    outline: none;
    border-color: #4a9eff;
}

.task-item .task-description::placeholder {
    color: var(--discord-text-muted, #949ba4);
}

.task-item .task-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.task-item .task-priority {
    background: var(--discord-bg-secondary, #121214);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 11px;
    padding: 2px 4px;
    cursor: pointer;
}

.task-item .task-progress {
    width: 48px;
    background: var(--discord-bg-secondary, #121214);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    color: var(--discord-text-normal, #dbdee1);
    font-size: 11px;
    padding: 2px 4px;
    text-align: center;
}

.task-item .task-delete {
    background: transparent;
    border: none;
    color: var(--discord-text-muted, #949ba4);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    font-size: 11px;
}

.task-item .task-delete:hover {
    color: #f23f43;
    background: rgba(242, 63, 67, 0.1);
}

.task-item .task-note-toggle {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.task-item .task-note-toggle:hover {
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.1);
}

.task-item .task-note-toggle.has-note {
    color: #4a9eff;
}

.task-item .task-note-container {
    width: 100%;
    margin-top: 6px;
}

.task-item .task-note {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #999;
    font-size: 11px;
    padding: 6px 8px;
    resize: vertical;
    min-height: 40px;
    max-height: 100px;
    font-family: inherit;
    line-height: 1.4;
}

.task-item .task-note:focus {
    outline: none;
    border-color: #4a9eff;
    color: #ccc;
}

.task-item .task-note::placeholder {
    color: #555;
}

/* =====================
   Terminal-Style Info Panel
   ===================== */

.terminal-section {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #0a0a0a;
    border: 1px solid #252525;
    border-radius: 0;
}

.terminal-header {
    color: #555;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.terminal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.terminal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    line-height: 1.4;
}

.terminal-label {
    color: #666;
    min-width: 70px;
    flex-shrink: 0;
}

.terminal-value {
    color: #999;
    flex: 1;
}

.terminal-percent {
    color: #666;
    font-size: 10px;
    min-width: 45px;
    text-align: right;
}

.terminal-status {
    color: #888;
    font-weight: 500;
}

/* Terminal progress bar - fat monochrome */
.terminal-progress-container {
    position: relative;
    margin: 4px 0;
}

.terminal-progress {
    height: 12px;
    background: #111;
    border: 1px solid #252525;
    position: relative;
    overflow: visible;
}

.terminal-progress-fill {
    height: 100%;
    background: #444;
}

.terminal-progress-threshold {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666;
    pointer-events: none;
    z-index: 1;
}

/* Compaction notice */
.compaction-notice {
    margin-top: 4px;
}

.terminal-notice {
    color: #a86;
    font-size: 10px;
    font-style: italic;
}

/* Terminal buttons */
.btn-terminal {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    background: transparent;
    border: 1px solid #333;
    color: #666;
    padding: 4px 8px;
    cursor: pointer;
}

.btn-terminal:hover {
    background: #1a1a1a;
    color: #999;
    border-color: #444;
}

.btn-view-prompt-full.btn-terminal {
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px;
}

.terminal-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* Terminal-style tasks */
.terminal-task {
    padding: 8px;
    margin-bottom: 6px;
    background: #0d0d0d;
    border: 1px solid #252525;
    border-radius: 0;
}

.terminal-task .task-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.terminal-task .task-id {
    color: #444;
    font-size: 9px;
}

.terminal-task .task-title-row .task-delete {
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}

.terminal-task .task-title-row .task-delete:hover {
    color: #a66;
}

.terminal-task .task-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.terminal-task .task-description {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #252525;
    border-radius: 0;
    color: #aaa;
    font-family: inherit;
    font-size: 10px;
    padding: 1px 0;
    resize: none;
    line-height: 1.2;
    min-height: 12px;
    max-height: 240px;
    overflow-y: auto;
}

.terminal-task .task-description:focus {
    outline: none;
    border-bottom-color: #444;
}

.terminal-task .task-progress-row {
    display: flex;
    align-items: center;
    gap: 1px;
    margin: 4px 0;
    height: 10px;
}

.terminal-task .task-progress-label {
    color: #555;
    font-size: 10px;
    flex-shrink: 0;
    min-width: 30px;
    line-height: 10px;
    padding-top: 2px;
}

.terminal-task .task-progress-bar {
    flex: 1;
    position: relative;
    height: 100%;
}

.terminal-task .task-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.terminal-task .task-priority {
    font-family: inherit;
    font-size: 10px;
    background: transparent;
    border: 1px solid #252525;
    color: #666;
    padding: 2px 4px;
    border-radius: 0;
}

.terminal-task .task-progress {
    font-family: inherit;
    font-size: 10px;
    width: 40px;
    background: transparent;
    border: 1px solid #252525;
    color: #666;
    padding: 2px 4px;
    border-radius: 0;
    text-align: center;
}

.terminal-task .task-note-toggle,
.terminal-task .task-delete {
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 10px;
}

.terminal-task .task-note-toggle:hover,
.terminal-task .task-delete:hover {
    color: #888;
}

.terminal-task .task-note-toggle.has-note {
    color: #666;
}

.terminal-task .task-note-container {
    margin-top: 6px;
}

.terminal-task .task-note {
    width: 100%;
    background: transparent;
    border: 1px solid #252525;
    border-radius: 0;
    color: #666;
    font-family: inherit;
    font-size: 10px;
    padding: 4px;
    resize: none;
    max-height: 240px;
    overflow-y: auto;
}

.terminal-task .task-note:focus {
    outline: none;
    border-color: #444;
    color: #888;
}

.task-empty {
    color: #444;
    font-size: 11px;
    padding: 8px 0;
    text-align: center;
}

/* Empty workflows section - hide if empty */
.workflows-section:empty {
    display: none;
}

/* Settings sidebar backdrop for mobile */
.messaging-settings-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.messaging-settings-sidebar-backdrop.open {
    display: block;
}

/* Mobile settings sidebar */
@media (max-width: 768px) {
    .messaging-page-settings-sidebar {
        position: fixed;
        right: 0;
        top: 48px;
        bottom: 50px;
        z-index: 100;
        width: 85%;
        max-width: 320px;
        transform: translateX(100%);
    }

    .messaging-page-settings-sidebar.open {
        transform: translateX(0);
        width: 85% !important;
        max-width: 320px !important;
        min-width: 280px !important;
    }
}

/* Terminal Modal - for cancellation status */
.cancellation-status-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.terminal-modal {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: #0a0a0a;
    border: 1px solid #333;
    min-width: 300px;
    max-width: 400px;
}

.terminal-modal-header {
    color: #666;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 8px 12px;
    border-bottom: 1px solid #252525;
}

.terminal-modal-body {
    padding: 16px 12px;
    font-size: 12px;
}

.terminal-modal-body pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
}

.terminal-modal-body.success pre {
    color: #8a8;
}

.terminal-modal-body.warning pre {
    color: #aa8;
}

.terminal-modal-body.error pre {
    color: #a88;
}

.terminal-modal-footer {
    padding: 8px 12px;
    border-top: 1px solid #252525;
    display: flex;
    justify-content: flex-end;
}

.terminal-modal .btn-close-modal {
    font-family: inherit;
    font-size: 11px;
    padding: 4px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #888;
    cursor: pointer;
}

.terminal-modal .btn-close-modal:hover {
    background: #222;
    color: #aaa;
}