/* ============================================
   AJAIA - Inbox Styles
   Messaging UI for team communication
   ============================================ */

/* Inbox Container */
.inbox-container {
    background: rgba(31, 41, 55, 0.4);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
}

:root {
    /* FFXIV-Themed Design System (OKLCH Spec) */
    --pale-yellow-50: 99.62% .004 106.47;
    --pale-yellow-100: 99.02% .004 106.47;
    --pale-yellow-200: 96.28% .007 106.52;
    --pale-yellow-300: 92.96% .007 106.53;
    --pale-yellow-600: 88.28% .012 106.65;
    --pale-yellow-800: 68.98% .027 109.55;
    --pale-teal-100: 96.95% .014 196.93;
    --mint-50: 98.85% .012 170.28;
    --mint-150: 93.8% .015 171.04;
    --pale-cyan-50: 49.33% .019 171.99;
    --pale-cyan-150: 34.26% .003 197.03;
    --pale-cyan-200: 30.32% .003 197.01;
    --pale-cyan-300: 24.57% .003 196.96;
    --pale-cyan-400: 21.67% .002 197.04;
    --pale-blue-100: 36.61% .003 228.87;
    --pale-blue-200: 30.39% .04 213.68;
    --red-100: 53.47% .151 25.99;
    --red-200: 51.83% .168 21.78;
    --hydra-150: 94.94% .033 208.37;
    --hydra-350: 71.92% .112 205.51;
    --hydra-450: 55.27% .086 208.61;
    --hydra-550: 39.71% .062 207.67;
    --astra-450: 77.92% .012 71.87;
    --astra-750: 27.99% .014 76.29;
    --astra-800: 20.19% .011 80.54;
    --umbra-150: 84.32% .008 207.14;
    --umbra-250: 70.09% .007 197;
    --umbra-350: 58.21% .006 196.99;
    --terra-150: 91.23% .05 48.15;
    --terra-350: 70.73% .133 38.31;
    --terra-450: 52.75% .13 37.37;
    --terra-550: 43.01% .108 37.17;
    --jenova-150: 93.28% .038 357.01;
    --jenova-250: 84.44% .092 .32;
    --jenova-450: 49.39% .109 9.38;
    --jenova-550: 34.35% .079 9.21;
    --rosa-150: 88.55% .06 28.44;
    --rosa-350: 68.18% .207 22.93;
    --rosa-450: 51.72% .199 21.85;
    --rosa-550: 39.55% .16 22.99;
    --costa-150: 93.76% .048 72.24;
    --costa-300: 80.62% .151 67.71;
    --costa-350: 73.83% .169 62.71;
    --costa-400: 65.87% .163 54.96;
    --costa-500: 51.37% .155 42.1;
    --altana-150: 95% .083 95.76;
    --altana-350: 80.51% .151 81.42;
    --altana-400: 71.97% .149 81.37;
    --altana-450: 61.87% .129 77.72;
    --altana-500: 51.11% .109 73.59;
    --dalmasca-150: 95.74% .076 97.14;
    --dalmasca-300: 83.9% .132 96.6;
    --dalmasca-400: 69.87% .123 97.59;
    --dalmasca-550: 47.82% .091 97.9;
    --gridania-150: 95.46% .037 105.4;
    --gridania-350: 75.63% .107 109.92;
    --gridania-450: 60.17% .065 108.2;
    --gridania-550: 42.28% .047 108.27;
    --limsa-150: 94.36% .042 217.16;
    --limsa-350: 73.11% .113 232.51;
    --limsa-450: 53.86% .101 231.01;
    --limsa-550: 36.01% .071 232.13;
    --kuja-150: 94.87% .046 325.93;
    --kuja-350: 72.5% .119 316.63;
    --kuja-450: 54.3% .097 316.69;
    --kuja-550: 38% .079 316.84;

    /* Theme Tokens */
    --light-super-color: var(--hydra-450);
    --light-super-bg-color: var(--pale-teal-100);
    --light-super-active-bg-color: var(--hydra-550);
    --light-max-color: var(--altana-400);
    --light-caution-color: var(--red-200);
    --light-attention-color: var(--costa-400);
    --light-positive-color: var(--hydra-450);
    --light-negative-color: var(--rosa-450);
    --light-background-underlay-color: var(--pale-yellow-200);
    --light-background-base-color: var(--pale-yellow-100);
    --light-background-subtle-color: var(--pale-yellow-800) / .16;
    --light-background-subtler-color: var(--pale-yellow-800) / .1;
    --light-background-subtlest-color: var(--pale-yellow-800) / .05;
    --light-background-raised-color: var(--pale-yellow-50);
    --light-background-elevated-color: 100% 0 0;
    --light-background-inverse-color: var(--pale-blue-200);
    --light-foreground-color: var(--pale-blue-200);
    --light-foreground-quiet-color: var(--light-foreground-color) / .75;
    --light-foreground-quieter-color: var(--light-foreground-color) / .48;
    --light-foreground-quietest-color: var(--light-foreground-color) / .36;
    --light-foreground-subtle-color: var(--light-foreground-color) / .24;
    --light-foreground-subtler-color: var(--light-foreground-color) / .16;
    --light-foreground-subtlest-color: var(--light-foreground-color) / .1;
    --light-foreground-inverse-color: var(--light-background-base-color);
    --light-border-color: var(--pale-yellow-600);
    --light-backdrop-color: .85 0 0;
    --light-offset-color: var(--pale-yellow-200);
    --light-offset-plus-color: var(--pale-yellow-300);
    --light-raised-offset-color: var(--light-offset-color);

    --dark-super-color: var(--hydra-350);
    --dark-super-bg-color: var(--pale-blue-200);
    --dark-super-active-bg-color: var(--hydra-350);
    --dark-max-color: var(--altana-350);
    --dark-caution-color: var(--red-100);
    --dark-attention-color: var(--costa-350);
    --dark-positive-color: var(--hydra-350);
    --dark-negative-color: var(--rosa-350);
    --dark-background-underlay-color: var(--pale-cyan-300);
    --dark-background-base-color: var(--pale-cyan-400);
    --dark-background-subtle-color: var(--pale-cyan-50) / .2;
    --dark-background-subtler-color: var(--pale-cyan-50) / .1;
    --dark-background-subtlest-color: var(--pale-cyan-50) / .05;
    --dark-background-raised-color: var(--dark-background-subtler-color);
    --dark-background-elevated-color: var(--dark-background-base-color);
    --dark-background-inverse-color: var(--pale-yellow-300);
    --dark-foreground-color: var(--pale-yellow-300);
    --dark-foreground-quiet-color: var(--dark-foreground-color) / .55;
    --dark-foreground-quieter-color: var(--dark-foreground-color) / .35;
    --dark-foreground-quietest-color: var(--dark-foreground-color) / .25;
    --dark-foreground-subtle-color: var(--dark-foreground-color) / .15;
    --dark-foreground-subtler-color: var(--dark-foreground-color) / .1;
    --dark-foreground-subtlest-color: var(--dark-foreground-color) / .05;
    --dark-foreground-inverse-color: var(--dark-background-base-color);
    --dark-border-color: var(--pale-blue-100);
    --dark-backdrop-color: .15 0 0;
    --dark-offset-color: var(--pale-cyan-300);
    --dark-offset-plus-color: var(--pale-cyan-200);
    --dark-raised-offset-color: var(--dark-offset-plus-color);

    --super-active-bg-color: var(--light-super-active-bg-color);
    --background-lightbox-color: 0 0 360;
    --border-dynamic: 73.5% .012 85 / .2;
    --surface-offset-special: 21% .04 200 / .2;
    --banner-height: 34px;
    --mobile-nav-height: env(safe-area-inset-bottom, 0);
    --thread-width: 1100px;
    --thread-content-width: 740px;
    --header-height: 54px;
    --thread-input-height-with-padding: 130px;
    --thread-attachments-height-with-padding: 182px;
    --thread-visual-spacing: var(--size-md);
    --sidecar-header-height: 54px;
    --sidecar-url-bar-height: 36px;
    --page-horizontal-padding: var(--size-md);
    --page-content-height: calc(100dvh - var(--header-height));
    --page-content-height-without-header: 100dvh;
    --toast-v-margin: 60px;
    --toast-h-margin: 24px;
    --sidecar-content-height: calc(100vh - var(--sidecar-header-height));
    --mobile-sidecar-drag-handle-height: 24px;
    --mobile-sidecar-content-height: calc(100dvh - var(--mobile-sidecar-drag-handle-height));
    --mobile-tab-bar-height: 44px;
    --mobile-content-height: calc(var(--page-content-height) - var(--mobile-tab-bar-height));
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --in-app-header-height: 50px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 90px;
    --sidebar-pinned-width: calc(200px + var(--sidebar-default-width));
    --sidebar-default-width: 72px;
    --min-touch-target: 2.75rem;
    --size-2xs: 2px;
    --size-xs: 4px;
    --size-sm: 8px;
    --size-md: 16px;
    --size-ml: 24px;
    --size-lg: 32px;
    --size-xl: 48px;

    /* Semantic Color Mapping */
    --super-color: var(--dark-super-color);
    --super-bg-color: var(--dark-super-bg-color);
    --max-color: var(--dark-max-color);
    --caution-color: var(--dark-caution-color);
    --attention-color: var(--dark-attention-color);
    --positive-color: var(--dark-positive-color);
    --negative-color: var(--dark-negative-color);
    --background-underlay-color: var(--dark-background-underlay-color);
    --background-base-color: var(--dark-background-base-color);
    --background-subtle-color: var(--dark-background-subtle-color);
    --background-subtler-color: var(--dark-background-subtler-color);
    --background-subtlest-color: var(--dark-background-subtlest-color);
    --background-raised-color: var(--dark-background-raised-color);
    --background-elevated-color: var(--dark-background-elevated-color);
    --background-inverse-color: var(--dark-background-inverse-color);
    --foreground-color: var(--dark-foreground-color);
    --foreground-quiet-color: var(--dark-foreground-quiet-color);
    --foreground-quieter-color: var(--dark-foreground-quieter-color);
    --foreground-quietest-color: var(--dark-foreground-quietest-color);
    --foreground-subtle-color: var(--dark-foreground-subtle-color);
    --foreground-subtler-color: var(--dark-foreground-subtler-color);
    --foreground-subtlest-color: var(--dark-foreground-subtlest-color);
    --foreground-inverse-color: var(--dark-foreground-inverse-color);
    --backdrop-color: var(--dark-backdrop-color);
    --shadow-overlay-border: rgba(255, 255, 255, .1);
    --offset-color: var(--dark-offset-color);
    --offset-plus-color: var(--dark-offset-plus-color);
    --raised-offset-color: var(--dark-raised-offset-color);

    /* Original/Legacy Variables (Preserved) */
    --bg-primary: #0D1117;
    --bg-secondary: #1F2937;
    --text-primary: #FFFFFF;
    --text-secondary: #9CA3AF;
    --accent-blue: #3B82F6;
    --accent-purple: #8B5CF6;
    --accent-cyan: #06B6D4;
    --accent-green: #10B981;
    --border-color: rgba(75, 85, 99, 0.5);

    /* Font Awesome */
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}

/* User Dropdown Overrides for Notifications/Inbox */
/* These styles ensure the user dropdown matches dashboard.html exactly, 
   overriding any generic .dropdown-menu/.dropdown-item styles below */
.user-dropdown {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    margin: 0;
    padding: 0 !important;
    box-sizing: border-box;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 280px !important;
    background: rgba(31, 41, 55, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
}

.user-dropdown.clicked {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.user-dropdown .dropdown-header {
    padding: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.user-dropdown .user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.user-dropdown .user-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.user-dropdown .user-email {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
}

.user-dropdown .dropdown-divider {
    height: 1px !important;
    background: var(--border-color) !important;
    margin: 8px 0 !important;
}

.user-dropdown .dropdown-menu {
    padding: 8px 0 !important;
}

.user-dropdown .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    border-radius: 0 !important;
}

.user-dropdown .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--accent-blue) !important;
}

.user-dropdown .dropdown-item i {
    width: 16px !important;
    text-align: center !important;
    font-size: 14px !important;
}

.user-dropdown .logout-item {
    color: #EF4444 !important;
}

.user-dropdown .logout-item:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
}

/* CRITICAL: Override generic .dropdown-menu positioning that comes later in file */
.user-dropdown>.dropdown-menu,
.user-dropdown .dropdown-menu {
    position: static !important;
    /* NOT absolute - let them stack naturally */
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Override generic .dropdown-item width and display */
.user-dropdown a.dropdown-item,
.user-dropdown>.dropdown-menu>a.dropdown-item {
    width: auto !important;
    text-align: left !important;
}

/* Ensure dividers display correctly */
.user-dropdown>.dropdown-divider,
.user-dropdown .dropdown-divider {
    display: block !important;
    height: 1px !important;
    margin: 8px 0 !important;
}

/* Inbox Toolbar */
.inbox-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.6);
}

.inbox-tabs {
    display: flex;
    gap: 8px;
}

.inbox-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inbox-tab:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.inbox-tab.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.tab-badge,
.nav-badge {
    background: var(--accent-blue);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.inbox-actions {
    display: flex;
    gap: 8px;
}

/* Primary Button - Compose */
.inbox-actions .btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.inbox-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563EB, #7C3AED);
}

.inbox-actions .btn-primary:active {
    transform: translateY(0);
}

.inbox-actions .btn-primary i {
    font-size: 14px;
}

/* Secondary Button */
.inbox-actions .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    color: var(--accent-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.inbox-actions .btn-secondary:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--accent-blue);
}

/* Modal Footer Buttons */
.modal-footer .btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.modal-footer .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563EB, #7C3AED);
}

.modal-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.modal-footer .btn-secondary {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-footer .btn-secondary:hover {
    background: rgba(75, 85, 99, 0.3);
    color: var(--text-primary);
}

/* Inbox Content */
.inbox-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Messages List */
.messages-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.message-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 8px;
}

.message-item:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.message-item.unread {
    background: rgba(59, 130, 246, 0.15);
    /* Brighter blue background */
    border-left: 4px solid #3B82F6;
    /* Thicker, brighter blue border */
    position: relative;
}

/* Unread indicator dot - Made larger and brighter */
.message-item.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    /* Moved out more */
    transform: translateY(-50%);
    width: 10px;
    /* Larger dot */
    height: 10px;
    background: #3B82F6;
    /* Brighter blue */
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
    /* Stronger glow */
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translateY(-50%) scale(1.3);
        /* Larger pulse */
    }
}

/* Make unread sender name bold and brighter */
.message-item.unread .message-sender {
    font-weight: 700;
    color: #FFFFFF;
    /* Pure white for more contrast */
}

/* Make unread preview text brighter */
.message-item.unread .message-preview {
    color: #E5E7EB;
    /* Brighter gray */
    font-weight: 500;
    /* Slightly bolder */
}

.message-item.mention {
    background: rgba(139, 92, 246, 0.05);
    border-left: 3px solid var(--accent-purple);
}

.message-item.mention.unread {
    background: rgba(139, 92, 246, 0.1);
}

.message-item.mention.unread::before {
    background: var(--accent-purple);
    box-shadow: 0 0 8px var(--accent-purple);
}

.message-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-blue);
}

.message-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

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

/* AJAIA avatar in messages should be smaller (18px) */
.chat-bubble.ajaia-message .message-avatar,
.message-avatar.ajaia-avatar {
    width: 18px;
    height: 18px;
    background: rgba(29, 78, 216, 0.1);
    border: 1px solid rgba(29, 78, 216, 0.3);
}

.chat-bubble.ajaia-message .message-avatar img,
.message-avatar.ajaia-avatar img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    padding: 0;
    border-radius: 0;
}

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

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.message-sender {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.message-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.message-preview {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.message-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.message-meta-item i {
    font-size: 11px;
}

/* Mention Badge */
.message-meta-item.mention-badge {
    color: var(--accent-purple);
    font-weight: 500;
}

.message-meta-item.mention-badge i {
    color: var(--accent-purple);
}

/* Read Receipt Indicators */
.read-receipt {
    color: var(--accent-blue);
}

.read-receipt.sent {
    color: var(--text-secondary);
}

/* Message Detail Panel */
.message-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.3);
}

.message-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.5);
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.message-detail-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.btn-icon.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.message-detail-content {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

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

.detail-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.detail-info p {
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.detail-body .mention {
    color: var(--accent-blue);
    font-weight: 500;
    cursor: pointer;
}

.detail-body .mention:hover {
    text-decoration: underline;
}

.edit-indicator {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 16px;
}

/* Message Replies */
.message-replies {
    padding: 0 24px;
    max-height: 300px;
    overflow-y: auto;
}

.replies-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}

.reply-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
}

.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.reply-content {
    flex: 1;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.reply-sender {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.reply-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.reply-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Reply Composer */
.reply-composer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.5);
}

.reply-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.reply-input-wrapper textarea {
    flex: 1;
    padding: 12px 16px;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    transition: border-color 0.2s ease;
}

.reply-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.send-reply-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Empty & Loading States */
.loading-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.loading-state i,
.empty-state i {
    font-size: 48px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 320px;
}

/* Compose Modal */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-group label::after {
    content: ' *';
    color: #EF4444;
}

.recipient-input-wrapper {
    position: relative;
}

.recipient-input-wrapper input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.recipient-input-wrapper input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.recipient-dropdown,
.mention-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(31, 41, 55, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin-top: 4px;
}

.dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

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

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.15);
}

.dropdown-item .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.dropdown-item .info {
    flex: 1;
}

.dropdown-item .name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-item .email {
    font-size: 12px;
    color: var(--text-secondary);
}

.selected-recipient {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-top: 8px;
}

.selected-recipient .recipient-name {
    flex: 1;
    font-size: 14px;
    color: var(--accent-blue);
    font-weight: 500;
}

.remove-recipient {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

.remove-recipient:hover {
    color: #EF4444;
}

.message-input-wrapper {
    position: relative;
}

.message-input-wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s ease;
}

.message-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.character-count {
    text-align: right;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.character-count.warning {
    color: #F59E0B;
}

.character-count.error {
    color: #EF4444;
}

/* Modal Styles - More specific to override dashboard.css */
#composeModal.modal-overlay,
.inbox-container~.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 24px;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
}

#composeModal.modal-overlay[style*="display: none"] {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
    backdrop-filter: blur(4px);
}

.modal {
    background: rgba(31, 41, 55, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
}

.modal.compose-modal {
    /* Gmail-style large compose modal */
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: 800px;
    min-height: 600px;
    max-height: 85vh;
    background: rgba(31, 41, 55, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.compose-modal .modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 16px 16px 0 0;
    padding: 16px 24px;
}

.compose-modal .modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.compose-modal .modal-header h2::before {
    content: '✉️';
    font-size: 24px;
}

.compose-modal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.compose-modal .form-group {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.compose-modal .form-group:last-child {
    border-bottom: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.compose-modal .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compose-modal .form-group label::after {
    content: '';
}

.compose-modal .recipient-input-wrapper input {
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 10px;
}

/* Rich Text Editor Toolbar */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    background: rgba(31, 41, 55, 0.5);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 12px;
    margin-right: 12px;
    border-right: 1px solid var(--border-color);
}

.toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.toolbar-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
}

.toolbar-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}

.toolbar-btn.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
}

.toolbar-btn i {
    font-size: 14px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 8px;
}

/* Emoji Picker Button */
.emoji-picker-btn {
    position: relative;
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: rgba(31, 41, 55, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 320px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.emoji-picker.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-category {
    margin-bottom: 12px;
}

.emoji-category-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.2);
}

/* Message Content Editor */
.compose-modal .message-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.compose-modal .message-input-wrapper textarea,
.compose-modal #messageContent {
    flex: 1;
    width: 100%;
    min-height: 250px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    resize: none;
}

.compose-modal .message-input-wrapper textarea:focus,
.compose-modal #messageContent:focus {
    outline: none;
    border: none;
}

.compose-modal .message-input-wrapper textarea::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

.compose-modal .character-count {
    padding: 8px 24px;
    background: rgba(31, 41, 55, 0.3);
    border-top: 1px solid var(--border-color);
    font-size: 12px;
}

/* Modal Footer Enhancement */
.compose-modal .modal-footer {
    padding: 16px 24px;
    gap: 16px;
    background: rgba(31, 41, 55, 0.6);
}

.compose-modal .modal-footer .btn-primary {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    gap: 10px;
}

.compose-modal .modal-footer .btn-secondary {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 10px;
}

/* Light Theme for Compose Modal */
body.light-theme .compose-modal {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme .compose-modal .modal-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
}

body.light-theme .editor-toolbar {
    background: rgba(249, 250, 251, 0.8);
}

body.light-theme .emoji-picker {
    background: rgba(255, 255, 255, 0.98);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.5);
}

/* Light Theme Adjustments */
body.light-theme .inbox-container {
    background: rgba(255, 255, 255, 0.8);
}

body.light-theme .inbox-toolbar {
    background: rgba(255, 255, 255, 0.9);
}

body.light-theme .message-item.unread {
    background: rgba(59, 130, 246, 0.08);
}

body.light-theme .message-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

body.light-theme .message-detail {
    background: rgba(255, 255, 255, 0.6);
}

body.light-theme .modal {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme .recipient-dropdown,
body.light-theme .mention-dropdown {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme .reply-input-wrapper textarea,
body.light-theme .message-input-wrapper textarea,
body.light-theme .recipient-input-wrapper input {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 768px) {
    .inbox-content {
        flex-direction: column;
    }

    .message-detail {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-left: none;
        z-index: 100;
    }

    .inbox-toolbar {
        flex-direction: column;
        gap: 12px;
    }

    .inbox-tabs,
    .inbox-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Notification Badge in Header */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.btn-secondary {
    position: relative;
}

/* ========================================
   SMS-Style Conversation Thread
   ======================================== */

/* Conversation container */
.conversation-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    height: calc(100% - 180px);
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Chat header with participant info */
.conversation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.3);
}

.conversation-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

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

.conversation-info {
    flex: 1;
}

.conversation-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.conversation-info .status {
    font-size: 13px;
    color: var(--text-secondary);
}

.conversation-info .status.typing {
    color: var(--accent-cyan);
}

/* Chat bubble base */
.chat-bubble {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    animation: bubbleIn 0.2s ease-out;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Received messages (left aligned) */
.chat-bubble.received {
    align-self: flex-start;
}

.chat-bubble.received .bubble-content {
    background: rgba(55, 65, 81, 0.8);
    border-radius: 18px 18px 18px 4px;
    color: var(--text-primary);
}

/* Sent messages (right aligned) */
.chat-bubble.sent {
    align-self: flex-end;
}

.chat-bubble.sent .bubble-content {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 18px 18px 4px 18px;
    color: white;
}

/* Bubble content */
.bubble-content {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.bubble-content .mention {
    color: #93C5FD;
    font-weight: 500;
}

.chat-bubble.received .bubble-content .mention {
    color: var(--accent-cyan);
}

/* Bubble metadata */
.bubble-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.chat-bubble.sent .bubble-meta {
    justify-content: flex-end;
}

.bubble-meta .read-status {
    color: var(--accent-cyan);
}

.bubble-meta .edited {
    font-style: italic;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(55, 65, 81, 0.6);
    border-radius: 18px 18px 18px 4px;
    align-self: flex-start;
    max-width: 80px;
}

.typing-indicator .dot {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Date separator */
.date-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.date-separator::before,
.date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Reply composer - fixed at bottom */
.reply-composer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.5);
    position: sticky;
    bottom: 0;
}

.reply-input-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.3);
}

.btn-ajaia-chat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ajaia-chat:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

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

.ajaia-icon-small {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.reply-input-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(31, 41, 55, 0.3);
}

.btn-ajaia-chat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ajaia-chat:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

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

.ajaia-icon-small {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.reply-input-container {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.reply-input-container textarea {
    flex: 1;
    padding: 12px 16px;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    transition: border-color 0.2s ease;
}

.reply-input-container textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.reply-input-container textarea::placeholder {
    color: var(--text-secondary);
}

.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.send-btn:hover {
    transform: scale(1.05);
}

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

/* Light theme overrides for conversation */
body.light-theme .chat-bubble.received .bubble-content {
    background: rgba(229, 231, 235, 0.9);
    color: var(--text-primary);
}

body.light-theme .conversation-header {
    background: rgba(249, 250, 251, 0.8);
}

body.light-theme .typing-indicator {
    background: rgba(229, 231, 235, 0.9);
}

body.light-theme .reply-input-container textarea {
    background: rgba(255, 255, 255, 0.9);
}

/* ========================================
   AJAIA Messages & Proposals
   ======================================== */

/* AJAIA Message Styling */
.chat-bubble.ajaia-message {
    border-left: 3px solid #1D4ED8;
    background: rgba(29, 78, 216, 0.05);
}

.chat-bubble.ajaia-message .bubble-content {
    background: rgba(31, 41, 55, 0.6);
    border-radius: 18px 18px 18px 4px;
    padding: 16px;
}

.ajaia-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.ajaia-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 78, 216, 0.1);
    border: 1px solid rgba(29, 78, 216, 0.3);
}

.ajaia-avatar img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    padding: 0;
}

.ajaia-info {
    flex: 1;
}

.ajaia-info strong {
    color: #93C5FD;
    font-size: 15px;
    display: block;
    margin-bottom: 2px;
}

.ajaia-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(29, 78, 216, 0.2);
    border: 1px solid rgba(29, 78, 216, 0.4);
    border-radius: 4px;
    font-size: 11px;
    color: #93C5FD;
    font-weight: 500;
}

.ajaia-text {
    color: var(--text-primary);
    line-height: 1.6;
}

/* AJAIA Typing Indicator */
.ajaia-typing-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(55, 65, 81, 0.6);
    border-radius: 18px 18px 18px 4px;
    align-self: flex-start;
    max-width: 250px;
}

.ajaia-avatar-small {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(29, 78, 216, 0.1);
    border: 1px solid rgba(29, 78, 216, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.ajaia-avatar-small img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    padding: 0;
}

.typing-text {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Proposals Content */
.ajaia-proposals {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.proposal-warning {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #FCA5A5;
}

.proposal-warning i {
    font-size: 18px;
    color: #EF4444;
    flex-shrink: 0;
}

.proposal-warning strong {
    display: block;
    margin-bottom: 4px;
    color: #FCA5A5;
}

.proposal-warning p {
    font-size: 13px;
    margin-bottom: 8px;
}

.duplicate-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.duplicate-item {
    display: block;
    padding: 6px 8px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 4px;
    color: #FCA5A5;
    text-decoration: none;
    font-size: 12px;
    transition: background 0.2s;
}

.duplicate-item:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Related Work Items Section */
.related-work-section {
    padding: 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #93C5FD;
    font-size: 14px;
}

.section-header i {
    font-size: 14px;
}

.section-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.related-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(31, 41, 55, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.related-item:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateX(4px);
}

.item-type-badge {
    padding: 2px 6px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #93C5FD;
    text-transform: uppercase;
    white-space: nowrap;
}

.item-title {
    flex: 1;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-status {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 6px;
    background: rgba(75, 85, 99, 0.3);
    border-radius: 4px;
}

/* Proposals Section */
.proposals-section {
    padding: 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
}

.proposals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Proposal Card */
.proposal-card {
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.proposal-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.proposal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.proposal-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #93C5FD;
    text-transform: capitalize;
}

.proposal-type-badge.user-story,
.proposal-type-badge.user-story {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #C4B5FD;
}

.proposal-type-badge.bug {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #FCA5A5;
}

.proposal-type-badge.task {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93C5FD;
}

.duplicate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 4px;
    font-size: 11px;
    color: #FCA5A5;
    font-weight: 500;
}

.proposal-card-body {
    margin-bottom: 12px;
}

.proposal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.proposal-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.proposal-ac {
    margin-top: 8px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
}

.proposal-ac strong {
    display: block;
    font-size: 12px;
    color: #93C5FD;
    margin-bottom: 4px;
}

.ac-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.proposal-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.meta-item i {
    font-size: 10px;
}

.proposal-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.proposal-card-actions button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create {
    background: #1D4ED8;
    color: white;
}

.btn-create:hover {
    background: #1E40AF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}

.btn-merge {
    background: rgba(139, 92, 246, 0.2);
    color: #C4B5FD;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

.btn-merge:hover {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
}

.btn-edit {
    background: rgba(75, 85, 99, 0.3);
    color: var(--text-secondary);
    border: 1px solid rgba(75, 85, 99, 0.4);
}

.btn-edit:hover {
    background: rgba(75, 85, 99, 0.4);
    color: var(--text-primary);
}

/* AJAIA Summary */
.ajaia-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.summary-section {
    padding: 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.summary-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #93C5FD;
    margin-bottom: 8px;
}

.summary-section p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.summary-section ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-primary);
}

.summary-section li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.action-type {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

/* AJAIA Confirmation */
.ajaia-confirmation {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
}

.confirmation-icon {
    font-size: 24px;
    color: #22C55E;
    flex-shrink: 0;
}

.confirmation-content {
    flex: 1;
}

.confirmation-content strong {
    display: block;
    color: #22C55E;
    margin-bottom: 4px;
}

.confirmation-content p {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.work-item-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1D4ED8;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.work-item-link-btn:hover {
    background: #1E40AF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}

/* Turn into Work Button - Matching Ask AI button style */
.turn-into-work-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #1D4ED8;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.turn-into-work-btn:hover {
    background: #1E40AF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}

.turn-into-work-btn:active {
    transform: translateY(0);
}

.turn-into-work-btn i {
    font-size: 14px;
}

.turn-into-work-btn .fa-chevron-down {
    font-size: 10px;
    margin-left: 2px;
}

/* Dropdown menu for Turn into Work */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(31, 41, 55, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    min-width: 220px;
    padding: 4px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.15);
}

.dropdown-item i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Linked Work Items Display */
.linked-work-items {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
}

.linked-work-items-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.linked-work-items-list .label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.work-item-link {
    text-decoration: none;
    transition: transform 0.2s ease;
}

.work-item-link:hover {
    transform: translateY(-1px);
}

.work-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #93C5FD;
    transition: all 0.2s ease;
}

.work-item-link:hover .work-item-badge {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.6);
    color: white;
}

.work-item-badge.user-story,
.work-item-badge.story {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #C4B5FD;
}

.work-item-badge.bug {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #FCA5A5;
}

.work-item-badge.task {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93C5FD;
}

/* Reply Emoji Picker Styles */
.reply-emoji-container {
    position: relative;
    display: flex;
    align-items: center;
}

.emoji-toggle-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.emoji-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.emoji-toggle-btn.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
}

.reply-emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 1001;
}

/* Adjust reply input container to accommodate emoji button */
.reply-input-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* ============================================
   MESSAGE REACTIONS (Teams-style hover reactions)
   ============================================ */

/* Reaction bar - appears on hover */
.message-reaction-bar {
    position: absolute;
    top: -36px;
    right: 10px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 100;
}

.chat-bubble:hover .message-reaction-bar {
    display: flex;
}

.reaction-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.reaction-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.15);
}

.reaction-btn.selected {
    background: rgba(59, 130, 246, 0.3);
}

/* Existing reactions display */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reaction-badge:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.reaction-badge.user-reacted {
    background: rgba(59, 130, 246, 0.3);
    border-color: var(--accent-blue);
}

.reaction-badge .emoji {
    font-size: 14px;
}

.reaction-badge .count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.reaction-badge.user-reacted .count {
    color: var(--accent-blue);
}

/* Chat bubble needs relative positioning for reaction bar */
.chat-bubble {
    position: relative;
}

/* Custom tooltip for reaction badges */
.reaction-badge {
    position: relative;
}

.reaction-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 200px;
    white-space: normal;
    text-align: center;
}

.reaction-badge::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.95);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.reaction-badge:hover::after,
.reaction-badge:hover::before {
    opacity: 1;
    visibility: visible;
}

.reaction-badge[data-tooltip=""]::after,
.reaction-badge[data-tooltip=""]::before {
    display: none;
}