/* ============================================================
   3열 · AI직원 대화창

   AI직원은 따로 떠 있는 위젯이 아니다. **이 열의 입력창이 AI직원이고**,
   컨텍스트 인식 · 대신 진행 · 지식 답변이 모두 여기서 일어난다.

   이 앱의 AI직원은 **금액을 만들지 않는다**. 서버의 정수 산술을 부르고 그 결과를
   설명한다 (설계문서.md §4-1). 머리글 아래 컨텍스트 스트립이 그것을 드러낸다.
   ============================================================ */

.stream {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bg-panel); border-left: 1px solid var(--border-1); overflow: hidden;
}

.stream-head {
  flex: 0 0 auto; padding: 9px 13px 8px;
  border-bottom: 1px solid var(--border-1); background: var(--bg-sidebar);
}
.stream-head .sh-t { display: flex; align-items: center; gap: 8px; }
.stream-head .sh-av {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: var(--r-6); background: var(--bg-panel);
  border: 1px solid var(--border-1); font-size: var(--fs-13);
}
.stream-head h2 { font-size: var(--fs-13); font-weight: 650; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-head .live {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 2px 8px; border-radius: 20px;
  background: var(--warning-subtle); color: var(--warning);
  font-size: var(--fs-10); font-weight: 700;
}
.stream-head .live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: stpulse 1.1s infinite; }
.stream-head .sh-s { font-size: var(--fs-10); color: var(--text-3); margin-top: 4px; line-height: 1.45; }

/* 컨텍스트 스트립 — AI직원이 지금 무엇을 알고 있는지 */
.stream-ctx {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 7px 12px; border-bottom: 1px solid var(--border-1);
  background: var(--accent-subtle);
}
.stream-ctx:empty { display: none; }
.stream-ctx .cx {
  padding: 1px 7px; border-radius: 20px;
  background: var(--bg-panel); border: 1px solid var(--accent-border);
  font-size: var(--fs-10); font-weight: 600; color: var(--accent-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stream-ctx .cx[data-s="unset"] {
  border-color: var(--warning-border); background: var(--warning-subtle); color: var(--warning);
}

.beats { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; }

/* --- beat --- */
.bt { margin-bottom: 11px; }
.bt-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bt-h .who {
  display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto;
  border-radius: var(--r-4); font-size: var(--fs-10); font-weight: 700;
  background: var(--bg-subtle); color: var(--text-2);
}
.bt-h .who.ai { background: var(--accent); color: #fff; }
.bt-h .nm { font-size: var(--fs-11); font-weight: 650; }
.bt-h .tm { margin-left: auto; font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.bt-b {
  padding: 9px 11px; border-radius: var(--r-8);
  background: var(--bg-sidebar); font-size: var(--fs-12); line-height: 1.7; color: var(--text-1);
}
.bt.me .bt-b { background: var(--accent-subtle); }
.bt-b b { font-weight: 650; }
.bt-b code { background: var(--bg-panel); padding: 0 4px; border-radius: 3px; font-size: .94em; }
.bt-b .amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 도구 호출 — 「무엇을 불렀는가」가 보여야 한다. 금액을 직원이 만들지 않는다는
   것이 시연에서 드러나는 자리다. */
.bt-tool {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: var(--r-6);
  background: var(--bg-panel); border: 1px dashed var(--border-2);
  font-size: var(--fs-11); color: var(--text-2);
}
.bt-tool .tc { font-weight: 650; color: var(--accent-text); font-family: ui-monospace, monospace; font-size: var(--fs-10); }
.bt-tool .tr { margin-left: auto; font-size: var(--fs-10); color: var(--text-3); }

/* 결과 카드 */
.bt-res {
  border: 1px solid var(--accent-border); border-radius: var(--r-8);
  background: var(--bg-panel); overflow: hidden;
}
.bt-res .rh {
  padding: 7px 11px; background: var(--accent-subtle);
  font-size: var(--fs-11); font-weight: 650; color: var(--accent-text);
}
.bt-res .rb { padding: 9px 11px; }
.bt-res .rr { display: flex; gap: 10px; padding: 3px 0; font-size: var(--fs-11); }
.bt-res .rr .rk { flex: 1; min-width: 0; color: var(--text-2); }
.bt-res .rr .rv { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 액션 버튼 */
.bt-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* 타이핑 */
.typing { display: flex; gap: 3px; padding: 10px 12px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: tdot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

/* 작업 진행률 */
.stream-foot { flex: 0 0 auto; padding: 0 12px; }
.stream-foot:empty { display: none; }
.job {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; margin-bottom: 8px;
  border: 1px solid var(--accent-border); border-radius: var(--r-8);
  background: var(--accent-subtle);
}
.job .jl { flex: 1; min-width: 0; font-size: var(--fs-11); font-weight: 650; color: var(--accent-text); }
.job .jb { flex: 0 0 74px; height: 4px; border-radius: 3px; background: rgba(22, 104, 179, .18); overflow: hidden; }
.job .jb i { display: block; height: 100%; background: var(--accent); transition: width .35s ease; }
.job .jn { flex: 0 0 auto; font-size: var(--fs-10); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* --- 입력창 --- */
.composer { flex: 0 0 auto; padding: 8px 12px 10px; border-top: 1px solid var(--border-1); background: var(--bg-sidebar); }
.cchips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.cchips:empty { display: none; }
.cchip {
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--border-2); background: var(--bg-panel);
  font: inherit; font-size: var(--fs-10); font-weight: 600; color: var(--text-2); cursor: pointer;
}
.cchip:hover { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }

.cbox {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 7px 8px; border: 1px solid var(--border-2); border-radius: var(--r-8);
  background: var(--bg-panel);
}
.cbox:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.cbox textarea {
  flex: 1; min-width: 0; max-height: 128px;
  border: 0; outline: none; resize: none; background: transparent;
  font: inherit; font-size: var(--fs-12); line-height: 1.6; color: var(--text-1);
}
.cbox textarea::placeholder { color: var(--text-3); }

.chint { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 9.5px; color: var(--text-3); flex-wrap: wrap; }
.chint .kbd {
  padding: 0 4px; border: 1px solid var(--border-2); border-radius: 3px;
  background: var(--bg-panel); font-size: 9px; font-weight: 600;
}
.chint .ctail { margin-left: auto; }
.cdisc { margin-top: 5px; font-size: 9.5px; color: var(--text-3); line-height: 1.5; }