/* opencode-mobile ------------------------------------------------- */

:root {
  --oc-safe-top: env(safe-area-inset-top, 0px);
  --oc-safe-right: env(safe-area-inset-right, 0px);
  --oc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --oc-safe-left: env(safe-area-inset-left, 0px);
  --oc-dock-safe: var(--oc-safe-bottom);

  /* how much of the home-indicator inset to reclaim under the composer.
     bigger = composer sits lower. 0px restores opencode's default. */
  --oc-dock-trim: 20px;
}

/* keyboard covers the home indicator, so its inset must collapse */
html[data-oc-kb="1"] { --oc-dock-safe: 0px; }

/* 1. viewport + keyboard ------------------------------------------ */

html[data-oc-mobile="1"],
html[data-oc-mobile="1"] body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-oc-mobile="1"] body { touch-action: manipulation; }

html[data-oc-mobile="1"] * { -webkit-tap-highlight-color: transparent; }

/* the app box tracks the visual viewport, so the composer sits exactly
   on top of the keyboard instead of being scrolled out of view.
   html/body are locked at 100% + overflow:hidden above, so plain flow
   positioning is enough — no fixed layer needed. */
html[data-oc-mobile="1"] #root {
  height: var(--oc-app-h, 100dvh);
  max-height: var(--oc-app-h, 100dvh);
  padding: 0 var(--oc-safe-right) 0 var(--oc-safe-left);
}

/* opencode reserves the whole env(safe-area-inset-bottom) inline on its app
   container. Keyboard down that leaves the composer floating ~48px off the
   bottom edge; keyboard up it is dead space wedged against the keys. Both are
   inline styles, so both need !important. */
html[data-oc-mobile="1"] #root > div[style*="safe-area-inset-bottom"] {
  padding-bottom: max(calc(var(--oc-safe-bottom) - var(--oc-dock-trim)), 0px) !important;
}

html[data-oc-mobile="1"][data-oc-kb="1"] #root > div[style*="safe-area-inset-bottom"] {
  padding-bottom: 0 !important;
}

/* only when Safari has scrolled the visual viewport away from the top —
   a permanent transform would re-parent every position:fixed descendant */
html[data-oc-mobile="1"][data-oc-shift="1"] #root {
  transform: translateY(var(--oc-vv-top, 0px));
}

/* 2. never let iOS zoom on focus ---------------------------------- */

html[data-oc-mobile="1"] input:not([type="checkbox"]):not([type="radio"]),
html[data-oc-mobile="1"] textarea,
html[data-oc-mobile="1"] [contenteditable="true"] {
  font-size: 16px !important;
}

/* 3. header ------------------------------------------------------- */

html[data-oc-mobile="1"] header { height: 44px; }
html[data-oc-mobile="1"] header > div { padding-top: 6px; }

html[data-oc-mobile="1"] header button,
html[data-oc-mobile="1"] [data-slot="tab-close"] { position: relative; }

/* thumb-sized hit areas without changing what is drawn */
html[data-oc-mobile="1"] header button::after,
html[data-oc-mobile="1"] [data-slot="tab-close"]::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 12px;
}

html[data-oc-mobile="1"] [data-slot="titlebar-tab-item"] { min-height: 30px; }

/* 4. session / changes tabs --------------------------------------- */

html[data-oc-mobile="1"] [data-component="tabs"] [data-slot="tabs-list"] {
  height: 42px !important;
}
html[data-oc-mobile="1"] [data-slot="tabs-trigger"] { font-size: 13.5px; }

/* 5. give the content back the margins ---------------------------- */

html[data-oc-mobile="1"] main > div > .p-2 { padding: 6px; gap: 6px; }
html[data-oc-mobile="1"] main > .m-2 { margin: 6px; }

/* 6. readable transcript ------------------------------------------ */

html[data-oc-mobile="1"] [data-component="markdown"],
html[data-oc-mobile="1"] [data-slot="user-message-text"],
html[data-oc-mobile="1"] [data-slot="text-part-body"] {
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html[data-oc-mobile="1"] [data-slot="user-message-body"] { border-radius: 14px; }

html[data-oc-mobile="1"] [data-component="markdown"] pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  font-size: 12.5px;
  line-height: 1.5;
}

html[data-oc-mobile="1"] [data-component="markdown"] :not(pre) > code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 7. composer ----------------------------------------------------- */

html[data-oc-mobile="1"] [data-component="session-prompt-dock"] {
  padding-top: 2px;
  padding-bottom: 6px;
}

html[data-oc-mobile="1"] [data-component="session-prompt-dock"] > div {
  padding-left: 8px;
  padding-right: 8px;
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"] {
  min-height: 0;
  border-radius: 18px;
  background: var(--v2-background-bg-layer-01);
  box-shadow: var(--v2-elevation-raised);
  transition: box-shadow 0.15s ease;
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"]:focus-within {
  box-shadow: var(--v2-elevation-raised), 0 0 0 1.5px var(--v2-border-border-focus);
}

/* editor and its placeholder overlay must stay pixel-identical */
html[data-oc-mobile="1"] [data-component="prompt-input"],
html[data-oc-mobile="1"] [data-component="prompt-input"] + div {
  line-height: 1.45;
  padding: 13px 14px 6px;
  min-height: 52px;
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"] > div:first-child {
  min-height: 52px;
}

/* the placeholder is a separate overlay; at 16px it wraps to two lines */
html[data-oc-mobile="1"] [data-component="prompt-input"] + div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-oc-mobile="1"] [data-component="prompt-input"] {
  max-height: min(calc(var(--oc-app-h, 100dvh) * 0.38), 240px);
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"] > div:last-child {
  height: 48px;
  padding: 0 8px 4px;
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"] button[data-component="icon-button-v2"],
html[data-oc-mobile="1"] [data-component="prompt-input-v2"] button[data-component="icon-button"] {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* the send button is the only icon-button (v1) in the dock; opencode wraps it
   in a tooltip once it is armed, so match on the component, not on position */
html[data-oc-mobile="1"] [data-component="prompt-input-v2"] button[data-component="icon-button"] {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

/* an armed send button should look armed */
html[data-oc-mobile="1"] [data-component="prompt-input-v2"] button[data-component="icon-button"]:not(:disabled) {
  background: var(--v2-background-bg-accent);
  color: #fff;
}

html[data-oc-mobile="1"] [data-component="prompt-input-v2"] button[data-component="icon-button"]:not(:disabled) svg {
  color: #fff;
}

/* 8. dialogs behave like bottom sheets ---------------------------- */

html[data-oc-mobile="1"] [data-component="dialog"] {
  top: var(--oc-vv-top, 0px);
  bottom: auto;
  height: var(--oc-app-h, 100dvh);
  align-items: flex-end;
  padding: calc(var(--oc-safe-top) + 12px) 8px calc(10px + var(--oc-dock-safe));
}

/* max-height matters once the keyboard shrinks the sheet's box */
html[data-oc-mobile="1"] [data-slot="dialog-container"] {
  width: 100%;
  max-height: 100%;
}

html[data-oc-mobile="1"] [data-slot="dialog-content"] {
  width: 100%;
  max-height: 100%;
  border-radius: 18px;
}

/* 9. no scrollbar gutters on touch -------------------------------- */

html[data-oc-mobile="1"] * { scrollbar-width: none; }
html[data-oc-mobile="1"] *::-webkit-scrollbar { width: 0; height: 0; }