/* 업무 봇 체험 전용 배치. 색은 사이트 토큰만 쓴다. */
.b-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.b-chat, .b-inbox { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.b-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.b-head h2 { font-size: 1.0625rem; font-weight: 800; }
.b-log { display: grid; align-content: start; gap: 12px; height: 420px; padding: 14px; overflow-y: auto; overflow-x: hidden; list-style: none; }
.b-row { display: grid; gap: 4px; max-width: 92%; }
.b-row.is-me { justify-self: end; justify-items: end; }
.b-who { color: var(--ink-2); font-size: var(--t-s); font-weight: 650; }
.b-bubble { padding: 10px 14px; border-radius: 14px; background: var(--paper-2); line-height: 1.5; overflow-wrap: anywhere; }
.b-row.is-me .b-bubble { background: var(--sun); }
.b-card { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.b-card .d-kpi { background: var(--paper-2); }
.b-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-typing { min-height: 22px; padding: 0 14px 4px; color: var(--ink-2); font-size: var(--t-s); }
.b-cmds { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper-2); }
.b-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.b-grp-t { min-width: 64px; color: var(--ink-2); font-size: var(--t-s); font-weight: 700; }
.b-chip { min-height: 44px; padding: 0 12px; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-s); font-weight: 650; cursor: pointer; }
.b-chip:hover { background: var(--sun-soft); }
.b-chip:disabled { color: var(--ink-2); cursor: not-allowed; }
.b-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.b-hint { padding: 0 14px 12px; }
.b-inbox-list { display: grid; gap: 10px; padding: 12px; list-style: none; }
.b-req { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.b-req.is-pending { border-color: var(--ink); }
.b-req-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b-empty { padding: 14px; color: var(--ink-2); font-size: var(--t-s); }

@media (max-width: 860px) {
  .b-wrap { grid-template-columns: minmax(0, 1fr); }
  .b-row { max-width: 100%; }
}
@media (max-width: 480px) {
  .b-kpis { grid-template-columns: minmax(0, 1fr); }
}