* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: var(--line-h);
  height: 100dvh;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

.app {
  position: fixed;
  inset: 0;
  --arc-phone-width-px: 412px;
  --desktop-webview-min-width: 600px;
  --desktop-webview-max-width: 40%;
  --desktop-webview-split-width: 33.333%;
  --desktop-webview-default-width: var(--desktop-webview-split-width);
  --desktop-webview-narrow-width: var(--desktop-webview-split-width);
  --desktop-tool-fill-width: calc(100% - var(--desktop-webview-split-width));
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-0);
  padding-top: max(env(safe-area-inset-top, 0px), var(--arc-surface-panel-padding, 8px));
}

.topbar-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.topbar-row {
  flex: 0 0 auto;
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: var(--arc-surface-toolbar-gap, 4px);
  padding: 0 var(--arc-surface-panel-padding, 8px);
  overflow: hidden;
  white-space: nowrap;
}

.topbar-row-monitor {
  border-bottom: 1px solid var(--line);
}

/* 모니터 행은 기본 접힘(준규님 2026-07-12 01:5x: 늘 열려있어 공간 차지) —
   세션 행 우측 미니 게이지 버튼(wv-sysmon-toggle)이 여닫는다.
   .topbar-row가 display:flex라 [hidden]이 안 먹는 것 방지. */
.topbar-row-monitor[hidden] {
  display: none;
}

.topbar-row-session {
  border-bottom: none;
}

.sys-stats {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sys-stat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sys-stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--fg-2);
}

.sys-stat-bar {
  position: relative;
  width: 12px;
  height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}

.sys-stat-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  /* 준규님 2026-07-12 01:58: accent-soft는 흐려서 안 보임 — 테마 액센트에서
     -2단만 연하게(온도 노랑 --warn은 그대로 잘 보임). */
  background: color-mix(in oklab, var(--accent) 78%, var(--bg-2));
}

.sys-stat[data-stat-kind="temp"] .sys-stat-fill {
  /* 준규님 2026-07-12 02:1x: 노랑(--warn)은 겹친 숫자와 대비가 안 맞음 —
     에러 붉은계열(--err) -2단으로 교체(글자 대비 확보, 온도=위험 신호 직관). */
  background: color-mix(in oklab, var(--err) 62%, var(--bg-2));
}

/* 게이지+숫자 결합(준규님 2026-07-12 01:5x, 원요청 복원): 숫자는 기호 없이
   게이지 박스 안에 겹쳐 그려 슬롯 폭을 줄인다. 단위는 라벨(CPU/CPU°)이 전달. */
.sys-stat-bar {
  width: 20px;
}

.sys-stat-val {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--fg-1);
  text-align: center;
  text-shadow: 0 0 3px var(--bg-2);
}

/* 세션 행 우측 CPU 미니 게이지 버튼(구 preflight 라벨 자리) — 클릭=모니터
   행 토글. 웹챗 메뉴 버튼과 동일한 무테두리 톤. */
.tb-sysmon {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  gap: 3px;
}

.sysmon-mini-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--fg-2);
}

.sysmon-mini {
  position: relative;
  width: 30px;
  height: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}

.sysmon-mini-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background: color-mix(in oklab, var(--accent) 78%, var(--bg-2));
}

.sysmon-mini-val {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  color: var(--fg-1);
  text-shadow: 0 0 3px var(--bg-2);
}

.sysmon-mini-temp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--err);
}

.tb-sysmon:hover .sysmon-mini {
  border-color: var(--accent);
}

.tb-left,
.tb-right {
  display: flex;
  align-items: center;
  gap: var(--arc-surface-toolbar-gap, 4px);
  min-width: 0;
}

.tb-left {
  flex: 1 1 auto;
  overflow: hidden;
}

.tb-right {
  flex: 0 0 auto;
  margin-left: auto;
}

.tb-divider {
  width: 1px;
  height: 14px;
  background: var(--line-strong);
  flex: 0 0 auto;
}

.tb-select,
.tb-iconbtn,
.att-btn,
.send-btn {
  appearance: none;
  font: inherit;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tb-select {
  height: 24px;
  max-width: 128px;
  min-width: 0;
  gap: 5px;
  padding: 0 6px;
  border-radius: 5px;
}

.tb-select .val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-0);
}

/* 준규님 2026-07-19 메뉴바 정리: 세션 버튼=글리프 단독(현재 세션명 숨김, 폭 절약) */
.tb-select-glyph {
  max-width: none;
}
.tb-select-glyph .val {
  display: none;
}

/* 에이전트 종류 글리프 — data-agent-kind로 1종만 표시(claude=터미널·codex=브래킷·web=거미) */
.agent-kind-glyphs {
  display: inline-grid;
  place-items: center;
  width: var(--arc-surface-icon-size, 14px);
  height: var(--arc-surface-icon-size, 14px);
  flex: 0 0 auto;
}
.agent-kind-glyphs .kind-glyph {
  display: none;
  width: var(--arc-surface-icon-size, 14px);
  height: var(--arc-surface-icon-size, 14px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--arc-surface-icon-stroke-width, 1.8);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agent-kind-glyphs .kind-glyph-other {
  stroke: none;
  font-family: var(--font-mono);
  line-height: 1;
}
.tb-select[data-agent-kind="claude"] .kind-glyph[data-glyph-kind="claude"],
.tb-select[data-agent-kind="codex"] .kind-glyph[data-glyph-kind="codex"],
.tb-select[data-agent-kind="web"] .kind-glyph[data-glyph-kind="web"] {
  display: block;
}
.tb-select[data-agent-kind="other"] .kind-glyph[data-glyph-kind="other"],
.tb-select:not([data-agent-kind]) .kind-glyph[data-glyph-kind="other"] {
  display: inline-grid;
  place-items: center;
}

.lab-glyph,
.caret,
.glyph {
  font-family: var(--font-mono);
  line-height: 1;
}

.glyph {
  display: inline-grid;
  place-items: center;
  width: var(--arc-surface-icon-size, 14px);
  height: var(--arc-surface-icon-size, 14px);
  flex: 0 0 auto;
}

.menu-icon {
  display: block;
  width: var(--arc-surface-icon-size, 14px);
  height: var(--arc-surface-icon-size, 14px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--arc-surface-icon-stroke-width, 1.8);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tb-iconbtn {
  width: var(--arc-surface-control-height, 22px);
  height: var(--arc-surface-control-height, 22px);
  border-radius: var(--arc-surface-control-radius, 4px);
  background: var(--bg-2);
  border-color: var(--line);
}

.tb-iconbtn.primary,
.send-btn {
  color: var(--accent-2);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.tb-iconbtn:is([data-phone-overlay-close="true"], [data-panel-host-close="true"], [data-doc-pane-close="true"]) {
  color: var(--err);
  border-color: color-mix(in oklab, var(--err) 42%, var(--line));
  background: color-mix(in oklab, var(--err) 10%, var(--bg-2));
}

.tb-iconbtn:is([data-phone-overlay-close="true"], [data-panel-host-close="true"], [data-doc-pane-close="true"]):hover {
  color: var(--err);
  border-color: var(--err);
  background: color-mix(in oklab, var(--err) 16%, var(--bg-2));
}

.tb-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-2);
  font-size: 11px;
}

.neon {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.arc-status-line {
  flex: 0 0 1px;
  background: var(--line);
}

.app-body {
  /* Wraps the message view and feature-panel mount so desktop split-preset
     layouts can lay them out as flex siblings (row/column per preset)
     while phone keeps the feature panel as a bounded absolute overlay,
     out of flow. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.msg-area {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--bg-0) 88%, var(--bg-1));
  scroll-padding-bottom: calc(var(--phone-keyboard-h) + 14px);
}

.msg-area::-webkit-scrollbar {
  width: 8px;
}

.msg-area::-webkit-scrollbar-track {
  background: transparent;
}

.msg-area::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--line-strong);
  background-clip: padding-box;
}

.msg-area::-webkit-scrollbar-thumb:hover {
  background: var(--accent-line);
  background-clip: padding-box;
}

.wv-empty {
  margin: 16px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--fg-2);
  text-align: center;
}

.empty-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--fg-1);
}

.empty-sub {
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.6;
}

.wv-messages-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

/* 이전 세션 경계 카드(준규님 2026-07-19 영속성 트릭) — 스크롤업 연속 로드 시
   이전세션 이벤트 블록과 현재 화면 사이의 흐린 가운데 구분선. */
.wv-session-boundary {
  margin: 10px 0;
  text-align: center;
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.4px;
  user-select: none;
}

/* 보관/준비중 안내 카드 — 빈 화면 방치 인상 완화(준규님 2026-07-19). */
.wv-archived-session-notice {
  margin: 14px auto;
  padding: 10px 14px;
  max-width: 480px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.wv-archived-session-notice p {
  margin: 2px 0;
}
.wv-archived-session-notice p + p {
  color: var(--fg-3);
  font-size: 10px;
}

.phone-overlay {
  /* 준규님 2026-07-05 지적: panel이 웹뷰 출력면(메뉴바/입력창 제외 섹터)을
     꽉 채워야 하는데 44dvh/360px 캡 때문에 작게 떴다. phone-overlay는
     msg-area와 같은 .app-body 자식이라(둘 다 절대/정적 위치라도 컨테이닝
     블록은 동일 .app-body) inset:0 하나로 topbar/input-wrap을 침범하지
     않으면서 msg-area rect과 동일한 영역을 그대로 채운다 -- 별도 bottom
     보정(var(--phone-input-h))이나 높이 캡이 필요 없다. */
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg-1);
  padding: var(--arc-surface-panel-padding, 8px);
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arc-surface-section-gap, 6px);
  color: var(--fg-1);
}

/* head-extra(파카 ↗ 등)는 항상 닫기 버튼 왼편에 붙는다(2026-07-19). */
.overlay-head [data-panel-head-extra] {
  margin-left: auto;
}
.overlay-head [data-panel-head-extra] ~ [data-panel-host-close="true"] {
  margin-left: 0;
}

.overlay-head[hidden] {
  display: none;
}

.wv-panel-title {
  font-weight: 600;
}

.wv-panel-body {
  margin-top: var(--arc-surface-section-gap, 6px);
}

.wv-panel-placeholder {
  margin: 0;
  padding: calc(var(--arc-surface-panel-padding, 8px) * 2);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--fg-2);
  text-align: center;
}

.wv-panel-status {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--fg-1);
}

.wv-panel-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.doc-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}

.doc-pane[hidden] {
  display: none;
}

.doc-pane-head {
  flex: 0 0 auto;
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
}

.doc-pane-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-pane-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg-0);
}

/* Desktop splitPreset projection (webchat-task.md §13): same phone-first
   WebViewCore elements, but desktop full state centers the webview column
   at the split width with the phone px width as its floor; feature panels
   open as split panes. */
/* phone: tmux3(3분할)는 데스크 전용 — 폰 메뉴에서 숨김 (준규님 2026-07-07 21:1x).
   메뉴 DOM은 폰/데스크 공유(서버 렌더)라 뷰포트에서 분기한다. */
@media (max-width: 719.98px) {
  .att-btn[data-menu-item="tmux3"] {
    display: none;
  }
}

@media (min-width: 720px) {
  .app[data-split-preset="full"],
  .app[data-split-preset="webview-1-3-tool-2-3"],
  .app[data-split-preset="webview-1-2-tool-1-2"],
  .app[data-split-preset="webview-2-3-tool-1-3"],
  .app[data-split-preset="webview-40-tool-25"],
  .app[data-split-preset="webview-30-doc-tool-25"],
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] {
    display: grid;
    grid-template-rows: auto auto 1px minmax(0, 1fr) auto auto;
    transition: grid-template-columns 180ms ease;
  }

  .app[data-split-preset="full"] {
    --desktop-webview-slide-offset: 0%;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-default-width))
      minmax(0, 1fr);
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] {
    --desktop-webview-slide-offset: 100%;
    grid-template-columns:
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(0, 1fr);
  }

  .app[data-split-preset="webview-1-2-tool-1-2"] {
    --desktop-webview-slide-offset: 100%;
    grid-template-columns:
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(0, 1fr);
  }

  .app[data-split-preset="webview-2-3-tool-1-3"] {
    --desktop-webview-slide-offset: 100%;
    grid-template-columns:
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(0, 1fr);
  }

  .app[data-split-preset="webview-40-tool-25"] {
    --desktop-webview-slide-offset: 37.5%;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(var(--arc-phone-width-px), 25%)
      minmax(0, 1fr);
  }

  .app[data-split-preset="webview-30-doc-tool-25"] {
    --desktop-webview-slide-offset: 100%;
    grid-template-columns:
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(0, 1fr)
      minmax(var(--arc-phone-width-px), 25%);
  }

  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] {
    --desktop-webview-slide-offset: 0%;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--desktop-webview-min-width), var(--desktop-webview-split-width))
      minmax(0, 1fr);
  }

  .app[data-split-preset="full"] .topbar-stack,
  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-stack,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-stack,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-stack,
  .app[data-split-preset="webview-40-tool-25"] .topbar-stack,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-stack,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .topbar-stack,
  .app[data-split-preset="full"] .arc-status-line,
  .app[data-split-preset="webview-1-3-tool-2-3"] .arc-status-line,
  .app[data-split-preset="webview-1-2-tool-1-2"] .arc-status-line,
  .app[data-split-preset="webview-2-3-tool-1-3"] .arc-status-line,
  .app[data-split-preset="webview-40-tool-25"] .arc-status-line,
  .app[data-split-preset="webview-30-doc-tool-25"] .arc-status-line,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .arc-status-line {
    grid-column: 1 / -1;
  }

  .app[data-split-preset="full"] .topbar-stack,
  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-stack,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-stack,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-stack,
  .app[data-split-preset="webview-40-tool-25"] .topbar-stack,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-stack,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .topbar-stack {
    display: contents;
  }

  .app[data-split-preset="full"] .topbar-row,
  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-row,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-row,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-row,
  .app[data-split-preset="webview-40-tool-25"] .topbar-row,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-row,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .topbar-row {
    background: var(--bg-1);
    min-width: 0;
  }

  .app[data-split-preset="full"] .topbar-row-monitor,
  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-row-monitor,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-row-monitor,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-row-monitor,
  .app[data-split-preset="webview-40-tool-25"] .topbar-row-monitor,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-row-monitor,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .topbar-row-monitor {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-row-session,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-row-session,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-row-session,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-row-session {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="webview-40-tool-25"] .topbar-row-session {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="full"] .topbar-row-session,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .topbar-row-session {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .arc-status-line,
  .app[data-split-preset="webview-1-2-tool-1-2"] .arc-status-line,
  .app[data-split-preset="webview-2-3-tool-1-3"] .arc-status-line,
  .app[data-split-preset="webview-30-doc-tool-25"] .arc-status-line {
    grid-column: 1;
    grid-row: 3;
  }

  .app[data-split-preset="full"] .arc-status-line,
  .app[data-split-preset="webview-40-tool-25"] .arc-status-line,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .arc-status-line {
    grid-column: 2;
    grid-row: 3;
  }

  .app-body[data-split-preset="full"],
  .app-body[data-split-preset="webview-1-3-tool-2-3"],
  .app-body[data-split-preset="webview-1-2-tool-1-2"],
  .app-body[data-split-preset="webview-2-3-tool-1-3"],
  .app-body[data-split-preset="webview-40-tool-25"],
  .app-body[data-split-preset="webview-30-doc-tool-25"],
  .app-body[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] {
    display: contents;
  }

  .app[data-split-preset="full"] .msg-area,
  .app[data-split-preset="webview-1-3-tool-2-3"] .msg-area,
  .app[data-split-preset="webview-1-2-tool-1-2"] .msg-area,
  .app[data-split-preset="webview-2-3-tool-1-3"] .msg-area,
  .app[data-split-preset="webview-40-tool-25"] .msg-area,
  .app[data-split-preset="webview-30-doc-tool-25"] .msg-area,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .msg-area {
    grid-row: 4;
    min-width: 0;
  }

  .app[data-split-preset="full"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-1-3-tool-2-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-1-2-tool-1-2"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-2-3-tool-1-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-40-tool-25"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-30-doc-tool-25"] .wv-tool-activity-lane,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .wv-tool-activity-lane {
    grid-row: 5;
    min-width: 0;
  }

  .app[data-split-preset="full"] .input-wrap,
  .app[data-split-preset="webview-1-3-tool-2-3"] .input-wrap,
  .app[data-split-preset="webview-1-2-tool-1-2"] .input-wrap,
  .app[data-split-preset="webview-2-3-tool-1-3"] .input-wrap,
  .app[data-split-preset="webview-40-tool-25"] .input-wrap,
  .app[data-split-preset="webview-30-doc-tool-25"] .input-wrap,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .input-wrap {
    grid-row: 6;
    width: auto;
    max-width: none;
    margin: 0;
    align-self: stretch;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .input-wrap {
    grid-column: 1;
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="webview-1-2-tool-1-2"] .input-wrap {
    grid-column: 1;
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="webview-2-3-tool-1-3"] .input-wrap {
    grid-column: 1;
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="webview-30-doc-tool-25"] .input-wrap {
    grid-column: 1;
    border-right: 1px solid var(--line-strong);
  }

  .app[data-split-preset="full"] .input-wrap,
  .app[data-split-preset="webview-40-tool-25"] .input-wrap,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .input-wrap {
    grid-column: 2;
    border-left: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
  }

  /* 전체화면 작성 모드(데스크): 본문 행(4)부터 끝까지·전 컬럼을 입력섹터가 차지.
     [data-split-preset] 한정으로 위 preset 규칙보다 명시도를 높여 순서 무관 승리. */
  .app[data-compose-fullscreen="true"][data-split-preset] .input-wrap {
    grid-row: 4 / -1;
    grid-column: 1 / -1;
    border-left: 0;
    border-right: 0;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .msg-area,
  .app[data-split-preset="webview-1-3-tool-2-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-1-2-tool-1-2"] .msg-area,
  .app[data-split-preset="webview-1-2-tool-1-2"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-2-3-tool-1-3"] .msg-area,
  .app[data-split-preset="webview-2-3-tool-1-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-30-doc-tool-25"] .msg-area,
  .app[data-split-preset="webview-30-doc-tool-25"] .wv-tool-activity-lane {
    grid-column: 1;
  }

  .app[data-split-preset="full"] .msg-area,
  .app[data-split-preset="full"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-40-tool-25"] .msg-area,
  .app[data-split-preset="webview-40-tool-25"] .wv-tool-activity-lane,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .msg-area,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .wv-tool-activity-lane {
    grid-column: 2;
  }

  .app[data-split-preset="full"] .phone-overlay,
  .app[data-split-preset="webview-1-3-tool-2-3"] .phone-overlay,
  .app[data-split-preset="webview-1-2-tool-1-2"] .phone-overlay,
  .app[data-split-preset="webview-2-3-tool-1-3"] .phone-overlay,
  .app[data-split-preset="webview-40-tool-25"] .phone-overlay,
  .app[data-split-preset="webview-30-doc-tool-25"] .phone-overlay,
  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay {
    grid-row: 2 / 7;
    min-width: 0;
    min-height: 0;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .phone-overlay,
  .app[data-split-preset="webview-1-2-tool-1-2"] .phone-overlay,
  .app[data-split-preset="webview-2-3-tool-1-3"] .phone-overlay,
  .app[data-split-preset="webview-40-tool-25"] .phone-overlay,
  .app[data-split-preset="webview-30-doc-tool-25"] .phone-overlay {
    grid-column: 3;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .phone-overlay,
  .app[data-split-preset="webview-1-2-tool-1-2"] .phone-overlay,
  .app[data-split-preset="webview-2-3-tool-1-3"] .phone-overlay {
    grid-column: 2;
  }

  .app[data-split-preset="webview-30-doc-tool-25"] .doc-pane {
    grid-column: 2;
    grid-row: 2 / 7;
    z-index: 2;
  }

  @media (max-width: 1339px) {
    .app[data-split-preset="webview-30-doc-tool-25"] .doc-pane {
      grid-column: 1 / 3;
      min-width: calc(var(--arc-phone-width-px) * 1.25);
      z-index: 3;
    }
  }

  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay-left {
    grid-column: 1;
  }

  .app[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay:not(.phone-overlay-left) {
    grid-column: 3;
  }

  .phone-overlay[data-panel-motion="slide"] {
    transform: translateX(100%);
    transition: transform 180ms ease;
    will-change: transform;
  }

  .phone-overlay[data-panel-motion="slide"][data-panel-open="true"] {
    transform: translateX(0);
  }

  .phone-overlay[data-panel-motion="slide"].is-closing {
    transform: translateX(100%);
  }

  .phone-overlay[data-panel-motion="instant"] {
    transition: none;
    transform: none;
  }

  .app[data-split-preset="webview-1-3-tool-2-3"] .topbar-row-session,
  .app[data-split-preset="webview-1-3-tool-2-3"] .arc-status-line,
  .app[data-split-preset="webview-1-3-tool-2-3"] .msg-area,
  .app[data-split-preset="webview-1-3-tool-2-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-1-3-tool-2-3"] .input-wrap,
  .app[data-split-preset="webview-1-2-tool-1-2"] .topbar-row-session,
  .app[data-split-preset="webview-1-2-tool-1-2"] .arc-status-line,
  .app[data-split-preset="webview-1-2-tool-1-2"] .msg-area,
  .app[data-split-preset="webview-1-2-tool-1-2"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-1-2-tool-1-2"] .input-wrap,
  .app[data-split-preset="webview-2-3-tool-1-3"] .topbar-row-session,
  .app[data-split-preset="webview-2-3-tool-1-3"] .arc-status-line,
  .app[data-split-preset="webview-2-3-tool-1-3"] .msg-area,
  .app[data-split-preset="webview-2-3-tool-1-3"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-2-3-tool-1-3"] .input-wrap,
  .app[data-split-preset="webview-40-tool-25"] .topbar-row-session,
  .app[data-split-preset="webview-40-tool-25"] .arc-status-line,
  .app[data-split-preset="webview-40-tool-25"] .msg-area,
  .app[data-split-preset="webview-40-tool-25"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-40-tool-25"] .input-wrap,
  .app[data-split-preset="webview-30-doc-tool-25"] .topbar-row-session,
  .app[data-split-preset="webview-30-doc-tool-25"] .arc-status-line,
  .app[data-split-preset="webview-30-doc-tool-25"] .msg-area,
  .app[data-split-preset="webview-30-doc-tool-25"] .wv-tool-activity-lane,
  .app[data-split-preset="webview-30-doc-tool-25"] .input-wrap {
    transition: transform 180ms ease;
    transform-origin: left center;
    will-change: transform;
  }

  .app[data-panel-transition="opening"][data-split-preset="webview-1-3-tool-2-3"] .topbar-row-session,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-3-tool-2-3"] .arc-status-line,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-3-tool-2-3"] .msg-area,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-3-tool-2-3"] .wv-tool-activity-lane,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-3-tool-2-3"] .input-wrap,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-3-tool-2-3"] .topbar-row-session,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-3-tool-2-3"] .arc-status-line,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-3-tool-2-3"] .msg-area,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-3-tool-2-3"] .wv-tool-activity-lane,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-3-tool-2-3"] .input-wrap {
    transform: translateX(var(--desktop-webview-slide-offset));
  }

  .app[data-panel-transition="opening"][data-split-preset="webview-1-2-tool-1-2"] .topbar-row-session,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-2-tool-1-2"] .arc-status-line,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-2-tool-1-2"] .msg-area,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-2-tool-1-2"] .wv-tool-activity-lane,
  .app[data-panel-transition="opening"][data-split-preset="webview-1-2-tool-1-2"] .input-wrap,
  .app[data-panel-transition="opening"][data-split-preset="webview-2-3-tool-1-3"] .topbar-row-session,
  .app[data-panel-transition="opening"][data-split-preset="webview-2-3-tool-1-3"] .arc-status-line,
  .app[data-panel-transition="opening"][data-split-preset="webview-2-3-tool-1-3"] .msg-area,
  .app[data-panel-transition="opening"][data-split-preset="webview-2-3-tool-1-3"] .wv-tool-activity-lane,
  .app[data-panel-transition="opening"][data-split-preset="webview-2-3-tool-1-3"] .input-wrap,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-2-tool-1-2"] .topbar-row-session,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-2-tool-1-2"] .arc-status-line,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-2-tool-1-2"] .msg-area,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-2-tool-1-2"] .wv-tool-activity-lane,
  .app[data-panel-transition="closing"][data-split-preset="webview-1-2-tool-1-2"] .input-wrap,
  .app[data-panel-transition="closing"][data-split-preset="webview-2-3-tool-1-3"] .topbar-row-session,
  .app[data-panel-transition="closing"][data-split-preset="webview-2-3-tool-1-3"] .arc-status-line,
  .app[data-panel-transition="closing"][data-split-preset="webview-2-3-tool-1-3"] .msg-area,
  .app[data-panel-transition="closing"][data-split-preset="webview-2-3-tool-1-3"] .wv-tool-activity-lane,
  .app[data-panel-transition="closing"][data-split-preset="webview-2-3-tool-1-3"] .input-wrap,
  .app[data-panel-transition="opening"][data-split-preset="webview-40-tool-25"] .topbar-row-session,
  .app[data-panel-transition="opening"][data-split-preset="webview-40-tool-25"] .arc-status-line,
  .app[data-panel-transition="opening"][data-split-preset="webview-40-tool-25"] .msg-area,
  .app[data-panel-transition="opening"][data-split-preset="webview-40-tool-25"] .wv-tool-activity-lane,
  .app[data-panel-transition="opening"][data-split-preset="webview-40-tool-25"] .input-wrap,
  .app[data-panel-transition="opening"][data-split-preset="webview-30-doc-tool-25"] .topbar-row-session,
  .app[data-panel-transition="opening"][data-split-preset="webview-30-doc-tool-25"] .arc-status-line,
  .app[data-panel-transition="opening"][data-split-preset="webview-30-doc-tool-25"] .msg-area,
  .app[data-panel-transition="opening"][data-split-preset="webview-30-doc-tool-25"] .wv-tool-activity-lane,
  .app[data-panel-transition="opening"][data-split-preset="webview-30-doc-tool-25"] .input-wrap,
  .app[data-panel-transition="closing"][data-split-preset="webview-40-tool-25"] .topbar-row-session,
  .app[data-panel-transition="closing"][data-split-preset="webview-40-tool-25"] .arc-status-line,
  .app[data-panel-transition="closing"][data-split-preset="webview-40-tool-25"] .msg-area,
  .app[data-panel-transition="closing"][data-split-preset="webview-40-tool-25"] .wv-tool-activity-lane,
  .app[data-panel-transition="closing"][data-split-preset="webview-40-tool-25"] .input-wrap,
  .app[data-panel-transition="closing"][data-split-preset="webview-30-doc-tool-25"] .topbar-row-session,
  .app[data-panel-transition="closing"][data-split-preset="webview-30-doc-tool-25"] .arc-status-line,
  .app[data-panel-transition="closing"][data-split-preset="webview-30-doc-tool-25"] .msg-area,
  .app[data-panel-transition="closing"][data-split-preset="webview-30-doc-tool-25"] .wv-tool-activity-lane,
  .app[data-panel-transition="closing"][data-split-preset="webview-30-doc-tool-25"] .input-wrap {
    transform: translateX(var(--desktop-webview-slide-offset));
  }

  .app-body[data-split-preset="webview-1-3-tool-2-3"] .msg-area {
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-1-3-tool-2-3"] .phone-overlay {
    flex: 1 1 var(--desktop-tool-fill-width);
  }

  .app-body[data-split-preset="webview-1-2-tool-1-2"] .msg-area {
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-1-2-tool-1-2"] .phone-overlay {
    flex: 1 1 var(--desktop-tool-fill-width);
  }

  .app-body[data-split-preset="webview-2-3-tool-1-3"] .msg-area {
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-2-3-tool-1-3"] .phone-overlay {
    flex: 1 1 var(--desktop-tool-fill-width);
  }

  .app-body[data-split-preset="webview-40-tool-25"] .msg-area {
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-40-tool-25"] .phone-overlay {
    flex: 1 1 25%;
  }

  .app-body[data-split-preset="webview-30-doc-tool-25"] .msg-area {
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-30-doc-tool-25"] .doc-pane {
    flex: 1 1 auto;
  }

  .app-body[data-split-preset="webview-30-doc-tool-25"] .phone-overlay {
    flex: 1 1 25%;
  }

  .app-body[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay-left {
    order: 1;
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .msg-area {
    order: 2;
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay:not(.phone-overlay-left) {
    order: 3;
    flex: 1 1 var(--desktop-webview-split-width);
  }

  .app-body[data-split-preset="webview-1-3-tool-2-3"] .phone-overlay,
  .app-body[data-split-preset="webview-1-2-tool-1-2"] .phone-overlay,
  .app-body[data-split-preset="webview-2-3-tool-1-3"] .phone-overlay,
  .app-body[data-split-preset="webview-40-tool-25"] .phone-overlay,
  .app-body[data-split-preset="webview-30-doc-tool-25"] .phone-overlay,
  .app-body[data-split-preset="tool-1-3-webview-1-3-tool-1-3"] .phone-overlay {
    /* inset:0 (base rule) is a no-op once position is static; width:auto
       lets the flex-basis percentages above own sizing instead of any
       leftover absolute-positioning width. */
    position: static;
    width: auto;
  }
}

/* parity-B2 lane (준규님 3차 지적 2026-07-05 최종 정정): boundary lane
   between the message area and the input footer for live tool-call /
   thinking / CLI activity status. 준규님 원문: "입력창 위에 메뉴바와
   말풍선 섹터 사이에 1줄로 도구호출 되는 얇은 공간 ... 공간조차
   배정되어있지 않다" — 이전 버전의 is-empty/[hidden] → display:none이
   원인(평시 공간 0). 3060 폰 실측(shared wv.css:357-386
   .wv-tmux-activity-bar: height 14px · font 9.5px · line-height 12px ·
   sticky bottom 2px · accent 7% bg · is-empty는 opacity 0.55로 dim만)
   그대로: **비어 있어도 항상 이 한 줄 높이를 차지한다** — display
   collapse 금지. display:flex가 [hidden] UA 스타일도 이기므로(3060과
   동일한 동작) 어떤 경로로도 접히지 않는다. Populated by
   arc_webchat_webviewcore.js noteToolActivitySignal/showToolActivityLane
   (+ tmux CLI activity via pollTmuxActivityStatusOnce). Sibling of
   msg-area's section and .input-wrap, last child of .app-body. */
.wv-tool-activity-lane {
  /* bar shell = 3060 wv.css:333-344 .wv-live-progress-bar verbatim, two
     documented deviations: ① explicit height 18px 추가 — 3060은 flex-basis만
     있어 block 부모(msg-area)에서 idle 시 h=0으로 접힘(실측), 준규님 판정
     기준은 "비어 있어도 항상 공간 차지"이므로 명시 height로 고정 ② 3060의
     margin-top -6px는 그쪽 스크롤영역 내부 padding 보정값이라 Alpha의
     밖-위치(lane이 .app-body 자식)에서는 msg-area를 침범해 제외. */
  display: block;
  flex: 0 0 18px;
  height: 18px;
  min-height: 0;
  max-height: 18px;
  margin: 0 4px 1px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.wv-tool-activity-lane.is-empty {
  opacity: 0.55;
}

/* inner pill = 3060 wv.css:304-318 + 345-348 verbatim (text-secondary →
   Alpha 대응 토큰 --fg-2). */
.wv-tool-activity-lane .wv-live-progress {
  display: block;
  width: calc(100% - 4ch);
  max-width: 100%;
  min-height: 0;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px auto;
  color: var(--fg-2);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  font-size: 10.5px;
  line-height: 1.15;
  overflow: hidden;
}

/* label = 3060 wv.css:323-332 verbatim. */
.wv-tool-activity-lane .wv-live-label {
  display: block;
  max-height: 1.2em;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* thinking/tool accents = 3060 wv.css:349-356 verbatim. */
.wv-tool-activity-lane .wv-live-thinking .wv-live-label {
  text-align: center;
  color: var(--accent);
}

.wv-tool-activity-lane .wv-live-tool-kind {
  color: var(--accent);
  font-weight: 600;
}

/* thinking per-char pulse = 3060 wv.css:445-450 + 465-468 verbatim. */
.wv-tool-activity-lane .wv-live-char {
  display: inline-block;
  animation: wv-live-char 1.25s ease-in-out infinite;
  animation-delay: calc(var(--i) * 65ms);
  transform-origin: 50% 70%;
}

@keyframes wv-live-char {
  0%, 70%, 100% { transform: scale(1); opacity: 0.72; }
  35% { transform: scale(1.18); opacity: 1; }
}

.input-wrap {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--line-strong);
  padding: var(--arc-surface-section-gap-compact, 4px) var(--arc-surface-panel-padding, 8px);
}

.input-shell {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.att-bar {
  display: flex;
  align-items: center;
  /* [확정 2026-07-19 준규님] 가로스크롤 축소 중간지점 — 원값 2px. */
  gap: 1px;
  /* 첫 버튼(파일업로드)이 화면 끝에 붙어 누르기 힘듦(준규님) — 왼쪽 여백. */
  padding-left: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.att-spacer {
  flex: 1 1 auto;
  min-width: 4px;
}

.att-sep {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
  /* [확정 2026-07-19 준규님] 원값 0 3px. */
  padding: 0 1px;
  user-select: none;
}

.att-btn {
  height: var(--arc-surface-control-height-compact, 20px);
  /* [확정 2026-07-19 준규님] 중간지점 18px(내부 좌우 2px) — 원값
     var(--arc-surface-control-min-width, 22px) (폰 20px). */
  width: 18px;
  min-width: 18px;
  padding: 0;
  border-radius: var(--arc-surface-control-radius, 4px);
  font-family: var(--font-mono);
  font-size: var(--arc-surface-control-font-size, 12px);
  flex: 0 0 auto;
}

/* 레인 교차 게이팅(준규님 2026-07-25): 게이트(arc_menu_lane_gate.js·서버 초기
   fold)가 접는 단추는 hidden 속성만으로 화면에서도 확실히 사라져야 한다.
   단추 표면 클래스가 display를 선언하면 UA [hidden](display:none)이 져서
   DOM은 접혔는데 화면엔 남는다 — .topbar-row-monitor[hidden]과 같은 계열.
   게이트 대상 = data-required-capability 단추 전체(메뉴바·프로젝트상태).
   (ID 셀렉터 금지 — 이 파일은 원시 색상표기(hex 등) 전면 금지 검사 대상.) */
[data-required-capability][hidden] {
  display: none !important;
}

/* 구분자도 같은 계약(준규님 2026-07-25 "| 까지 숨기면 돼") — 그룹 전체가 접힌
   자리의 att-sep은 게이트가 hidden을 세우며, display 선언에 지지 않게 고정. */
.att-sep[hidden] {
  display: none !important;
}

.send-btn {
  width: 36px;
  height: var(--arc-surface-control-height-compact, 20px);
  border-radius: calc(var(--arc-surface-control-radius, 4px) + 1px);
  font-weight: 700;
  flex: 0 0 36px;
}

.ta-row {
  display: flex;
  align-items: flex-end;
  gap: var(--arc-surface-section-gap, 6px);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--arc-surface-section-gap, 6px) var(--arc-surface-panel-padding, 8px);
  position: relative; /* 확대 토글 플로팅 기준 */
}

.ta {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--fg-0);
  font: inherit;
  min-height: 20px;
  max-height: calc(20px * 6 + 8px);
  /* 안쪽 우상단 확대 버튼과 첫 줄 텍스트가 겹치지 않게 오른쪽 여백 확보 */
  padding-right: calc(var(--arc-surface-control-min-width, 22px) + 4px);
}

/* 확대 토글: 입력창(.ta-row) 안쪽 우상단 플로팅(준규님 2026-07-18 19:30 —
   att-bar에 넣으면 폰 폭에서 가로 스크롤·전송버튼 가림). 글리프 크기·색·라인은
   att-btn 규격 그대로, 배경만 입력창색으로 채워 뒤 텍스트 비침을 막는다. */
.wv-compose-fullscreen-toggle {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  background: var(--bg-2);
}
/* 글리프 전환: 기본=expand, 켜짐(aria-pressed)=collapse(역전) */
.wv-compose-fullscreen-toggle .wv-cfs-ic-collapse {
  display: none;
}
.wv-compose-fullscreen-toggle[aria-pressed="true"] .wv-cfs-ic-expand {
  display: none;
}
.wv-compose-fullscreen-toggle[aria-pressed="true"] .wv-cfs-ic-collapse {
  display: inline-flex;
}

/* 전체화면 작성 모드(준규님 2026-07-18): 확대 버튼으로 입력창을 화면 전체로
   밀어올린다 — 메시지 섹터(app-body)를 오버레이로 덮지 않고 접어서 위로 밀어낸다.
   상단 에이전트/세션 바는 유지되고 입력섹터 툴바가 그 바로 아래에 붙는다.
   폰(flex): app-body 접힘 + input-wrap flex grow.
   데스크(grid, ≥720px): app-body는 display:contents라 display:none 하나로 서브트리
   전체 제거 + input-wrap이 본문 행(4)부터 끝까지·전 컬럼 span. */
.app[data-compose-fullscreen="true"] .app-body {
  display: none;
}
.app[data-compose-fullscreen="true"] .input-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app[data-compose-fullscreen="true"] .input-shell {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
}
.app[data-compose-fullscreen="true"] .ta-row {
  flex: 1 1 auto;
  min-height: 0;
}
.app[data-compose-fullscreen="true"] .ta {
  max-height: none;
  height: 100%;
}

/* 켜짐 표시: att-bar가 상단으로 붙으므로 확대 버튼도 잘 보인다 (JS가
   data-arc-surface-active 네온 프로젝션을 부여, 공용 로직). */

.wv-meta-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 2px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.2;
}

/* 준규님 2026-07-18 19:36 지시(2026-07-06 wrap 결정 뒤집음): 좌측 CLI 작동상태
   문자열이 길면 2줄로 밀려 입력 영역을 잠식한다 -> 반드시 1줄로 고정한다.
   ①내용: thinking/token/esc 힌트를 JS(trimCliActivityStatus)가 제거해 짧게,
   ②그래도 넘치면 여기서 끝을 잘라 1줄 보장(nowrap + ellipsis). 왼쪽이 남는
   공간을 전부 갖고 넘칠 때만 말줄임한다. */
.wv-meta-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.wv-meta-right {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: right;
}

/* 클로드 CLI 모델 토글(Fable/Opus) — 설정 버튼 옆 att-bar. 준규님 2026-07-13.
   활성 에이전트 adapter=claude_cli 일 때만 arc_model_switch.js가 노출한다. */
.wv-model-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 3px;
  padding-left: 4px;
  /* --line-1은 유령 토큰(정본=--line)이라 rgba fallback이 상시 발동하던 이중 결함 수정. */
  border-left: 1px solid var(--line);
}
.wv-model-switch[hidden] {
  display: none;
}

/* 준규님 2026-07-19: 자동 Fable 복귀 V체크 — 네이티브 네모박스 제거, 글리프 토글.
   미활성=회색(--fg-3). 활성색은 "현재 모델 토글 테마색"을 따른다(준규님 02:2x:
   Opus 시안 토글일 때 V만 빨강으로 튀면 안 됨). 모델 버튼 규칙과 대칭 —
   기본=accent(Opus 시안 등 현재 테마), Fable 활성일 때만 err(빨강)로 오버라이드.
   활성 모델은 arc_model_switch.js가 컨테이너 data-active-model 로 발행한다. */
.wv-model-anchor {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fg-3);
}
.wv-model-anchor::before {
  content: "\2713";
  display: block;
  font: 700 12px/18px var(--font-mono);
  text-align: center;
}
.wv-model-anchor:checked {
  color: var(--accent);
  text-shadow: 0 0 7px color-mix(in oklab, var(--accent) 55%, transparent);
}
/* Fable 활성 = 빨강. 모델 버튼 [data-model-id="claude-fable-5"] 가 accent 토큰을
   err 로 오버라이드하는 규칙과 대칭이다. */
.wv-model-switch[data-active-model="claude-fable-5"] .wv-model-anchor:checked {
  color: var(--err);
  text-shadow: 0 0 7px color-mix(in oklab, var(--err) 55%, transparent);
}
.wv-model-btn {
  appearance: none;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
/* 네온 = 정본 공용 로직 그대로(arc_active_control.css의 data-arc-surface-active
   프로젝션 — 마크업에서 상시 true). 여기서는 색 변수만 상태별 지정한다:
   Fable=err 테마색(변수 오버라이드로 정본 발광 공식이 err을 읽음),
   Opus=기본 accent(오버라이드 없음). 정본 효과가 바뀌면 자동 반영(준규님 지시). */
.wv-model-btn[data-model-id="claude-fable-5"] {
  /* raw hex fallback 금지(토큰 밖 색 도입 계약) — err은 토큰 SSOT에 항상 정의. */
  --accent: var(--err);
  --accent-2: var(--err);
}
.wv-model-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* S5 문서 다운로드 게이트 — 차단 시 2초 '보안문서 다운불가' 토스트
   (arc_webchat_file_open_router.js showDownloadBlockedToast, body 직속 전역).
   save-talk 팝업(arc-save-talk-popup) 톤 관례를 따르되 화면 중앙 고정. */
.arc-download-blocked-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--err) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in oklab, var(--err) 10%, var(--bg-1));
  color: var(--err);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--bg-0) 60%, transparent);
  pointer-events: none;
}

/* Paca S2 project-status: one shared topbar control and bounded PanelHost body
   for desktop/phone. Only first/final report transitions pulse, and the
   animation is finite; attention badges remain steady until explicit ack. */
/* 준규님 2026-07-19: 평상시 룩=save-talk 글리프 규격(att-btn 상속) — 자체
   사이징·accent(Fable 테마) active 프로젝션 제거. 상태색(attention/보고완료)만 유지. */
.wv-project-status-toggle {
  position: relative;
  cursor: pointer;
}

/* 준규님 2026-07-19 02:06: 상태색(attention 빨강 등)·테두리 전면 제거 — 버튼은
   항상 save-talk과 동일 톤, 열림 시 정본 active 프로젝션(테마색 네온)만.
   확인필요 신호는 아래 배지(err 고정)가 담당한다. */
.wv-project-status-toggle.is-pulse {
  animation: arc-project-status-pulse 560ms ease-out 2;
}

@keyframes arc-project-status-pulse {
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent);
  }
}

.wv-project-status-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border: 1px solid var(--bg-1);
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--bg-0);
  font: 700 9px/13px var(--font-mono);
  text-align: center;
}

.wv-project-status-panel {
  display: grid;
  gap: var(--arc-surface-section-gap, 8px);
  min-width: 0;
}

.wv-project-status-summary,
.wv-project-status-empty {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
}

.wv-project-status-run {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
}

.wv-project-status-run[data-unread="true"] {
  border-color: var(--accent-line);
}

.wv-project-status-run-title {
  overflow: hidden;
  color: var(--fg-0);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wv-project-status-stage,
.wv-project-status-attention {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.45;
}

.wv-project-status-attention {
  color: var(--err);
}

.wv-project-status-stale {
  justify-self: start;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--warn);
  font-size: 10px;
}

.wv-project-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wv-project-status-report,
.wv-project-status-ack,
.wv-project-status-dashboard {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--fg-1);
  font: inherit;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.wv-project-status-ack {
  border-color: var(--accent-line);
  color: var(--accent-2);
}

.wv-project-status-dashboard {
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .wv-project-status-toggle.is-pulse {
    animation: none;
  }
}