#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Title Bar */
#titlebar {
  height: var(--titlebar-height);
  background: var(--bg-titlebar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-color);
  -webkit-app-region: drag;
  user-select: none;
}

.titlebar-left {
  display: flex;
  gap: 2px;
}

.activity-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.activity-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.activity-btn.active {
  color: var(--text-bright);
  background: var(--bg-active);
}

.titlebar-center {
  color: var(--text-secondary);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

/* Workspace */
#workspace {
  flex: 1;
  display: grid;
  grid-template-columns:
    var(--left-sidebar-width)
    var(--resize-handle-size)
    1fr
    var(--resize-handle-size)
    var(--right-sidebar-width);
  grid-template-rows: 1fr;
  overflow: hidden;
}

/* Resize Handles */
.resize-handle-v {
  background: var(--border-color);
  cursor: col-resize;
  transition: background 0.15s;
}

.resize-handle-v:hover,
.resize-handle-v.active {
  background: var(--accent);
}

.resize-handle-h {
  background: var(--border-color);
  cursor: row-resize;
  height: var(--resize-handle-size);
  flex-shrink: 0;
  transition: background 0.15s;
}

.resize-handle-h:hover,
.resize-handle-h.active {
  background: var(--accent);
}

/* Center Area */
#center {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  overflow: hidden;
}

#terminal-area {
  height: var(--terminal-height);
  min-height: 50px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
}

/* #terminal-panels is now styled in panels.css */

/* Status Bar */
#statusbar {
  height: var(--statusbar-height);
  background: var(--bg-statusbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12px;
  color: var(--accent-text);
}

.statusbar-left, .statusbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Project progress gauge */
#project-gauge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--accent-text);
  cursor: default;
  user-select: none;
}

#project-gauge .gauge-label {
  opacity: 0.85;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#project-gauge .gauge-track {
  position: relative;
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

#project-gauge .gauge-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: hsl(0, 75%, 48%);
  transition: width 0.35s ease, background 0.35s ease;
}

#project-gauge .gauge-pct {
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── AI connect dialog ─────────────────────────────────────────── */
.ai-connect-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ai-connect { width: min(760px, 95vw); background: var(--surface, #12172b);
  border: 1px solid var(--border, #252b4a); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6); direction: rtl; }
.ai-connect-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border,#252b4a); }
.ai-connect-title { font-weight: 800; font-size: 1.15rem; }
.ai-connect-sub { color: var(--muted,#8891c9); font-size: .85rem; margin-top: .25rem; }
.ai-x { background: none; border: none; color: var(--muted,#8891c9); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.ai-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; padding: 1.1rem 1.25rem; }
@media (max-width: 720px) { .ai-cards { grid-template-columns: 1fr; } }
.ai-card { background: var(--surface2,#1a1f38); border: 1px solid var(--border,#252b4a);
  border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.ai-card-t { font-weight: 700; font-size: .98rem; }
.ai-card-d { color: var(--muted,#8891c9); font-size: .8rem; line-height: 1.5; }
.ai-prov, .ai-key { width: 100%; background: var(--surface,#12172b); border: 1px solid var(--border,#252b4a);
  border-radius: 8px; padding: .5rem .6rem; color: var(--text,#e8ecff); font-size: .85rem; }
.ai-cmd { background: var(--surface,#0c1020); border: 1px solid var(--border,#252b4a); border-radius: 6px;
  padding: .35rem .6rem; font-family: ui-monospace, monospace; color: var(--green,#22d3a5); direction: ltr; align-self: flex-start; }
.ai-btn { margin-top: auto; background: linear-gradient(135deg, var(--accent,#4f6ef7), var(--accent2,#7c3aed));
  border: none; border-radius: 9px; padding: .55rem .9rem; color: #fff; font-weight: 700; cursor: pointer; font-size: .88rem; }
.ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.ai-msg { min-height: 1.2rem; padding: 0 1.25rem 1rem; font-size: .85rem; direction: rtl; }

/* autonomy toggle in the AI connect dialog */
.ai-auto { padding: 0 1.25rem 1rem; }
.ai-auto-t { font-size: .8rem; color: var(--muted,#8891c9); margin-bottom: .5rem; }
.ai-auto-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ai-auto-opt { flex: 1; min-width: 200px; background: var(--surface2,#1a1f38); border: 1px solid var(--border,#252b4a);
  border-radius: 9px; padding: .6rem .8rem; color: var(--text,#e8ecff); cursor: pointer; font-size: .85rem; text-align: right; }
.ai-auto-opt.on { border-color: var(--accent,#4f6ef7); background: rgba(79,110,247,.12); }

/* chat "thinking" indicator */
.chat-thinking { display: flex; align-items: center; gap: .35rem; padding: .6rem .9rem; margin: .4rem 0; }
.chat-thinking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent,#4f6ef7); animation: chat-bounce 1s infinite ease-in-out; }
.chat-thinking-dot:nth-child(2) { animation-delay: .15s; }
.chat-thinking-dot:nth-child(3) { animation-delay: .3s; }
.chat-thinking-label { margin-inline-start: .5rem; color: var(--muted,#8891c9); font-size: .82rem; }
@keyframes chat-bounce { 0%,80%,100% { transform: translateY(0); opacity:.6 } 40% { transform: translateY(-5px); opacity:1 } }

/* ── RTL support ────────────────────────────────────────────────── */
/*
 * When navigator.language is he/ar (set by app.js early at boot):
 *   html[dir="rtl"]  — text/content elements flip to RTL
 *   html.rtl         — same selector, usable as a class hook
 *
 * RULES:
 *  - Use logical CSS properties (margin-inline-*, padding-inline-*, text-align:start)
 *    so they flip automatically with the dir attribute.
 *  - Free-text containers (chat messages, task text, memory text) get
 *    unicode-bidi:plaintext so each PARAGRAPH auto-detects its own direction
 *    (mixed Hebrew/English works correctly without forcing one direction).
 *  - Monaco editor and xterm terminal must stay LTR — code is always LTR.
 *    They are protected with explicit direction:ltr overrides.
 *  - Layout geometry (LayoutEngine split sizes, flex-basis pixel math) is
 *    unaffected: we never touch flex-direction on .layout-split or .layout-child.
 */

/* 1. App chrome: title bar, status bar, panel headers, tab labels */
html[dir="rtl"] #titlebar,
html[dir="rtl"] #statusbar,
html[dir="rtl"] .panel-header,
html[dir="rtl"] .layout-tab-bar,
html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .ssh-form,
html[dir="rtl"] .ssh-form-actions,
html[dir="rtl"] #ssh-profiles-list,
html[dir="rtl"] .statusbar-left,
html[dir="rtl"] .statusbar-right {
  direction: rtl;
  text-align: start;
}

/* 2. Chat: messages & input */
html[dir="rtl"] #chat-messages,
html[dir="rtl"] #chat-input-area,
html[dir="rtl"] #chat-context-bar,
html[dir="rtl"] #chat-controls {
  direction: rtl;
  text-align: start;
}
/* Free-text blocks — auto-detect per paragraph (handles mixed he+en) */
html[dir="rtl"] .chat-msg {
  unicode-bidi: plaintext;
  text-align: start;
}
/* User bubble stays right-aligned in RTL */
html[dir="rtl"] .chat-msg.user {
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 6px;
}
/* Assistant bubble stays left-aligned → in RTL that's the right side */
html[dir="rtl"] .chat-msg.assistant {
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 6px;
}
/* Code blocks inside chat must stay LTR */
html[dir="rtl"] .chat-msg pre,
html[dir="rtl"] .chat-msg code,
html[dir="rtl"] .chat-msg .tool-body {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
html[dir="rtl"] #chat-input {
  direction: rtl;
  text-align: start;
}

/* 3. Task panel */
html[dir="rtl"] .task-item,
html[dir="rtl"] #task-add-bar {
  direction: rtl;
}
html[dir="rtl"] .task-item .task-text {
  unicode-bidi: plaintext;
  text-align: start;
}
html[dir="rtl"] .subtask-list {
  border-inline-start: 2px solid var(--border-color);
  border-inline-end: none;
  margin-inline-start: 18px;
  margin-inline-end: 0;
  /* Override the hardcoded LTR margin-left/border-left */
  border-left: none;
  margin-left: 0;
}
html[dir="rtl"] .task-pct {
  text-align: start;
}

/* 4. Memory panel */
html[dir="rtl"] .memory-item {
  direction: rtl;
}
html[dir="rtl"] .memory-item .memory-text,
html[dir="rtl"] .memory-content {
  unicode-bidi: plaintext;
  text-align: start;
}

/* 5. Explorer / file tree */
html[dir="rtl"] .tree-item {
  direction: rtl;
}
html[dir="rtl"] .tree-item .icon {
  margin-inline-end: 5px;
  margin-right: 0;
}
html[dir="rtl"] .tree-item .arrow {
  margin-inline-end: 3px;
  margin-right: 0;
}
html[dir="rtl"] .tree-children {
  padding-inline-start: 12px;
  padding-left: 0;
}

/* 6. Tool cards in chat */
html[dir="rtl"] .tool-card {
  direction: rtl;
}
html[dir="rtl"] .tool-card .tool-status {
  margin-inline-start: auto;
  margin-left: 0;
}

/* 7. Context-bar dismiss button */
html[dir="rtl"] #chat-context-bar button {
  margin-inline-start: auto;
  margin-left: 0;
}

/* 8. Dialogs: AI connect, session picker, slash dropdown */
html[dir="rtl"] .session-item,
html[dir="rtl"] .session-item-header,
html[dir="rtl"] .ai-auto-opt {
  direction: rtl;
  text-align: start;
}
/* Slash-command items: text labels are RTL but command names (.slash-cmd)
   must stay LTR (they are code tokens like /git, /create). */
html[dir="rtl"] .slash-item {
  direction: rtl;
  text-align: start;
}
html[dir="rtl"] .slash-item .slash-cmd {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 9. Panel-level layout tabs: flip tab labels but keep geometry intact */
html[dir="rtl"] .layout-tab {
  direction: rtl;
}

/* 10. CRITICAL: keep Monaco editor LTR at all times */
html[dir="rtl"] .monaco-editor,
html[dir="rtl"] .monaco-editor *,
html[dir="rtl"] .monaco-diff-editor,
html[dir="rtl"] .monaco-diff-editor * {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* 11. CRITICAL: keep xterm terminal LTR at all times */
html[dir="rtl"] .xterm,
html[dir="rtl"] .xterm *,
html[dir="rtl"] #terminal-panels,
html[dir="rtl"] #terminal-panels * {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* 11b. CRITICAL: context menus are position:fixed and JS-positioned by pixel
    coords (clientX/clientY). Applying direction:rtl shifts their internal
    flex layout and can reverse hit-areas or push the menu off-screen.
    Force LTR on all context menu / dropdown popup elements. */
html[dir="rtl"] .layout-ctx-menu,
html[dir="rtl"] .layout-ctx-menu *,
html[dir="rtl"] .layout-ctx-sub,
html[dir="rtl"] .layout-ctx-sub *,
html[dir="rtl"] #terminal-context-menu,
html[dir="rtl"] #terminal-context-menu *,
html[dir="rtl"] .term-instance-ctx,
html[dir="rtl"] .term-instance-ctx * {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* 11c. CRITICAL: terminal bottom toolbars must stay LTR.
    .term-mobile-bar (TerminalPanelInstance) and #terminal-mobile-keys
    (legacy TerminalPanel) are scrollable flex rows of buttons. In RTL the
    flex row reverses and the overflow scroll anchor moves to the right edge,
    making buttons appear in wrong order and RTL/Esc/Ctrl hit areas misalign.
    #terminal-mobile-keys is inside #terminal-area which is in panels.css
    already; .term-mobile-bar is inside a .layout-panel-content leaf. */
html[dir="rtl"] .term-mobile-bar,
html[dir="rtl"] .term-mobile-bar *,
html[dir="rtl"] #terminal-mobile-keys,
html[dir="rtl"] #terminal-mobile-keys * {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* 11d. .profile-dropdown is position:absolute anchored by left:0 on the
    picker button. In RTL the parent container's writing mode would shift
    "left:0" to the inline-end side. Force LTR so the dropdown stays
    visually under its trigger button. */
html[dir="rtl"] .profile-dropdown,
html[dir="rtl"] .profile-dropdown-item {
  direction: ltr !important;
}

/* 12. CRITICAL: keep LayoutEngine geometry intact —
    split containers and resize handles are direction-agnostic
    (they use flex-basis percentages, not left/right pixel math). */
html[dir="rtl"] .layout-split,
html[dir="rtl"] .layout-child,
html[dir="rtl"] .layout-resize-handle {
  direction: ltr;
}
/* ────────────────────────────────────────────────────────────────── */