/* Matterpeek — dim green phosphor TUI. 채팅 버블/카드/아바타/그림자 없음. */
:root {
  --bg: #0b0f0b;
  --panel: #0e140e;
  --line: #1d291d;
  --fg: #7ea87e;
  --fg-dim: #4e6b4e;
  --fg-bright: #a3c9a3;
  --warn: #b08a4a;

  /* 로그 구분: 상대는 green phosphor, 나는 amber phosphor (옛 이중인광 터미널) */
  --rx: #a8cfa8;
  --rx-dim: #5f8a5f;
  --tx: #b39a63;
  --tx-dim: #7d6a45;

  /* 로그와 입력 라인이 같은 글자 크기를 쓰도록 한 곳에서 관리한다 */
  --log-size: 12px;
  --log-leading: 1.35;
  --log-tracking: -0.03em;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Roboto Mono", "Noto Sans Mono", "Noto Sans Mono CJK KR", "Noto Sans Mono CJK",
    "DejaVu Sans Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-ligatures: none;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  -webkit-text-size-adjust: 100%;
}

/* 1. 상단 상태줄 */
header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 10px;
  padding-top: max(5px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.hrow::-webkit-scrollbar { display: none; }

.hrow.sub { font-size: 11px; }

.rstate { display: inline-flex; align-items: center; }

.title {
  color: var(--fg-bright);
  letter-spacing: 0.14em;
}

.stat { color: var(--fg-dim); }
.stat b { font-weight: normal; color: var(--fg); }
.stat.warn b { color: var(--warn); }

#wipe {
  margin-left: auto;
  position: sticky;
  right: 0;
  flex: none;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 1px 6px;
  background: var(--panel);
  box-shadow: -8px 0 8px -6px var(--panel);
}

#wipe:hover { color: var(--fg-bright); border-color: var(--fg-dim); }

main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.view { flex: 1; min-height: 0; }
.hidden { display: none !important; }

/* 잠금 화면 */
.center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  max-width: 340px;
  margin: 0 auto;
  width: 100%;
}

.center h1 {
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.3em;
  color: var(--fg-bright);
  margin: 0;
}

.banner {
  color: var(--fg-dim);
  white-space: pre-line;
  margin: 0;
  min-height: 2.9em;
}

.meta {
  color: var(--fg-dim);
  width: 100%;
}

.meta b {
  font-weight: normal;
  color: var(--fg);
}

/* presence indicator: 본문 13px보다 약간 작게, baseline에 맞춘다 */
.pres {
  width: 10px;
  height: 10px;
  vertical-align: -1px;
  margin-right: 5px;
}

/* REMOTE / LAST RX / PIN 의 ':' 세로 정렬 */
.k {
  display: inline-block;
  width: 8ch;
  flex: none;
}

.c {
  margin-right: 8px;
  flex: none;
}

.field {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  color: var(--fg-dim);
}

.ver {
  color: var(--fg-dim);
  letter-spacing: 0;
  font-size: 11px;
}

.center input {
  flex: 1 1 auto;
  min-width: 0; /* Samsung Internet 등에서 input이 컨테이너를 뚫고 나가는 것 방지 */
  background: #000;
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 16px; /* 모바일 확대 방지 */
  padding: 5px 8px;
  letter-spacing: 0.3em;
}

.center input:focus,
#input:focus { outline: 1px solid var(--fg-dim); }

.center button {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  padding: 5px 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.center button:hover:not(:disabled) { color: var(--fg-bright); border-color: var(--fg-dim); }
.center button:disabled { color: var(--fg-dim); cursor: default; }

/* passkey 등록 기기: device unlock을 primary로 */
.center button.primary {
  color: var(--fg-bright);
  border-color: var(--fg-dim);
}

#pin-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#passkey-required {
  color: var(--fg-dim);
  font-size: 11px;
  margin: 0;
}

#install {
  align-self: center;
  width: auto;
  border: none;
  background: none;
  color: var(--fg-dim);
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
}

#install:hover { color: var(--fg); }

.divider {
  width: 100%;
  border-top: 1px dashed var(--line);
  margin: 4px 0;
}

.error { color: var(--warn); min-height: 1.4em; margin: 0; }

/* 2. 메시지 로그 */
.chat {
  display: flex;
  flex-direction: column;
  /* double-tap zoom과의 충돌만 줄인다. pinch zoom / 세로 스크롤은 그대로. */
  touch-action: manipulation;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  font-size: var(--log-size);
  line-height: var(--log-leading);
  letter-spacing: var(--log-tracking);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  touch-action: pan-y pinch-zoom;
}

/* double-tap purge 버튼 */
.purge {
  position: fixed;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--fg-dim);
  color: var(--fg-bright);
  font: inherit;
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
}

.line { display: block; }
.line .ts { color: var(--fg-dim); }

.line.remote .who { color: var(--rx-dim); }
.line.remote .text { color: var(--fg-bright); }

/* 채팅앱처럼 보이지 않도록 본문은 모노. 화자 구분은 라벨 색으로만. */
.line.local .who { color: var(--tx); }
.line.local .text { color: var(--fg); }

.empty { color: var(--fg-dim); }

/* 과거 히스토리와 LIVE 세션 경계. 조용하게. */
.live {
  color: var(--fg-dim);
  opacity: 0.65;
  margin: 4px 0;
}

/* unicode emoji는 본문보다 아주 약간 크게 */
.uemoji {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -1px;
}

/* custom emoji 이미지가 줄 높이를 키우지 않도록 고정 */
.cemoji {
  height: 1.25em;
  width: auto;
  max-width: 2.5em;
  vertical-align: -0.22em;
  object-fit: contain;
}

/* 새 메시지 알림: 입력창 바로 위, 화면을 가리지 않는 한 줄 */
.newbar {
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.newbar .cmd {
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 1px 8px;
  margin-bottom: 4px;
}

/* 3. 입력 라인 */
/* emoji: shortcode 목록. picker popup이 아니라 텍스트 목록이다. */
.emoji {
  padding: 6px 16px;
  max-height: 34vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.emoji .render {
  display: block;
  color: var(--fg);
  padding: 2px 0 6px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 6px;
  width: 100%;
  text-align: right;
}

.emoji button {
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--log-size);
  letter-spacing: var(--log-tracking);
  line-height: var(--log-leading);
  padding: 1px 0;
  cursor: pointer;
}

.emoji button:hover { color: var(--fg-bright); }

#composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.prompt {
  color: var(--fg-dim);
  user-select: none;
  touch-action: manipulation;
  font-size: var(--log-size);
  line-height: 1.4;
  /* 입력창과 같은 세로 박스 구조(테두리+패딩)를 가져야 글자 높이가 정확히 맞는다 */
  border: 1px solid transparent;
  padding: 5px 0;
  margin: 0;
  flex: none;
  align-self: center;
}

#input {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 96px;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  /* 메시지 로그와 동일한 타이포. 모바일 전용 크기를 따로 두지 않는다. */
  font-size: var(--log-size);
  line-height: var(--log-leading);
  letter-spacing: var(--log-tracking);
  padding: 0;
}

/* placeholder도 입력 글자와 동일한 위치·크기 */
#input::placeholder {
  color: var(--fg-dim);
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* command 버튼: bracket 표기 자체가 버튼이다. 배경/테두리/둥근 모서리 없음. */
.cmd {
  /* 모바일에서 길게 눌러도 선택/공유 칩이 뜨지 않도록 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: var(--log-size);
  letter-spacing: var(--log-tracking);
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.cmd:hover:not(:disabled) { color: var(--fg); }
.cmd:active:not(:disabled) { color: var(--fg-bright); }
.cmd:disabled { color: var(--line); cursor: default; }

#send, #emoji-toggle { color: var(--fg); }

/* 프롬프트·입력과 같은 한 줄에 정렬 */
#emoji-toggle, #send {
  flex: none;
  align-self: center;
  line-height: 1.4;
  border: 1px solid transparent;
  padding: 5px 0;
}

/* panel 열림 = 색. 렌더링 모드는 라벨([ EMJ ] / [ EMJ+ ])로 표시한다. */

#emoji-toggle.on { color: var(--fg-bright); }

.footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px max(6px, env(safe-area-inset-bottom));
  background: var(--panel);
}

.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.link:hover { color: var(--fg); }
.note { color: var(--fg-dim); font-size: 11px; }