/* ═══════════════════════════════════════════════
   AG2R — Mobile-First Styles
   Matches Antigravity 2.0 dark theme
   ═══════════════════════════════════════════════ */

/* ── Design Tokens (from AG's resolved theme) ── */
:root {
  /* Core — matches AG's body background: rgb(16, 16, 16) */
  --bg-app: #101010;
  --bg-panel: #161616;      /* AG --sidebar / --muted */
  --bg-surface: #1c1c1c;    /* AG --card / --sidebar-muted */
  --bg-hover: #2d2d2d;      /* AG --secondary */
  --bg-input: #1c1c1c;      /* AG --card */

  /* Text — matches AG's text color scale */
  --text-primary: #cccccc;   /* AG --foreground */
  --text-secondary: #9d9d9d; /* AG --secondary-foreground */
  --text-muted: #6e6e6e;     /* AG --muted-foreground */

  /* Accent — AG's --primary */
  --accent: #007acc;
  --accent-hover: #1a8ad4;
  --accent-dim: rgba(0, 122, 204, 0.15);

  /* Borders — AG's --border / --card-border */
  --border: #252525;          /* AG --card-border */
  --border-subtle: rgba(255, 255, 255, 0.05); /* AG --border */

  --red: #ef4444;
  --green: #22c55e;
  --yellow: #eab308;
  --blue: #60a5fa;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  --header-height: 52px;
  --input-bar-height: 60px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-app) !important;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── App Shell ── */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

/* ── Header ── */
.header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-height);
  padding: 0 8px;
  padding-top: var(--safe-top);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  z-index: 300;
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  flex: 1;
}

.header-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

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

/* ── Connection Status Dot ── */
.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.3s;
}

.connection-dot[data-status="connected"] {
  background-color: var(--green);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.connection-dot[data-status="reconnecting"] {
  background-color: var(--yellow);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.connection-dot[data-status="disconnected"] {
  background-color: var(--red);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Left Sidebar (AG captured content) ── */
.left-sidebar {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-top));
  left: 0;
  width: 85vw;
  max-width: 320px;
  height: calc(100dvh - var(--header-height) - var(--safe-top));
  background: var(--bg-panel);
  border-right: 1px solid var(--border-subtle);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-sidebar.open {
  transform: translateX(0);
}

/* ── Right Sidebar (AG captured review panel) ── */
.right-sidebar {
  position: fixed;
  top: calc(var(--header-height) + var(--safe-top));
  right: 0;
  width: 100vw;
  height: calc(100dvh - var(--header-height) - var(--safe-top));
  background: var(--bg-panel);
  border-left: 1px solid var(--border-subtle);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-sidebar.open {
  transform: translateX(0);
}

/* ── Shared sidebar styles ── */
.sidebar-fill {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Force visible content — AG's CSS vars may not resolve outside their app context */
  background: var(--bg-panel);
  color: var(--text-primary);
}

/* Suppress iOS/Android "callout" menu on long-press of links/images
   in the right sidebar. The primary selection toolbar is unaffected. */
#right-sidebar-content {
  -webkit-touch-callout: none;
}

/* Consistent selection highlight for the right sidebar (dark theme) */
#right-sidebar-content ::selection {
  background: rgba(99, 102, 241, 0.35);
  color: inherit;
}

/* Override AG's cursor-pointer on right sidebar content so text is selectable.
   AG's injected Tailwind CSS applies .cursor-pointer { cursor: pointer } to
   content elements (markdown blocks, file diffs). Override to text cursor so
   users can select text for commenting. Control elements (tab buttons) keep
   pointer cursor via the [data-ag-click-id] rule above. */
#right-sidebar-content .cursor-pointer:not([data-ag-click-id]) {
  cursor: text;
}
#right-sidebar-content a:not([data-ag-click-id]),
#right-sidebar-content button:not([data-ag-click-id]) {
  cursor: text;
  pointer-events: auto;
}

/* Ensure captured AG content inherits visible colors */
.sidebar-fill > * {
  color: inherit;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Review Toggle Badge ── */


/* ── Interactive Elements in Captured Content ── */
[data-ag-click-id] {
  cursor: pointer;
  transition: opacity 0.15s;
}

[data-ag-click-id]:active {
  opacity: 0.7;
}

[data-ag-click-id].ag-clicking {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Captured Content Overrides (hide dead AG chrome) ── */

/* Hide AG's close/toggle buttons — we have our own in the header */
[data-testid="sidebar-toggle"],
[data-testid="close-aux-pane"] {
  display: none !important;
}

/* ── Hidden Sidebar Elements (desktop-only, re-enable by removing this block) ──
   These are captured from AG's sidebar but not useful on mobile.
   To re-enable: comment out or remove the rules below.
   See ONBOARDING.md gotcha: "Sidebar hidden elements" */

/* Task 1: Hide top 2 action buttons (New Conversation, History) — Scheduled Tasks is visible */
[data-ag-click-label="New Conversation"],
[data-ag-click-label="Conversation History"] {
  display: none !important;
}

/* Hide the Go Back / Go Forward nav buttons (desktop-only) */
[aria-label="Go Back"],
[aria-label="Go Forward"] {
  display: none !important;
}

/* Task 2: Hide "Add new project" button (folder+ icon next to Projects heading) */
#left-sidebar-content .flex.items-center.gap-1 > button[aria-haspopup="dialog"]:last-child {
  display: none !important;
}

/* ── Force hover-only action buttons to always show on mobile ──
   AG uses Tailwind hover patterns (hidden group-hover:flex, invisible group-hover:visible)
   to reveal action buttons only on hover. Mobile has no hover, so force them visible. */

/* Project-level action buttons (settings gear, + new chat) */
#left-sidebar-content .group-hover\/section\:flex {
  display: flex !important;
}

/* Per-session hover action strip — force visible on mobile (no hover available).
   The strip contains 3 buttons: three-dot menu, pin, archive. All shown.
   Opaque background + left-edge gradient lets the conversation title fade beneath. */
#left-sidebar-content .group-hover\:visible {
  visibility: visible !important;
  position: relative;
  background: hsl(var(--sidebar, 0 0% 8.5%));
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 2px !important;
}

#left-sidebar-content .group-hover\:visible button {
  padding: 2px !important;
  min-width: 0 !important;
}

#left-sidebar-content .group-hover\:visible::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(to right, transparent, hsl(var(--sidebar, 0 0% 8.5%)));
  pointer-events: none;
}

/* Hide non-essential status content in conversation rows on mobile.
   Timestamps (span), spinners (svg), and stray icons are not needed — the
   action strip (forced visible above) already covers the area.
   Only the unread indicator dot (a div child with bg-primary rounded-full) is kept. */
#left-sidebar-content .group .group-hover\:invisible > span,
#left-sidebar-content .group .group-hover\:invisible > svg,
#left-sidebar-content .group > [role="button"] .shrink-0 > .relative > svg.lucide {
  display: none !important;
}

/* Fix +NNN more lines buttons — the horizontal rule (collapsed-line indicator)
   passes through the button text. Pull button above the line with z-index
   and ensure opaque background so the line doesn't show through.
   AG uses bg-muted which may not resolve in our captured CSS context. */
.sidebar-fill button.bg-muted {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-muted, #161b22) !important;
}

/* ── Collapsed Section Fix (Worked for / Thought for) ── */
/* AG uses mask-image gradients on thinking content for a fade effect.
   This makes text invisible in our context. Remove masks and height caps
   so expanded content is fully visible. */
#chat-content [style*="mask-image"] {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#chat-content [style*="max-height: 200px"] {
  max-height: none !important;
}

/* Container query height (100cqh) resolves to 0 without query context */
#chat-content [style*="100cqh"] {
  min-height: auto !important;
}

/* ── Streaming Span Fix ── */
/* During streaming, AG wraps each word in <span> inside animate-markdown
   with display:inline-flex. This smushes words together and stacks inline
   code vertically. Override to plain inline display. */
.animate-markdown {
  display: inline !important;
  align-items: initial !important;
  vertical-align: initial !important;
  gap: 0 !important;
}

/* Force <p> parents back to block (they get broken by [object Object] class) */
#chat-content p[node] {
  display: block !important;
}

/* Ensure word-spans flow inline with natural spacing */
.animate-markdown > span {
  display: inline !important;
}


/* ── Chat Area ── */
.chat-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.chat-content {
  padding: 12px 16px 12px;
}

/* ── Empty State ── */
.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-muted);
}

.empty-state.hidden {
  display: none;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.3;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

.empty-subtitle {
  font-size: 13px;
}

/* ── Scroll FAB ── */
.scroll-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--input-bar-height) + 8px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
}

.scroll-fab.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-fab:active {
  background: var(--bg-hover);
}

/* ── Quick Action Chips ── */
.quick-actions {
  position: fixed;
  left: 12px;
  bottom: calc(var(--input-bar-height) + 8px);
  z-index: 50;
  display: flex;
  gap: 8px;
}

.quick-action-chip {
  padding: 6px 16px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.15s, color 0.15s, transform 0.1s, opacity 0.2s;
}

.quick-action-chip:active {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: scale(0.95);
}

.quick-actions.hidden {
  display: none;
}

/* ── Running Tasks Strip ── */
.running-tasks {
  overflow: hidden;
  background: transparent;
  padding: 6px 12px;
}

.running-tasks.hidden {
  display: none;
}

.running-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.running-tasks-arrow {
  font-size: 18px;
  transition: transform 0.2s;
}

.running-tasks-arrow.rotated {
  transform: rotate(180deg);
}

.running-tasks-list {
  max-height: 160px;
  overflow-y: auto;
  transition: max-height 0.25s ease, opacity 0.2s;
}

.running-tasks-list.collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.running-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 12px;
  min-height: 28px;
}

.running-task-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.running-task-name:active {
  color: var(--text-primary);
}

.running-task-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.running-task-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid var(--text-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.running-task-stop {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.running-task-stop:active {
  color: var(--red);
  background: var(--bg-hover);
}

/* ── Subagent View Bar ── */
.subagent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(234, 179, 8, 0.08);
  border-bottom: 1px solid rgba(234, 179, 8, 0.25);
  flex-shrink: 0;
  z-index: 50;
}

.subagent-bar.hidden {
  display: none;
}

.subagent-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 0;
}

.subagent-back-btn:active {
  background: var(--bg-hover);
}

.subagent-back-btn .material-symbols-rounded {
  font-size: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}

.subagent-parent-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subagent-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow);
  background: rgba(234, 179, 8, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Yellow outline on chat area when viewing a subagent */
.chat-area.subagent-view {
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.2);
}

/* Subagent info panel — rendered AG content (cannot prompt + overview button) */
.subagent-info {
  flex-shrink: 0;
  padding: 12px 16px;
  padding-bottom: max(12px, var(--safe-bottom));
  background: rgba(234, 179, 8, 0.05);
  border-top: 1px solid rgba(234, 179, 8, 0.2);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}

.subagent-info.hidden {
  display: none;
}

/* Style buttons inside the captured subagent info (e.g., "Open Overview") */
.subagent-info button,
.subagent-info a,
.subagent-info [role="button"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-top: 8px;
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.1);
  color: var(--yellow);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.subagent-info button:active,
.subagent-info a:active,
.subagent-info [role="button"]:active {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.5);
}

/* ── Input Bar ── */
.input-bar {
  flex-shrink: 0;
  padding: 8px 12px;
  padding-bottom: max(8px, var(--safe-bottom));
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  z-index: 100;
}

/* When tasks are running, input-bar becomes the outer card (like AG's inputBox) */
.input-bar:has(.running-tasks:not(.hidden)) {
  background: #252525;
  border-top: none;
  border-radius: var(--radius-lg);
  padding: 1px;
  padding-bottom: max(1px, var(--safe-bottom));
}

/* Desktop: constrain input bar + Continue + scroll FAB to chat content width */
@media (min-width: 768px) {
  .input-bar {
    background: transparent;
    border-top: none;
  }
  /* Outer card when tasks running */
  .input-bar:has(.running-tasks:not(.hidden)) {
    width: 100%;
    max-width: max(30vw, 40rem);
    margin: 0 auto;
  }
  .input-wrapper {
    width: 100%;
    max-width: max(30vw, 40rem);
    margin: 0 auto;
  }
  .quick-actions {
    left: 0;
    right: 0;
    max-width: max(30vw, 40rem);
    margin: 0 auto;
    padding-left: 12px;
  }
  .scroll-fab {
    right: calc(50% - max(30vw, 40rem) / 2 + 16px);
  }
}

.input-bar.hidden {
  display: none;
}


.input-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 10px 12px 6px;
}

/* Inside the outer card, input-wrapper is the inner dark card (AG: 15px = 16px - 1px inset) */
.input-bar:has(.running-tasks:not(.hidden)) .input-wrapper {
  border: none;
  border-radius: calc(var(--radius-lg) - 1px);
}

.input-wrapper:focus-within {
  border-color: var(--border-subtle);
  outline: none;
}

/* Preview strip takes full row width above textarea */
.input-wrapper > .image-preview-strip {
  margin-bottom: 4px;
}

.message-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  min-height: 63px;
  max-height: 120px;
  overflow-y: auto;
  padding: 0;
}

.message-input:focus,
#message-input:focus {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none;
}

.message-input::placeholder {
  color: var(--text-muted);
}

/* ── Image Preview Strip (staged uploads above input) ── */
.image-preview-strip {
  display: flex;
  gap: 8px;
  padding: 8px 4px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.image-preview-strip::-webkit-scrollbar {
  display: none;
}

.image-preview-strip.hidden {
  display: none;
}

.image-preview-item {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-preview-item .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.image-preview-item .remove-btn:active {
  background: rgba(0, 0, 0, 0.85);
}

.image-preview-item.uploading {
  opacity: 0.5;
}

.image-preview-item.upload-error {
  border-color: var(--red, #ef4444);
}

/* ── Input Controls Row (below textarea) ── */
.input-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.input-left-actions,
.input-right-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-left-actions {
  position: relative;
}

/* ── Attach Button (+) ── */
.attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.attach-btn .material-symbols-rounded {
  font-size: 18px;
}

.attach-btn:active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.attach-btn.uploading {
  color: var(--accent);
  animation: mic-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

.attach-btn.upload-success {
  color: var(--green, #22c55e);
}

.attach-btn.upload-error {
  color: var(--red, #ef4444);
}

.attach-btn.at-limit {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Attach Context Menu ── */
.attach-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 140px;
}

.attach-menu.hidden {
  display: none;
}

.attach-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.attach-menu-item:active {
  background: var(--bg-hover);
}

.attach-menu-item .material-symbols-rounded {
  font-size: 18px;
  color: var(--text-muted);
}

/* ── Model Chip ── */
.model-chip {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
}

.model-chip:active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.model-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-chip-chevron {
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Mic Button (Voice Input) ── */
.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.mic-btn:active {
  background: var(--bg-hover);
}

.mic-btn.recording {
  color: #ef4444;
  animation: mic-pulse 1.5s ease-in-out infinite;
}

.mic-btn.recording .mic-icon {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Hide mic button when Web Speech API isn't supported */
.mic-btn.unsupported {
  display: none;
}

/* ── Action Button (Send / Stop) ── */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.action-btn[data-action="send"] {
  background: var(--accent);
  color: white;
}

.action-btn[data-action="send"]:active {
  transform: scale(0.92);
  background: var(--accent-hover);
}

.action-btn[data-action="send"].disabled {
  background: var(--text-muted);
  opacity: 0.5;
  cursor: default;
}

.action-btn[data-action="stop"] {
  background: var(--red);
  color: white;
}

.action-btn[data-action="stop"]:active {
  transform: scale(0.92);
}

.action-icon {
  font-size: 18px;
}



/* ── Login Page ── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  overflow: auto;
}

.login-container {
  width: 100%;
  max-width: 360px;
}

.login-card {
  padding: 32px 24px;
  text-align: center;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}

.login-input:focus {
  border-color: var(--accent);
}

.login-input::placeholder {
  color: var(--text-muted);
}

.login-error {
  color: var(--red);
  font-size: 13px;
  text-align: center;
  padding: 4px 0;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.login-btn:active {
  background: var(--accent-hover);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ══════════════════════════════════════════════
   CDP Content Overrides
   Minimal — let AG2.0's own CSS do the work
   ══════════════════════════════════════════════ */

#chat-content * {
  scrollbar-width: none;
}

/* Hide broken local file/asset images (chat + right sidebar) */
#chat-content img[src^="/c:"],
#chat-content img[src^="vscode-file:"],
#chat-content img[src^="file:"],
#chat-content img[src*="symbols-icons"],
#chat-content img[src$=".svg"][src^="/"],
#right-sidebar-content img[src^="/c:"],
#right-sidebar-content img[src^="vscode-file:"],
#right-sidebar-content img[src^="file:"],
#right-sidebar-content img[src*="symbols-icons"],
#right-sidebar-content img[src$=".svg"][src^="/"] {
  display: none !important;
}

/* Force tab close (X) buttons visible in right sidebar (mobile has no hover) */
/* AG uses hidden+group-hover:flex for the X button and group-hover:hidden for the icon */
#right-sidebar-content [data-tab-id] [class*="group-hover:flex"] {
  display: flex !important;
}
#right-sidebar-content [data-tab-id] [class*="group-hover:hidden"] {
  display: none !important;
}

/* Mobile copy button for code blocks */
.mobile-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 4px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s, background 0.15s;
}

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

.mobile-copy-btn.copied {
  color: var(--green);
}

/* ── New Session Page ── */
.ag2r-new-session {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 24px 16px;
  gap: 20px;
}

.ag2r-new-session-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ag2r-new-session-project {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.ag2r-new-session-project svg {
  opacity: 0.7;
}


.ag2r-new-session-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, #ffffff 5%, #101010);
  overflow: hidden;
}

/* When env bar present, form becomes the outer card */
.ag2r-new-session-form.has-env-bar {
  background: #252525;
  border: none;
  padding: 1px;
  overflow: visible;
}

/* Inner card wrapping textarea + controls */
.ag2r-new-session-inner {
  display: flex;
  flex-direction: column;
  background: var(--bg-input);
  border-radius: calc(16px - 1px);
  overflow: hidden;
}

.ag2r-new-session-form textarea {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  padding: 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

.ag2r-new-session-form textarea:focus {
  outline: none;
}

.ag2r-new-session-form textarea::placeholder {
  color: var(--text-muted);
}

.ag2r-new-session-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
}

.ag2r-new-session-left,
.ag2r-new-session-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ag2r-new-session-left {
  position: relative;
}

.ag2r-new-session-form button[type="submit"] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.ag2r-new-session-form button[type="submit"]:active {
  transform: scale(0.92);
}

.ag2r-new-session-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ag2r-new-session-form button[type="submit"].sending {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── New Session — Environment/Branch Settings Bar ── */
.ag2r-new-session-env-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
}

.ag2r-env-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.ag2r-env-chip:active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ag2r-env-chip .material-symbols-rounded {
  opacity: 0.8;
}

/* ── Dropdown Overlay (AG portal menus) ── */
.dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-overlay.hidden {
  display: none;
}

.dropdown-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dropdown-content {
  position: relative;
  z-index: 1;
  background: var(--card, var(--bg-panel, #1c1c2e));
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: slideUpDropdown 200ms ease-out;
}

.dropdown-content:not(:has(.ag2r-dialog-native)) button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.dropdown-content:not(:has(.ag2r-dialog-native)) button:active {
  background: var(--border);
}

.dropdown-content:not(:has(.ag2r-dialog-native)) button.destructive {
  color: #ef4444;
}

.dropdown-separator {
  height: 1px;
  background: var(--border, #333);
  margin: 4px 0;
}

.dropdown-header {
  padding: 6px 16px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #888);
  user-select: none;
}

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

/* ── Dialog Modal Styles ── */
.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.dialog-message {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.dialog-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dialog-buttons button {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  cursor: pointer;
}

.dialog-buttons button.cancel {
  background: transparent;
  color: var(--text);
}

.dialog-buttons button.destructive {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* ── Native AG Dialog (rendered with AG's CSS) ── */
.dropdown-content:has(.ag2r-dialog-native) {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  max-width: 92vw;
  width: 92vw;
}

/* ── Permission Overlay ── */
.permission-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.permission-overlay.hidden {
  display: none;
}

.permission-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.permission-content {
  position: relative;
  z-index: 1;
  background: var(--bg-app, #0e1318);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUpDropdown 250ms ease-out;
}

.permission-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.permission-command {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}

.permission-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.permission-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 150ms, border-color 150ms;
  width: 100%;
}

.permission-option:active {
  background: var(--border);
}

.permission-option.selected {
  background: var(--bg-panel);
  border-color: var(--accent, #6366f1);
  color: var(--text);
}

.permission-option-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--border);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.permission-option.selected .permission-option-num {
  background: var(--accent, #6366f1);
  color: #fff;
}

.permission-option.has-writein {
  flex-wrap: wrap;
}

.permission-writein {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel, #161616);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.permission-writein:focus {
  border-color: var(--accent, #6366f1);
}

.permission-writein::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Suppress search input chrome (cancel button, rounded corners) */
.permission-writein::-webkit-search-cancel-button,
.permission-writein::-webkit-search-decoration {
  display: none;
}

.permission-writein {
  -webkit-appearance: none;
  appearance: none;
}

.permission-actions {
  position: sticky;
  bottom: -20px;
  margin: 0 -16px -20px;
  padding: 12px 16px 20px;
  background: var(--bg-app, #0e1318);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  z-index: 1;
}

.permission-actions button {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  cursor: pointer;
}

.permission-actions .perm-skip {
  background: transparent;
  color: var(--text-secondary);
}

.permission-actions .perm-submit {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: var(--accent, #6366f1);
}

/* ── Settings full-screen overlay ── */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  flex-direction: column;
  background: var(--bg-app, #0e1318);
}

.settings-overlay.hidden {
  display: none;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-back-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-back-btn:active {
  background: var(--bg-hover);
}

.settings-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Let AG's settings card fill the overlay, override desktop constraints */
.settings-content > * {
  max-width: 100% !important;
  max-height: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Settings nav panel: narrow fixed width, smaller text */
.settings-content [class*="border-r"] {
  max-width: 100px !important;
  min-width: 100px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  font-size: 12px !important;
}

/* Hide AG's close X button — positioned absolute top-right of settings card */
.settings-content button[class*="absolute"][class*="top-4"][class*="right-4"] {
  display: none !important;
}

/* ── Scheduled Tasks full-screen overlay ── */
.scheduled-tasks-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  flex-direction: column;
  background: var(--bg-app, #0e1318);
}

.scheduled-tasks-overlay.hidden {
  display: none;
}

.scheduled-tasks-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.scheduled-tasks-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Remove AG's header bar from captured content (we have our own) */
.scheduled-tasks-content > * > .shrink-0:first-child {
  display: none !important;
}

/* Let AG's content fill the overlay */
.scheduled-tasks-content > * {
  max-width: 100% !important;
  max-height: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Scheduled task toggle switches — ensure they're tappable */
.scheduled-tasks-content button[role="switch"] {
  min-width: 44px;
  min-height: 24px;
}

/* ── Fallback CSS for Tailwind utility classes in AG HTML ── */
/* These ensure the page looks decent even when Tailwind doesn't resolve */

/* Flex layouts */
.scheduled-tasks-content .flex { display: flex; }
.scheduled-tasks-content .flex-col { flex-direction: column; }
.scheduled-tasks-content .flex-1 { flex: 1; }
.scheduled-tasks-content .items-center { align-items: center; }
.scheduled-tasks-content .items-start { align-items: flex-start; }
.scheduled-tasks-content .justify-between { justify-content: space-between; }
.scheduled-tasks-content .justify-center { justify-content: center; }
.scheduled-tasks-content .justify-end { justify-content: flex-end; }
.scheduled-tasks-content .min-w-0 { min-width: 0; }
.scheduled-tasks-content .w-full { width: 100%; }
.scheduled-tasks-content .h-full { height: 100%; }
.scheduled-tasks-content .shrink-0 { flex-shrink: 0; }
.scheduled-tasks-content .overflow-hidden { overflow: hidden; }

/* Gaps */
.scheduled-tasks-content .gap-1 { gap: 4px; }
.scheduled-tasks-content .gap-2 { gap: 8px; }
.scheduled-tasks-content .gap-3 { gap: 12px; }
.scheduled-tasks-content .gap-4 { gap: 16px; }

/* Padding */
.scheduled-tasks-content .p-2 { padding: 8px; }
.scheduled-tasks-content .p-3 { padding: 12px; }
.scheduled-tasks-content .p-4 { padding: 16px; }
.scheduled-tasks-content .px-2 { padding-left: 8px; padding-right: 8px; }
.scheduled-tasks-content .px-3 { padding-left: 12px; padding-right: 12px; }
.scheduled-tasks-content .px-4 { padding-left: 16px; padding-right: 16px; }
.scheduled-tasks-content .py-2 { padding-top: 8px; padding-bottom: 8px; }
.scheduled-tasks-content .py-3 { padding-top: 12px; padding-bottom: 12px; }

/* Text sizing */
.scheduled-tasks-content .text-sm { font-size: 13px; }
.scheduled-tasks-content .text-xs { font-size: 11px; }
.scheduled-tasks-content .text-lg { font-size: 18px; }
.scheduled-tasks-content .font-medium { font-weight: 500; }
.scheduled-tasks-content .font-semibold { font-weight: 600; }

/* Colors */
.scheduled-tasks-content .text-foreground { color: var(--text-primary, #e0e4ea); }
.scheduled-tasks-content .text-secondary-foreground { color: var(--text-secondary, #a0a8b4); }
.scheduled-tasks-content .text-muted-foreground { color: var(--text-muted, #6b7280); }
.scheduled-tasks-content .bg-background { background: var(--bg-app, #0e1318); }
.scheduled-tasks-content .bg-secondary { background: var(--bg-secondary, #1f2328); }
.scheduled-tasks-content .bg-muted { background: var(--bg-card, #1a1d23); }

/* Borders */
.scheduled-tasks-content .border { border: 1px solid var(--border, #2a2e35); }
.scheduled-tasks-content .border-border { border-color: var(--border, #2a2e35); }
.scheduled-tasks-content .rounded-md { border-radius: 6px; }
.scheduled-tasks-content .rounded-lg { border-radius: 8px; }
.scheduled-tasks-content .rounded-xl { border-radius: 12px; }
.scheduled-tasks-content .rounded-full { border-radius: 9999px; }

/* Search input styling */
.scheduled-tasks-content input[type="text"],
.scheduled-tasks-content input[placeholder*="earch"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 32px;
  font-size: 14px;
  color: var(--text-primary, #e0e4ea);
  background: var(--bg-app, #0e1318);
  border: 1px solid var(--border, #2a2e35);
  border-radius: 8px;
}

/* Toggle switch base (when Tailwind class doesn't resolve) */
.scheduled-tasks-content button[role="switch"] {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  border: none;
  transition: background-color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.scheduled-tasks-content button[role="switch"][aria-checked="true"] {
  background: var(--accent, #8b5cf6);
}
.scheduled-tasks-content button[role="switch"][aria-checked="false"] {
  background: var(--bg-secondary, #3a3f47);
}
.scheduled-tasks-content button[role="switch"] span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: white;
  transition: transform 0.2s;
}

/* Task card sections — give them some structure */
.scheduled-tasks-content section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2e35);
}

/* cursor-pointer — critical for iOS tap events (iOS only fires click on "clickable" elements) */
.scheduled-tasks-content .cursor-pointer { cursor: pointer; }
.scheduled-tasks-content [class*="cursor-pointer"] { cursor: pointer; }

/* Hidden utility */
.scheduled-tasks-content .hidden { display: none !important; }

/* ── Scheduled Tasks Dialog (New Scheduled Task form) ── */
.scheduled-tasks-dialog {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.scheduled-tasks-dialog.hidden {
  display: none;
}

/* Style the captured dialog card */
.scheduled-tasks-dialog > * {
  max-width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px !important;
  background: var(--bg-app, #0e1318) !important;
}

/* Inputs and textareas should be full width and styled */
.scheduled-tasks-dialog input,
.scheduled-tasks-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px; /* Prevent iOS zoom */
  padding: 8px 12px;
  color: var(--text-primary, #e0e4ea);
  background: var(--bg-app, #0e1318);
  border: 1px solid var(--border, #2a2e35);
  border-radius: 8px;
}

/* Ensure dropdowns (Daily, time, project) are tappable */
.scheduled-tasks-dialog button,
.scheduled-tasks-dialog [role="combobox"],
.scheduled-tasks-dialog [aria-expanded] {
  min-height: 36px;
  cursor: pointer;
}

/* Dropdown selector divs — look interactive */
.scheduled-tasks-dialog [aria-expanded] {
  padding: 6px 10px;
  border: 1px solid var(--border, #2a2e35);
  border-radius: 8px;
  color: var(--text-primary, #e0e4ea);
}

/* ── Fallback Tailwind utilities for dialog HTML ── */
.scheduled-tasks-dialog .flex { display: flex; }
.scheduled-tasks-dialog .flex-col { flex-direction: column; }
.scheduled-tasks-dialog .flex-1 { flex: 1; }
.scheduled-tasks-dialog .items-center { align-items: center; }
.scheduled-tasks-dialog .items-start { align-items: flex-start; }
.scheduled-tasks-dialog .justify-between { justify-content: space-between; }
.scheduled-tasks-dialog .justify-end { justify-content: flex-end; }
.scheduled-tasks-dialog .w-full { width: 100%; }
.scheduled-tasks-dialog .gap-1 { gap: 4px; }
.scheduled-tasks-dialog .gap-2 { gap: 8px; }
.scheduled-tasks-dialog .gap-3 { gap: 12px; }
.scheduled-tasks-dialog .gap-4 { gap: 16px; }
.scheduled-tasks-dialog .p-4 { padding: 16px; }
.scheduled-tasks-dialog .text-sm { font-size: 13px; }
.scheduled-tasks-dialog .text-xs { font-size: 11px; }
.scheduled-tasks-dialog .font-medium { font-weight: 500; }
.scheduled-tasks-dialog .text-foreground { color: var(--text-primary, #e0e4ea); }
.scheduled-tasks-dialog .text-muted-foreground { color: var(--text-muted, #6b7280); }
.scheduled-tasks-dialog .rounded-lg { border-radius: 8px; }
.scheduled-tasks-dialog .rounded-xl { border-radius: 12px; }

/* ── Comment FAB (floating action button on text selection) ── */
/* ── Text Input Modal (for scheduled tasks form fields) ── */
.text-input-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 16px;
}

.text-input-modal.hidden {
  display: none;
}

.text-input-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.text-input-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-card, #1a1d23);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border, #2a2e35);
}

.text-input-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #a0a8b4);
}

.text-input-field,
.text-input-area {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 16px; /* Prevent iOS zoom */
  font-family: inherit;
  color: var(--text-primary, #e0e4ea);
  background: var(--bg-app, #0e1318);
  border: 1px solid var(--border, #2a2e35);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
}

.text-input-field:focus,
.text-input-area:focus {
  border-color: var(--accent, #8b5cf6);
}

.text-input-area {
  resize: vertical;
  min-height: 80px;
}

.text-input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.text-input-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.text-input-btn:active {
  opacity: 0.7;
}

.text-input-btn.cancel {
  background: var(--bg-secondary, #1f2328);
  color: var(--text-secondary, #a0a8b4);
}

.text-input-btn.submit {
  background: var(--accent, #8b5cf6);
  color: white;
}

.comment-fab {
  position: fixed;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 150ms ease-out;
}

.comment-fab .material-symbols-rounded { font-size: 18px; }
.comment-fab.hidden { display: none; }

/* ── Comment Modal ── */
.comment-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-modal.hidden { display: none; }

.comment-modal-content {
  position: relative;
  z-index: 1;
  background: #1e1e2e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  width: 90vw;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: slideUpDropdown 200ms ease-out;
}

.comment-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.comment-selection-preview {
  background: #141420;
  border-left: 3px solid #6366f1;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #aaa;
  max-height: 80px;
  overflow: hidden;
  line-height: 1.4;
  white-space: pre-wrap;
}

.comment-input {
  width: 100%;
  background: #141420;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  outline: none;
  box-sizing: border-box;
}

.comment-input:focus { border-color: #6366f1; }

.comment-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.comment-action-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  cursor: pointer;
}

.comment-action-btn.cancel { background: transparent; color: #e0e0e0; }

.comment-action-btn.submit {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: var(--accent, #6366f1);
}

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

/* ── Comment Queue Badge ── */
#comment-badge {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #6366f1;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 8px 6px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 150ms ease-out;
  white-space: nowrap;
}

#comment-send-btn {
  background: #fff;
  color: #6366f1;
  border: none;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ── Comment Review Modal ── */
.comment-review-content {
  position: relative;
  z-index: 1;
  background: #1e1e2e;
  border-radius: 12px;
  padding: 16px;
  width: 90vw;
  max-width: 440px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.comment-review-list {
  flex: 1;
  overflow-y: auto;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-review-file {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  word-break: break-all;
}

.comment-review-item {
  background: #141420;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-review-selection {
  font-size: 12px;
  color: #888;
  border-left: 2px solid #6366f1;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-review-text {
  font-size: 13px;
  color: #e0e0e0;
}

.comment-review-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.comment-review-actions button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  line-height: 1;
}

.comment-review-actions button:hover { color: #fff; }
.comment-review-actions button.delete:hover { color: #f87171; }

#comment-badge span { cursor: pointer; }

/* ── Sidebar Restart Button (native, injected after Settings) ── */
.ag2r-restart-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--red);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ag2r-restart-btn:active {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.ag2r-restart-btn .material-symbols-rounded {
  font-size: 18px;
}

/* ── Restart Confirmation Modal ── */
.restart-confirm {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.restart-confirm.hidden {
  display: none;
}

.restart-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.restart-confirm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.restart-confirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.restart-confirm-message {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.restart-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.restart-confirm-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.restart-confirm-btn.cancel {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.restart-confirm-btn.cancel:active {
  background: var(--border);
}

.restart-confirm-btn.destructive {
  background: var(--red);
  color: #fff;
}

.restart-confirm-btn.destructive:active {
  opacity: 0.8;
}

.restart-confirm-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Refresh Button Spin ── */
#refresh-btn .material-symbols-rounded {
  transition: transform 0.3s ease;
}

#refresh-btn:active .material-symbols-rounded {
  transform: rotate(180deg);
}

/* ── Undo Buttons (force visible on mobile — AG hides via opacity-0 hover-only) ── */
#chat-content .opacity-0:has([aria-label*="Undo"]) {
  opacity: 1 !important;
}