/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - Professional App-like Experience
   Added: 2026-05-14
   ONLY affects screens <= 768px, desktop unchanged
   ═══════════════════════════════════════════════════════════ */

/* PWA-like viewport meta enhancements */
@media (max-width: 768px) {

  /* ── Base & Body ── */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    padding: 0 !important;
    background: #0f172a !important;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* ── App Shell - Full screen like native app ── */
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ══════════════════════════════════════════════════════
     GOLDEN FRAME - Header & Composer borders
     ══════════════════════════════════════════════════════ */

  /* ── Header - Golden top frame ── */
  .app-header {
    padding: 10px 14px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.7) !important;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.15), inset 0 -1px 0 rgba(255, 215, 0, 0.1) !important;
  }

  /* ── Composer - Golden bottom frame ── */
  .composer {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    border-top: 2px solid rgba(212, 175, 55, 0.7) !important;
    box-shadow: 0 -2px 12px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    background: rgba(15, 23, 42, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: sticky;
    bottom: 0;
    z-index: 100;
  }

  .composer .composer-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto;
    grid-column: auto;
  }

  .composer .composer-actions > button {
    min-height: 44px;
    padding-inline: 12px;
  }

  /* ══════════════════════════════════════════════════════
     SIDEBAR - Collapsed with slide toggle button
     ══════════════════════════════════════════════════════ */

  /* Sidebar hidden by default on mobile */
  .conversation-sidebar {
    width: 280px !important;
    z-index: 10001 !important;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Sidebar toggle button - always visible */
  .mobile-sidebar-toggle {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10002;
    width: 28px;
    height: 72px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.9), rgba(184, 134, 11, 0.9));
    border: none;
    border-radius: 14px 0 0 14px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 12px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 0;
  }

  .mobile-sidebar-toggle:active {
    transform: translateY(-50%) scale(0.95);
    background: linear-gradient(180deg, rgba(255, 215, 0, 1), rgba(212, 175, 55, 1));
  }

  .mobile-sidebar-toggle::after {
    content: "☰";
    font-size: 1.2rem;
    writing-mode: horizontal-tb;
  }

  /* When sidebar is open, move toggle */
  .conversation-sidebar.open ~ .mobile-sidebar-toggle,
  body.sidebar-open .mobile-sidebar-toggle {
    right: 280px;
    border-radius: 14px 0 0 14px;
  }

  body.sidebar-open .mobile-sidebar-toggle::after {
    content: "✕";
  }

  /* RTL support for toggle */
  [dir="rtl"] .mobile-sidebar-toggle {
    right: auto;
    left: 0;
    border-radius: 0 14px 14px 0;
  }

  [dir="rtl"] .conversation-sidebar.open ~ .mobile-sidebar-toggle,
  [dir="rtl"] body.sidebar-open .mobile-sidebar-toggle {
    left: 280px;
    border-radius: 0 14px 14px 0;
  }

  /* Sidebar overlay backdrop */
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.sidebar-open .mobile-sidebar-overlay {
    display: block;
  }

  /* ══════════════════════════════════════════════════════ */

  .brand {
    gap: 8px !important;
    flex-shrink: 1;
    min-width: 0;
  }

  .brand-mark {
    font-size: 1.4rem !important;
    flex-shrink: 0;
  }

  .brand h1 {
    font-size: 0.95rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tagline {
    display: none !important;
  }

  .header-actions {
    gap: 6px !important;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  /* ── Mode Selector - Compact ── */
  .mode-selector {
    max-width: 120px;
  }

  .mode-select {
    min-width: 0 !important;
    max-width: 120px;
    font-size: 0.72rem !important;
    padding: 6px 24px 6px 8px !important;
    border-radius: 8px;
  }

  /* ── SSH Indicator - Icon only on mobile ── */
  .ssh-indicator {
    padding: 6px 8px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  .ssh-indicator .dot {
    width: 10px !important;
    height: 10px !important;
  }

  #sshIndicatorLabel {
    display: none !important;
  }

  /* ── Chat Area - Optimized for touch ── */
  .chat-area {
    padding: 12px !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    flex: 1;
    overscroll-behavior: contain;
  }

  .chat-log {
    gap: 10px !important;
  }

  /* ── Messages - Compact & Touch-friendly ── */
  .message {
    gap: 10px !important;
  }

  .message .avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
  }

  .message-body {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    max-width: calc(100vw - 80px);
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .message.user .message-body {
    border-radius: 14px 14px 4px 14px !important;
  }

  .message.assistant .message-body {
    border-radius: 14px 14px 14px 4px !important;
  }

  .message-meta {
    font-size: 0.72rem !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }

  .message-content {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  .message-content pre {
    padding: 10px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .message-content code {
    font-size: 0.82em !important;
  }

  .message-content table {
    font-size: 0.78rem !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .message-content th,
  .message-content td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  .message-content img {
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  .message-actions {
    gap: 6px !important;
    margin-top: 10px !important;
    flex-wrap: wrap;
  }

  .message-action {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
  }

  /* ── Attachments - Single column ── */
  .attachment-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .attachment-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .attachment-preview {
    min-height: 80px !important;
    max-height: 200px !important;
  }

  .attachment-button {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
  }

  .composer textarea {
    grid-column: auto !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    min-height: 42px !important;
    max-height: 120px !important;
    line-height: 1.35 !important;
  }

  #uploadTrigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 1.1rem !important;
    flex-shrink: 0;
  }

  #sendButton {
    padding: 10px 16px !important;
    border-radius: 20px !important;
    font-size: 0.88rem !important;
    min-width: 0 !important;
    flex-shrink: 0;
  }

  /* ── Pending Files Panel ── */
  .attachments-panel {
    padding: 10px 12px !important;
  }

  .attachments-panel h2 {
    font-size: 0.78rem !important;
  }

  .pending-files {
    gap: 8px !important;
  }

  .pending-files li {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  /* ── Stage Blocks - Compact ── */
  .agent-stage-block {
    border-radius: 12px !important;
    margin: 3px 0 !important;
  }

  .agent-stage-block .stage-header {
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
    gap: 8px !important;
  }

  .agent-stage-block .stage-icon {
    font-size: 0.95rem !important;
  }

  .agent-stage-block .stage-body {
    padding: 0 12px 10px !important;
  }

  .agent-stage-block .stage-content {
    font-size: 0.78rem !important;
  }

  .agent-stage-block .stage-content pre {
    font-size: 0.75rem !important;
    padding: 8px !important;
  }

  /* ── Pipeline UI - Compact ── */
  .task-pipeline {
    margin: 8px 0 !important;
  }

  .pipeline-header {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }

  .pipeline-header-title {
    font-size: 0.78rem !important;
  }

  .pipeline-timer {
    font-size: 0.75rem !important;
  }

  .pipeline-phase {
    padding: 0 0 0 22px !important;
  }

  [dir="rtl"] .pipeline-phase {
    padding: 0 22px 0 0 !important;
  }

  .pipeline-phase-node {
    left: 1px !important;
    width: 13px !important;
    height: 13px !important;
  }

  [dir="rtl"] .pipeline-phase-node {
    left: auto !important;
    right: 1px !important;
  }

  .pipeline-phase-title {
    font-size: 0.84rem !important;
  }

  .pipeline-phase-status {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
  }

  .pipeline-step {
    font-size: 0.73rem !important;
    padding: 3px 8px !important;
    margin: 2px 3px !important;
    border-radius: 12px !important;
  }

  .pipeline-step-icon {
    font-size: 0.7rem !important;
    width: 14px !important;
  }

  .pipeline-step-text {
    font-size: 0.73rem !important;
  }

  .pipeline-step-comment {
    font-size: 0.7rem !important;
    padding: 3px 6px 3px 20px !important;
  }

  [dir="rtl"] .pipeline-step-comment {
    padding: 3px 20px 3px 6px !important;
  }

  .pipeline-completion {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }

  .pipeline-completion-icon {
    font-size: 1.1rem !important;
  }

  .pipeline-completion-text {
    font-size: 0.82rem !important;
  }

  /* ── Status Tracker - Compact ── */
  .status-tracker {
    padding: 12px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .status-icon {
    font-size: 1.2rem !important;
  }

  .status-message {
    font-size: 0.85rem !important;
  }

  .status-timeline li {
    font-size: 0.75rem !important;
    gap: 8px !important;
  }

  /* ── Editor Panel - Full screen on mobile ── */
  .editor-panel {
    padding: 0 !important;
  }

  .editor-dialog {
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 16px !important;
    height: 100vh;
    height: 100dvh;
  }

  #editorTextarea {
    min-height: 200px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
  }

  .editor-actions {
    flex-direction: column;
    gap: 8px !important;
  }

  .editor-actions .ghost-button,
  .editor-actions .primary-button {
    min-width: 100% !important;
    text-align: center;
  }

  /* ── SSH Modal - Full width ── */
  .ssh-modal {
    padding: 12px !important;
  }

  .ssh-dialog {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 18px !important;
  }

  /* ── Virtual Desktop Panel - soft 80% mobile frame ── */
  .virtual-desktop-panel {
    position: fixed !important;
    z-index: 9999 !important;
    border: 1px solid rgba(245, 158, 11, 0.62) !important;
    border-radius: 14px !important;
    min-width: 260px !important;
    min-height: 220px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(251, 191, 36, 0.18) !important;
  }

  .virtual-desktop-panel[data-maximized="true"] {
    border-radius: 14px !important;
  }

  .virtual-desktop-header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .virtual-desktop-drag-handle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 5px !important;
  }

  .virtual-desktop-icon {
    font-size: 1.1rem !important;
  }

  .virtual-desktop-title h2 {
    font-size: 0.88rem !important;
  }

  .virtual-desktop-indicator {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
  }

  .window-control-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  .virtual-desktop-toolbar {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .virtual-desktop-toolbar .ghost-button {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .virtual-desktop-viewport {
    min-height: 0 !important;
    flex: 1;
  }

  .virtual-desktop-resize-handle {
    display: block !important;
    right: 5px !important;
    bottom: 2px !important;
    color: rgba(251, 191, 36, 0.75) !important;
    font-size: 0.92rem !important;
  }

  .virtual-desktop-dock-btn {
    bottom: 80px !important;
    right: 12px !important;
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
  }

  /* ── Scrollbar - Thin on mobile ── */
  .chat-area::-webkit-scrollbar {
    width: 3px !important;
  }

  .chat-area::-webkit-scrollbar-thumb {
    border-radius: 3px !important;
  }

  /* ── Touch improvements ── */
  button, a, select, .conversation-item {
    -webkit-tap-highlight-color: rgba(56, 189, 248, 0.15);
  }

  /* Prevent zoom on input focus (iOS) */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* After font-size override, restore specific sizes */
  .mode-select {
    font-size: 0.72rem !important;
  }

  .lang-select {
    font-size: 16px !important;
  }

  /* ── Safe area insets for notched phones ── */
  .app-header {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

  .composer {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  /* ── Smooth animations ── */
  * {
    -webkit-transform: translateZ(0);
  }

  /* Hide desktop sidebar toggle if exists */
  .mobile-sidebar-toggle {
    display: flex !important;
  }
}

/* Hide mobile toggle on desktop */
.mobile-sidebar-toggle {
  display: none !important;
}

/* ── Extra small screens (< 380px) ── */
@media (max-width: 380px) {
  .brand h1 {
    font-size: 0.88rem !important;
  }

  .mode-select {
    max-width: 100px !important;
    font-size: 0.68rem !important;
  }

  .message-body {
    padding: 10px 12px !important;
  }

  .message-content {
    font-size: 0.85rem !important;
  }

  .composer textarea {
    font-size: 0.88rem !important;
  }

  #sendButton {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }

  .mobile-sidebar-toggle {
    width: 24px !important;
    height: 60px !important;
  }
}

/* ── Landscape mode on mobile ── */
@media (max-width: 768px) and (orientation: landscape) {
  .app-header {
    padding: 6px 14px !important;
  }

  .brand-mark {
    font-size: 1.2rem !important;
  }

  .brand h1 {
    font-size: 0.88rem !important;
  }

  .chat-area {
    padding: 8px 12px !important;
  }

  .composer {
    padding: 6px 12px !important;
  }

  .composer textarea {
    min-height: 36px !important;
    max-height: 80px !important;
  }

  .mobile-sidebar-toggle {
    height: 50px !important;
    width: 24px !important;
  }
}

/* RoSH mobile app polish - 2026-05-15 */
@media (max-width: 768px) {
  html,
  body {
    height: 100%;
    overscroll-behavior-y: none;
    touch-action: manipulation;
  }

  body {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .app-header {
    flex: 0 0 auto !important;
    min-height: 58px;
    flex-wrap: nowrap !important;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-bottom: 1.5px solid rgba(229, 197, 94, 0.86) !important;
    box-shadow: 0 8px 24px rgba(229, 197, 94, 0.11), inset 0 -1px 0 rgba(255, 244, 214, 0.18) !important;
  }

  .brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .brand h1 {
    max-width: 34vw;
  }

  .header-actions {
    min-width: 0 !important;
    max-width: 54vw !important;
    flex: 0 0 auto !important;
  }

  .mode-selector {
    width: min(44vw, 152px) !important;
    max-width: min(44vw, 152px) !important;
  }

  .mode-select {
    width: 100% !important;
    height: 36px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    padding: 7px 26px 7px 10px !important;
    border-radius: 12px !important;
    background-color: rgba(12, 18, 32, 0.96) !important;
    border-color: rgba(229, 197, 94, 0.42) !important;
  }

  .chat-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)) !important;
  }

  .composer {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    min-height: 62px;
    padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-top: 1.5px solid rgba(229, 197, 94, 0.86) !important;
    box-shadow: 0 -8px 24px rgba(229, 197, 94, 0.11), inset 0 1px 0 rgba(255, 244, 214, 0.18) !important;
  }

  .composer textarea {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important;
  }

  #uploadTrigger,
  #sendButton,
  .ssh-indicator,
  .mode-select {
    min-height: 36px;
  }

  .conversation-sidebar {
    left: auto !important;
    right: 0 !important;
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(104%) !important;
    border-right: 0 !important;
    border-left: 1px solid rgba(229, 197, 94, 0.34) !important;
    box-shadow: -16px 0 42px rgba(0, 0, 0, 0.55), -2px 0 18px rgba(229, 197, 94, 0.12) !important;
  }

  .conversation-sidebar.open {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 10002 !important;
    width: 34px !important;
    height: 92px !important;
    border: 1px solid rgba(255, 244, 214, 0.34) !important;
    border-right: 0 !important;
    border-radius: 18px 0 0 18px !important;
    background: linear-gradient(180deg, #f5d36a 0%, #d4af37 52%, #9f7414 100%) !important;
    color: #111827 !important;
    box-shadow: -4px 0 18px rgba(229, 197, 94, 0.32) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
  }

  .mobile-sidebar-toggle::before {
    content: "المحادثات";
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
  }

  .mobile-sidebar-toggle::after {
    content: "☰" !important;
    writing-mode: horizontal-tb !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  body.sidebar-open .mobile-sidebar-toggle {
    right: min(86vw, 320px) !important;
    left: auto !important;
    border-radius: 18px 0 0 18px !important;
  }

  body.sidebar-open .mobile-sidebar-toggle::after {
    content: "×" !important;
    font-size: 1.1rem !important;
  }

  .mobile-sidebar-overlay {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
  }

  body.sidebar-open .mobile-sidebar-overlay {
    display: block !important;
  }
}

@media (max-width: 380px) {
  .brand h1 {
    max-width: 30vw;
  }

  .mode-selector {
    width: min(42vw, 132px) !important;
  }

  .mobile-sidebar-toggle::before {
    font-size: 0.58rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .mobile-sidebar-toggle {
    height: 72px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .app-shell {
      min-height: -webkit-fill-available !important;
    }
  }
}


/* RoSH mobile sidebar frame fix - 2026-05-16 */
@media (max-width: 768px) {
  .conversation-sidebar {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 142px) !important;
    width: min(86vw, 318px) !important;
    border: 1.5px solid rgba(229, 197, 94, 0.88) !important;
    border-right: 0 !important;
    border-radius: 22px 0 0 22px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 244, 214, 0.08), rgba(229, 197, 94, 0.035)),
      linear-gradient(180deg, #171b2f 0%, #111827 100%) !important;
    box-shadow:
      -18px 0 44px rgba(0, 0, 0, 0.58),
      -3px 0 20px rgba(229, 197, 94, 0.18),
      inset 0 0 0 1px rgba(255, 244, 214, 0.08) !important;
  }

  .conversation-sidebar.open {
    transform: translateX(0) !important;
  }

  .conversation-sidebar .sidebar-header {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid rgba(229, 197, 94, 0.42) !important;
    background: linear-gradient(180deg, rgba(23, 27, 47, 0.98), rgba(17, 24, 39, 0.94)) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
  }

  .conversation-sidebar .new-chat-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 244, 214, 0.55) !important;
    color: #111827 !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #fff1a8 0%, #e5c55e 48%, #b88a1c 100%) !important;
    box-shadow: 0 10px 22px rgba(229, 197, 94, 0.24) !important;
  }

  .conversation-sidebar .sidebar-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 12px 10px !important;
  }

  .conversation-sidebar .sidebar-section h3 {
    margin: 0 2px 10px !important;
    color: rgba(255, 244, 214, 0.72) !important;
  }

  .conversation-sidebar .conversation-list {
    padding-bottom: 8px !important;
  }

  .conversation-sidebar .conversation-item {
    border: 1px solid rgba(229, 197, 94, 0.16) !important;
    background: rgba(255, 255, 255, 0.055) !important;
  }

  .conversation-sidebar .sidebar-footer {
    flex: 0 0 auto !important;
    padding: 12px !important;
    border-top: 1px solid rgba(229, 197, 94, 0.38) !important;
    background: linear-gradient(0deg, rgba(23, 27, 47, 0.98), rgba(17, 24, 39, 0.92)) !important;
  }

  body.sidebar-open .mobile-sidebar-toggle {
    right: min(86vw, 318px) !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .conversation-sidebar {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE FLOATING ELEMENTS LAYOUT FIX — 20260909
   Arranges floating buttons (session report, virtual desktop dock,
   support/contact) into clean non-overlapping slots above composer.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Slot 1 (left, lower): Support / تواصل معنا ── */
  .rs-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    left: 8px !important;
    right: auto !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    z-index: 8990 !important;
    max-width: 40vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.28) !important;
    opacity: 0.92 !important;
  }
  [dir="ltr"] .rs-btn {
    left: auto !important;
    right: 8px !important;
  }

  /* ── Slot 2 (left, upper): Session report / تحميل التقرير ──
     Only when floating on body (fallback mode); inside the live
     terminal header it keeps normal flow. */
  body > #session-report-btn,
  body > .session-report-btn {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 126px) !important;
    left: 8px !important;
    right: auto !important;
    z-index: 8991 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    max-width: 40vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.92 !important;
  }

  /* ── Slot 3 (right, lower): Virtual desktop dock button ── */
  .virtual-desktop-dock-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    right: 8px !important;
    left: auto !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    z-index: 8992 !important;
    max-width: 46vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.95 !important;
  }
  .virtual-desktop-dock-btn[hidden] {
    display: none !important;
  }

  /* ── Attachments panel (ملفات جاهزة للرفع): compact + scrollable ── */
  .attachments-panel {
    padding: 6px 12px !important;
    gap: 6px !important;
    max-height: 110px !important;
    overflow-y: auto !important;
  }
  .attachments-panel h2 {
    font-size: 0.68rem !important;
    letter-spacing: 0.02em !important;
  }
  .pending-files {
    gap: 6px !important;
  }
  .pending-files li {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    max-width: 100% !important;
  }

  /* ── Composer stays the top interactive layer at the bottom ── */
  .composer {
    z-index: 9400 !important;
  }
}

/* ── Extra small phones: shrink floating buttons to icon-like pills ── */
@media (max-width: 400px) {
  .rs-btn,
  body > #session-report-btn,
  body > .session-report-btn,
  .virtual-desktop-dock-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    max-width: 38vw !important;
  }
}

/* ── Landscape mobile: pull buttons closer to the bottom corners ── */
@media (max-width: 768px) and (orientation: landscape) {
  .rs-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
  }
  body > #session-report-btn,
  body > .session-report-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }
  .virtual-desktop-dock-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
  }
}