/* [app.css 분할 5/10 · overlays.css] 모달 · 알림 배지 · 설정 모달 · 토스트
   2026-08-23 리팩터 — 옛 app.css 를 원본 순서 그대로 10조각으로 나눴다.
   캐스케이드가 곧 계약이라 로드 순서를 바꾸면 안 된다:
   app.css → studio.css → rooms.css → orgwork.css → overlays.css → winmodes.css → plus.css → chrome.css → msgx.css → profile.css
   로드 지점: web/index.html, tests/harness/*.html */
/* ── 모달 ─────────────────────────────────────────────────── */
/* .aho-anim 계약(settings.js/core.js가 ahoShow/ahoHide로 wrap·modal을 함께 연다) —
   여기서는 표면별 --aho-dur/--aho-rise 오버라이드만 심는다(§4.1) */
/* 블러 제거(페이드 중 전화면 재블러 = 깨짐 원인) — 틴트를 살짝 진하게 보상 */
#modalWrap{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#1218314d;
  --aho-dur:var(--motion-dur-panel);--aho-dur-exit:var(--motion-dur-exit-panel);--aho-rise:0px}
#modal{width:min(400px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;
  box-shadow:0 30px 90px #27225d33;
  --aho-dur:var(--motion-dur-panel);--aho-dur-exit:var(--motion-dur-exit-panel);--aho-rise:14px}
#modal h3{margin:0 0 6px;font-size:16px}
#modal .m-sub{color:#8c91a1;font-size:12.5px;margin-bottom:14px}
#modal label{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:11px;color:#969aa8}
#modal input{border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:14px;outline:0}
#modal input:focus{border-color:var(--accent)}
#modal .m-err{color:#d5566a;font-size:12px;min-height:16px}
#modal .m-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
#modal .m-btn{border:0;border-radius:11px;padding:9px 16px;font-size:13px;background:var(--hover);color:#4a4f66}
#modal .m-btn.primary{background:var(--accent-grad);color:#fff;box-shadow:0 8px 20px rgba(var(--accent-rgb),.28)}
/* 답변 전달 모달(AI → 방 선택, 2026-07-28) */
.fwdp-prev{font-size:12px;color:#6b6786;background:var(--hover);border-radius:10px;padding:8px 10px;
  margin-bottom:10px;white-space:pre-wrap;word-break:break-word;max-height:76px;overflow:hidden}
.fwdp-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.fwdp-it{display:flex;align-items:baseline;gap:8px;border:0;background:0 0;border-radius:10px;
  padding:9px 10px;cursor:pointer;text-align:left;font-size:13.5px}
.fwdp-it:hover{background:var(--hover)}
.fwdp-it small{color:#9298a8;font-size:11px}

/* 알림 센터(놓친 알림 모아보기, 2026-07-29) — 기존 #modal 안에서만 쓰는 목록.
   진입점은 메신저 창 레일 🔔 과 설정 ⟩ 알림. 항목 = 종류점 + (이름·시각 / 내용) */
.nc-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  margin:4px 0 2px}
.nc-it{display:flex;align-items:flex-start;gap:9px;border:0;background:0 0;border-radius:11px;
  padding:9px 10px;cursor:pointer;text-align:left;width:100%}
.nc-it:hover{background:var(--hover)}
.nc-k{flex:none;width:7px;height:7px;border-radius:50%;margin-top:5px;background:var(--accent)}
.nc-k.task{background:#4bb98a}                 /* 작업 완료는 초록, 대화는 라벤더 */
.nc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nc-n{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:640;color:#2f3450}
.nc-n small{color:#9298a8;font-size:11px;font-weight:400;flex:none}
.nc-t{font-size:12.5px;color:#6b6786;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 알림 배지 (사내 대화) ─────────────────────────────────── */
.n-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:#e5484d;color:#fff;font-size:10px;font-weight:700;line-height:1;flex:none}
/* 레일 🔔 의 안 본 알림 수 — 버튼 우상단에 겹쳐 붙는다(.rail-it 은 position:relative) */
.rail-dot{position:absolute;top:3px;right:3px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;background:#e5484d;color:#fff;font-size:9.5px;font-weight:700;line-height:1}
#coBadge{margin-left:6px;vertical-align:1px}
.co-room-it .n-badge{margin-left:6px}

/* AI 말풍선 읽어주기 버튼 — 평소엔 숨고 말풍선에 올리면 나타난다 */
.say-btn{border:0;background:0 0;font-size:11px;padding:2px 5px;border-radius:6px;opacity:0;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out)}
.msg.ai:hover .say-btn{opacity:.8}
.say-btn:hover{background:var(--hover)}

/* 설정 모달 — 알림·음성 옵션 */
#modal .m-sec{font-size:11px;font-weight:640;letter-spacing:.06em;color:#7d8296;margin:14px 0 8px}
#modal .m-line{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;color:#3a3f57;margin-bottom:10px}
#modal .m-line input[type=checkbox]{appearance:none;width:34px;height:20px;margin:0;padding:0;border:0;outline:0;
  border-radius:999px;background:#d9dbe6;position:relative;cursor:pointer;
  transition:background var(--motion-dur-micro) var(--motion-ease-out);flex:none}
/* 노브는 left 대신 transform 으로 이동(§3.4 — 레이아웃 트랜지션 금지) */
#modal .m-line input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transform:translate3d(0,0,0);
  transition:transform var(--motion-dur-micro) var(--motion-ease-out)}
#modal .m-line input[type=checkbox]:checked{background:var(--accent)}
#modal .m-line input[type=checkbox]:checked:before{transform:translate3d(14px,0,0)}
#modal select{border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13px;outline:0;background:#fff}
#modal select:focus{border-color:var(--accent)}
#modal input[type=range]{padding:0;border:0;accent-color:var(--accent)}

/* ── 설정 모달 (카톡식 상세설정) — 좌측 세로 탭 + 우측 패널 2단 ── */
#modal.m-wide{width:min(600px,94vw)}
#modal .m-cols{display:flex;gap:16px;min-height:320px;margin-top:8px}
#modal .m-tabs{display:flex;flex-direction:column;gap:2px;width:118px;flex:none;
  border-right:1px solid var(--line);padding-right:12px}
#modal .m-tab{border:0;background:0 0;text-align:left;padding:9px 11px;border-radius:10px;
  font-size:13px;color:#6a7086;cursor:pointer;white-space:nowrap}
#modal .m-tab:hover{background:var(--hover)}
#modal .m-tab.is-on{background:var(--accent-soft);color:#232946;font-weight:640}
#modal .m-panes{flex:1;min-width:0}
#modal .m-pane[hidden]{display:none}
#modal .m-pane .m-sec:first-child{margin-top:0}
/* 테마 색 고르기 (설정 > 화면) — 10종이라 색 점+이름만 담은 컴팩트 칩. 설명은
   title 툴팁으로 뺐다(세로가 길어지면 낮은 화면에서 슬라이더가 접힌다).
   열 수는 폭에 맡긴다 — 좁은 창에서도 자동으로 줄어 짤리지 않는다(§5.5). */
#modal .th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:7px;margin:2px 0 6px}
#modal .th-sw{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;
  border:1px solid var(--line);background:var(--card);border-radius:11px;padding:7px 10px;
  transition:border-color var(--motion-dur-micro) var(--motion-ease-out),
             background var(--motion-dur-micro) var(--motion-ease-out)}
#modal .th-sw:hover{background:var(--hover)}
#modal .th-sw.is-on{border-color:var(--accent);background:var(--accent-soft)}
#modal .th-dot{flex:none;width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 0 0 1px #00000021}
#modal .th-nm{min-width:0;font-size:12.5px;font-weight:600;color:#3a3f57;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#modal .m-prof{display:flex;align-items:center;gap:13px;padding:14px 16px;
  border:1px solid var(--line);border-radius:15px;background:#faf9fe;margin-bottom:4px}
#modal .m-prof .p-ava{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#222a49,#0c1127);color:#fff;font-size:15px;font-weight:700}
#modal .m-prof .p-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#modal .m-prof .p-name{font-size:15px;font-weight:700;color:#232946}
#modal .m-prof .p-uid{font-size:12px;color:#8c91a1}
#modal .m-badge{flex:none;font-size:10.5px;font-weight:640;color:var(--accent);
  background:var(--accent-soft);border-radius:7px;padding:3px 8px}
#modal .m-btn.danger{background:#fdeef1;color:#c94257}
#modal .m-btn.danger:hover{background:#fadde3}
/* 좁은 화면: 탭을 가로줄로 눕힌다. 탭이 늘어 한 줄을 넘으면(PC앱 '창' 포함 6개)
   짤리지 않게 줄바꿈 — §5.5 짤림 제로 (2026-08-02 아호비 탭 추가로 재발 픽스) */
@media (width<=520px){
  #modal .m-cols{flex-direction:column;min-height:0}
  #modal .m-tabs{flex-direction:row;flex-wrap:wrap;width:auto;border-right:0;
    padding-right:0;border-bottom:1px solid var(--line);padding-bottom:8px}
}

/* ── 새 사내 대화 토스트 (우측 하단 슬라이드업, 아호비 얼굴) ── */
#toastWrap{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;pointer-events:none;max-width:min(360px,calc(100vw - 32px))}
/* 카톡 PC 팝업 폭(300px)에 맞추고, 색은 기존 아호비 톤을 훨씬 진하게 —
   딥 인디고~퍼플 카드 + 밝은 글자 (2026-07-31 보스 지시). 불투명+블러 제거는
   슬라이드업 중 깨짐 방지 그대로 유지(§1.5).
   딥 카드도 테마를 따라간다 (2026-08-03 보스 지시): 테마마다 카드 색을 따로
   정의하지 않고, **중성 딥 베이스 위에 accent 틴트를 얹어** 자동으로 물들인다.
   바이올렛에서 기존 색(#2a2072/#1d1550/#171139)과 거의 같게 알파를 잡았다 —
   베이스나 알파를 만지면 보스가 지정한 딥 인디고 톤이 틀어지니 주의. */
.toast{pointer-events:auto;display:flex;gap:11px;align-items:center;width:300px;max-width:100%;
  padding:12px 13px;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;
  background:
    linear-gradient(158deg,rgba(var(--accent-rgb),.35) 0%,rgba(var(--accent-rgb),.23) 55%,
                    rgba(var(--accent-rgb),.16) 100%),
    linear-gradient(158deg,#0b0420 0%,#080317 55%,#070312 100%);
  border:1px solid rgba(var(--accent-rgb),.55);
  box-shadow:0 22px 60px #0e0a2f5c,inset 0 1px #ffffff1f;
  transform:translateY(18px);opacity:0;
  transition:transform var(--motion-dur-panel) var(--motion-ease-out),
             opacity var(--motion-dur-panel) var(--motion-ease-out)}
/* 우하단 글로우 원형 — 딥 카드 위에서 테마 강조색으로 살아난다 */
.toast::after{content:'';position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb),.88) 0%,rgba(var(--accent-rgb),.66) 40%,
    rgba(var(--accent-rgb),.30) 64%,rgba(var(--accent-rgb),0) 80%)}
.toast>*{position:relative;z-index:1}   /* 아바타·본문·닫기는 글로우 위로 */
.toast.show{transform:none;opacity:1}
.toast.hide{transform:translateY(8px) scale(.98);opacity:0;
  transition:transform var(--motion-dur-exit-panel) var(--motion-ease-in),
             opacity var(--motion-dur-exit-panel) var(--motion-ease-in)}
.toast .t-ava{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#fff 0 40%,#f3f2f8 100%);border:1px solid #ffffff33;
  overflow:hidden}
/* 얼굴은 SVG 이미지 — 줄바꿈 불가, 박스 크기와 무관하게 가로 형태 유지 */
.toast .t-ava svg{width:30px;height:auto;display:block}
.toast .t-body{flex:1;min-width:0}
.toast .t-name{font-size:12.5px;font-weight:640;color:#fff;display:flex;align-items:center;gap:6px}
.toast .t-name small{font-weight:500;color:#b9b6c6;font-size:10.5px}
.toast .t-text{font-size:12.5px;color:#dedce8;margin-top:1px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.toast .t-close{flex:none;border:0;background:0 0;color:#c6c3d2;font-size:14px;padding:2px 4px;border-radius:6px}
.toast .t-close:hover{background:#ffffff1f;color:#fff}
/* 답장줄이 붙으면 두 줄 이상이 되므로 아바타·닫기를 위로 정렬(가운데 정렬 어색함 방지) */
.toast.has-reply{align-items:flex-start}
.toast .t-reply{display:flex;gap:6px;align-items:center;margin-top:8px}
.toast .t-rin{flex:1;min-width:0;border:1px solid #ffffff2e;border-radius:9px;
  padding:6px 9px;font-size:12px;color:#fff;background:#ffffff14;outline:none}
.toast .t-rin::placeholder{color:#b9b6c6}
.toast .t-rin:focus{border-color:var(--accent-lite);background:#ffffff1f}
.toast .t-rsend{flex:none;border:0;border-radius:9px;padding:6px 11px;font-size:12px;font-weight:600;
  cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--accent-lite),var(--accent))}
.toast .t-rsend:disabled{opacity:.5;cursor:default}
.toast .t-rstate{flex:none;font-size:11px;color:#b9b6c6}
@media (width<=520px){#toastWrap{right:12px;left:12px;bottom:12px;max-width:none}.toast{width:100%}}