/* Mobile comfort overrides for Remote Agent Hebrew UI.
   Inspired by shadcn/ui sidebar/drawer mobile patterns: safe areas, drawer width,
   larger touch targets, sticky topbar/composer, compact content on phones. */

:root {
  --mobile-hit: 44px;
  --mobile-radius: 14px;
}

html,
body,
#app {
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Keep technical content usable. */
pre,
code,
kbd,
samp,
.terminal,
.xterm,
.xterm-viewport,
.xterm-screen,
.xterm-rows,
.monaco-editor,
.cm-editor {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext;
}

@media (max-width: 767px) {
  html,
  body,
  #app {
    height: 100dvh;
    max-width: 100vw;
  }

  .app-shell {
    height: 100dvh;
    max-width: 100vw;
  }

  .app-workspace {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    background: var(--app-canvas, var(--background));
  }

  /* Topbar: easier thumb target + safe-area on notched phones. */
  .app-topbar {
    height: calc(3rem + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-inline: .5rem !important;
    gap: .35rem !important;
    background: color-mix(in oklab, var(--background) 88%, transparent) !important;
  }

  .app-topbar button,
  .app-topbar [role="button"] {
    min-width: var(--mobile-hit) !important;
    min-height: var(--mobile-hit) !important;
    border-radius: 999px !important;
  }

  .app-topbar img {
    width: 1.65rem !important;
    height: 1.65rem !important;
  }

  .app-topbar [role="combobox"],
  .app-topbar button[aria-haspopup="listbox"] {
    height: 2.35rem !important;
    max-width: calc(100vw - 8rem) !important;
    border-radius: 999px !important;
    background: var(--muted) !important;
  }

  /* RTL drawer: open from right, not left. */
  html[dir="rtl"] .app-shell > .fixed.inset-0.z-50.md\:hidden > .relative.h-full {
    margin-right: 0 !important;
    margin-left: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  html[dir="rtl"] .app-shell > .fixed.inset-0.z-50.md\:hidden > .relative.h-full.\-translate-x-full {
    transform: translateX(105%) !important;
  }

  html[dir="rtl"] .app-shell > .fixed.inset-0.z-50.md\:hidden > .relative.h-full.translate-x-0 {
    transform: translateX(0) !important;
  }

  .app-sidebar {
    width: min(90vw, 380px) !important;
    max-width: 90vw !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    border-radius: 0 0 0 20px;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .26) !important;
  }

  .app-shell > .fixed.inset-0.z-50.md\:hidden > .relative.h-full > .app-sidebar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .app-sidebar a,
  .app-sidebar button,
  .app-sidebar [role="button"] {
    min-width: var(--mobile-hit) !important;
    min-height: var(--mobile-hit) !important;
  }

  .app-sidebar nav,
  .app-sidebar [role="navigation"] {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Pages/cards: less wasted margin on phone. */
  .app-page {
    min-height: 0;
    max-width: 100vw;
  }

  .app-page > div,
  main .app-page > div,
  .app-workspace .app-page > div {
    max-width: 100vw !important;
  }

  .app-panel,
  [data-slot="card"] {
    border-radius: var(--mobile-radius) !important;
  }

  /* Composer: sticky, safe, thumb-friendly. */
  .app-workspace textarea[data-slot="textarea"] {
    min-height: 5.25rem !important;
    max-height: 38dvh !important;
    font-size: 16px !important; /* avoids iOS zoom */
    line-height: 1.55 !important;
    border-radius: var(--mobile-radius) !important;
    padding: .85rem .9rem !important;
  }

  .app-workspace textarea[data-slot="textarea"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent) !important;
  }

  .app-workspace textarea[data-slot="textarea"] ~ *,
  .app-workspace button,
  .app-workspace [role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .app-workspace button[role="switch"] {
    min-width: 44px !important;
  }

  /* Draft options: keep worktree/sandbox switches compact on phones.
     Generic mobile button rule makes all buttons 44x44; that breaks 24px switch track. */
  .app-workspace div:has(> #draft-worktree-enabled),
  .app-workspace div:has(> #draft-sandbox-enabled) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    max-width: calc(50vw - .75rem) !important;
    gap: .375rem !important;
    padding: .25rem .5rem !important;
    white-space: nowrap !important;
  }

  .app-workspace #draft-worktree-enabled,
  .app-workspace #draft-sandbox-enabled {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    direction: ltr !important;
    touch-action: manipulation;
  }

  .app-workspace #draft-worktree-enabled > span:first-child,
  .app-workspace #draft-sandbox-enabled > span:first-child {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    right: auto !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateX(0) !important;
  }

  .app-workspace #draft-worktree-enabled > span:first-child[class*="translate-x-5"],
  .app-workspace #draft-sandbox-enabled > span:first-child[class*="translate-x-5"] {
    transform: translateX(20px) !important;
  }

  html[dir="rtl"] .app-workspace #draft-worktree-enabled > span:first-child,
  html[dir="rtl"] .app-workspace #draft-sandbox-enabled > span:first-child {
    right: 2px !important;
    left: auto !important;
    transform: translateX(0) !important;
  }

  html[dir="rtl"] .app-workspace #draft-worktree-enabled > span:first-child[class*="translate-x-5"],
  html[dir="rtl"] .app-workspace #draft-sandbox-enabled > span:first-child[class*="translate-x-5"] {
    transform: translateX(-20px) !important;
  }

  .app-workspace #draft-worktree-enabled + label,
  .app-workspace #draft-sandbox-enabled + label {
    display: inline-block !important;
    max-width: calc(50vw - 4rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }

  .app-workspace button svg {
    pointer-events: none;
  }

  .app-workspace > div:last-child {
    padding: .35rem .45rem max(.65rem, env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(to top, var(--background) 82%, color-mix(in oklab, var(--background) 0%, transparent)) !important;
    border-top: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
  }

  /* Message stream: readable width, no side clipping. */
  .group\/message {
    padding-inline: .35rem !important;
  }

  .app-user-message {
    border-radius: 16px 16px 4px 16px !important;
    background: color-mix(in oklab, var(--primary) 8%, var(--card)) !important;
  }

  /* Dropdowns/dialogs fit phone viewport. */
  [role="dialog"],
  [data-slot="dialog-content"],
  [data-radix-popper-content-wrapper] > * {
    max-width: calc(100vw - 1rem) !important;
  }

  [role="dialog"],
  [data-slot="dialog-content"] {
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }

  /* Tables/code/tools scroll horizontally instead of widening whole page. */
  table,
  pre,
  code,
  [data-slot="diff-sign"] + span {
    max-width: 100%;
  }

  pre,
  .overflow-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .app-topbar {
    padding-inline: .35rem !important;
  }

  .app-topbar [role="combobox"],
  .app-topbar button[aria-haspopup="listbox"] {
    max-width: calc(100vw - 7.25rem) !important;
  }

  .app-workspace textarea[data-slot="textarea"] {
    min-height: 4.75rem !important;
  }
}