/* S-40 상담 시작·이전 대화 · S-41 대화(WP-24). 페이지 CSS 예산(pwa-budget) 때문에 규칙은 한 줄로 쓰고 주석은 이유만 남긴다 */
.lm-app[data-screen="S-40"] .cs-for-talk,.lm-app[data-screen="S-41"] .cs-for-start,.lm-app[data-screen="S-40"] [data-view="S-41"],.lm-app[data-screen="S-41"] [data-view="S-40"],.lm-app[data-screen="S-40"] .cs-composer{display:none}
.lm-app[data-locked] [data-view],.lm-app[data-locked] .cs-composer,.lm-app:not([data-locked]) .cs-lock{display:none}
/* 입력 바는 흐름 안의 sticky라 세 줄로 자라도 마지막 말풍선을 가리지 않는다. 몰입 셸의 고정 하단 여백은 쓰지 않는다 */
.lm-app[data-screen="S-41"]{display:flex;flex-direction:column;padding-bottom:0}
.lm-app[data-screen="S-41"]>.lm-main{flex:1 0 auto}
/* 상태 줄 28px 안의 버튼은 위아래로 8px씩 넓혀 누르는 영역 44px을 채운다 */
.cs-status-card{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;margin:-8px 0;padding:0;border:0;background:none;color:var(--lm-trust);font-size:12px;line-height:1.4;cursor:pointer}
.cs-status-card>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.15em}
.cs-start{display:grid;gap:12px}
/* 운영시간 밖 카드가 숨어 있으면 시작 안내가 첫 섹션이라 섹션 사이 여백을 받지 않는다 */
.lm-section[hidden]+.lm-section{margin-top:0}
.cs-facts{display:grid;gap:8px;margin-top:4px}
.cs-facts>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:8px;color:var(--lm-text);font-size:14px;line-height:1.5}
.cs-facts .lm-icon{height:1.5em;color:var(--lm-text-muted)}
.cs-facts>li:first-child .lm-icon{color:var(--lm-trust)}
.cs-start__action{display:grid;gap:8px;margin-top:12px}
.cs-start__action>.btn.primary{width:100%;min-height:48px}
.cs-offhours__text{margin-top:8px;color:var(--lm-text)}
.cs-call{color:var(--lm-primary);font-size:14px;line-height:20px;white-space:nowrap}
.cs-lock .lm-card__actions>.btn{width:100%}
.cs-forbidden{padding-top:48px}
.cs-skel{display:grid;gap:12px}
.cs-skel__center{justify-self:center}
.cs-skel__me{justify-self:end;width:64%}
.cs-skel__ai{width:92%}
.cs-head{display:grid;justify-items:center;gap:4px;margin-bottom:24px;text-align:center}
.cs-head__date{color:var(--lm-text-muted);font-size:12px;line-height:1.4}
.cs-head>.lm-visible{justify-content:center;color:var(--lm-text-muted)}
.cs-log{display:grid;gap:12px}
.cs-item{scroll-margin-top:calc(var(--lm-appbar-height) + var(--lm-statusline-height) + 12px);scroll-margin-bottom:120px}
.cs-me{display:grid;justify-items:end;gap:4px;justify-self:end;max-width:84%}
.cs-bubble{padding:12px 14px;border-radius:var(--lm-radius);background:var(--lm-bg-selected);color:var(--lm-text-strong);white-space:pre-wrap;text-align:left}
/* 보내지 못한 말풍선만 흐리게 둔다(DESIGN.md Chat Bubbles). 내용은 대기열에 그대로 있다 */
.cs-me[data-status="unsent"] .cs-bubble{opacity:.6}
.cs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 8px;min-height:20px}
.cs-meta{display:flex;align-items:center;gap:4px;color:var(--lm-text-muted);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums}
.cs-meta:empty{display:none}
.cs-me[data-status="saved"] .cs-meta>.lm-icon{color:var(--lm-success-text)}
.cs-me[data-status="unsent"] .cs-meta{color:var(--lm-warning-text)}
.cs-foot>.btn.quiet{min-height:44px;margin:-12px -12px -12px 0}
.cs-ai{justify-self:start;width:100%;max-width:92%;overflow:hidden;border:1px solid var(--lm-border);border-radius:var(--lm-radius);background:var(--lm-bg-surface)}
.cs-part+.cs-part{border-top:1px solid var(--lm-hairline)}
.cs-part>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:8px;min-height:44px;padding:0 14px;color:var(--lm-text);font-size:14px;line-height:1.5;list-style:none;cursor:pointer}
.cs-part>summary::-webkit-details-marker{display:none}
.cs-part>summary:focus-visible{outline-offset:-3px}
.cs-part>summary>.lm-icon{color:var(--lm-text-muted)}
.cs-part[open]>summary>.lm-icon{transform:rotate(180deg)}
.cs-part__count{color:var(--lm-text-muted);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums}
.cs-part__body{display:grid;gap:12px;padding:0 14px 14px}
.cs-text{color:var(--lm-text);white-space:pre-line}
.cs-axes{display:flex;flex-wrap:wrap;gap:4px}
.cs-rows{display:grid;margin-top:-8px}
.cs-rows>li+li{border-top:1px solid var(--lm-hairline)}
.cs-phrase{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:4px;padding:4px 0}
.cs-phrase__text{padding:6px 0;color:var(--lm-text-strong)}
.cs-copy{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-12px;padding:0;border:0;border-radius:var(--lm-radius);background:none;color:var(--lm-text-muted);cursor:pointer;transition:color var(--lm-duration-fast) var(--lm-ease-out),background-color var(--lm-duration-fast) var(--lm-ease-out)}
.cs-copy[data-copied]{color:var(--lm-success-text)}
.cs-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:56px;padding:8px 0;color:var(--lm-text)}
.cs-action__body{display:grid}
.cs-action__text{color:var(--lm-text-strong)}
.cs-action__go{color:var(--lm-primary);font-size:14px;line-height:1.5}
.cs-action>.lm-icon{color:var(--lm-text-muted)}
/* 서버가 안전 규칙으로 바꾼 문장은 AI 문장처럼 보이지 않게 muted와 아이콘으로 구분하고, 복사·이동을 붙이지 않는다 */
.cs-replaced{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;padding:6px 0;color:var(--lm-text-muted);font-size:14px;line-height:1.5}
.cs-replaced>.lm-icon{height:1.5em}
.cs-ai>.cs-meta{padding:0 14px 12px}
.cs-wait{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:44px;padding:0 14px;border:1px solid var(--lm-border);border-radius:var(--lm-radius);background:var(--lm-bg-surface);color:var(--lm-text-muted);font-size:14px;line-height:1.5}
/* 대기 점 3개는 스켈레톤과 같은 1.2s 반복 모션 하나로만 깜빡인다 */
.cs-dots{display:inline-flex;gap:4px;animation:cs-pulse var(--lm-duration-skeleton) infinite}
.cs-dots>span{width:6px;height:6px;border-radius:var(--lm-radius-inner);background:var(--lm-text-muted)}
@keyframes cs-pulse{50%{opacity:.35}}
.cs-fail{display:grid;gap:4px;justify-self:start;width:100%;max-width:92%;padding:14px;border:1px solid var(--lm-border);border-radius:var(--lm-radius);background:var(--lm-bg-surface);color:var(--lm-text)}
.cs-fail__head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;color:var(--lm-text-strong)}
.cs-fail__head>.lm-icon{height:1.6em;color:var(--lm-danger)}
.cs-fail[data-tone="limit"] .cs-fail__head>.lm-icon{color:var(--lm-warning-text)}
.cs-fail__desc,.cs-fail__actions,.cs-fail>.lm-alert__more{padding-left:26px}
.cs-fail__desc{color:var(--lm-text-muted);font-size:14px;line-height:1.5}
.cs-fail__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.cs-fail__actions>.btn.quiet{margin-left:0}
.cs-risk{display:grid;gap:8px}
.cs-risk__text{color:var(--lm-text)}
.cs-risk__hours{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;color:var(--lm-text);font-size:14px;line-height:1.5}
.cs-risk__hours>.lm-icon{height:1.5em;color:var(--lm-text-muted)}
.cs-risk>.lm-helpcard__notice{margin-top:0}
.cs-risk>.lm-card__rows{margin-top:8px}
/* 알리기는 카드의 주 버튼(폭 100%)이고 운영시간·전달 범위는 버튼 아래 설명 줄이다. 완료 행은 전화 행과 같은 행 문법으로 그 자리에 온다 */
.cs-risk__notify{display:grid;gap:8px;margin:8px 0}
.lm-app .cs-notify{width:100%;min-height:48px}
.cs-risk__meta{display:grid;color:var(--lm-text-muted);font-size:14px;line-height:1.5}
.cs-risk__done{margin-bottom:8px;border-bottom:1px solid var(--lm-hairline)}
.cs-notified>.lm-icon:first-child{color:var(--lm-success-text)}
.cs-composer{position:sticky;bottom:0;z-index:var(--lm-z-bar);display:grid;gap:4px;padding:8px 16px calc(12px + var(--lm-safe-bottom));border-top:1px solid var(--lm-border);background:var(--lm-bg-page)}
.cs-composer__label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--lm-text-muted);font-size:14px;line-height:1.5}
.cs-composer__label>[data-slot="char-count"][data-near]{color:var(--lm-warning-text)}
.cs-composer__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
.lm-app .cs-composer textarea{min-height:48px;padding:10px 12px;font-size:16px;line-height:1.6;resize:none}
.lm-app .cs-send{min-height:48px;padding:0 14px}
@media (hover:hover) {
.cs-copy:hover{background:var(--lm-bg-subtle);color:var(--lm-text-strong)}
.cs-part>summary:hover{background:var(--lm-bg-subtle)}
}
@media (prefers-reduced-motion:reduce) {
.cs-dots{animation:none}
.cs-copy{transition:none}
}