:root {
    /* Warm Charcoal & Obsidian Color Palette matching the screenshot */
    --bg-sidebar: #22201e;
    --bg-chat: #2b2826;
    --bg-input: #1c1a19;
    --bg-active: rgba(255, 255, 255, 0.05);
    --bg-hover: rgba(255, 255, 255, 0.03);
    --border-color: #34302d;
    --border-highlight: rgba(217, 119, 6, 0.15); /* Soft Amber highlight */

    /* Text colors */
    --text-main: #e5e5e5;
    --text-muted: #958a84;
    --text-white: #ffffff;
    --tag-color: #f59e0b; /* Amber yellow for tags */

    /* Semantic status colors */
    --status-online: #10B981;
    --status-away: #F59E0B;
    --status-dnd: #EF4444;
    --status-offline: #6B7280;
    
    /* Green outline for send button matching screenshot */
    --btn-send-outline: #10B981; 
    --btn-send-hover: #34d399;

    /* Spacing and Radius */
    --radius-squircle: 8px; /* Rounded square squircle avatars and inputs matching desktop app */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-chat);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Top-level Layout structure */
.app-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}


/* ============================
   SIDEBAR STYLING
============================ */
.sidebar {
    width: 280px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Sidebar Header (Profile) */
.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    border-radius: var(--radius-squircle);
}

.avatar-container {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.profile-avatar-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: var(--radius-squircle);
    cursor: pointer;
    transition: var(--transition);
}

.profile-avatar-button:hover,
.profile-avatar-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-color);
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-squircle); /* Squircle avatar matching screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-white);
    background: linear-gradient(135deg, #d97706, #78350f);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

.avatar img,
.message-avatar img,
.nav-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar.has-image,
.message-avatar.has-image,
.nav-avatar.has-image {
    color: transparent;
}

.status-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--status-online);
    border: 2px solid var(--bg-sidebar);
    transition: background-color var(--transition);
}

.status-badge.online { background-color: var(--status-online); }
.status-badge.away { background-color: var(--status-away); }
.status-badge.dnd { background-color: var(--status-dnd); }
.status-badge.offline { background-color: var(--status-offline); }

.profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: -0.01em;
}

.profile-status-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 5px;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.profile-status-label:hover,
.profile-status-label:focus-visible {
    outline: none;
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.profile-status-label i.mdi {
    font-size: 14px;
    color: var(--text-muted);
}

.sidebar-header-actions {
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sidebar-header-actions:hover {
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.sidebar-header-actions i.mdi {
    font-size: 20px;
}

/* Status selector dropdown */
.status-dropdown {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 170px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
    flex-direction: column;
    padding: 6px;
    animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.status-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-main);
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    text-align: left;
}

.status-option:hover {
    background-color: var(--bg-active);
    color: var(--text-white);
}

.status-option.active {
    background-color: var(--bg-active);
    color: var(--text-white);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online { background-color: var(--status-online); }
.status-dot.away { background-color: var(--status-away); }
.status-dot.dnd { background-color: var(--status-dnd); }
.status-dot.offline { background-color: var(--status-offline); }


/* Sidebar Navigation & Lists */
.sidebar-content-container {
    flex: 1;
    position: relative;
}

.sidebar-content-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Slide animations between sidebar views */
.sidebar-content-panel.hidden-left {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-content-panel.hidden-right {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Scrollbar styles for Sidebar Content */
.sidebar-content-panel::-webkit-scrollbar {
    width: 4px;
}
.sidebar-content-panel::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    border-radius: var(--radius-squircle);
    cursor: pointer;
    transition: var(--transition);
}

.nav-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item:hover {
    background-color: var(--bg-hover);
}

.nav-item.active {
    background-color: var(--bg-active);
    color: var(--text-white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.nav-item i.mdi {
    font-size: 20px;
    color: var(--text-muted);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--radius-squircle);
    display: grid;
    place-items: center;
    color: var(--text-white);
    background: linear-gradient(135deg, #d97706, #78350f);
    font-size: 0.68rem;
    font-weight: 700;
    overflow: hidden;
    position: relative;
}

.favorite-toggle {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-squircle);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
}

.channel-link:hover .favorite-toggle,
.favorite-toggle.active,
.favorite-toggle:focus-visible {
    opacity: 1;
}

.favorite-toggle:hover,
.favorite-toggle.active {
    color: var(--warning-color, #f0b84a);
    background-color: var(--bg-hover);
}

.favorite-toggle i.mdi {
    font-size: 18px;
}

.nav-item.active i.mdi {
    color: var(--text-white);
}

/* Section Container */
.list-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    padding: 8px 14px;
    text-transform: uppercase;
}

.conversation-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-empty {
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.sidebar-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--status-dnd);
    color: var(--text-white);
    font-size: 0.68rem;
    font-weight: 700;
}

.context-menu.conversation-context-menu {
    position: fixed;
    z-index: 220;
    min-width: 210px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background: var(--bg-sidebar);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.conversation-context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: var(--radius-squircle);
    padding: 0 10px;
    color: var(--text-main);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.conversation-context-menu button:hover {
    background: var(--bg-hover);
    color: var(--text-white);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-section-header span {
    flex: 1 1 auto;
}

.sidebar-section-action {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-section-action:hover {
    background: var(--bg-hover);
    color: var(--text-white);
}

.sidebar-favorites-add {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    padding: 6px 10px 6px 18px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-favorites-add:hover {
    background: var(--bg-hover);
    color: var(--text-white);
}

.sidebar-favorites-add i.mdi {
    width: 18px;
    flex: 0 0 18px;
    font-size: 18px;
    text-align: center;
}

.sidebar-favorites-add span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.sidebar-favorites-root,
.recents-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-conversation {
    position: relative;
    padding-left: 18px;
}

.sidebar-conversation.dragging,
.sidebar-folder.dragging {
    opacity: 0.48;
}

.sidebar-conversation.drag-over,
.folder-header.drag-over,
.sidebar-favorites-root.drag-over,
.folder-children.drag-over {
    outline: 1px solid var(--tag-color);
    outline-offset: 2px;
    background-color: var(--bg-hover);
}

.sidebar-unread-dot {
    position: absolute;
    left: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--status-dnd);
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px var(--bg-sidebar);
}

.sidebar-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-left: auto;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px var(--bg-sidebar);
}

.sidebar-presence-dot.online {
    background: var(--status-online);
}

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

.sidebar-empty,
.sidebar-folder-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 8px 14px;
}

.sidebar-folder-empty {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-squircle);
    margin: 2px 0 4px 14px;
}

.sidebar-context-menu {
    position: fixed;
    z-index: 180;
}

.favorite-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(360px, 48vh);
    overflow-y: auto;
}

.favorite-picker-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background: var(--bg-input);
}

.favorite-picker-tabs button {
    min-height: 34px;
    border: 0;
    border-radius: calc(var(--radius-squircle) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.favorite-picker-tabs button:hover,
.favorite-picker-tabs button.active {
    background: var(--bg-hover);
    color: var(--text-white);
}

.favorite-picker-actions {
    display: grid;
    gap: 6px;
}

.favorite-picker-create {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background: var(--bg-secondary);
    color: var(--text-main);
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.favorite-picker-create:hover {
    background: var(--bg-hover);
    color: var(--text-white);
}

.favorite-picker-create.disabled {
    cursor: default;
    color: var(--text-muted);
    background: var(--bg-input);
}

.favorite-picker-create span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.favorite-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius-squircle);
    background: transparent;
    color: var(--text-main);
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.favorite-picker-row:hover {
    background: var(--bg-hover);
    color: var(--text-white);
}

.favorite-picker-row span {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
}

.favorite-picker-row strong,
.favorite-picker-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-picker-row strong {
    font-size: 0.9rem;
}

.favorite-picker-row small {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.favorite-picker-row > i.mdi {
    color: var(--text-muted);
    font-size: 18px;
}

.favorite-create-members {
    display: grid;
    gap: 4px;
    max-height: min(320px, 42vh);
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background: var(--bg-input);
    padding: 4px;
}

.favorite-create-private-members {
    display: grid;
    gap: 8px;
}

.favorite-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border-radius: calc(var(--radius-squircle) - 2px);
    color: var(--text-main);
    padding: 6px 8px;
    cursor: pointer;
    transition: var(--transition);
}

.favorite-member-row:hover {
    background: var(--bg-hover);
}

.favorite-member-row input {
    flex: 0 0 auto;
}

.favorite-member-row span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.favorite-member-row strong,
.favorite-member-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-member-row small {
    color: var(--text-muted);
}

.favorite-create-message {
    min-height: 18px;
    color: var(--status-dnd);
    font-size: 0.82rem;
}

/* Folders / Accordion */
.folder-container {
    display: flex;
    flex-direction: column;
}

.folder-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    border-radius: var(--radius-squircle);
    cursor: pointer;
    transition: var(--transition);
}

.folder-header:hover {
    background-color: var(--bg-hover);
}

.folder-header i.mdi {
    font-size: 20px;
    color: var(--text-muted);
}

.folder-header i.chevron {
    margin-left: auto;
    font-size: 18px;
    color: var(--text-muted);
    transition: transform var(--transition);
    display: inline-block; /* allows 3d rotation */
}

.folder-container.collapsed .folder-header i.chevron {
    transform: rotate(-90deg);
}

.folder-children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    overflow: hidden;
    transition: max-height var(--transition) ease-in-out, opacity var(--transition);
    max-height: 200px;
    opacity: 1;
}

.folder-container.collapsed .folder-children {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Member item style matching screenshot perfectly: No circle background avatars */
.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--text-main);
    border-radius: var(--radius-squircle);
    cursor: pointer;
    transition: var(--transition);
}

.member-item:hover {
    background-color: var(--bg-hover);
}

.member-item i.member-icon {
    font-size: 18px;
    color: var(--text-muted);
}

.member-item .member-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-add-favorite {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-squircle);
    transition: var(--transition);
}

.btn-add-favorite:hover {
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.btn-add-favorite i.mdi {
    font-size: 18px;
}


/* ============================
   CHAT WORKSPACE STYLING
============================ */
.chat-pane {
    flex: 1;
    background-color: var(--bg-chat);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Header */
.chat-header {
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

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

.channel-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    display: flex;
    align-items: center;
}

.btn-notification {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
    border-radius: var(--radius-squircle);
}

.btn-notification:hover {
    color: var(--text-white);
    transform: scale(1.05);
}

.btn-notification i.mdi {
    font-size: 20px;
}

.btn-notification.muted i.mdi {
    color: var(--status-dnd);
}

.btn-notification.has-unread {
    color: var(--text-white);
    background: var(--bg-hover);
}

.notification-dot {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--status-dnd);
    color: var(--text-white);
    font-size: 0.62rem;
    font-weight: 700;
}

/* Search Bar: Squircle style rounded-rect */
.search-container {
    width: 320px;
    position: relative;
}

.search-bar {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-squircle); /* Changed from rounded capsule to rounded rect */
    padding: 8px 16px 8px 36px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    transition: var(--transition);
}

.search-bar:focus {
    border-color: var(--border-color);
}

.search-container i.mdi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
}

/* Header action buttons: No background frames matching screenshot */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.action-btn:hover {
    color: var(--text-white);
    transform: scale(1.08);
}

.action-btn i.mdi {
    font-size: 20px;
}

/* Window controls divider */
.window-controls-divider {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    margin: 0 8px;
}


/* Message Canvas & Views */
.content-canvas {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.message-canvas {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

/* Scrollbar styles for Chat Panel */
.content-canvas::-webkit-scrollbar {
    width: 6px;
}
.content-canvas::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.content-canvas::-webkit-scrollbar-track {
    background: transparent;
}

/* Message item styling */
.message-item {
    display: flex;
    gap: 16px;
    min-height: 34px;
    animation: messageEntry 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.message-item.compact {
    margin-top: -8px;
}

.message-item.compact .message-avatar {
    visibility: hidden;
}

.message-item.compact .message-meta {
    display: none;
}

@keyframes messageEntry {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Squircle message avatar */
.message-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-squircle); /* Squircle avatar matching screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #d97706, #78350f);
    overflow: hidden;
    position: relative;
}

.message-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-user {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.message-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-main);
    word-break: break-word;
}

/* Highlight tag markup (@Mike) */
.mention-tag {
    color: var(--tag-color);
    font-weight: 500;
    background-color: rgba(245, 158, 11, 0.08);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Attached File Card styling matching screenshot */
.attachment-card {
    margin-top: 8px;
    max-width: 480px;
    border-radius: var(--radius-squircle);
    border: 1px solid var(--border-color);
    background-color: rgba(28, 26, 25, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.attachment-preview {
    width: 100%;
    height: 180px;
    background-color: #12100f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

/* Clean CSS Simulated Mockup Preview inside attachment */
.simulated-mockup-screen {
    width: 90%;
    height: 85%;
    background: linear-gradient(135deg, #1b1716, #2d2623);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    position: relative;
}

.simulated-mockup-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 20%, rgba(99, 102, 241, 0.15), transparent 60%);
    pointer-events: none;
}

.mockup-header-bar {
    height: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.mockup-header-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--text-muted);
}

.mockup-body-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    gap: 6px;
}

.mockup-text-h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.2;
}

.mockup-text-h1 span {
    color: #8b5cf6;
}

.mockup-text-p {
    font-size: 0.45rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.mockup-cta-btn {
    align-self: flex-start;
    height: 14px;
    width: 45px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    margin-top: 4px;
}

.attachment-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.file-icon-box {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-icon-box i.mdi {
    font-size: 20px;
}

.file-details {
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-white);
}

.file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Download button: simple outline with no circular background */
.btn-download {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-download:hover {
    color: var(--text-white);
    transform: scale(1.1);
}

.btn-download i.mdi {
    font-size: 20px;
}

.btn-download.success {
    color: var(--status-online);
}

/* Message Reactions */
.message-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.reaction-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.02);
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.reaction-pill:hover {
    background-color: var(--bg-hover);
    border-color: rgba(255,255,255,0.1);
}

.reaction-pill.active {
    background-color: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--tag-color);
}


/* ============================
   CHAT FOOTER INPUT STYLING
============================ */
.chat-footer {
    padding: 16px 24px 24px;
    flex-shrink: 0;
    transition: var(--transition);
}

.chat-footer.hidden {
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Input Bar: Squircle layout matching screenshot */
.input-bar {
    background-color: var(--bg-input);
    border-radius: var(--radius-squircle); /* Squircle input border radius */
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 12px;
    position: relative;
}

/* Footer buttons: no circular background matching screenshot */
.input-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.input-icon-btn:hover {
    color: var(--text-white);
    transform: scale(1.08);
}

.input-icon-btn i.mdi {
    font-size: 20px;
}

.chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 8px 0;
}

.chat-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Send button: transparent background with green paper plane icon outline */
.btn-send {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-send-outline);
    transition: var(--transition);
    padding: 6px;
}

.btn-send:hover {
    color: var(--btn-send-hover);
    transform: scale(1.1) rotate(5deg);
}

.btn-send i.mdi {
    font-size: 20px;
}

/* Emojis list panel */
.emoji-panel {
    position: absolute;
    bottom: 60px;
    left: 16px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    padding: 12px;
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    width: 210px;
    z-index: 100;
    animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.emoji-item {
    font-size: 1.25rem;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.emoji-item:hover {
    background-color: var(--bg-active);
}

.mention-suggestions {
    position: fixed;
    display: none;
    z-index: 180;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background-color: var(--bg-sidebar);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    animation: slideUp 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.mention-suggestions.open {
    display: grid;
    gap: 2px;
}

.mention-suggestion {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 32px 1fr 10px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mention-suggestion:hover,
.mention-suggestion.active {
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.mention-avatar,
.mention-special-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.mention-special-icon {
    background-color: var(--bg-active);
    color: var(--tag-color);
}

.mention-special-icon i.mdi {
    font-size: 18px;
}

.mention-suggestion-text {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.mention-suggestion-name,
.mention-suggestion-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-suggestion-name {
    color: var(--text-white);
    font-size: 0.86rem;
    font-weight: 600;
}

.mention-suggestion-username {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.mention-status {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--text-muted);
}

.mention-status.online {
    background-color: var(--status-online);
}

.mention-status.offline {
    opacity: 0.6;
}

/* Empty search state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: auto;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
    animation: fadeIn 0.3s var(--transition);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.empty-state i.mdi {
    font-size: 48px;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-white);
}


/* ============================
   ADD CHANNEL DIALOG STYLING
============================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    width: 100%;
    max-width: 400px;
    max-height: min(720px, calc(100vh - 32px));
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.modal-wide {
    max-width: 520px;
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

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

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
}

.btn-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-squircle);
    transition: var(--transition);
}

.btn-modal-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.btn-modal-close i.mdi {
    font-size: 20px;
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-white);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.form-input:focus {
    border-color: var(--tag-color);
}

.form-textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.4;
}

.modal .hidden {
    display: none !important;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-option-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.poll-option-remove,
.dialog-link-button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.poll-option-remove {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-squircle);
}

.poll-option-remove:hover {
    color: var(--status-dnd);
    background-color: var(--bg-hover);
}

.dialog-link-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 0;
    color: var(--tag-color);
    font: inherit;
    font-weight: 600;
}

.dialog-link-button:hover {
    color: var(--text-white);
}

.dialog-setting-row {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-squircle);
    background-color: var(--bg-input);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dialog-setting-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dialog-setting-label i.mdi {
    color: var(--text-muted);
    font-size: 18px;
}

.dialog-setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--status-online);
}

.modal-footer {
    padding: 16px 20px;
    background-color: rgba(0,0,0,0.1);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-modal {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    outline: none;
    transition: var(--transition);
}

.btn-modal.cancel {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-modal.cancel:hover {
    background-color: var(--bg-hover);
    color: var(--text-white);
}

.btn-modal.confirm {
    background-color: var(--status-online);
    color: var(--text-white);
}

.btn-modal.confirm:hover {
    background-color: var(--btn-send-hover);
}

.profile-dialog-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 12px;
}

.profile-dialog-summary .avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    font-size: 1.1rem;
}

.profile-dialog-summary strong,
.profile-dialog-summary small {
    display: block;
}

.profile-dialog-summary strong {
    color: var(--text-white);
    font-size: 0.98rem;
}

.profile-dialog-summary small,
.profile-dialog-message {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.profile-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-password-panel {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.profile-password-panel.hidden {
    display: none;
}

.profile-password-panel .form-input {
    min-height: 38px;
}


/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--status-online);
    border-radius: 6px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 500;
    animation: toastEntry 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

@keyframes toastEntry {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ============================
   NOTIFICATIONS CANVAS VIEW STYLES
============================ */
.notifications-wrapper {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.25s ease-out;
}

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

.notifications-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notifications-title-icon {
    font-size: 24px;
    color: var(--text-white);
    display: flex;
    align-items: center;
}

.notifications-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

.notifications-count {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
}

.notifications-actions-area {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
}

.filters-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

.filters-dropdown-btn:hover {
    color: var(--text-white);
}

.btn-refresh-notifications {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-refresh-notifications:hover {
    color: var(--text-white);
    transform: rotate(30deg);
}

.action-link {
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.action-link:hover {
    color: var(--text-white);
}

/* Date Section Headers */
.notification-date-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Notification list layout */
.notification-list-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Notification Card matching screenshot perfectly */
.notification-card {
    background-color: rgba(28, 26, 25, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    transition: var(--transition), max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    animation: cardSlideEntry 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

@keyframes cardSlideEntry {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.notification-card:hover {
    background-color: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.06);
}

.notification-card.dashboard-clickable {
    cursor: pointer;
}

.notification-card.unread {
    border-color: color-mix(in srgb, var(--tag-color) 42%, var(--border-color));
    background-color: color-mix(in srgb, var(--tag-color) 8%, rgba(28, 26, 25, 0.4));
}

/* Circular Green Monogram Avatars for notifications */
.notification-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4d6b53, #2a3b2e); /* Sleek mossy green gradient matching screenshot */
    color: #a7c0ad;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.notification-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding-right: 24px;
}

.directory-row-action {
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 6px;
}

.directory-icon {
    border-radius: 8px;
    color: var(--text-muted);
}

.btn-dashboard-icon {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition);
}

.btn-dashboard-icon:hover:not(:disabled) {
    color: var(--text-white);
    background: var(--bg-hover);
}

.btn-dashboard-icon:disabled {
    opacity: 0.45;
    cursor: default;
}

.dashboard-filter-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 180px);
    gap: 10px;
}

.dashboard-select {
    min-height: 38px;
}

.dashboard-file-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dashboard-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-main);
    background: var(--bg-input);
    text-decoration: none;
    font-size: 0.8rem;
}

.dashboard-file-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-card-foot {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

.dashboard-load-more {
    align-self: center;
}

.message-highlight {
    background: color-mix(in srgb, var(--tag-color) 14%, transparent);
    border-radius: 8px;
}

@media (max-width: 720px) {
    .dashboard-filter-row {
        grid-template-columns: 1fr;
    }
}

.notification-meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-context {
    color: var(--text-muted);
    font-weight: 400;
}

.notification-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-main);
    white-space: pre-wrap; /* preserves line breaks for Mike's notification */
}

/* Close dismiss X on the far right */
.btn-dismiss-notification {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: var(--transition);
}

.btn-dismiss-notification:hover {
    color: var(--status-dnd);
    background-color: var(--bg-hover);
}

/* Slide-out deletion state */
.notification-card.dismissed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Other Tabs Empty/Placeholder layouts */
.tab-placeholder-view {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    color: var(--text-muted);
    max-width: 500px;
    margin: auto;
    animation: fadeIn 0.25s ease-out;
}

.tab-placeholder-view i.mdi {
    font-size: 64px;
    opacity: 0.2;
    color: var(--text-white);
}

.tab-placeholder-view h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-white);
}

.tab-placeholder-view p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.tab-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}

.placeholder-card {
    background-color: rgba(28,26,25,0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    padding: 16px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.placeholder-card:hover {
    background-color: var(--bg-hover);
    border-color: rgba(255,255,255,0.06);
}

.placeholder-card-icon {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 6px;
    font-size: 20px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-card-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.placeholder-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
}

.placeholder-card-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* ============================
   CONTACTS CANVAS VIEW STYLES
============================ */
.contacts-wrapper {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.25s ease-out;
}

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

.contacts-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contacts-title-icon {
    font-size: 24px;
    color: var(--text-white);
    display: flex;
    align-items: center;
}

.contacts-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

.contacts-tabs-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-tab-pill {
    padding: 6px 16px;
    border-radius: var(--radius-squircle);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
    border: 1px solid transparent;
    background: transparent;
}

.dashboard-tab-pill:hover {
    color: var(--text-white);
    background-color: var(--bg-hover);
}

.dashboard-tab-pill.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.05);
}

.btn-create-new {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-white);
    padding: 6px 16px;
    border-radius: var(--radius-squircle);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-create-new:hover {
    background-color: var(--bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Search contacts squircle input bar */
.contacts-search-container {
    width: 100%;
    position: relative;
    margin-bottom: 4px;
}

.contacts-search-bar {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid transparent;
    border-radius: var(--radius-squircle);
    padding: 10px 16px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    transition: var(--transition);
}

.contacts-search-bar::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.contacts-search-bar:focus {
    border-color: var(--border-color);
}

/* Contacts cards list */
.contacts-section-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* very thin list separator line effect */
    background-color: var(--border-color);
    border-radius: var(--radius-squircle);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.contact-card-item {
    background-color: rgba(28, 26, 25, 0.4);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.contact-card-item:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.contact-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

.contact-card-dot.online { background-color: var(--status-online); }
.contact-card-dot.offline { background-color: var(--status-offline); }

.contact-card-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-white);
}

.btn-message-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-message-link:hover {
    color: var(--text-white);
}


/* ============================
   FILES CANVAS VIEW STYLES
============================ */
.files-wrapper {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.25s ease-out;
}

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

.files-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.files-title-icon {
    font-size: 24px;
    color: var(--text-white);
    display: flex;
    align-items: center;
}

.files-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

.files-tabs-area {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.files-action-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Shared file list container */
.files-list-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-card-item {
    background-color: rgba(28, 26, 25, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: var(--transition), max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    animation: cardSlideEntry 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.file-card-item:hover {
    background-color: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.06);
}

.file-card-item.dismissed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

.file-thumbnail-box {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    background-color: #12100f;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.file-thumbnail-box .simulated-mini-preview {
    width: 90%;
    height: 90%;
    background: linear-gradient(135deg, #1b1716, #2d2623);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    font-size: 8px;
}

.file-card-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 120px; /* space for actions on far right */
}

.file-card-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.file-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-white);
}

.file-card-size {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.file-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.file-card-meta span.separator {
    color: var(--border-color);
    font-weight: bold;
}

.file-card-actions {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-file-open {
    color: #958a84;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-file-open:hover {
    color: var(--text-white);
}

.btn-delete-file {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    transition: var(--transition);
}

.btn-delete-file:hover {
    color: var(--status-dnd);
    background-color: var(--bg-hover);
}


.video-call-strip {
    display: none;
    width: 100%;
    background-color: #1a1817;
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-call-strip.active {
    display: flex;
}

.video-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 720px;
    min-height: 240px;
}

.video-grid.screen-share-active {
    max-width: none;
    min-height: min(62vh, 620px);
}

.webcam-container {
    width: 320px;
    height: 240px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    overflow: hidden;
    position: relative;
    background-color: #12100f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.webcam-container.active-speaker {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.35);
}

.webcam-feed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition);
}

.webcam-container.screen-share-focus {
    width: min(100%, 1120px);
    height: min(62vh, 620px);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
}

.webcam-container.screen-share-focus .webcam-feed,
.grid-webcam-tile.screen-share-focus .grid-webcam-feed {
    object-fit: contain;
    background: #000;
}

.webcam-container.screen-share-hidden,
.grid-webcam-tile.screen-share-hidden {
    display: none !important;
}

.webcam-overlay-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background-color: rgba(28, 26, 25, 0.75);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-white);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(28, 26, 25, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
    z-index: 10;
}

.carousel-nav-btn:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav-btn.prev {
    left: 20px;
}

.carousel-nav-btn.next {
    right: 20px;
}

.tile-menu-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(28, 26, 25, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
    z-index: 5;
}

.tile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.carousel-side-controls {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: rgba(28, 26, 25, 0.8);
    backdrop-filter: blur(4px);
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10;
}

.carousel-side-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: var(--transition);
}

.carousel-side-btn:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.12);
}

.carousel-side-btn.record-active {
    color: #ef4444 !important;
}

.full-meeting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 560px));
    grid-auto-rows: auto;
    align-content: center;
    justify-content: center;
    justify-items: stretch;
    width: 100%;
    min-height: 100%;
    padding: 16px;
    gap: 16px;
    background-color: #0f0e0d;
    box-sizing: border-box;
    overflow: auto;
}

.full-meeting-grid.screen-share-active {
    display: block;
}

.grid-webcam-tile {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    max-height: min(52vh, 420px);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #12100f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.full-meeting-grid.screen-share-active .grid-webcam-tile.screen-share-focus {
    width: 100%;
    max-width: none;
    height: calc(100vh - 190px);
    max-height: none;
    aspect-ratio: auto;
}

.grid-webcam-tile.local-tile,
.grid-webcam-tile#gridWebcamYou {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
}

.grid-webcam-tile.remote-tile {
    border: 2px solid #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.grid-webcam-feed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition);
}

.call-avatar-feed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-weight: 700;
    font-size: 2rem;
    background: linear-gradient(135deg, #d97706, #78350f);
}

.call-avatar-feed.has-image {
    background: #12100f;
}

.call-avatar-feed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.grid-tile-header {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.grid-tile-header-btn {
    background-color: rgba(28, 26, 25, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
}

.grid-tile-header-btn:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.grid-tile-header-btn.active-grid {
    background-color: #10b981;
    border-color: #10b981;
    color: var(--text-white);
}

.grid-tile-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

.grid-tile-name {
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.grid-tile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-action-icon {
    background-color: rgba(255, 255, 255, 0.12);
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
}

.grid-action-icon:hover {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.grid-action-icon.hang-up-circle {
    background-color: #ef4444;
    color: var(--text-white);
}

.grid-action-icon.hang-up-circle:hover {
    background-color: #f87171;
}

.call-controls-capsule {
    display: flex;
    align-items: center;
    background-color: #4ea375;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 3px 6px;
    gap: 6px;
    margin-right: 4px;
    animation: fadeIn 0.2s ease-out;
}

.call-pill-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    background-color: transparent;
    font-size: 14px;
    transition: var(--transition);
}

.call-pill-btn:not(.hang-up):hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.call-pill-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.call-pill-btn.active {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.18);
}

.call-pill-btn.inactive-red {
    color: #ef4444;
    background-color: transparent;
}

.call-pill-btn.inactive-dark {
    color: rgba(255, 255, 255, 0.55);
    background-color: transparent;
}

.call-pill-btn.hang-up {
    background-color: #e05a5a;
    color: var(--text-white);
    width: 36px;
    border-radius: 18px;
}

.call-pill-btn.hang-up:hover {
    background-color: #f87171;
    transform: scale(1.05);
}

.incoming-call {
    position: absolute;
    right: 20px;
    top: 76px;
    z-index: 65;
    min-width: 300px;
    max-width: 420px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-squircle);
    background: var(--bg-sidebar);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
}

.incoming-call.active {
    display: flex;
}

.incoming-call > div {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.incoming-call strong,
.incoming-call span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.incoming-call strong {
    color: var(--text-white);
    font-size: .9rem;
}

.incoming-call span {
    color: var(--text-muted);
    font-size: .78rem;
}

@media (max-width: 860px) {
    .video-call-strip {
        padding: 12px 54px;
    }

    .video-grid {
        gap: 10px;
        min-height: 150px;
    }

    .webcam-container {
        width: 180px;
        height: 135px;
    }

    .full-meeting-grid {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }

    .grid-webcam-tile {
        max-width: none;
        min-height: 160px;
        max-height: none;
    }
}