/* =====================================================================
   TITAN DESKTOP LAYER  v1.0.0
   ---------------------------------------------------------------------
   Loaded AFTER style.css and after the inline <style> in index.html.

   Breakpoint contract (keep in sync with js/titan-desktop.js and ui.js):
       mobile  : width <= 900px  → single pane, bottom nav, slide-over list
       desktop : width >= 901px  → nav rail | chat list | chat stage

   All structural rules below are pure CSS media queries, so the layout
   follows the window LIVE in both directions (phone ⇄ computer, window
   resize, tablet rotation) without any JS. js/titan-desktop.js only
   reconciles state the older code left behind and adds drag & drop.
   ===================================================================== */

:root {
    --tc-rail-w: 72px;          /* width of the vertical navigation rail   */
    --tc-content-max: 980px;    /* readable width of the chat column       */
}

/* ─────────────────────────────────────────────────────────────────────
   Parts that exist in every layout (inert until used)
   ───────────────────────────────────────────────────────────────────── */
.tc-resizer { display: none; }

/* Drop feedback shown over the chat stage while files are dragged in */
#tc-drop-overlay {
    position: absolute; inset: 0; z-index: 900;
    display: none; align-items: center; justify-content: center;
    background: rgba(6, 6, 12, 0.78);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    pointer-events: none;          /* never steal drag events from the stage */
}
#tc-drop-overlay.active { display: flex; animation: fadeIn 0.15s ease; }
#tc-drop-overlay .tc-drop-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 38px 54px; max-width: 80%;
    border: 2px dashed var(--primary, #8b5cf6); border-radius: 28px;
    background: rgba(139, 92, 246, 0.10);
    color: #fff; text-align: center;
}
#tc-drop-overlay .tc-drop-card i { font-size: 2.6rem; color: var(--primary, #8b5cf6); }
#tc-drop-overlay .tc-drop-title { font-size: 1.25rem; font-weight: 800; }
#tc-drop-overlay .tc-drop-sub   { font-size: 0.85rem; opacity: 0.7; }
#tc-drop-overlay.denied .tc-drop-card {
    border-color: #f43f5e; background: rgba(244, 63, 94, 0.10);
}
#tc-drop-overlay.denied .tc-drop-card i { color: #f43f5e; }

/* A contact / group under a dragged file */
.ghost-item.tc-drop-target {
    outline: 2px dashed var(--primary, #8b5cf6); outline-offset: -2px;
    background: rgba(139, 92, 246, 0.20) !important;
}

/* Confirmation dialog (SweetAlert2) that lists the dropped files */
.tc-send-list { display: flex; flex-direction: column; gap: 6px; text-align: start; margin-top: 10px; }
.tc-send-thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.tc-send-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.tc-fl {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}
.tc-fl span  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-fl small { opacity: 0.6; flex-shrink: 0; font-family: var(--font-mono, monospace); }

/* While the user drags the column divider */
html.tc-resizing, html.tc-resizing * { cursor: col-resize !important; user-select: none !important; }

/* =====================================================================
   DESKTOP  (width >= 901px)
   ===================================================================== */
@media (min-width: 901px) {

    /* 1 ▸ Shell: [ rail + chat list ] | [ chat stage ] ─────────────── */
    #app-container {
        /* list column: user-dragged width (or a fluid default), never leaving the stage < 420px */
        grid-template-columns: min(var(--tc-sidebar-w, clamp(380px, 30vw, 480px)), calc(100% - 420px)) minmax(0, 1fr);
        height: 100vh;
        height: 100dvh;
    }
    #app-container > .sidebar {
        position: relative;
        padding-inline-start: var(--tc-rail-w);   /* room for the rail */
        min-width: 0;
        transform: none !important;               /* drop any leftover mobile slide-over state */
    }
    #app-container > .sidebar.hidden { display: flex !important; }
    #app-container > .chat-stage     { min-width: 0; transform: none !important; }

    /* 2 ▸ The old bottom nav becomes a vertical rail ────────────────
       (style.css hides it above 900px; the id selector out-ranks that) */
    #titan-bottom-nav.titan-bottom-nav {
        display: flex !important;
        position: absolute;
        top: 0; bottom: 0; height: auto;
        left: auto; right: auto;
        inset-inline-start: 0;
        width: var(--tc-rail-w);
        flex-direction: column; justify-content: flex-start; align-items: stretch;
        gap: 6px;
        padding: 16px 8px;
        border-top: 0;
        border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: none;
        background: rgba(6, 6, 10, 0.98);
        z-index: 6;
    }
    #titan-bottom-nav .tbn-item {
        flex: 0 0 auto; width: 100%; height: 60px;
        border-radius: 14px; padding: 6px 2px; gap: 4px;
    }
    #titan-bottom-nav .tbn-item:hover  { background: rgba(255, 255, 255, 0.06); color: #fff; }
    #titan-bottom-nav .tbn-item.active { background: rgba(139, 92, 246, 0.14); }
    #titan-bottom-nav .tbn-item.active::before {       /* top bar → side bar */
        top: 50%; left: auto; right: auto;
        inset-inline-start: -8px;
        transform: translateY(-50%);
        width: 3px; height: 26px;
        border-radius: 0;
        border-start-end-radius: 4px; border-end-end-radius: 4px;
    }
    #titan-bottom-nav .tbn-explore .tbn-explore-icon { width: 38px; height: 38px; margin: 0; }
    #titan-bottom-nav .tbn-explore.active::before    { display: none; }
    #titan-bottom-nav #tbn-more { margin-top: auto; }   /* "More" sits at the bottom of the rail */

    /* Explore / More pop-ups open beside the rail instead of above a bottom bar */
    .tbn-popup {
        left: auto; right: auto;
        inset-inline-start: calc(var(--tc-rail-w) + 10px);
        width: 320px;
    }
    .tbn-popup .tbn-popup-grid { grid-template-columns: repeat(2, 1fr); }
    #tbn-explore-menu { top: 150px; bottom: auto; }
    #tbn-more-menu    { top: auto;  bottom: 16px; }

    /* Notifications drop-down: beside the rail, not glued to the window edge */
    body .notif-menu {
        left: auto !important; right: auto !important;
        inset-inline-start: calc(var(--tc-rail-w) + 12px) !important;
        top: 70px !important;
        width: 340px !important;
    }

    /* 3 ▸ Chat column: centred and capped on wide screens ──────────── */
    #message-stream {
        padding: 14px max(14px, calc((100% - var(--tc-content-max)) / 2));
    }
    .bubble { max-width: min(72%, 640px); }
    .chat-stage .chat-header {
        padding-inline: max(18px, calc((100% - var(--tc-content-max)) / 2)) !important;
    }
    .chat-stage .input-panel {
        padding: 12px max(14px, calc((100% - var(--tc-content-max)) / 2)) 16px !important;
    }
    /* keep the attach menu aligned with the "+" button inside the padded panel */
    html[dir="rtl"] #attach-menu {
        right: max(14px, calc((100% - var(--tc-content-max)) / 2)) !important;
    }
    html[dir="ltr"] #attach-menu {
        right: auto !important;
        left: max(14px, calc((100% - var(--tc-content-max)) / 2)) !important;
    }

    /* 4 ▸ Chat header (UIManager.renderChatHeader re-renders it on every open) ─── */
    .chat-stage .back-btn-custom { display: none !important; }   /* the list is always visible → no "back" */
    /* the ⋮ menu opens under its button, which sits at the header's content edge */
    html[dir="rtl"] .chat-stage .header-dropdown {
        right: auto !important;
        left: max(18px, calc((100% - var(--tc-content-max)) / 2)) !important;
    }
    html[dir="ltr"] .chat-stage .header-dropdown {
        left: auto !important;
        right: max(18px, calc((100% - var(--tc-content-max)) / 2)) !important;
    }
    /* emoji + AI menus follow the centred input column instead of hugging the window edge */
    #sticker-menu {
        left: auto; right: auto;
        inset-inline-start: max(14px, calc((100% - var(--tc-content-max)) / 2));
        width: min(440px, calc(100% - 28px));
    }
    #ai-context-menu {
        left: auto !important; right: auto !important;
        inset-inline-start: calc(max(14px, calc((100% - var(--tc-content-max)) / 2)) + 44px) !important;
    }

    /* 5 ▸ Draggable divider between the chat list and the stage ───── */
    .tc-resizer {
        display: block;
        position: absolute; top: 0; bottom: 0;
        inset-inline-end: -4px; width: 8px;
        cursor: col-resize; z-index: 30; touch-action: none;
    }
    .tc-resizer::after {
        content: ''; position: absolute; top: 0; bottom: 0;
        inset-inline-start: 3px; width: 2px;
        background: transparent; transition: background 0.15s;
    }
    .tc-resizer:hover::after,
    .tc-resizer:focus-visible::after,
    .tc-resizer.dragging::after { background: var(--primary, #8b5cf6); }
    .tc-resizer:focus-visible { outline: none; }
}

/* =====================================================================
   DESKTOP + MOUSE  (a real pointer, not just a wide screen)
   ===================================================================== */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    /* Text in messages can be selected and copied */
    .bubble { user-select: text; -webkit-user-select: text; cursor: default; }
    .bubble a { cursor: pointer; }

    /* Visible, slim scrollbars instead of hidden ones */
    .ghost-list, #message-stream {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }
    .ghost-list::-webkit-scrollbar,
    #message-stream::-webkit-scrollbar { display: block; width: 8px; }
    .ghost-list::-webkit-scrollbar-thumb,
    #message-stream::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16); border-radius: 8px;
    }
    .ghost-list::-webkit-scrollbar-thumb:hover,
    #message-stream::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
    .ghost-list::-webkit-scrollbar-track,
    #message-stream::-webkit-scrollbar-track { background: transparent; }
}