/* 대화 아키타입 (모바일 재구성) — SC-M30 운영 에이전트 …
 *
 * 캔버스는 카드 여섯 개를 격자에 폈지만 대화는 격자가 아니다 —
 * 묻고 답하는 순서가 곧 화면 구조다. 그래서 말풍선으로 세우고 근거를 답변에 붙인다.
 * 이 화면의 핵심 판단(16-H 2-1): **제안과 실행은 다르다.**
 * 에이전트가 액션을 표시하는 것과 그 액션이 데이터를 바꾸는 것은 분리 후보이고,
 * 그건 화면에서 "제안 카드는 승인 화면으로 보낼 뿐 여기서 실행하지 않는다"로 나타나야 한다.
 *
 * 클래스: .chips / .q / .a / .basis / .prop / .entry
 * (.q 는 screen_search.css 에 이미 있지만 .m--chat 스코프라 부딪치지 않는다.
 *  .ask 는 .m--shift 가 쓰고 있어 피했다.)
 */

.m--chat .head { background: #fff; }
.m--chat .hd-row { display: flex; align-items: center; justify-content: space-between;
                   padding: .55rem .9rem .45rem; }
.m--chat .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m--chat .mini { min-height: 30px; display: inline-flex; align-items: center; gap: .3rem;
                 padding: 0 .6rem; border: 1px solid var(--grid); font-size: .72rem;
                 color: var(--ink-2); text-decoration: none; }

/* 무엇을 물어도 되는지 모르면 아무도 안 쓴다 (H-01) */
.m--chat .chips { display: flex; gap: .25rem; padding: 0 .9rem .55rem; overflow-x: auto; }
.m--chat .chips button { flex: none; height: 32px; padding: 0 .7rem; border-radius: 999px;
                         border: 1px solid var(--grid); background: #fff; font: inherit;
                         font-size: .74rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.m--chat .chips button.on { background: var(--ink); border-color: var(--ink); color: #fff;
                            font-weight: 600; }

.m--chat .plan { background: var(--sheet); padding: .8rem 0 0; }

.m--chat .q { display: block; max-width: 82%; margin: 0 .9rem .6rem auto; padding: .55rem .75rem;
              background: var(--ink); color: #fff; font-size: .88rem; font-weight: 600;
              letter-spacing: -.02em; line-height: 1.45; }
.m--chat .a { display: block; margin: 0 .9rem .1rem; padding: .65rem .8rem; background: #fff;
              border: 1px solid var(--grid); font-size: .84rem; line-height: 1.6;
              color: var(--ink-2); }
.m--chat .a b { color: var(--ink); font-weight: 700; }
.m--chat .a .lead { display: block; font-size: .95rem; font-weight: 700; color: var(--ink);
                    letter-spacing: -.025em; margin-bottom: .25rem; }

/* 근거 — 답변에 붙어 있어야 한다. 떨어뜨리면 아무도 안 본다 (H-04) */
.m--chat .basis { display: block; margin: 0 .9rem .7rem; padding: .5rem .8rem .6rem;
                  background: #f2f8f6; border-left: 3px solid var(--live); }
.m--chat .basis .h { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
                     color: #3f7a6f; }
.m--chat .basis .row2 { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem;
                        font-size: .74rem; color: var(--ink-2); }
.m--chat .basis .row2 b { font-size: .95rem; font-weight: 800; letter-spacing: -.03em;
                          min-width: 3.4rem; }
.m--chat .basis .row2 b.dn { color: var(--alert); }
.m--chat .basis .row2 b.up { color: var(--live); }
.m--chat .basis .src2 { display: block; font-size: .66rem; color: #5b7a74; line-height: 1.5;
                        margin-top: .35rem; }

/* 액션 제안 — 여기서 실행되지 않는다는 것이 보여야 한다 (H-03) */
.m--chat .prop { display: block; margin: 0 .9rem .5rem; padding: .6rem .8rem .65rem;
                 background: #fff; border: 1px solid var(--grid); border-left: 3px solid var(--wait-pay); }
.m--chat .prop .n { display: block; font-size: .88rem; font-weight: 700; letter-spacing: -.02em; }
.m--chat .prop > span { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.55;
                        margin-top: .2rem; }
.m--chat .prop > span b { color: var(--ink); font-weight: 700; }
.m--chat .prop .go2 { display: block; width: 100%; min-height: 40px; margin-top: .5rem;
                      border: 1px solid var(--ink); background: #fff; color: var(--ink);
                      font: inherit; font-size: .8rem; font-weight: 700; text-align: center;
                      text-decoration: none; line-height: 38px; }

.m--chat .rule { margin: .8rem .9rem 0; padding: .55rem .7rem; background: #f4f2ee;
                 font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.m--chat .rule b { color: var(--ink); font-weight: 700; }
.m--chat .rule.soft { background: none; border: 1px dashed var(--grid); color: var(--ink-3); }
.m--chat .rule a { color: var(--live); font-weight: 700; }
.m--chat .undecided { display: block; width: 100%; margin: .4rem 0 0; min-height: 38px;
                      border: 1px dashed var(--ink-3); background: none; color: var(--ink-3);
                      font: inherit; font-size: .74rem; font-weight: 600; }
.m--chat .undecided i { font-style: normal; font-size: .62rem; opacity: .8; margin-left: .25rem; }

.m--chat .pad { height: 2.5rem; }
.m--chat .kx { opacity: .72; }

/* 입력줄 — 끊기면 여기가 죽는다. 그 사실이 보여야 한다 */
.m--chat .entry { position: sticky; bottom: 0; display: flex; align-items: center; gap: .5rem;
                  padding: .5rem .9rem; background: #fff; border-top: 1px solid var(--grid); }
.m--chat .entry .box { flex: 1; min-height: 42px; display: flex; align-items: center;
                       padding: 0 .7rem; border: 1px dashed var(--grid);
                       font-size: .8rem; color: var(--ink-3); }
.m--chat .entry .send { min-height: 42px; padding: 0 1rem; border: 0; background: var(--grid);
                        color: #fff; font: inherit; font-size: .82rem; font-weight: 700; }