/* Mobile controls for the relay portal. The desktop application keeps its original layout. */

.mobile-codex-search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--theme-border);
  border-radius: 0.7rem;
  background: var(--theme-panel);
  color: var(--theme-fg-muted);
  box-shadow: 0 8px 24px var(--theme-shadow);
}

.mobile-codex-search-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.72;
}

.mobile-codex-search input {
  min-width: 0;
  min-height: 2.75rem;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-fg);
  font-size: 1rem;
}

.mobile-codex-search input::placeholder {
  color: var(--theme-fg-muted);
}

.mobile-codex-search-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mobile-codex-nav {
  display: none;
}

.mobile-codex-connection-hint {
  display: none;
}

.mobile-codex-drawer-root {
  display: none;
}

@media (max-width: 720px) {
  :root {
    --mobile-codex-bottom-space: calc(4.75rem + env(safe-area-inset-bottom));
  }

  html,
  body {
    min-width: 320px;
    min-height: 100%;
  }

  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  button,
  a,
  input,
  textarea,
  select {
    -webkit-tap-highlight-color: transparent;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .host-topbar {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  .host-card {
    min-height: 4.5rem;
  }

  .relay-button-primary,
  .relay-button-secondary,
  .relay-input {
    min-height: 2.75rem;
  }

  .mobile-codex-search {
    position: relative;
    top: auto;
    z-index: 5;
  }

  .mobile-codex-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-panel) 94%, transparent);
    box-shadow: 0 -12px 30px var(--theme-shadow);
    backdrop-filter: blur(16px);
  }

  .mobile-codex-nav a,
  .mobile-codex-nav button {
    display: inline-flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--theme-fg-muted);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
  }

  .mobile-codex-nav a[aria-current='page'],
  .mobile-codex-nav button[aria-current='page'] {
    border-color: var(--theme-accent-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
  }

  .mobile-codex-nav-icon {
    font-size: 1rem;
    line-height: 1;
  }

  .mobile-codex-connection-hint {
    position: fixed;
    right: 0.75rem;
    bottom: calc(var(--mobile-codex-bottom-space) + 0.5rem);
    left: 0.75rem;
    z-index: 65;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 0.65rem;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.78rem;
    box-shadow: 0 10px 24px var(--theme-shadow);
  }

  .mobile-codex-connection-hint button {
    min-height: 2.35rem;
    flex: 0 0 auto;
    padding: 0 0.8rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .mobile-codex-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    pointer-events: none;
  }

  .mobile-codex-drawer-trigger,
  .mobile-codex-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border);
    background: var(--theme-panel);
    color: var(--theme-fg);
    box-shadow: 0 8px 20px var(--theme-shadow);
  }

  .mobile-codex-drawer-trigger {
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top));
    left: 0.7rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.55rem;
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: auto;
  }

  .mobile-codex-drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 0.48);
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .mobile-codex-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(88vw, 23rem);
    flex-direction: column;
    border-right: 1px solid var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 16px 0 36px var(--theme-shadow);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .mobile-codex-drawer-root.is-open {
    pointer-events: auto;
  }

  .mobile-codex-drawer-root.is-open .mobile-codex-drawer-backdrop {
    opacity: 1;
  }

  .mobile-codex-drawer-root.is-open .mobile-codex-drawer-panel {
    transform: translateX(0);
  }

  .mobile-codex-drawer-header {
    display: flex;
    min-height: calc(3.75rem + env(safe-area-inset-top));
    align-items: flex-end;
    justify-content: space-between;
    padding: max(0.7rem, env(safe-area-inset-top)) 0.85rem 0.7rem;
    border-bottom: 1px solid var(--theme-border);
  }

  .mobile-codex-drawer-header h2,
  .mobile-codex-drawer-section h3 {
    margin: 0;
    color: var(--theme-fg);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  .mobile-codex-drawer-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 1.35rem;
  }

  .mobile-codex-drawer-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0.7rem 0.8rem calc(1rem + env(safe-area-inset-bottom));
  }

  .mobile-codex-thread-list {
    display: grid;
    height: 10.5rem;
    min-height: 0;
    gap: 0.45rem;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.15rem;
    scrollbar-gutter: stable;
  }

  [data-mobile-route-scroll="workspace-threads"],
  [data-mobile-route-scroll="threads"] {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }

  /* The workspace page renders its recent-thread cards in a separate flex
     region. Give that region an actual viewport on phones so the card list,
     rather than the document, receives the vertical gesture. */
  [data-mobile-route-scroll="workspace-threads"] {
    flex: 0 1 auto !important;
    height: min(52dvh, 34rem);
    min-height: 12rem;
    max-height: calc(100dvh - 23rem);
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  [data-mobile-route-scroll="workspace-threads"] > * {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* The bundled thread-ui renderer uses a utility-only selector instead of
     data-mobile-route-scroll on the workspace page. This is the scrollable
     card column visible below “最近会话” in the phone layout. */
  .thread-main-panel .host-panel {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .thread-main-panel .host-panel [class*="overflow-y-auto"][class*="max-h-full"] {
    flex: 0 1 auto !important;
    height: min(42dvh, 32rem) !important;
    min-height: 12rem !important;
    max-height: min(42dvh, 32rem) !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  [data-mobile-route-scroll="workspaces"] {
    min-height: 0;
    max-height: min(68dvh, 42rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.15rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }

  .mobile-codex-drawer-section {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--theme-border);
  }

  .mobile-codex-drawer-link,
  .mobile-codex-drawer-thread,
  .mobile-codex-permission-button,
  .mobile-codex-drawer-danger {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-codex-drawer-link {
    width: 100%;
    padding: 0.55rem 0.7rem;
    text-align: left;
  }

  .mobile-codex-drawer-link,
  .mobile-codex-drawer-thread {
    padding: 0.55rem 0.7rem;
  }

  .mobile-codex-drawer-thread {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-codex-drawer-thread.is-current,
  .mobile-codex-permission-button.is-active {
    border-color: var(--theme-accent-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
  }

  .mobile-codex-permission-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .mobile-codex-permission-button {
    justify-content: center;
    padding: 0.4rem;
  }

  .mobile-codex-drawer-help,
  .mobile-codex-drawer-status,
  .mobile-codex-drawer-error {
    margin: 0;
    color: var(--theme-fg-muted);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .mobile-codex-drawer-error {
    color: var(--status-danger-fg);
  }

  .mobile-codex-drawer-danger {
    justify-content: center;
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
  }

  body.mobile-codex-has-bottom-nav main {
    padding-bottom: var(--mobile-codex-bottom-space) !important;
  }

  /* Keep the runtime facts available on large screens but avoid a second column on phones. */
  main > section > div > div > aside {
    display: none;
  }

  /* Touch targets for list actions; the composer keeps its compact icon layout. */
  main button:not([data-mobile-compact='true']):not([aria-label*='Copy']):not([aria-label*='timestamp']) {
    min-height: 2.75rem;
  }

  .mobile-codex-search + * {
    scroll-margin-top: calc(env(safe-area-inset-top) + 4.25rem);
  }

  .mobile-codex-global-search-results {
    display: grid;
    max-height: min(52dvh, 28rem);
    gap: 0.45rem;
    margin-top: 0.55rem;
    overflow-y: auto;
    padding: 0.6rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.65rem;
    background: var(--theme-panel);
    box-shadow: 0 10px 24px var(--theme-shadow);
  }

  .mobile-codex-global-search-heading {
    margin: 0.25rem 0 0;
    color: var(--theme-fg-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-codex-global-search-item {
    display: block;
    min-height: 2.5rem;
    overflow: hidden;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
    font-size: 0.84rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-codex-global-search-item:active,
  .mobile-codex-global-search-item:focus-visible {
    border-color: var(--theme-accent-border);
    background: var(--theme-accent-soft);
    outline: none;
  }

  .mobile-codex-global-search-status {
    margin: 0;
    color: var(--theme-fg-muted);
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .thread-graph-message[data-role='user'] {
    justify-content: flex-end !important;
  }

  .thread-graph-message[data-role='user'] .thread-graph-message-bubble {
    width: auto !important;
    max-width: 86% !important;
  }

  .thread-graph-message[data-role='user'] .thread-graph-message-content {
    border: 1px solid #9bd5a4;
    border-radius: 0.85rem 0.85rem 0.2rem 0.85rem;
    background: #dff5e2;
    color: #102016;
    padding: 0.7rem 0.8rem;
    box-shadow: 0 3px 10px rgb(20 70 35 / 0.12);
  }

  .thread-graph-message[data-role='user'] .thread-graph-message-content,
  .thread-graph-message[data-role='user'] .thread-graph-message-content * {
    color: #102016 !important;
  }

  .thread-graph-message[data-role='user'] .thread-graph-message-header {
    color: #24442d;
  }

  .thread-graph-message[data-role='user'] img {
    max-width: 100%;
    border: 1px solid #8fc79a;
    border-radius: 0.5rem;
  }

  .thread-graph-message[data-role='assistant'] .thread-graph-message-bubble {
    max-width: 100%;
  }

  .mobile-codex-unavailable-file {
    display: inline-flex;
    padding: 0.45rem 0.55rem;
    border: 1px dashed var(--status-warning-border);
    border-radius: 0.4rem;
    color: var(--status-warning-fg);
    font-size: 0.78rem;
  }

  .mobile-codex-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .mobile-codex-dialog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 0.58);
  }

  .mobile-codex-dialog {
    position: relative;
    display: flex;
    width: min(100%, 32rem);
    max-height: min(86vh, 46rem);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 0.7rem;
    background: var(--theme-panel);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.36);
  }

  .mobile-codex-dialog-header {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--theme-border);
  }

  .mobile-codex-dialog-header h2 {
    margin: 0;
    color: var(--theme-fg);
    font-size: 1rem;
  }

  .mobile-codex-dialog-close,
  .mobile-codex-dialog-action {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
  }

  .mobile-codex-dialog-close {
    font-size: 1.25rem;
  }

  .mobile-codex-dialog-body {
    min-height: 0;
    overflow: auto;
    padding: 0.85rem;
    color: var(--theme-fg);
  }

  .mobile-codex-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-top: 1px solid var(--theme-border);
  }

  .mobile-codex-dialog-action.is-primary {
    border-color: var(--theme-accent-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
  }

  .mobile-codex-file-list {
    display: grid;
    gap: 0.35rem;
  }

  .mobile-codex-file-row {
    min-height: 2.75rem;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 0.45rem;
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-codex-file-children {
    display: grid;
    gap: 0.35rem;
  }

  .mobile-codex-file-image {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  .thread-graph-message img,
  .thread-graph-history-event-image,
  .thread-graph-event-image img,
  .thread-graph-markdown img,
  img[src*="/api/threads/"] {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 62dvh;
    object-fit: contain;
  }

  .mobile-codex-unavailable-file {
    display: block;
    margin-top: 0.45rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.45rem;
    background: var(--theme-surface-strong);
    color: var(--theme-fg-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    cursor: pointer;
  }

  .mobile-codex-file-frame {
    width: 100%;
    min-height: 65vh;
    border: 0;
  }

  .mobile-codex-file-text,
  .mobile-codex-plan-code {
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  }

  .mobile-codex-plan-title {
    margin: 0.7rem 0 0.4rem;
    font-size: 0.9rem;
  }

  .mobile-codex-plan-paragraph,
  .mobile-codex-plan-bullet {
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }

  .mobile-codex-plan-heading {
    margin: 0.2rem 0 0.55rem;
    font-size: 0.9rem;
  }

  .mobile-codex-plan-list {
    display: grid;
    gap: 0.4rem;
    padding-left: 1.5rem;
  }

  .mobile-codex-plan-item {
    padding: 0.45rem 0.55rem;
    border-left: 3px solid var(--theme-border);
    background: var(--theme-surface-strong);
  }

  .mobile-codex-plan-item.已完成 { border-left-color: #52a867; }
  .mobile-codex-plan-item.进行中 { border-left-color: #d69b34; }

  .mobile-codex-plan-history {
    margin-bottom: 0.75rem;
    padding: 0.65rem;
    border: 1px solid var(--theme-border);
    border-radius: 0.45rem;
    background: var(--theme-surface-strong);
  }

  .mobile-codex-plan-time,
  .mobile-codex-file-breadcrumb {
    display: block;
    margin: 0 0 0.45rem;
    color: var(--theme-fg-muted);
    font-size: 0.75rem;
  }
}

@media (min-width: 721px) {
  .mobile-codex-search,
  .mobile-codex-nav,
  .mobile-codex-connection-hint,
  .mobile-codex-drawer-root {
    display: none !important;
  }
}