/* 알림·연결 상태·더 보기·찾은 곳 이동처럼 화면 상태를 알려 주는 작은 요소들 */

/* 화면 위쪽에 잠깐 뜨는 알림(입력창 안내 문구를 빌리지 않는다) */
.toast-stack {
  position:fixed; z-index:2000; top:calc(14px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  display:grid; gap:8px; width:min(440px,calc(100vw - 24px)); pointer-events:none;
}
.toast {
  padding:11px 16px; border-radius:12px; border:1px solid #e5c4ed66;
  background:#2e2335f2; color:#fff3ff; font-size:13px; line-height:1.55; overflow-wrap:anywhere;
  box-shadow:0 10px 30px #10081966; animation:toast-in .2s ease-out; transition:opacity .3s, translate .3s;
}
.toast.leaving { opacity:0; translate:0 -6px; }
@keyframes toast-in { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }

/* 실시간 연결 상태 */
.conn-status {
  position:fixed; z-index:1999; top:calc(10px + env(safe-area-inset-top)); right:14px;
  padding:7px 13px; border-radius:99px; font-size:12px; font-weight:600;
  box-shadow:0 6px 20px #10081955;
}
.conn-status.lost { background:#7a2f3ef0; color:#ffe9ee; border:1px solid #ffb3c255; }
.conn-status.ok { background:#2f5a43f0; color:#e6fff0; border:1px solid #a8e6c255; }
.conn-status[hidden] { display:none; }

/* 대화 목록·기록 더 보기 */
.conv-more, .load-older {
  display:block; width:calc(100% - 16px); margin:8px auto; padding:9px 12px; border-radius:10px;
  border:1px dashed #c9a8d466; background:#ffffff08; color:#d9c3e6; font:inherit; font-size:12px; cursor:pointer;
}
.conv-more:hover, .load-older:hover { background:#ffffff14; border-color:#e3cdee99; }
.load-older { width:auto; padding:8px 18px; border-radius:99px; }
.conv-search-retry {
  margin-left:4px; padding:3px 10px; border-radius:99px; border:1px solid #c9a8d488;
  background:transparent; color:#f1e2f8; font:inherit; font-size:12px; cursor:pointer;
}

/* 대화 기록에서 찾은 곳 사이 이동 */
.search-nav { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.search-nav[hidden] { display:none; }
.search-nav-count { font-size:11px; color:#e9d6f1; max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search-nav button {
  width:28px; height:28px; border-radius:8px; border:1px solid #c9a8d477;
  background:#ffffff10; color:#f6ebfb; font-size:14px; cursor:pointer;
}
.search-nav button:hover { background:#ffffff22; }

/* 휴대폰에서는 초상화를 줄여 답변 폭을 넓힌다 */
@media (max-width:600px) {
  .messages .dialogue-portrait { width:56px; height:88px; }
  .messages .user-msg { margin-left:40px; max-width:calc(100% - 40px); }
}
@media (prefers-reduced-motion:reduce) { .toast { animation:none; transition:none; } }

/* 대화 기록 폭 고정: 긴 질문 요약·링크·표가 칸을 밀어내 오른쪽이 잘리던 문제(휴대폰·폴드).
   질문 묶음은 화면 폭 한 칸으로 두고, 그 안의 카드와 말풍선이 줄어들 수 있게 한다 */
.messages .turn { grid-template-columns:minmax(0,1fr); }
.messages .thread, .messages .turn > *, .messages .responses, .messages .card.dialogue-row, .messages .speech-bubble { min-width:0; }
.messages .speech-bubble { flex:1 1 auto; }
.messages .body, .messages .user-msg { overflow-wrap:anywhere; word-break:keep-all; }
.messages .body pre, .messages .body table { max-width:100%; overflow-x:auto; }
.messages .body img { max-width:100%; height:auto; }

/* 휴대폰: 초상화를 옆으로 자르지 않고 인물 전체 폭이 보이게(위에서부터 허리께까지, 아래는 흐리게) */
@media (max-width:600px) {
  .messages .dialogue-portrait { width:60px; height:104px; }
  .messages .portrait-art { -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
  .messages .portrait-art img, .messages .portrait-art .portrait-motion,
  .messages .portrait-art img[src*="/characters/codex/"] { width:100%; top:0; }
  .messages .portrait-art img[src*="/characters/codex/"] { width:118%; }
  .messages .user-msg { margin-left:44px; max-width:calc(100% - 44px); }
  /* 질문 번호 레일이 휴대폰 폭을 덜 먹게 */
  .messages.has-q-rail { padding-right:52px; }
}

/* 사진 바로 첨부: 클립(모든 파일) 옆에 사진 버튼. 휴대폰에서는 갤러리·사진 선택기가 바로 열린다 */
.composer .attach-photo { position:relative; display:inline-flex; align-items:center; margin-left:-6px; cursor:pointer; }
.composer .attach-photo input { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }

/* 업무 중지 고르기: 진행·대기 업무를 하나씩 중지·취소한다 */
.stop-picker { width:min(460px,calc(100vw - 24px)); max-height:min(70vh,560px); padding:0; border:1px solid #d8bedf55; border-radius:18px; background:#241c2a; color:#f1e6f4; box-shadow:0 20px 60px #000a; overflow:hidden; }
.stop-picker[open] { display:flex; flex-direction:column; }
.stop-picker::backdrop { background:#0b080f99; }
.stop-picker-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid #ffffff14; }
.stop-picker-head strong { font-size:15px; }
.stop-list { list-style:none; margin:0; padding:8px 12px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.stop-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #ffffff17; border-radius:12px; background:#ffffff08; }
.stop-item.running { border-color:#97cdb55e; }
.stop-item-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.stop-item-meta { font-size:11px; color:#bcebd4; }
.stop-item.queued .stop-item-meta { color:#e5c7a4; }
.stop-item-text { font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.stop-item button { flex-shrink:0; padding:7px 14px; border-radius:99px; font-size:12px; }
.stop-picker-foot { padding:10px 12px 14px; border-top:1px solid #ffffff14; }
.stop-picker-all { width:100%; padding:9px; border-radius:12px; border:1px solid #e0707066; background:transparent; color:#f3b4b4; font-size:12px; }