/* The remote page: header, session list (a drawer on phones), one terminal, a key bar. */
.web-app {
  position: fixed;
  top: var(--web-vv-top, 0);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: var(--web-vh, 100dvh);
}

.web-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding-top: calc(6px + env(safe-area-inset-top));
}

.web-header .app-logo {
  flex: none;
  width: 22px;
  height: 22px;
}

.web-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.web-attention {
  flex: none;
  border-color: var(--color-attention);
  color: var(--color-attention);
  font-weight: 600;
}

.web-menu.has-attention {
  position: relative;
}

.web-menu.has-attention::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-attention);
}

.web-connection {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.web-connection-closed,
.web-connection-connecting {
  color: var(--color-attention);
}

.web-menu-root {
  position: relative;
}

.web-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-elevated);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-bg) 60%, transparent);
}

.web-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-menu-label {
  flex: 1;
  white-space: nowrap;
}

.web-menu-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-menu-value {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.web-answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-attention);
  background: color-mix(in srgb, var(--color-attention) 12%, var(--color-bg-elevated));
}

.web-answers-message {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.web-answers-keys {
  display: flex;
  gap: 6px;
}

.web-answers-keys .btn {
  min-width: 40px;
  font-family: var(--font-mono);
}

.web-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.web-sidebar {
  flex: none;
  width: 260px;
  overflow: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.web-main {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.web-latest {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 4;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-bg) 60%, transparent);
}

.web-paused {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--color-attention);
  font-weight: 600;
  pointer-events: none;
}

.web-empty {
  margin: auto;
}

.web-view-tabs {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 4px 8px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.web-view-tab {
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

.web-view-tab.active {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}

.web-changes-pane {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-bg);
}

.web-changes {
  overflow: auto;
  padding: 8px 16px 16px;
}

.web-changes-branch {
  padding: 4px 0 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.web-changes-op {
  color: var(--color-attention);
}

.web-changes-group h3 {
  margin: 12px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.web-changes-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-change-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.web-change-kind {
  flex: none;
  width: 1.4em;
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
}

.web-change-kind.kind-A,
.web-change-kind.kind-U {
  color: var(--color-success);
}

.web-change-kind.kind-D,
.web-change-kind.kind-C {
  color: var(--color-danger);
}

.web-change-kind.kind-M,
.web-change-kind.kind-R {
  color: var(--color-attention);
}

.web-change-name {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-change-dir {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-diff {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.web-diff-toolbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}

.web-diff-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl; /* keep the file name visible when the path is cut */
  text-align: left;
}

.web-diff-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.web-diff-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.web-diff-stats {
  padding: 6px 8px;
}

.web-diff-stats .added {
  color: var(--color-success);
}

.web-diff-stats .removed {
  color: var(--color-danger);
}

.web-hunk {
  min-width: max-content;
}

.web-diff-body.wrap .web-hunk {
  min-width: 0;
}

.web-hunk-header {
  padding: 4px 8px;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  white-space: pre;
}

.web-diff-line {
  display: grid;
  grid-template-columns: 3.5em 3.5em 1.2em 1fr;
}

.web-diff-line.add {
  background: var(--diff-added-bg);
}

.web-diff-line.del {
  background: var(--diff-removed-bg);
}

.web-diff-line .ln {
  padding-right: 6px;
  color: var(--color-text-muted);
  text-align: right;
  user-select: none;
}

.web-diff-line .sign {
  user-select: none;
}

.web-diff-line .text {
  white-space: pre;
}

.web-diff-body.wrap .web-diff-line .text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 719px) {
  .web-diff-line {
    grid-template-columns: 2.8em 2.8em 1em 1fr;
  }
}

.web-menu,
.web-backdrop {
  display: none;
}

@media (max-width: 719px) {
  .web-menu {
    display: inline-flex;
  }

  .web-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(85vw, 300px);
    transform: translateX(-100%);
    transition: transform 0.15s ease;
  }

  /* Only while open: a hidden drawer's shadow would show along the left edge. */
  .drawer-open .web-sidebar {
    transform: none;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
  }

  .drawer-open .web-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.4);
  }
}

.web-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.web-compose textarea {
  width: 100%;
  min-height: 72px;
  max-height: 40vh;
  resize: vertical;
  /* 16 px: iOS zooms into smaller text fields on focus. */
  font: 16px/1.4 var(--font-ui);
}

.web-compose-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-compose-actions .field-hint {
  flex: 1;
}

.web-keybar {
  display: flex;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  overflow-x: auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.web-keybar .btn {
  flex: none;
  min-width: 44px;
  font-family: var(--font-mono);
}

.web-keybar .btn[aria-pressed='true'] {
  border-color: var(--color-accent-fill);
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
}

.web-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  overflow: auto;
}

.web-login .form {
  width: min(360px, 100%);
}

.web-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.web-login-brand .app-logo {
  width: 32px;
  height: 32px;
}

.web-splash {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
}

.web-notice {
  position: fixed;
  left: 50%;
  bottom: calc(60px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  max-width: calc(100vw - 32px);
}

/* Headless server: the administration view ("Server" in the header menu). */
.web-server-head {
  display: flex;
  flex: none;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.web-server-head .web-view-tabs {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 0;
}

.web-server-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

.web-server-body .form {
  max-width: 720px;
}

.web-server-head .web-view-tab {
  white-space: nowrap;
}

.web-server .agent-toggle {
  display: flex;
  gap: 6px;
}

/* Forms made for the Preferences window must fit a phone: no fieldset wider than the screen. */
.web-server-body fieldset {
  min-width: 0;
}

.web-server-body .ntfy-topic,
.web-server-body .dialog-actions {
  flex-wrap: wrap;
}

.web-server-body input,
.web-server-body select,
.web-server-body textarea {
  max-width: 100%;
}

/* ---- Accessibility on phones (docs/UI-GUIDELINES.md) ---- */

/* 16 px: iOS zooms into smaller fields on focus (UI-T2). */
input:not([type='checkbox'], [type='radio']),
select,
textarea {
  font-size: 16px;
}

.web-keybar-wrap {
  display: contents;
}

.web-keybar-frame {
  position: relative;
}

/* The keys go on past the edge: a fade there shows that the bar scrolls. */
.web-keybar-frame::before,
.web-keybar-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 28px;
  pointer-events: none;
  opacity: 0;
}

.web-keybar-frame::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-elevated), transparent);
}

.web-keybar-frame::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-elevated), transparent);
}

.web-keybar-frame[data-more-left]::before,
.web-keybar-frame[data-more-right]::after {
  opacity: 1;
}

.web-menu-signout {
  align-self: flex-start;
}

/* Touch targets: 44 px on a phone (Apple HIG, Windows touch guidance; UI-T1). */
@media (max-width: 719px) {
  .web-header .icon-btn,
  .web-app .session-row .icon-btn,
  .web-app .project-row .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .web-keybar .btn,
  .web-answers-keys .btn,
  .web-view-tab {
    min-height: 44px;
  }

  .web-app .link-btn,
  .web-header .btn {
    min-height: 44px;
  }

  .web-app .session-select {
    min-height: 44px;
  }
}