/* [app.css 분할 2/10 · studio.css] 사이드바 · 중앙 채팅 · 뷰 전환/FLIP
   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 */
/* ── 사이드바 ─────────────────────────────────────────────── */
#side{width:var(--side-w);min-width:var(--side-w);display:flex;flex-direction:column;
  background:var(--side-bg);border-right:1px solid var(--line);overflow:hidden;   /* 불투명+블러 제거 (§1.5, 뷰 전환 시 움직임) */
  transition:opacity var(--motion-dur-pop) var(--motion-ease-out)}   /* 뷰 전환 스테이징(§4.4) */
body.side-closed #side{width:52px;min-width:52px}
/* 접힌 사이드바(52px): width는 즉시 변경(리플로우 1회), 라벨/목록은 display:none 대신
   opacity+visibility로 사라진다(§4.2-7). 본편 FLIP 보정은 shell.js 사이드바 토글 소관. */
.side-label,.side-mark{opacity:1;visibility:visible;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out),visibility 0s}
body.side-closed .side-label,body.side-closed .side-mark{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-in),visibility 0s linear var(--motion-dur-micro)}
body.side-closed .sec-body{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-in),visibility 0s linear var(--motion-dur-micro)}
body.side-closed .sec-head{pointer-events:none;opacity:.35}
/* 접힘 상태에서 라벨은 폭까지 잃는다 — opacity/visibility 만으로는 자리를 차지해
   중앙정렬된 아이콘·＋가 왼쪽 클립 밖으로 밀려 잘리고 ☰ 토글은 52px 밖으로
   나간다(2026-07-29 보스 리포트). 폭 소거는 즉시, 펼칠 때 페이드인은 그대로. */
body.side-closed .side-label,body.side-closed .side-mark{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;overflow:hidden}
body.side-closed #uName{flex:0 0 0}
body.side-closed .side-top{justify-content:center;padding:14px 4px 8px}
body.side-closed .new-chat,body.side-closed .menu-it,body.side-closed .side-prof{gap:0}
/* 보이지 않는 대화 내역의 스크롤바가 접힌 레일에 홀로 노출되지 않게 */
body.side-closed .side-scroll{overflow-y:hidden}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px}
.side-mark{letter-spacing:.24em;font-size:12px;font-weight:640;color:#3c4160;padding-left:4px}
html.secure .side-mark:after{content:" · 시큐어";letter-spacing:0;color:var(--accent)}
/* 워드마크 = 모드 스위처 트리거 (2026-08-02). 시큐어 진입점이 사이드바 하단
   #mSecure 에서 여기로 올라왔다 — 하단 버튼은 아래 규칙으로 화면에서 내렸다. */
.side-mark-btn{display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer;
  border:0;background:0 0;border-radius:10px;padding:4px 6px;margin-left:-2px}
.side-mark-btn:hover{background:var(--hover)}
.side-mark-btn.is-open{background:var(--accent-soft)}
.mode-caret{font-style:normal;font-size:11.5px;color:#7d8296;flex:none;
  transition:transform var(--motion-dur-micro) var(--motion-ease-out)}
.side-mark-btn.is-open .mode-caret{transform:rotate(180deg)}
html.secure .mode-caret{color:var(--accent)}
/* 펼친 사이드바에선 워드마크 글자가 현재 모드를 말한다(:after " · 시큐어").
   미니 아이콘은 글자가 사라지는 접힘(52px) 전용. */
/* .ico(단일 출처)가 뒤에서 display:inline-block 을 주므로 클래스 하나로는
   동률에서 진다 — .ico.mode-mini 로 명시도를 맞춰야 접힘 전용이 지켜진다. */
.ico.mode-mini{display:none;flex:none;width:16px;height:16px;color:#6b6f85}
html.secure .mode-mini{color:var(--accent)}
/* 접힘에서 트리거까지 없어지면 시큐어 진입점이 증발한다(가드레일 §3).
   ☰ 와 나란히 두면 52px 안에서 짤리므로 세로로 쌓는다(§5.5). */
body.side-closed .side-top{flex-direction:column;gap:2px}
body.side-closed .mode-mini{display:inline-block}
body.side-closed .mode-caret{display:none}
body.side-closed .side-mark-btn{padding:6px}
/* 시큐어를 못 쓰는 접속(원격 BA)에선 고를 게 하나뿐이라 스위처를 되돌린다 */
.side-mark-btn.solo{pointer-events:none;padding-left:4px}
.side-mark-btn.solo:hover{background:0 0}
.side-mark-btn.solo .mode-caret,.side-mark-btn.solo .mode-mini{display:none}
body.side-closed .side-mark-btn.solo{display:none}
.icon-btn{appearance:none;background:0 0;border:0;border-radius:8px;padding:6px 9px;color:#666b7e;font-size:14px}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.new-chat{display:flex;align-items:center;gap:9px;margin:6px 10px 10px;padding:9px 12px;position:relative;
  border:0;border-radius:12px;background:var(--accent-grad);color:#fff;
  font-weight:560;box-shadow:0 8px 20px rgba(var(--accent-rgb),.24);
  transition:transform var(--motion-dur-micro) var(--motion-ease-out);white-space:nowrap}
html.secure .new-chat{background:linear-gradient(135deg,#2cb578,#177a4c);box-shadow:0 8px 20px #1e9e6340}
/* 호버 그림자는 box-shadow 를 직접 트랜지션하지 않고 ::after opacity 로 (§4.5) */
.new-chat::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 10px 24px rgba(var(--accent-rgb),.32);opacity:0;transition:opacity var(--motion-dur-micro) var(--motion-ease-out)}
html.secure .new-chat::after{box-shadow:0 10px 24px #1e9e6355}
.new-chat:hover{transform:translateY(-1px)}
.new-chat:hover::after{opacity:1}
.nc-plus{font-size:14px}
body.side-closed .new-chat{padding:9px 0;justify-content:center;margin:6px 8px 10px}
.side-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px;display:flex;flex-direction:column;gap:2px}
.side-sec{display:flex;flex-direction:column}
.side-sec.grow{flex:0 0 auto}
.sec-head{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:0 0;border:0;padding:8px 8px 4px;color:#7d8296;font-size:11px;font-weight:600;letter-spacing:.06em}
.sec-head .chev{font-style:normal;opacity:1;visibility:visible;
  transition:transform var(--motion-dur-micro) var(--motion-ease-out),
             opacity var(--motion-dur-micro) var(--motion-ease-out),visibility 0s}
body.side-closed .sec-head .chev{opacity:0;visibility:hidden;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-in),visibility 0s linear var(--motion-dur-micro)}
.side-sec.folded .chev{transform:rotate(-90deg)}
.side-sec.folded .sec-body{display:none}
.sec-body{display:flex;flex-direction:column;gap:1px;padding:2px 0 8px;opacity:1;visibility:visible;
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out),visibility 0s}
.side-it{display:flex;align-items:center;gap:8px;padding:7px 10px;border:0;border-radius:9px;
  background:0 0;text-align:left;font-size:13px;color:#3a3f57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-it:hover{background:var(--hover)}
.side-it.is-on{background:var(--accent-soft);color:var(--accent-deep);font-weight:560}
.side-it .it-sub{margin-left:auto;font-size:10px;color:var(--dim)}
.side-it.small{font-size:12px;padding:6px 10px}
.conn-dot{width:7px;height:7px;border-radius:50%;background:#c9cdd9;flex:none}
.conn-dot.on{background:#39b876;box-shadow:0 0 8px #39b87680}
/* AI 잡 배지(docs/ARCHITECTURE_AI_SESSIONS.md §7) — #histList 항목 내부에만 그린다,
   새 떠 있는 요소 아님(우상단 예약 구역과 무관, UI_GUARDRAILS §2). 텍스트 설명 없음
   (1-10): 진행 중 = 회전 점(CSS 애니메이션), 완료·미확인 = 색 점 하나. */
.hist-badge{width:7px;height:7px;border-radius:50%;flex:none;box-sizing:border-box}
.hist-badge.run{border:2px solid var(--accent-soft);border-top-color:var(--accent);
  background:0 0;animation:hist-spin .9s linear infinite}
.hist-badge.done{background:var(--accent)}
@keyframes hist-spin{to{transform:rotate(360deg)}}
/* 하단 메뉴 */
.side-menu{border-top:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:1px}
.menu-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:9px;
  background:0 0;font-size:13.5px;font-weight:560;letter-spacing:-.01em;color:#2f3450;
  text-decoration:none;white-space:nowrap}
.menu-it:hover{background:var(--hover)}
/* 텍스트 강조(애플식, 2026-07-27 보스 지시): 펼친 사이드바에선 이모지 아이콘을
   숨기고 텍스트만. 접힌(52px) 모드에선 텍스트가 안 들어가니 아이콘으로 복귀. */
.menu-it i{font-style:normal;font-size:14px;width:18px;text-align:center;display:none}
body.side-closed .menu-it i{display:block}
.menu-it.sec-on{background:var(--accent-soft);color:var(--accent-deep);font-weight:580}
/* 시큐어 진입점이 워드마크 스위처(#modeSel)로 옮겨가 사이드바에선 내렸다(2026-08-02).
   DOM 은 남긴다 — 메신저 창 레일 설정 메뉴가 이 버튼을 권한 플래그·라벨·클릭
   프록시로 재사용하기 때문(msn.js railSetShow). 지우면 메신저 창 진입점이 죽는다. */
#mSecure{display:none}
body.side-closed .menu-it{justify-content:center;padding:8px 0}
/* 상단 고정 메뉴 (그룹웨어 승격 자리) */
.side-top-menu{padding:0 8px 6px;display:flex;flex-direction:column;gap:1px}
.side-user{display:flex;align-items:center;gap:4px;padding:5px 6px 4px;margin-top:2px}
.side-prof{display:flex;align-items:center;gap:9px;flex:1;min-width:0;border:0;background:0 0;
  padding:4px;border-radius:10px;text-align:left;cursor:pointer}
.side-prof:hover{background:var(--hover)}
body.side-closed .side-prof{justify-content:center}
.side-ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,#222a49,#0c1127);
  color:#fff;font-size:10px;display:grid;place-items:center;flex:none}
#uName{font-size:12.5px;font-weight:560;flex:1;overflow:hidden;text-overflow:ellipsis}
body.side-closed .side-user{justify-content:center;padding:9px 0 4px}
body.side-closed #btnLogout{display:none}

/* ── 중앙 채팅 ────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;
  transition:opacity var(--motion-dur-pop) var(--motion-ease-out)}   /* 뷰 전환 스테이징(§4.4) */
/* ── 뷰 전환 스테이징(§4.4) — applyView가 모드 클래스 토글 직후 body.view-swap을
   순간 붙였다(강제 리플로우) 뗀다. 새로 보이는 주요 표면이 살짝 아래에서 떠오른다.
   퇴장(모드 전환 직전)은 즉시 컷(모드 블록의 display:none) — 여기선 등장만 담당. ── */
body.view-swap #side,body.view-swap #coCol,body.view-swap #main{opacity:0}
/* 2026-07-29 끊김 픽스: translate3d(0,10px,0) 를 뺐다. 이 셋은 사실상 화면 전부라
   레이어 이동이 곧 전체 화면 재페인트였다. 남긴 opacity 도 --motion-dur-view(700ms)
   에서 --motion-dur-pop(240ms)으로 줄인다 — 전체 화면 알파 blend 는 소프트웨어
   합성에서 프레임당 비용이 크므로, 길게 끄는 것보다 짧게 덮는 쪽이 매끄럽다. */
#topnav{display:flex;align-items:center;gap:10px;padding:12px 18px;min-height:54px}
#convoTitle{font-size:13.5px;font-weight:580;color:#3c4160;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.top-spacer{flex:1}
/* 엔진 선택 — 커스텀 드롭다운(버튼 + #engPop). 네이티브 select 는 PC 웹뷰에서
   팝업이 안 열려 교체(2026-07-27). 이름 굵게 + 흐린 설명 + 현재 선택 ✓ */
#engineSel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:#fffc;border-radius:10px;padding:6px 10px;font-size:12.5px;color:#4a4f66;
  cursor:pointer;transition:border-color var(--motion-dur-micro) var(--motion-ease-out),
  background var(--motion-dur-micro) var(--motion-ease-out),color var(--motion-dur-micro) var(--motion-ease-out);
  white-space:nowrap;flex:none}
#engineSel:hover{border-color:var(--accent);color:var(--accent-deep)}
#engineSel.is-open{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.eng-caret{font-style:normal;font-size:10px;color:#a2a5b1}
/* .aho-anim 계약(shell.js가 ahoShow/ahoHide로 여닫는다) — 오버라이드만 여기서 */
#engPop{position:fixed;z-index:86;width:250px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}
.eng-it{display:grid;grid-template-columns:auto 1fr 16px;gap:8px;align-items:center;
  width:100%;text-align:left;border:0;background:0 0;border-radius:10px;padding:9px 10px;cursor:pointer}
.eng-it:hover{background:var(--hover)}
.eng-name{font-size:13px;font-weight:620;color:#2c2f3f}
.eng-desc{font-size:11px;color:#a2a5b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-chk{visibility:hidden;color:var(--accent);font-weight:700}
.eng-it.on .eng-chk{visibility:visible}
/* 모드 스위처 드롭다운(#modePop) — 워드마크 아래로 열린다. 여닫기는 engPop 과
   같은 ahoShow/ahoHide 계약(§4.1)이라 오버라이드만 여기서. 2026-08-02 */
#modePop{position:fixed;z-index:86;width:262px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #27225d2e;
  --aho-dur:var(--motion-dur-pop);--aho-dur-exit:var(--motion-dur-exit-pop)}
.mode-it{display:grid;grid-template-columns:20px 1fr 16px;column-gap:10px;
  width:100%;text-align:left;border:0;background:0 0;border-radius:10px;padding:9px 10px;cursor:pointer}
.mode-it:hover{background:var(--hover)}
.mode-it .ico{grid-row:1/3;align-self:center;width:17px;height:17px;color:#6b6f85}
.mode-it.on .ico{color:var(--accent)}
.mode-name{grid-column:2;font-size:13px;font-weight:620;color:#2c2f3f}
.mode-desc{grid-column:2;font-size:11px;color:#a2a5b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-it.warn .mode-desc{color:#c2643a}
.mode-chk{grid-column:3;grid-row:1/3;align-self:center;text-align:center;
  visibility:hidden;color:var(--accent);font-weight:700}
.mode-it.on .mode-chk{visibility:visible}
.mode-sep{height:1px;background:var(--line);margin:4px 8px}
/* 상주창(420px) 트리거 — 같은 #modePop 을 연다. 자리는 메뉴바 좌측이다:
   topnav 는 420px 에서 이미 포화라 여기 넣으면 제목이 밀려난다
   (ARCHITECTURE_MENUBAR §1 이 경고한 함정 — 2026-08-02 실측 폭 0 확인).
   full 모드에선 사이드바 워드마크(#modeSel)가 그 일을 하므로 뜨지 않는다.
   :not([hidden]) 이라야 secure.js 의 권한 게이트가 CSS 에 안 먹히는 일이 없다. */
#modeSelTop{display:none;gap:5px;padding:0 8px}
body.view-resident #modeSelTop:not([hidden]){display:inline-flex}
#modeSelTop.is-on{background:var(--accent-soft);color:var(--accent-deep)}
#modeSelTop .ico{width:16px;height:16px}
/* nowrap+flex:none — 좁은 창(상주 420px)에서 flex 가 버튼을 쥐어짜 글자가
   두 줄로 꺾이던 뭉개짐 방지. 공간 양보는 제목(ellipsis)이 한다 (2026-07-28) */
.top-btn{border:1px solid var(--line);background:#fffc;border-radius:10px;padding:6px 12px;font-size:12.5px;color:#4a4f66;
  transition:border-color var(--motion-dur-micro) var(--motion-ease-out),color var(--motion-dur-micro) var(--motion-ease-out);
  white-space:nowrap;flex:none}
.top-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.top-btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
#chatScroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
#chat{max-width:820px;margin:0 auto;padding:10px 24px 30px;display:flex;flex-direction:column;gap:18px}
/* 빈 화면 인사 */
.hello-wrap{text-align:center;margin-top:16vh;animation:var(--motion-dur-view) var(--motion-ease-out) both login-in}
.hello-face{font-size:44px;font-weight:670;letter-spacing:-.06em;color:#10162d}
.hello-face b{color:var(--accent);font-weight:670}
.hello-sub{color:#8c91a1;margin-top:14px;font-size:14.5px}
/* 말풍선 */
.msg{display:flex;flex-direction:column;gap:6px;animation:var(--motion-dur-panel) var(--motion-ease-out) both login-in}
.msg.user{align-items:flex-end}
.msg .bubble{max-width:78%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word}
.msg.user .bubble{background:var(--accent-grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 8px 22px rgba(var(--accent-rgb),.19)}
html.secure .msg.user .bubble{background:linear-gradient(135deg,#2cb578,#177a4c);box-shadow:0 8px 22px #1e9e6335}
.msg.ai .bubble{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:0 10px 30px #27225d0f;max-width:92%}
/* ── FLIP 이동 중 그림자 끄기 (2026-07-29 끊김 픽스, §1.5 적용) ──
   패널 개폐 때 #chat(대화 전체)이 FLIP 으로 움직이며 레이어로 구워지는데, 그때
   말풍선마다 blur 22~30px 그림자를 다시 그린다. 비용이 메시지 수에 비례해
   "긴 대화일수록 심함"으로 나타났다(보스 리포트). 움직이는 동안만 끄고
   chat.js flipCorrect 가 끝나면 뗀다 — 정지 상태 디자인은 그대로다. */
#chat.flip-lite .bubble,#chat.flip-lite .u-imgs img{box-shadow:none}
.msg.ai .who{display:flex;align-items:center;gap:7px;font-size:11px;color:#9298a8;padding-left:2px}
.msg.ai .who b{color:#3c4160;font-weight:640;letter-spacing:.02em}
.msg .bubble.err{border-color:#e8b8c0;background:#fdf3f5;color:#a04858}
.bubble pre{background:#12183108;border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.5;font-family:Consolas,"D2Coding",monospace}
.bubble code{background:#12183110;border-radius:5px;padding:1px 5px;font-size:.92em;font-family:Consolas,"D2Coding",monospace}
.bubble pre code{background:0 0;padding:0}
.bubble b,.bubble strong{font-weight:640}
/* 스트리밍 커서 */
.msg.ai.streaming .bubble:after{content:"▍";color:var(--accent);animation:1s steps(2) infinite blink-cur}
@keyframes blink-cur{50%{opacity:0}}
.msg .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
/* 도구 사용 칩 (3단계 훅) */
.tool-chip{display:inline-flex;align-items:center;gap:7px;margin:2px 0;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;background:#fffc;font-size:12px;color:#666b7e}
.tool-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
/* 입력창 */
#composer{padding:6px 24px 18px}
/* 2행 배치(2026-07-29 보스 지시) — 1행은 입력 텍스트가 카드 폭을 전부 쓰고,
   2행에 [+][☺][📎] … [↑] 이 앉는다. 예전에는 다섯을 한 행에 늘어놓아 좁은
   창(상주 420px)에서 입력 폭이 카드의 42%(158px)까지 쪼그라들어 placeholder
   조차 두 줄로 접혔다. 열 정의는 그대로 두고 배치만 바꾼다 — 버튼 크기·간격이
   기존과 같아야 아이콘 규칙(38px 원형)이 흔들리지 않는다. */
.comp-box{max-width:820px;margin:0 auto;display:grid;grid-template-columns:38px 38px 38px 1fr 46px;gap:8px;align-items:end;
  background:#fffffff2;border:1px solid var(--line);border-radius:20px;padding:10px;position:relative;
  box-shadow:0 20px 55px #27225d14;transition:border-color var(--motion-dur-micro) var(--motion-ease-out)}
.comp-box>#input{grid-area:1/1/2/6}     /* 1행 전체 — 텍스트 적용 범위 */
.comp-box>#btnPlus{grid-area:2/1}
.comp-box>#btnEmo{grid-area:2/2}
.comp-box>#btnFile{grid-area:2/3}
.comp-box>#btnSend{grid-area:2/5}
/* 포커스 링은 box-shadow 직접 트랜지션 대신 ::after opacity (§4.5) */
.comp-box::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 22px 60px #3c338c1f;opacity:0;transition:opacity var(--motion-dur-micro) var(--motion-ease-out)}
.comp-box:focus-within{border-color:rgba(var(--accent-rgb),.35)}
.comp-box:focus-within::after{opacity:1}
html.secure .comp-box:focus-within{border-color:#1e9e6366}
#input{border:0;outline:0;background:0 0;resize:none;max-height:180px;line-height:1.6;font-size:14.5px;padding:4px 0;min-width:0}
#btnSend{height:38px;border:0;border-radius:13px;color:#fff;font-size:16px;
  background:var(--accent-grad);box-shadow:0 8px 20px rgba(var(--accent-rgb),.28);
  transition:opacity var(--motion-dur-micro) var(--motion-ease-out)}
html.secure #btnSend{background:linear-gradient(135deg,#2cb578,#177a4c);box-shadow:0 8px 20px #1e9e6340}
/* 생성 중 멈춤 버튼(■) — html.secure 규칙보다 특이도가 낮아지지 않게 둘 다 명시 */
#btnSend.is-stop,html.secure #btnSend.is-stop{font-size:13px;
  background:linear-gradient(135deg,#f0705e,#d43f2c);box-shadow:0 8px 20px #e0503c40}
#btnSend:disabled{opacity:.35;cursor:default}
.comp-hint{max-width:820px;margin:8px auto 0;text-align:center;font-size:11px;color:#a2a5b1;min-height:14px}