/* =========================================================
   Nabgol — Desktop Chat UI (v11, clean consolidated rewrite)
   Loaded only by templates/desktop.php, AFTER style-common.css
   ========================================================= */

@media (min-width: 768px) {

    :root {
        --dc-accent: #22c55e;
        --dc-accent-dark: #15803d;
        --dc-accent-soft: rgba(34, 197, 94, .12);
        --dc-accent-glow: rgba(34, 197, 94, .30);
        --primary: var(--dc-accent);
        --primary-dark: var(--dc-accent-dark);
        --user-msg: var(--dc-accent);
        --header-height: 64px;
        --sidebar-width: 280px;
        --thread-max: 820px;
        --composer-max: 820px;
    }

    .ico { width: 18px; height: 18px; display: block; flex-shrink: 0; }

    /* ---------- Icon buttons (header + reused elsewhere) ---------- */
    body.desktop-chat .icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; padding: 0; border: 1px solid transparent;
        border-radius: 10px; background: transparent; color: var(--text-secondary);
        cursor: pointer; font-size: 0; transition: background .15s, color .15s, border-color .15s;
    }
    body.desktop-chat .icon-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
    body.desktop-chat .icon-btn.danger { color: var(--danger); }
    body.desktop-chat .icon-btn.danger:hover { background: rgba(248, 81, 73, .12); }
    body.desktop-chat .icon-btn.active { color: var(--dc-accent); background: var(--dc-accent-soft); border-color: var(--dc-accent); }

    /* ---------- Page grid ---------- */
    body.desktop-chat {
        display: grid;
        grid-template-columns: 1fr var(--sidebar-width);
        grid-template-rows: var(--header-height) 1fr auto auto;
        height: 100dvh;
        background: var(--bg);
        overflow: hidden;
    }
    body.desktop-chat .sidebar-overlay { display: none !important; }

    /* ---------- Sidebar ---------- */
    body.desktop-chat .sidebar {
        position: relative; inset: auto; grid-column: 2; grid-row: 1 / -1;
        width: var(--sidebar-width); height: 100dvh; padding: 0;
        border-left: 1px solid var(--border); background: var(--bg-secondary);
        box-shadow: none; transform: none; display: flex; flex-direction: column;
    }
    body.desktop-chat .sidebar-header.robot-brand { padding: 18px 16px 12px; border-bottom: 1px solid var(--border); }
    body.desktop-chat .sidebar-close-mobile { display: none; }
    body.desktop-chat .brand-mark { display: flex; align-items: center; gap: 10px; }
    body.desktop-chat .brand-avatar {
        width: 40px; height: 40px; border-radius: 10px;
        background: linear-gradient(135deg, var(--dc-accent-dark), var(--dc-accent));
        color: #fff; display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 18px; flex-shrink: 0;
    }
    body.desktop-chat .brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    body.desktop-chat .brand-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.desktop-chat .brand-desc { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.desktop-chat .sidebar-section-title { margin: 12px 16px 4px; font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    body.desktop-chat .search-box { margin: 0 12px 8px; }
    body.desktop-chat #chatList { flex: 1; overflow-y: auto; padding: 0 8px; }
    body.desktop-chat .new-chat-sidebar {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin: 10px 12px 14px; padding: 10px; border-radius: 10px;
        border: 1px dashed var(--border); background: transparent; color: var(--text);
        font-family: inherit; font-size: 13px; cursor: pointer;
        transition: border-color .15s, background .15s, color .15s;
    }
    body.desktop-chat .new-chat-sidebar:hover { border-color: var(--dc-accent); background: var(--dc-accent-soft); color: var(--dc-accent); }

    /* ---------- Header ---------- */
    body.desktop-chat .chat-header {
        grid-column: 1; grid-row: 1; height: var(--header-height); padding: 0 22px;
        display: flex; align-items: center; justify-content: space-between;
        background: rgba(13, 17, 23, .85); backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border); z-index: 20;
    }
    [data-theme="light"] body.desktop-chat .chat-header { background: rgba(255, 255, 255, .9); }
    body.desktop-chat .chat-header .info { display: flex; align-items: center; gap: 12px; min-width: 0; }
    body.desktop-chat .chat-header .avatar {
        width: 38px; height: 38px; border-radius: 10px; font-size: 16px; color: #fff;
        background: linear-gradient(135deg, var(--dc-accent-dark), var(--dc-accent));
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    body.desktop-chat .chat-header .info-text { min-width: 0; }
    body.desktop-chat .chat-header .name { font-size: 15px; font-weight: 600; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.desktop-chat .robot-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    body.desktop-chat .header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
    body.desktop-chat .robot-status {
        display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
        padding: 5px 12px; border-radius: 999px; background: var(--bg-hover); margin-left: 4px;
    }
    body.desktop-chat .robot-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
    body.desktop-chat .robot-status.active { color: var(--dc-accent); background: var(--dc-accent-soft); }
    body.desktop-chat .robot-status.active .status-dot { background: var(--dc-accent); box-shadow: 0 0 6px var(--dc-accent-glow); }

    body.desktop-chat .robot-selector select {
        height: 38px; font-size: 12px; max-width: 150px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); padding: 0 10px;
    }

    body.desktop-chat .header-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
    body.desktop-chat .desktop-toolbar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

    /* ---------- Thread ---------- */
    body.desktop-chat .chat-main { grid-column: 1; grid-row: 2; min-height: 0; position: relative; }
    body.desktop-chat .chat-messages { padding: 28px 0 24px; gap: 0; overflow-y: auto; }

    body.desktop-chat .message.assistant {
        max-width: none; width: 100%; margin: 0; padding: 14px 24px;
        background: transparent; border: none; border-radius: 0; align-self: auto; color: inherit;
    }
    body.desktop-chat .message.assistant .message-row {
        display: flex; gap: 14px; max-width: var(--thread-max); margin: 0 auto; align-items: flex-start;
    }
    body.desktop-chat .msg-avatar {
        width: 28px; height: 28px; border-radius: 8px; background: var(--dc-accent-soft);
        color: var(--dc-accent); display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 12px; flex-shrink: 0; margin-top: 2px; overflow: hidden;
    }
    body.desktop-chat .message.assistant .message-body { flex: 1; min-width: 0; }
    body.desktop-chat .message.assistant .message-bubble {
        background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px;
        padding: 16px 18px; box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
    }
    [data-theme="light"] body.desktop-chat .message.assistant .message-bubble { box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
    body.desktop-chat .message.assistant .text { font-size: 15px; line-height: 1.85; color: var(--text); }
    body.desktop-chat .message.assistant .text pre { border-radius: 10px; border: 1px solid var(--border); margin: 12px 0; }

    body.desktop-chat .message.user {
        max-width: min(72%, 700px); margin: 14px 24px 14px auto; padding: 0;
        background: transparent; border: none; align-self: auto; color: inherit;
    }
    body.desktop-chat .message.user .message-row { display: flex; justify-content: flex-start; }
    body.desktop-chat .message.user .message-body { width: 100%; min-width: 0; }
    body.desktop-chat .message.user .message-bubble {
        background: linear-gradient(135deg, var(--dc-accent-dark), var(--dc-accent)); color: #fff;
        padding: 12px 16px; border-radius: 18px 18px 4px 18px; box-shadow: 0 4px 18px var(--dc-accent-glow);
    }
    body.desktop-chat .message.user .text { font-size: 15px; line-height: 1.65; }

    /* Footer & actions — always readable, never dimmed */
    body.desktop-chat .message .footer {
        display: flex; justify-content: space-between; align-items: center; gap: 8px;
        margin-top: 10px; padding-top: 8px; font-size: 12px; flex-wrap: wrap;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    body.desktop-chat .message.assistant .footer { border-top-color: var(--border); color: var(--text-secondary); }
    body.desktop-chat .message.user .footer { border-top-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); }
    body.desktop-chat .message .time { opacity: 1; font-size: 11px; white-space: nowrap; }

    body.desktop-chat .message-actions { opacity: 1; display: flex; flex-wrap: wrap; gap: 4px; }
    body.desktop-chat .message-actions button {
        display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px;
        border-radius: 7px; font-size: 11px; font-family: inherit; background: var(--bg-hover);
        border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer;
        min-height: 28px; transition: background .12s, color .12s;
    }
    body.desktop-chat .message-actions button .ico { width: 14px; height: 14px; }
    body.desktop-chat .message-actions button:hover { background: var(--border); color: var(--text); }
    body.desktop-chat .message.user .message-actions button { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .9); }
    body.desktop-chat .message.user .message-actions button:hover { background: rgba(255, 255, 255, .24); color: #fff; }

    /* Attachments (rendered inside the bubble) */
    body.desktop-chat .message-attachments { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    body.desktop-chat .msg-attach { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; }
    body.desktop-chat .message.assistant .msg-attach { background: var(--bg); border: 1px solid var(--border); }
    body.desktop-chat .message.user .msg-attach { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
    body.desktop-chat .msg-attach img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
    body.desktop-chat .msg-attach-icon { width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    body.desktop-chat .message.assistant .msg-attach-icon { background: var(--bg-hover); }
    body.desktop-chat .msg-attach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    body.desktop-chat .msg-attach-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.desktop-chat .msg-attach-meta { font-size: 11px; opacity: .8; }

    /* ---------- Composer ---------- */
    body.desktop-chat .chat-input {
        grid-column: 1; grid-row: 3; padding: 10px 24px 6px;
        background: linear-gradient(to top, var(--bg) 65%, transparent); border-top: none;
    }
    body.desktop-chat .file-preview {
        max-width: var(--composer-max); margin: 0 auto 10px; padding: 10px 14px;
        background: var(--bg-secondary); border: 1px solid var(--dc-accent); border-radius: 12px;
        box-shadow: 0 0 0 3px var(--dc-accent-soft); align-items: center; gap: 12px;
    }
    body.desktop-chat .file-preview.show { display: flex; }
    body.desktop-chat .file-preview-icon {
        width: 40px; height: 40px; border-radius: 8px; background: var(--dc-accent-soft);
        color: var(--dc-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    body.desktop-chat #filePreviewImage { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
    body.desktop-chat .file-preview-info { flex: 1; min-width: 0; }
    body.desktop-chat .file-preview .file-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.desktop-chat .file-preview .file-meta { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
    body.desktop-chat .file-remove { width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--danger); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    body.desktop-chat .file-remove:hover { background: rgba(248, 81, 73, .15); }

    body.desktop-chat .chat-input .input-wrapper {
        max-width: var(--composer-max); margin: 0 auto; display: flex; align-items: flex-end;
        gap: 6px; min-height: 56px; padding: 8px 10px 8px 12px; border: 1px solid var(--border);
        border-radius: 18px; background: var(--bg-secondary); box-shadow: 0 4px 22px rgba(0, 0, 0, .18);
        transition: border-color .2s, box-shadow .2s;
    }
    body.desktop-chat .chat-input .input-wrapper:focus-within {
        border-color: var(--dc-accent); box-shadow: 0 4px 22px rgba(0, 0, 0, .22), 0 0 0 3px var(--dc-accent-soft);
    }
    body.desktop-chat .chat-input .input-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
    body.desktop-chat .chat-input .input-actions button { width: 36px; height: 36px; }

    body.desktop-chat .chat-input textarea,
    body.desktop-chat .chat-input #input {
        flex: 1; font-size: 15px; line-height: 1.5; min-height: 36px; max-height: 200px;
        padding: 9px 6px; border: none; background: transparent; resize: none; color: var(--text);
    }
    body.desktop-chat .chat-input textarea::placeholder { color: var(--text-muted); }

    body.desktop-chat .chat-input .send-btn {
        width: 40px; height: 40px; min-width: 40px; padding: 0; border: none; border-radius: 12px;
        background: var(--dc-accent); color: #fff; cursor: pointer; display: flex; align-items: center;
        justify-content: center; flex-shrink: 0; font-size: 0; transition: filter .15s, transform .15s;
    }
    body.desktop-chat .chat-input .send-btn:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.03); }
    body.desktop-chat .chat-input .send-btn:disabled { opacity: .45; cursor: not-allowed; }
    body.desktop-chat .chat-input .send-btn .ico { width: 18px; height: 18px; }
    body.desktop-chat .chat-input .send-btn.loading .ico { animation: dcSpin .8s linear infinite; }
    @keyframes dcSpin { to { transform: rotate(360deg); } }

    body.desktop-chat .composer-hint { max-width: var(--composer-max); margin: 8px auto 4px; text-align: center; font-size: 11px; color: var(--text-muted); }
    body.desktop-chat .composer-hint kbd { padding: 1px 5px; border-radius: 4px; background: var(--bg-secondary); border: 1px solid var(--border); font-size: 10px; }

    /* ---------- Empty state ---------- */
    body.desktop-chat .chat-messages .empty {
        position: relative; max-width: 540px; margin: 6% auto 0; padding: 48px 32px;
        text-align: center; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-secondary);
    }
    body.desktop-chat .empty-glow {
        position: absolute; top: -18%; left: 50%; transform: translateX(-50%); width: 160px; height: 160px;
        background: radial-gradient(circle, var(--dc-accent-glow), transparent 70%); pointer-events: none; opacity: .28;
    }
    body.desktop-chat .chat-messages .empty .big-icon {
        position: relative; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px;
        background: linear-gradient(135deg, var(--dc-accent-dark), var(--dc-accent)); color: #fff;
        font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;
        overflow: hidden; flex-shrink: 0;
    }
    body.desktop-chat .suggestion-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
    body.desktop-chat .suggestion-chip {
        padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
        color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
        transition: border-color .15s, background .15s;
    }
    body.desktop-chat .suggestion-chip:hover { border-color: var(--dc-accent); background: var(--dc-accent-soft); color: var(--dc-accent); }

    /* ---------- Typing indicator ---------- */
    body.desktop-chat .typing-indicator { max-width: var(--thread-max); margin: 4px auto 12px; padding: 14px 24px; }

    /* ---------- Split panel ---------- */
    body.desktop-chat .split-panel { width: 0 !important; overflow: hidden; transition: width .2s ease; }
    body.desktop-chat .split-panel.open { width: 38% !important; max-width: 440px; border-left: 1px solid var(--border); background: var(--bg-secondary); }

    /* ---------- TTS player ---------- */
    body.desktop-chat .tts-player { display: none; }
    body.desktop-chat .tts-player.show {
        grid-column: 1; grid-row: 4; display: flex; max-width: var(--composer-max);
        margin: 0 auto 14px; width: calc(100% - 48px); border-radius: 14px; border: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    body.desktop-chat .tts-player .tts-subtitle {
        max-height: 64px; overflow-y: auto; overflow-x: hidden; word-break: break-word;
        text-align: right; padding: 8px 12px; font-size: 12px; line-height: 1.5;
        color: var(--text-secondary); border-top: 1px solid var(--border);
    }
    body.desktop-chat .tts-player .tts-subtitle::-webkit-scrollbar { width: 6px; }
    body.desktop-chat .tts-player .tts-subtitle::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ---------- Scroll-to-bottom button ---------- */
    body.desktop-chat .scroll-bottom-btn { bottom: 132px; border-radius: 12px; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }

    /* ---------- Scrollbars ---------- */
    body.desktop-chat .chat-messages::-webkit-scrollbar,
    body.desktop-chat .sidebar #chatList::-webkit-scrollbar { width: 8px; }
    body.desktop-chat .chat-messages::-webkit-scrollbar-thumb,
    body.desktop-chat .sidebar #chatList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    body.desktop-chat .chat-messages::-webkit-scrollbar-track,
    body.desktop-chat .sidebar #chatList::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Narrower desktop / laptop windows ---------- */
@media (min-width: 768px) and (max-width: 1180px) {
    body.desktop-chat { --sidebar-width: 240px; --thread-max: 720px; --composer-max: 680px; }
    body.desktop-chat .robot-selector select { max-width: 110px; }
}
/* v12 — hide mobile chrome + full-width professional composer */
@media (min-width: 768px) {
    body.desktop-chat .header-menu-wrap,
    body.desktop-chat .more-btn,
    body.desktop-chat .sheet-overlay,
    body.desktop-chat .bottom-sheet {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.desktop-chat .chat-header .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    body.desktop-chat .desktop-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    body.desktop-chat .chat-input {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 24px 10px !important;
    }

    body.desktop-chat .file-preview,
    body.desktop-chat .chat-input .input-wrapper,
    body.desktop-chat .composer-hint {
        width: min(100%, var(--composer-max)) !important;
        max-width: var(--composer-max) !important;
        box-sizing: border-box !important;
    }

    body.desktop-chat .chat-input .input-wrapper {
        min-height: 62px !important;
        padding: 10px 12px 10px 14px !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
        gap: 8px !important;
        box-shadow: 0 6px 28px rgba(0, 0, 0, .22) !important;
    }

    body.desktop-chat .chat-input textarea,
    body.desktop-chat .chat-input #input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 30px !important;
        max-height: 220px !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
        padding: 11px 8px !important;
    }

    body.desktop-chat .chat-input .send-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
    }
}
/* v13 — Header ghost / glassmorphism toolbar buttons */
@media (min-width: 768px) {
    body.desktop-chat .chat-header .header-actions { gap: 6px !important; }
    body.desktop-chat .chat-header .desktop-toolbar { gap: 6px !important; }
    body.desktop-chat .chat-header .header-actions .icon-btn,
    body.desktop-chat .chat-header .header-actions .ghost-btn {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
        padding: 0 !important; border: none !important; border-radius: 8px !important;
        background: transparent !important; color: #a1a1aa !important;
        transition: all 0.2s ease !important; box-shadow: none !important;
    }
    body.desktop-chat .chat-header .header-actions .icon-btn:hover,
    body.desktop-chat .chat-header .header-actions .ghost-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: none !important;
    }
    body.desktop-chat .chat-header .header-actions .icon-btn.danger,
    body.desktop-chat .chat-header .header-actions .ghost-btn.danger { color: #f87171 !important; }
    body.desktop-chat .chat-header .header-actions .icon-btn.danger:hover,
    body.desktop-chat .chat-header .header-actions .ghost-btn.danger:hover {
        background: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important;
    }
    body.desktop-chat .chat-header .header-actions .icon-btn.active,
    body.desktop-chat .chat-header .header-actions .ghost-btn.active {
        background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border: none !important;
    }
    [data-theme="light"] body.desktop-chat .chat-header .header-actions .icon-btn:hover,
    [data-theme="light"] body.desktop-chat .chat-header .header-actions .ghost-btn:hover {
        background: rgba(0, 0, 0, 0.06) !important; color: #18181b !important;
    }
}
/* v14 — Message attachments + compact action icons */
@media (min-width: 768px) {
    body.desktop-chat .message.user .msg-attach-card {
        display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:10px;
        border-radius:12px; background:rgba(0,0,0,0.15); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
        border:1px solid rgba(255,255,255,0.14);
    }
    body.desktop-chat .message.assistant .msg-attach-card {
        display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:10px;
        border-radius:12px; background:rgba(0,0,0,0.08); backdrop-filter:blur(4px); border:1px solid var(--border);
    }
    body.desktop-chat .msg-attach-icon { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.12);
        display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0; }
    body.desktop-chat .msg-attach-icon .ico { width:18px; height:18px; color:rgba(255,255,255,0.92); }
    body.desktop-chat .message.assistant .msg-attach-icon { background:var(--bg-hover); }
    body.desktop-chat .message.assistant .msg-attach-icon .ico { color:var(--text-secondary); }
    body.desktop-chat .msg-attach-name { font-size:13px; font-weight:700; color:rgba(255,255,255,0.96);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    body.desktop-chat .message.assistant .msg-attach-name { color:var(--text); }
    body.desktop-chat .msg-attach-meta { font-size:11px; opacity:0.82; color:rgba(255,255,255,0.78); }
    body.desktop-chat .message.assistant .message-actions .action-icon-btn,
    body.desktop-chat .message.assistant .message-actions button {
        width:30px!important; height:30px!important; min-width:30px!important; padding:0!important;
        border:none!important; border-radius:6px!important; background:transparent!important;
        font-size:0!important; opacity:0.5; transition:opacity .2s,background .2s;
        display:inline-flex!important; align-items:center!important; justify-content:center!important;
    }
    body.desktop-chat .message.assistant .message-actions button .ico { width:15px; height:15px; }
    body.desktop-chat .message.assistant .message-actions button:hover {
        opacity:1!important; background:rgba(255,255,255,0.1)!important;
    }
    body.desktop-chat .message.user .message-actions .edit-btn {
        width:32px!important; height:32px!important; border-radius:50%!important;
        background:rgba(255,255,255,0.2)!important; opacity:1!important;
        display:inline-flex!important; align-items:center!important; justify-content:center!important;
        font-size:0!important; border:none!important; padding:0!important;
    }
    body.desktop-chat .message.user .message-actions .edit-btn .ico { width:15px; height:15px; color:rgba(255,255,255,0.95); }
    body.desktop-chat .message.user .message-actions .edit-btn:hover { background:rgba(255,255,255,0.32)!important; }
}
/* v15 — Composer input area (ChatGPT / Claude style) */
@media (min-width: 768px) {
    body.desktop-chat .chat-input .input-wrapper { display:flex!important; align-items:center!important; gap:10px!important; }
    body.desktop-chat .composer-actions-group { display:flex!important; align-items:center!important; gap:2px!important; flex-shrink:0!important; padding:2px 4px!important; border-radius:10px!important; background:rgba(255,255,255,0.04)!important; }
    body.desktop-chat .composer-action-btn { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:36px!important; height:36px!important; border:none!important; border-radius:8px!important; background:transparent!important; color:#a1a1aa!important; font-size:0!important; transition:color .2s,background .2s!important; }
    body.desktop-chat .composer-action-btn .ico { width:18px!important; height:18px!important; }
    body.desktop-chat .composer-action-btn:hover { color:#ffffff!important; background:rgba(255,255,255,0.08)!important; }
    body.desktop-chat .composer-action-btn.voice-btn.recording { color:#f87171!important; background:rgba(248,113,113,0.12)!important; }
    body.desktop-chat .chat-input .send-btn { width:40px!important; height:40px!important; min-width:40px!important; border-radius:50%!important; background:#10b981!important; border:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; box-shadow:0 4px 15px rgba(16,185,129,0.4)!important; }
    body.desktop-chat .chat-input .send-btn .ico { width:17px!important; height:17px!important; }
    body.desktop-chat .chat-input .send-btn:hover:not(:disabled) { filter:brightness(1.06)!important; transform:scale(1.04)!important; box-shadow:0 6px 20px rgba(16,185,129,0.5)!important; }
    body.desktop-chat .scroll-bottom-btn { position:absolute!important; left:50%!important; bottom:24px!important; width:44px!important; height:44px!important; border-radius:50%!important; background:rgba(30,30,36,0.8)!important; backdrop-filter:blur(8px)!important; border:none!important; color:#e4e4e7!important; box-shadow:0 4px 20px rgba(0,0,0,0.35)!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; }
    body.desktop-chat .scroll-bottom-btn.show { transform:translateX(-50%) translateY(0)!important; }
    body.desktop-chat .scroll-bottom-btn:not(.show) { transform:translateX(-50%) translateY(12px)!important; }
    body.desktop-chat .scroll-bottom-btn .ico { width:20px!important; height:20px!important; }
    body.desktop-chat .scroll-bottom-btn:hover { background:rgba(30,30,36,0.95)!important; color:#fff!important; }
}
/* v16 — Sidebar seamless UI */
@media (min-width: 768px) {
    body.desktop-chat .sidebar-search { margin:0 12px 10px!important; display:block!important; }
    body.desktop-chat .search-input-wrap { position:relative; width:100%; }
    body.desktop-chat .search-input-wrap input {
        width:100%; box-sizing:border-box; padding:10px 42px 10px 14px; border-radius:10px;
        border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.05); color:var(--text);
        font-size:13px; min-height:40px; transition:all 0.2s ease;
    }
    body.desktop-chat .search-input-wrap input:focus { outline:none; border-color:rgba(34,197,94,0.35); box-shadow:0 0 0 3px rgba(34,197,94,0.1); }
    body.desktop-chat .search-icon-btn {
        position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
        width:30px; height:30px; border:none; background:transparent!important; color:#22c55e; opacity:0.75;
        display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s;
    }
    body.desktop-chat .search-icon-btn .ico { width:16px; height:16px; }
    body.desktop-chat .search-icon-btn:hover { opacity:1; color:#10b981; }
    body.desktop-chat .sidebar .chat-item, body.desktop-chat .sidebar .history-item {
        padding:10px 12px; margin-bottom:2px; border-radius:10px; border:1px solid transparent;
        background:transparent; transition:all 0.2s ease; display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    body.desktop-chat .sidebar .chat-item:hover, body.desktop-chat .sidebar .history-item:hover {
        background:rgba(255,255,255,0.08);
    }
    body.desktop-chat .sidebar .chat-item.active, body.desktop-chat .sidebar .history-item.active {
        background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.25);
    }
    body.desktop-chat .sidebar .chat-delete, body.desktop-chat .sidebar .history-delete {
        opacity:0; width:28px; height:28px; padding:0; border:none; border-radius:6px;
        background:transparent; color:var(--text-muted); cursor:pointer;
        display:inline-flex; align-items:center; justify-content:center; font-size:0;
        transition:opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    body.desktop-chat .sidebar .chat-delete .ico { width:14px; height:14px; }
    body.desktop-chat .sidebar .chat-item:hover .chat-delete, body.desktop-chat .sidebar .history-item:hover .history-delete { opacity:1; }
    body.desktop-chat .sidebar .chat-delete:hover, body.desktop-chat .sidebar .history-delete:hover {
        color:#ef4444; background:rgba(239,68,68,0.1); box-shadow:0 0 10px rgba(239,68,68,0.25); opacity:1;
    }
    body.desktop-chat .sidebar-new-chat, body.desktop-chat .new-chat-sidebar {
        display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important;
        width:calc(100% - 24px)!important; margin:10px 12px 14px!important; padding:12px 16px!important;
        border-radius:12px!important; border:1px solid rgba(255,255,255,0.1)!important;
        background:transparent!important; font-weight:600!important; transition:all 0.2s ease!important;
    }
    body.desktop-chat .new-chat-sidebar:hover {
        border-color:rgba(34,197,94,0.45)!important; background:rgba(34,197,94,0.08)!important;
        color:#22c55e!important; box-shadow:0 0 22px rgba(34,197,94,0.18)!important;
    }
}
/* v17 — Premium TTS mini-player (Spotify-style dock) */
@media (min-width: 768px) {
    body.desktop-chat .tts-player.tts-player-dock.show {
        grid-column:1!important; grid-row:4!important; display:flex!important; flex-direction:column!important;
        width:100%!important; max-width:none!important; margin:0!important; padding:14px 56px 12px 20px!important;
        border-radius:0!important; border:none!important; border-top:1px solid rgba(255,255,255,0.05)!important;
        background:rgba(20,20,25,0.85)!important; backdrop-filter:blur(12px)!important;
        box-shadow:0 -8px 32px rgba(0,0,0,0.28)!important; position:relative!important; direction:ltr!important;
    }
    body.desktop-chat .tts-player-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
    body.desktop-chat .tts-ctrl-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; border-radius:8px; background:transparent; color:#a1a1aa; cursor:pointer; font-size:0; transition:color .2s,background .2s; }
    body.desktop-chat .tts-ctrl-btn .ico { width:17px; height:17px; }
    body.desktop-chat .tts-ctrl-btn:hover { color:#fff; background:rgba(255,255,255,0.08); }
    body.desktop-chat .tts-play-main { width:44px!important; height:44px!important; border-radius:50%!important; background:#10b981!important; color:#fff!important; box-shadow:0 4px 16px rgba(16,185,129,0.45)!important; }
    body.desktop-chat .tts-play-main .ico { width:20px!important; height:20px!important; }
    body.desktop-chat .tts-play-main.is-playing { background:#22c55e!important; }
    body.desktop-chat .tts-track-area { flex:1; min-width:160px; display:flex; flex-direction:column; gap:6px; }
    body.desktop-chat .tts-player .tts-progress { width:100%; height:4px; background:rgba(255,255,255,0.12); border-radius:999px; cursor:pointer; position:relative; }
    body.desktop-chat .tts-player .tts-progress-bar { position:relative; height:100%; background:linear-gradient(90deg,#10b981,#22c55e); border-radius:999px; width:0%; }
    body.desktop-chat .tts-player .tts-progress-bar::after { content:''; position:absolute; top:50%; right:0; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(16,185,129,0.55); transform:translate(50%,-50%) scale(0); transition:transform .15s; pointer-events:none; }
    body.desktop-chat .tts-player .tts-progress:hover .tts-progress-bar::after { transform:translate(50%,-50%) scale(1); }
    body.desktop-chat .tts-player .tts-close-btn { position:absolute!important; top:50%!important; right:16px!important; transform:translateY(-50%)!important; width:32px!important; height:32px!important; border:none!important; background:transparent!important; color:#71717a!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; }
    body.desktop-chat .tts-player .tts-close-btn:hover { color:#fff!important; background:rgba(255,255,255,0.08)!important; }
    body.desktop-chat .tts-player .tts-minimize-btn { position:absolute!important; top:50%!important; right:52px!important; transform:translateY(-50%)!important; border:none!important; background:transparent!important; color:#71717a!important; font-size:0!important; }
    body.desktop-chat .tts-player .tts-voice-select { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:8px; color:#e4e4e7; padding:6px 10px; font-size:11px; }
    body.desktop-chat .tts-player .tts-subtitle { max-height:64px; overflow-y:auto; font-size:12px; color:#a1a1aa; text-align:right; direction:rtl; border-top:1px solid rgba(255,255,255,0.06); padding-top:8px; }
}
/* v19 — Header ghost buttons WITH Persian text labels (strict fix) */
@media (min-width: 768px) {
    body.desktop-chat .chat-header .header-actions .ghost-btn {
        display:inline-flex!important; align-items:center!important; gap:6px!important;
        width:auto!important; height:auto!important; min-width:0!important; min-height:0!important;
        padding:6px 12px!important; border:none!important; border-radius:8px!important;
        background:transparent!important; color:#a1a1aa!important; font-size:12px!important;
        font-weight:500!important; white-space:nowrap!important; transition:background .2s,color .2s!important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn .ico { width:16px!important; height:16px!important; flex-shrink:0!important; }
    body.desktop-chat .chat-header .header-actions .ghost-btn .btn-label {
        display:inline!important; visibility:visible!important; opacity:1!important; font-size:12px!important; color:inherit!important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn:hover { background:rgba(255,255,255,0.1)!important; color:#fff!important; }
    body.desktop-chat .chat-header .header-actions .ghost-btn.danger,
    body.desktop-chat .chat-header .header-actions .ghost-btn.danger .btn-label { color:#f87171!important; }
    body.desktop-chat .chat-header .header-actions .ghost-btn.danger:hover { background:rgba(248,113,113,0.15)!important; color:#f87171!important; }
    body.desktop-chat .chat-header .header-actions .ghost-btn.active { background:rgba(255,255,255,0.1)!important; color:#fff!important; }
}
/* v20 — Attachment card strict glassmorphism (user green bubble) */
@media (min-width: 768px) {
    body.desktop-chat .message.user .msg-attach.msg-attach-card {
        background: rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 12px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
    }
    body.desktop-chat .message.user .msg-attach-icon-wrap {
        width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    body.desktop-chat .message.user .msg-attach-icon { background: transparent !important; border-radius: 0 !important; width: auto !important; height: auto !important; }
    body.desktop-chat .message.user .msg-attach-icon .ico { width: 18px !important; height: 18px !important; color: #fff !important; }
    body.desktop-chat .message.user .msg-attach-thumb { width: 34px !important; height: 34px !important; object-fit: cover; border-radius: 50%; }
    body.desktop-chat .message.user .msg-attach-name { font-weight: 600 !important; color: #fff !important; font-size: 13px !important; }
    body.desktop-chat .message.user .msg-attach-meta { font-size: 11px !important; opacity: 0.8 !important; color: rgba(255,255,255,0.85) !important; }
    body.desktop-chat .message.user .message-actions .edit-btn {
        width: 32px !important; height: 32px !important; border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.2) !important; border: none !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        padding: 0 !important; font-size: 0 !important;
    }
    body.desktop-chat .message.user .message-actions .edit-btn .ico { width: 15px !important; height: 15px !important; color: rgba(255,255,255,0.95) !important; }
    body.desktop-chat .message.user .message-actions .edit-btn:hover { background: rgba(255,255,255,0.32) !important; }
}
/* v21 — Sidebar strict: New Chat button + search alignment */
@media (min-width: 768px) {
    body.desktop-chat .search-input-wrap {
        display: flex !important; align-items: center !important;
        position: relative !important; width: 100% !important; min-height: 40px !important;
    }
    body.desktop-chat .search-input-wrap input {
        width: 100% !important; box-sizing: border-box !important;
        height: 40px !important; padding: 0 42px 0 14px !important;
        line-height: 40px !important; border-radius: 10px !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
    }
    body.desktop-chat .search-icon-btn {
        position: absolute !important; inset-inline-end: 8px !important;
        top: 50% !important; transform: translateY(-50%) !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 30px !important; height: 30px !important;
        border: none !important; background: transparent !important;
        color: #10b981 !important; cursor: pointer;
    }
    body.desktop-chat .search-icon-btn .ico { width: 16px !important; height: 16px !important; color: #10b981 !important; }
    body.desktop-chat .sidebar-new-chat, body.desktop-chat .new-chat-sidebar {
        display: flex !important; align-items: center !important; justify-content: center !important;
        gap: 8px !important; box-sizing: border-box !important;
        width: calc(100% - 24px) !important; margin: 10px 12px 14px !important;
        padding: 12px 16px !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        color: #10b981 !important; border-radius: 12px !important;
        font-weight: bold !important; font-size: 13px !important;
        transition: all 0.2s ease !important; cursor: pointer;
    }
    body.desktop-chat .sidebar-new-chat .ico, body.desktop-chat .new-chat-sidebar .ico {
        width: 16px !important; height: 16px !important; color: #10b981 !important;
    }
    body.desktop-chat .sidebar-new-chat:hover, body.desktop-chat .new-chat-sidebar:hover {
        background: rgba(16, 185, 129, 0.2) !important;
        border-color: rgba(16, 185, 129, 0.4) !important; color: #10b981 !important;
    }
}
/* v22 — Center stage, right rail, toggle, theme, TTS speed, pro attachments */
@media (min-width: 768px) {
    :root { --stage-max: 780px; --right-rail-min: 180px; }
    body.desktop-chat { grid-template-columns: minmax(var(--right-rail-min),1fr) min(var(--stage-max),100%) var(--sidebar-width) !important; }
    body.desktop-chat .desktop-right-rail { grid-column:1!important; grid-row:1/-1!important; min-width:var(--right-rail-min); pointer-events:none; }
    body.desktop-chat .chat-header, body.desktop-chat .chat-main, body.desktop-chat .chat-input, body.desktop-chat .tts-player.tts-player-dock.show {
        grid-column:2!important; width:100%!important; max-width:var(--stage-max)!important; justify-self:center!important;
    }
    body.desktop-chat .sidebar { grid-column:3!important; }
    body.desktop-chat .ghost-btn.autoplay-toggle .ui-toggle { width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.12);position:relative;flex-shrink:0;transition:.2s; }
    body.desktop-chat .ghost-btn.autoplay-toggle.is-on .ui-toggle { background:#10b981;border-color:rgba(16,185,129,.5); }
    body.desktop-chat .ghost-btn.autoplay-toggle .ui-toggle-thumb { position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s; }
    body.desktop-chat .ghost-btn.autoplay-toggle.is-on .ui-toggle-thumb { transform:translateX(16px); }
    [dir=rtl] body.desktop-chat .ghost-btn.autoplay-toggle.is-on .ui-toggle-thumb { transform:translateX(-16px); }
    body.desktop-chat .ghost-btn.autoplay-toggle.is-on .btn-label { color:#10b981!important; }
    body.desktop-chat .tts-turtle .speed-emoji, body.desktop-chat .tts-rabbit .speed-emoji { font-size:18px; }
    body.desktop-chat .message.user .msg-attach-pro { background:rgba(0,0,0,.22)!important; backdrop-filter:blur(10px)!important; border:1px solid rgba(255,255,255,.16)!important; border-radius:14px!important; padding:12px 14px!important; min-height:58px; box-shadow:0 4px 16px rgba(0,0,0,.12)!important; }
    body.desktop-chat .message.user .msg-attach-badge { font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.12);flex-shrink:0; }
    body.desktop-chat .message.user .message-attachments + .text { margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14); }
    body.desktop-chat .tts-player.tts-player-dock.show { border-radius:14px 14px 0 0!important; margin-inline:auto!important; }
}
/* v24 — Full-width header, label reveal on hover, sidebar under header */
@media (min-width: 768px) {
    body.desktop-chat {
        grid-template-rows: var(--header-height) 1fr auto auto !important;
    }
    body.desktop-chat .chat-header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        padding: 0 clamp(12px, 2vw, 24px) !important;
        gap: 12px;
        box-sizing: border-box;
    }
    body.desktop-chat .chat-header .info {
        flex-shrink: 1;
        min-width: 0;
        max-width: min(34vw, 320px);
    }
    body.desktop-chat .chat-header .header-actions {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 4px !important;
        padding-inline-start: 8px;
    }
    body.desktop-chat .chat-header .header-actions::-webkit-scrollbar {
        display: none;
    }
    body.desktop-chat .chat-header .desktop-toolbar {
        flex-wrap: nowrap !important;
        gap: 2px !important;
        min-width: 0;
        overflow: visible;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn {
        flex-shrink: 0 !important;
        padding: 8px !important;
        gap: 0 !important;
        overflow: hidden;
        transition: background 0.2s ease, color 0.2s ease, padding 0.25s ease, gap 0.25s ease !important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn .btn-label {
        display: inline-block !important;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        vertical-align: middle;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: max-width 0.28s ease, opacity 0.22s ease, margin 0.28s ease !important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn:hover,
    body.desktop-chat .chat-header .header-actions .ghost-btn:focus-visible {
        padding: 6px 12px !important;
        gap: 6px !important;
        z-index: 2;
        position: relative;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn:hover .btn-label,
    body.desktop-chat .chat-header .header-actions .ghost-btn:focus-visible .btn-label {
        max-width: 10rem !important;
        opacity: 1 !important;
        margin-inline-start: 2px !important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn.autoplay-toggle {
        gap: 6px !important;
    }
    body.desktop-chat .chat-header .header-actions .ghost-btn.autoplay-toggle:not(:hover):not(:focus-visible) .btn-label {
        max-width: 0 !important;
        opacity: 0 !important;
    }
    body.desktop-chat .chat-header .header-divider {
        flex-shrink: 0;
        margin: 0 2px !important;
    }
    body.desktop-chat .desktop-right-rail {
        grid-column: 1 !important;
        grid-row: 2 / -1 !important;
    }
    body.desktop-chat .sidebar {
        grid-column: 3 !important;
        grid-row: 2 / -1 !important;
        height: auto !important;
        max-height: calc(100dvh - var(--header-height)) !important;
        align-self: stretch !important;
    }
    body.desktop-chat .chat-main {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: var(--stage-max, 780px) !important;
        justify-self: center !important;
    }
    body.desktop-chat .chat-input {
        grid-column: 2 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: var(--stage-max, 780px) !important;
        justify-self: center !important;
    }
    body.desktop-chat .tts-player.tts-player-dock.show {
        grid-column: 2 !important;
        grid-row: 4 !important;
        width: 100% !important;
        max-width: var(--stage-max, 780px) !important;
        justify-self: center !important;
    }
}
/* v25 — Robot left, user right, Shamsi footer, pro actions, Telegram attachments */
@media (min-width: 768px) {
    body.desktop-chat .message.assistant { width:100%!important; max-width:none!important; margin:0!important; padding:10px clamp(12px,3vw,28px)!important; display:flex!important; justify-content:flex-start!important; }
    body.desktop-chat .message.assistant .message-col, body.desktop-chat .message.assistant .message-row { direction:ltr!important; justify-content:flex-start!important; margin:0!important; max-width:min(88%,760px)!important; width:100%!important; }
    body.desktop-chat .message.assistant .message-body { flex:1!important; min-width:0!important; }
    body.desktop-chat .message.user { width:fit-content!important; max-width:min(72%,680px)!important; margin:10px clamp(12px,3vw,28px) 10px auto!important; padding:0!important; display:flex!important; justify-content:flex-end!important; }
    body.desktop-chat .message.user .message-col, body.desktop-chat .message.user .message-row { direction:ltr!important; justify-content:flex-end!important; width:100%!important; }
    body.desktop-chat .message.user .message-bubble { border-radius:18px 18px 4px 18px!important; }
    body.desktop-chat .message.assistant .message-bubble { border-radius:16px 16px 16px 4px!important; }
    body.desktop-chat .message .footer { display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-top:10px!important; padding-top:8px!important; border-top:1px solid rgba(255,255,255,0.12)!important; direction:ltr!important; }
    body.desktop-chat .message .footer-meta { display:inline-flex!important; align-items:center!important; gap:8px!important; direction:ltr!important; font-variant-numeric:tabular-nums; }
    body.desktop-chat .message .msg-date, body.desktop-chat .message .msg-time { font-size:11px!important; font-weight:500!important; white-space:nowrap!important; opacity:0.72!important; }
    body.desktop-chat .message .msg-time { opacity:0.58!important; }
    body.desktop-chat .message .msg-time::before { content:"·"; margin-right:8px; opacity:0.45; }
    body.desktop-chat .message .time { display:none!important; }
    body.desktop-chat .message .message-actions { display:inline-flex!important; align-items:center!important; gap:1px!important; padding:3px!important; border-radius:999px!important; background:rgba(0,0,0,0.22)!important; border:1px solid rgba(255,255,255,0.08)!important; margin-left:auto!important; backdrop-filter:blur(8px); opacity:0.88; }
    body.desktop-chat .message:hover .message-actions { opacity:1!important; box-shadow:0 4px 16px rgba(0,0,0,0.18); }
    body.desktop-chat .message .message-actions .action-icon-btn, body.desktop-chat .message .message-actions button { width:30px!important; height:30px!important; min-width:30px!important; min-height:30px!important; padding:0!important; border:none!important; border-radius:50%!important; background:transparent!important; color:rgba(255,255,255,0.78)!important; font-size:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; transition:background 0.15s,color 0.15s,transform 0.15s!important; }
    body.desktop-chat .message .message-actions .action-icon-btn .ico, body.desktop-chat .message .message-actions button .ico { width:15px!important; height:15px!important; }
    body.desktop-chat .message.assistant .message-actions .copy-btn:hover { color:#93c5fd!important; background:rgba(147,197,253,0.14)!important; }
    body.desktop-chat .message.assistant .message-actions .regenerate-btn:hover { color:#86efac!important; background:rgba(134,239,172,0.14)!important; }
    body.desktop-chat .message.assistant .message-actions .split-btn:hover { color:#c4b5fd!important; background:rgba(196,181,253,0.14)!important; }
    body.desktop-chat .message.assistant .message-actions .pin-btn:hover { color:#fcd34d!important; background:rgba(252,211,77,0.14)!important; }
    body.desktop-chat .message.assistant .message-actions .tts-btn:hover { color:#5eead4!important; background:rgba(94,234,212,0.14)!important; }
    body.desktop-chat .message .message-actions .action-icon-btn:hover, body.desktop-chat .message .message-actions button:hover { transform:scale(1.06)!important; }
    body.desktop-chat .message.user .message-actions { background:rgba(0,0,0,0.16)!important; border-color:rgba(255,255,255,0.14)!important; }
    body.desktop-chat .message.user .message-actions .edit-btn:hover { color:#fff!important; background:rgba(255,255,255,0.22)!important; }
    body.desktop-chat .message-attachments.tg-attachments { display:flex!important; flex-direction:column!important; gap:8px!important; margin-top:10px!important; padding-top:10px!important; border-top:1px solid rgba(255,255,255,0.14)!important; }
    body.desktop-chat .msg-attach-photo-img { display:block; width:100%; max-width:320px; max-height:240px; object-fit:cover; border-radius:12px; }
    body.desktop-chat .msg-attach-doc { display:flex!important; align-items:center!important; gap:10px!important; padding:10px 12px!important; background:rgba(0,0,0,0.18)!important; border:1px solid rgba(255,255,255,0.12)!important; border-radius:12px!important; }
    body.desktop-chat .msg-attach-doc-icon { width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    body.desktop-chat .msg-attach-doc-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    body.desktop-chat .msg-attach-doc-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    body.desktop-chat .msg-attach-doc-meta { font-size:11px; opacity:0.72; }
    body.desktop-chat .msg-attach-doc-ext { font-size:10px; font-weight:700; padding:4px 7px; border-radius:6px; background:rgba(255,255,255,0.12); flex-shrink:0; }
}
/* v26 — compact footer, labeled action chips, Persian digits font */
@media (min-width: 768px) {
    body.desktop-chat .message .footer { margin-top:6px!important; padding-top:5px!important; gap:8px!important; min-height:0!important; }
    body.desktop-chat .message .msg-date, body.desktop-chat .message .msg-time { font-size:10px!important; font-family:inherit!important; direction:rtl!important; unicode-bidi:plaintext; line-height:1.2!important; }
    body.desktop-chat .message .message-actions { display:inline-flex!important; flex-wrap:wrap!important; gap:4px!important; padding:0!important; background:transparent!important; border:none!important; box-shadow:none!important; opacity:1!important; }
    body.desktop-chat .message .action-chip, body.desktop-chat .message .message-actions button { display:inline-flex!important; align-items:center!important; gap:4px!important; width:auto!important; height:26px!important; padding:0 8px!important; border:1px solid rgba(255,255,255,0.14)!important; border-radius:999px!important; background:rgba(255,255,255,0.06)!important; color:rgba(255,255,255,0.88)!important; font-size:10px!important; font-weight:600!important; font-family:inherit!important; backdrop-filter:blur(6px); cursor:pointer; white-space:nowrap; }
    body.desktop-chat .message .action-chip .ico, body.desktop-chat .message .message-actions button .ico { width:12px!important; height:12px!important; }
    body.desktop-chat .message .action-chip .action-label { font-size:10px!important; font-weight:600!important; }
    body.desktop-chat .message.assistant .copy-btn:hover { border-color:rgba(147,197,253,0.45)!important; color:#bfdbfe!important; }
    body.desktop-chat .message.assistant .regenerate-btn:hover { border-color:rgba(134,239,172,0.45)!important; color:#bbf7d0!important; }
    body.desktop-chat .message.assistant .split-btn:hover { border-color:rgba(196,181,253,0.45)!important; color:#ddd6fe!important; }
    body.desktop-chat .message.assistant .pin-btn:hover { border-color:rgba(252,211,77,0.45)!important; color:#fde68a!important; }
    body.desktop-chat .message.assistant .tts-btn:hover { border-color:rgba(94,234,212,0.45)!important; color:#99f6e4!important; }
    body.desktop-chat .message .delete-btn:hover { border-color:rgba(248,113,113,0.55)!important; color:#fecaca!important; background:rgba(248,113,113,0.12)!important; }
    body.desktop-chat .message.user .action-chip, body.desktop-chat .message.user .message-actions button { border-color:rgba(255,255,255,0.2)!important; background:rgba(0,0,0,0.12)!important; color:rgba(255,255,255,0.95)!important; }
    body.desktop-chat .message .action-chip.copied { border-color:rgba(134,239,172,0.5)!important; color:#bbf7d0!important; }
    [data-theme="light"] body.desktop-chat .message.assistant .action-chip, [data-theme="light"] body.desktop-chat .message.assistant .message-actions button { background:rgba(0,0,0,0.04)!important; border-color:rgba(0,0,0,0.1)!important; color:rgba(0,0,0,0.72)!important; }
}
/* v27 — tight footer, hover tooltips, version RTL, header info-meta */
@media (min-width:768px){
body.desktop-chat .message .message-bubble{padding-bottom:8px!important}
body.desktop-chat .message .footer{margin:2px 0 0!important;padding:2px 0 0!important;gap:6px!important;min-height:0!important;max-height:none!important;line-height:1!important;align-items:center!important;border-top-width:1px!important}
body.desktop-chat .message .footer-meta{gap:5px!important;line-height:1!important}
body.desktop-chat .message .msg-date,body.desktop-chat .message .msg-time{font-size:10px!important;line-height:1!important;margin:0!important;padding:0!important}
body.desktop-chat .message .message-actions{flex-wrap:nowrap!important;gap:2px!important;padding:0!important;margin:0!important;overflow:visible!important;align-items:center!important}
body.desktop-chat .message .action-chip,body.desktop-chat .message .message-actions button.action-chip,body.desktop-chat .message .message-actions button{position:relative!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;padding:0!important;margin:0!important;gap:0!important;flex-shrink:0!important;overflow:visible!important;justify-content:center!important;border-radius:8px!important}
body.desktop-chat .message .action-chip .ico,body.desktop-chat .message .message-actions button .ico{width:13px!important;height:13px!important;margin:0!important}
body.desktop-chat .message .action-chip .action-label{display:block!important;position:absolute!important;bottom:calc(100% + 6px)!important;left:50%!important;right:auto!important;top:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:7rem!important;padding:3px 7px!important;border-radius:6px!important;background:rgba(15,17,23,0.94)!important;color:#fff!important;font-size:10px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:30!important;box-shadow:0 4px 14px rgba(0,0,0,0.35)!important;border:1px solid rgba(255,255,255,0.12)!important;transition:opacity .15s ease,visibility .15s ease!important}
body.desktop-chat .message .action-chip:hover,body.desktop-chat .message .action-chip:focus-visible{z-index:25!important}
body.desktop-chat .message .action-chip:hover .action-label,body.desktop-chat .message .action-chip:focus-visible .action-label{opacity:1!important;visibility:visible!important}
body.desktop-chat .message .action-chip.copied .action-label{opacity:1!important;visibility:visible!important}
body.desktop-chat .version-controls{direction:ltr!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:6px!important;margin-top:4px!important}
body.desktop-chat .version-controls .next-version{order:1!important}
body.desktop-chat .version-controls .version-badge{order:2!important}
body.desktop-chat .version-controls .prev-version{order:3!important;margin-left:auto!important}
body.desktop-chat .chat-header .info{display:flex!important;align-items:center!important;gap:10px!important;flex:1!important;min-width:0!important;max-width:none!important}
body.desktop-chat .chat-header .info-text{flex:0 1 auto!important;min-width:0!important}
body.desktop-chat .chat-header .info-meta{display:inline-flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;margin-inline-start:8px!important}
body.desktop-chat .chat-header .info-meta .robot-status{margin:0!important;flex-shrink:0!important}
body.desktop-chat .chat-header .info-meta .robot-selector{margin:0!important;flex-shrink:0!important}
body.desktop-chat .chat-header .info-meta .robot-selector select{max-width:140px!important;height:32px!important;font-size:12px!important}
body.desktop-chat .chat-header .header-actions>.robot-status,body.desktop-chat .chat-header .header-actions>.robot-selector{display:none!important}
}
/* v28 — header repair (fix v24 max-width clash), version arrows */
@media (min-width:768px){
body.desktop-chat .chat-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;overflow:visible!important;gap:14px!important;min-height:var(--header-height)!important}
body.desktop-chat .chat-header .info{flex:0 0 auto!important;max-width:none!important;width:auto!important;min-width:0!important;overflow:visible!important;display:flex!important;align-items:center!important;gap:10px!important;flex-shrink:0!important}
body.desktop-chat .chat-header .info .avatar{flex-shrink:0!important;width:38px!important;height:38px!important}
body.desktop-chat .chat-header .info-text{flex:0 1 auto!important;min-width:0!important;max-width:200px!important;overflow:hidden!important}
body.desktop-chat .chat-header .info-text .name,body.desktop-chat .chat-header .info-text .robot-desc{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important}
body.desktop-chat .chat-header .info-meta{display:inline-flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;flex-shrink:0!important;margin:0!important;padding:0!important;overflow:visible!important;white-space:nowrap!important;z-index:10!important;position:relative!important}
body.desktop-chat .chat-header .info-meta .robot-status{display:inline-flex!important;align-items:center!important;gap:6px!important;flex-shrink:0!important;white-space:nowrap!important;font-size:11px!important;padding:5px 10px!important}
body.desktop-chat .chat-header .info-meta .robot-selector{display:inline-flex!important;flex-shrink:0!important;margin:0!important}
body.desktop-chat .chat-header .info-meta .robot-selector select{max-width:170px!important;min-width:110px!important;height:34px!important;font-size:12px!important;padding:0 8px!important}
body.desktop-chat .chat-header .header-actions{flex:1 1 0!important;min-width:0!important;max-width:none!important;overflow-x:auto!important;overflow-y:visible!important;justify-content:flex-end!important;align-items:center!important;padding-inline-start:12px!important}
body.desktop-chat .chat-header .header-actions>.robot-status,body.desktop-chat .chat-header .header-actions>.robot-selector{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}
body.desktop-chat .version-controls{direction:ltr!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;width:100%!important}
body.desktop-chat .version-controls .next-version{order:1!important;margin:0!important}
body.desktop-chat .version-controls .version-badge{order:2!important;flex:1!important;text-align:center!important}
body.desktop-chat .version-controls .prev-version{order:3!important;margin-left:auto!important;margin-right:0!important}
}
/* v29 — header right cluster: avatar | active | name/desc | robot list */
@media (min-width:768px){
body.desktop-chat .chat-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;overflow:visible!important;gap:12px!important;padding:0 16px!important}
body.desktop-chat .chat-header .info{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:10px!important;max-width:none!important;width:auto!important;min-width:0!important;flex:0 1 auto!important;overflow:visible!important}
body.desktop-chat .chat-header .info .avatar{flex:0 0 38px!important;width:38px!important;height:38px!important;margin:0!important}
body.desktop-chat .chat-header .info>.robot-status{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important;font-size:11px!important;padding:4px 10px!important;margin:0!important}
body.desktop-chat .chat-header .info>.robot-status .status-dot{flex-shrink:0!important}
body.desktop-chat .chat-header .info .info-text{flex:0 1 auto!important;min-width:0!important;max-width:240px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:1px!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.desktop-chat .chat-header .info .info-text .name{font-size:14px!important;font-weight:600!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important}
body.desktop-chat .chat-header .info .info-text .robot-desc{font-size:11px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;opacity:0.75!important}
body.desktop-chat .chat-header .info>.robot-selector{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;margin:0!important;padding:0!important}
body.desktop-chat .chat-header .info>.robot-selector select{max-width:150px!important;min-width:100px!important;height:32px!important;font-size:11px!important;padding:0 8px!important}
body.desktop-chat .chat-header .info-meta{display:none!important}
body.desktop-chat .chat-header .header-actions{flex:1 1 0!important;min-width:0!important;justify-content:flex-end!important;overflow-x:auto!important}
body.desktop-chat .chat-header .header-actions>.robot-status,body.desktop-chat .chat-header .header-actions>.robot-selector{display:none!important}
}
/* v30 — fix status dot beside label; hide empty robot dropdown */
@media (min-width:768px){
body.desktop-chat .chat-header .info>.robot-status{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;white-space:nowrap!important;line-height:1!important}
body.desktop-chat .chat-header .info>.robot-status .status-dot{display:inline-block!important;width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;flex:0 0 7px!important;margin:0!important;border-radius:50%!important}
body.desktop-chat .chat-header .info>.robot-selector:not(:has(select option)){display:none!important;width:0!important;overflow:hidden!important}
body.desktop-chat .chat-header .info>.robot-selector select:not(:has(option)){display:none!important}
body.desktop-chat .chat-header .header-actions .robot-selector,body.desktop-chat .chat-header .header-actions .robot-status{display:none!important}
}
/* v31 — robot profile image avatars (temporary until admin panel) */
@media (min-width:768px){
/* v31 — robot profile image avatars (flagship squircle + contain full art) */
@media (min-width:768px){
body.desktop-chat .chat-header .avatar,
body.desktop-chat .chat-header .info .avatar{
  width:36px!important;height:36px!important;flex:0 0 36px!important;
  border-radius:10px!important;overflow:hidden!important;
}
body.desktop-chat .avatar.has-img,body.desktop-chat .brand-avatar.has-img,body.desktop-chat .big-icon.has-img{padding:0!important;background:none!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
body.desktop-chat .avatar.has-img img,body.desktop-chat .brand-avatar.has-img img,body.desktop-chat .big-icon.has-img img,body.desktop-chat .msg-avatar img.robot-avatar-img,body.desktop-chat .msg-avatar img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;display:block!important;border-radius:inherit!important;
}
/* Welcome mark: compact squircle — never oversized / never crop art */
body.desktop-chat .chat-messages .empty .big-icon,
body.desktop-chat .big-icon.has-img{width:56px!important;height:56px!important;border-radius:14px!important;box-shadow:0 4px 18px rgba(34,197,94,.16)!important;overflow:hidden!important}
body.desktop-chat .big-icon.has-img img{border-radius:14px!important;object-fit:contain!important}
body.desktop-chat .msg-avatar:has(img){padding:0!important;background:none!important;overflow:hidden!important}
body.desktop-chat .msg-avatar{width:28px!important;height:28px!important;border-radius:8px!important}
body.desktop-chat .brand-avatar{border-radius:11px!important;overflow:hidden!important}
}