/* HTNS Chat reference r32 · screenshot-match visual layer */
:root{--chat-navy:#0c3564;--chat-blue:#0b83f6;--chat-blue2:#5bb5ff;--chat-line:#cbdfee;--chat-muted:#7189a4;--chat-green:#19a75c;--chat-purple:#f1e4ff;--chat-purple-ink:#8739d1;--chat-mint:#e5f8ed;--chat-mint-ink:#22985b;--chat-pink:#fde8ef;--chat-pink-ink:#eb476d}
#htnsChatBackdrop{position:fixed;inset:0;z-index:1250;display:none;background:rgba(11,43,73,.24);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .22s ease}#htnsChatBackdrop.open{display:block;opacity:1}
#htnsChatDrawer{position:fixed;z-index:1260;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;left:8px;right:8px;bottom:8px;width:auto;height:min(92dvh,860px);min-height:540px;border:1px solid rgba(167,195,218,.65);border-radius:30px;background:linear-gradient(180deg,#fbfdff 0%,#f3f9fd 52%,#edf6fc 100%);box-shadow:0 26px 60px rgba(25,79,119,.24);transform:translate3d(0,105%,0);transition:transform .28s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}#htnsChatDrawer.open{transform:translate3d(0,0,0);visibility:visible}
.chat-drawer-grip{width:48px;height:6px;flex:0 0 auto;margin:10px auto 2px;border-radius:999px;background:#bdcbd9}
.chat-drawer-head{padding:10px 16px 13px;display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:10px;background:rgba(255,255,255,.56)}.chat-head-icon,.chat-close{width:58px;height:58px;display:grid;place-items:center;border:1px solid #c9deef;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);color:var(--chat-navy);box-shadow:0 7px 18px rgba(25,76,117,.07)}.chat-head-icon svg,.chat-close svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.chat-close{cursor:pointer}.chat-head-copy{text-align:center;min-width:0}.chat-head-copy h2{margin:0;color:#082f5d;font-size:22px;line-height:1;font-weight:900;letter-spacing:-.03em}.chat-head-copy p{margin:8px 0 0;color:#7489a2;font-size:11px;line-height:1.2;font-weight:750}
#htnsChatTabs{display:grid;grid-template-columns:repeat(var(--chat-tab-count,1),minmax(0,1fr));gap:10px;padding:0 14px 12px;background:transparent}.chat-tab{position:relative;min-width:0;min-height:78px;padding:12px 14px;display:flex;align-items:center;gap:11px;border:1px solid #d4e3ef;border-radius:20px;background:#fff;color:#143c68;box-shadow:0 7px 17px rgba(31,74,112,.055);cursor:pointer;text-align:left}.chat-tab.on{border:2px solid #1688ef;background:linear-gradient(180deg,#f8fcff 0%,#edf7ff 100%);box-shadow:0 8px 20px rgba(22,136,239,.12)}.chat-tab-icon{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:14px;background:#f0f7fd;color:#1688ef}.chat-tab-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.chat-tab-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.chat-tab-copy strong{color:#123d6a;font-size:13px;line-height:1;font-weight:900;white-space:nowrap}.chat-tab-copy small{max-width:100%;color:#7188a2;font-size:9.5px;line-height:1.15;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-tab-count{position:absolute;right:11px;top:50%;transform:translateY(-50%);min-width:25px;height:25px;padding:0 7px;display:grid;place-items:center;border-radius:999px;background:#eef4fa;color:#5d7692;font-size:10px;font-weight:900}.chat-tab-count.hot{background:#1387f3;color:#fff;box-shadow:0 4px 10px rgba(19,135,243,.25)}
.chat-room-note{margin:0 14px 3px;min-height:58px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #d4e4ef;border-radius:19px;background:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(26,68,103,.05)}.chat-room-note-main{min-width:0;display:flex;align-items:center;gap:10px}.chat-room-note-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:12px;background:#f1f8ff;color:#1688ef}.chat-room-note-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#htnsChatRoomNote{color:#173f69;font-size:10.5px;line-height:1.22;font-weight:850}#htnsChatStatus{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-left:10px;border-left:1px solid #d5e2ed;color:#8093a8;font-size:8.5px;font-weight:900;letter-spacing:.035em}#htnsChatStatus:before{content:'';width:10px;height:10px;border-radius:50%;background:#99b0c5;box-shadow:0 0 0 3px rgba(153,176,197,.16)}#htnsChatStatus.live{color:#148750}#htnsChatStatus.live:before{background:#1eb45f;box-shadow:0 0 0 3px rgba(30,180,95,.14)}#htnsChatStatus.offline{color:#c65369}#htnsChatStatus.offline:before{background:#e15c72}
#htnsChatMessages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:13px 15px 18px;background:linear-gradient(180deg,rgba(250,253,255,.7),rgba(239,247,252,.78));scroll-behavior:smooth}.chat-load-older{width:100%;min-height:36px;margin:0 0 12px;border:1px solid var(--chat-line);border-radius:13px;background:#fff;color:#607991;font-size:9px;font-weight:900}.chat-empty{padding:55px 20px;text-align:center;color:#7b90a5}.chat-empty svg{width:38px;height:38px;margin-bottom:10px;stroke:#95abc0;fill:none;stroke-width:1.7}.chat-empty b{display:block;color:#42617f;font-size:13px}.chat-empty span{display:block;margin-top:6px;font-size:10px}
.chat-date-separator{margin:14px 0 11px;display:flex;align-items:center;gap:10px}.chat-date-separator:before,.chat-date-separator:after{content:'';height:1px;flex:1;background:#d5e4ef}.chat-date-separator>span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid #d7e5ef;border-radius:999px;background:#f8fbfe;color:#6f86a0;font-size:8.5px;font-weight:900;letter-spacing:.035em}.chat-date-separator svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9}
.chat-message{margin:0 0 13px}.chat-message-row{display:flex;align-items:flex-end;gap:9px}.chat-message.mine .chat-message-row{justify-content:flex-end}.chat-avatar{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#d6ecff 0%,#bfe0ff 100%);color:#167ce1;font-size:16px;font-weight:900;box-shadow:0 6px 14px rgba(39,127,201,.12)}.chat-message-stack{max-width:min(84%,300px);display:flex;flex-direction:column;align-items:flex-start;gap:5px}.chat-message.mine .chat-message-stack{align-items:flex-end}.chat-message-head{display:flex;align-items:baseline;gap:7px;padding:0 3px}.chat-message-head strong{color:#163e69;font-size:10.5px;font-weight:900}.chat-message-head span{color:#8da2b6;font-size:8px;font-weight:800}.chat-bubble{width:100%;padding:10px 12px 8px;border:1px solid #d6e4ef;border-radius:19px 19px 19px 8px;background:#fff;color:#123a64;box-shadow:0 7px 15px rgba(29,68,101,.055)}.chat-message.mine .chat-bubble{border-color:#0d7dea;border-radius:19px 19px 8px 19px;background:linear-gradient(140deg,var(--chat-blue) 0%,var(--chat-blue2) 100%);color:#fff;box-shadow:0 10px 20px rgba(18,120,222,.22)}.chat-message.sending .chat-bubble,.chat-message.deleting .chat-bubble{opacity:.65}.chat-message.deleted .chat-bubble,.chat-message.mine.deleted .chat-bubble{border-color:#d8e2eb;background:#f2f5f7;color:#7c8f9f;box-shadow:none}.chat-message.deleted .chat-message-body{font-style:italic}.chat-message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.42;font-weight:650}.chat-message-body.empty{display:none}.chat-message-meta{margin-top:6px;display:flex;justify-content:flex-end;color:#899daf;font-size:7.7px;font-weight:800}.chat-message.mine .chat-message-meta{color:rgba(255,255,255,.78)}
.chat-attachments{display:grid;gap:7px;margin:0 0 8px}.chat-attachment{width:100%;min-width:0;padding:7px 8px;display:flex;align-items:center;gap:9px;border:1px solid #cfdfeb;border-radius:14px;background:#f7fbff;color:#163e68;text-align:left;cursor:pointer}.chat-message.mine .chat-attachment{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.16);color:#fff}.chat-attachment-thumb,.chat-attachment-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#e8f4ff;color:#157fdc}.chat-attachment-thumb img{width:100%;height:100%;display:block;object-fit:cover}.chat-attachment-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}.chat-attachment-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.chat-attachment-copy b,.chat-attachment-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-attachment-copy b{font-size:9.5px;font-weight:900}.chat-attachment-copy small{color:#7189a1;font-size:7.8px;font-weight:750}.chat-message.mine .chat-attachment-copy small{color:rgba(255,255,255,.78)}
.chat-reaction-row{position:relative;display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:25px}.chat-message.mine .chat-reaction-row{justify-content:flex-end}.chat-reaction-chip,.chat-reaction-add,.chat-reaction-picker button{min-width:34px;height:27px;padding:0 8px;border:1px solid #cfdeea;border-radius:999px;background:#f7fbff;color:#345a7b;font-size:12px;font-weight:850}.chat-reaction-chip.mine{border-color:#88bff1;background:#eaf5ff;color:#176fbd}.chat-reaction-add{width:29px;min-width:29px;padding:0;display:grid;place-items:center}.chat-reaction-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}.chat-reaction-picker{position:absolute;left:0;bottom:33px;z-index:5;padding:5px;display:flex;gap:4px;border:1px solid #cbddea;border-radius:999px;background:#fff;box-shadow:0 10px 25px rgba(24,61,94,.15)}.chat-message.mine .chat-reaction-picker{left:auto;right:0}.chat-reaction-picker button{min-width:34px;padding:0;border:0;background:transparent;font-size:17px}
.chat-pending-wrap{padding:8px 12px 0;border-top:1px solid #d7e5ef;background:rgba(235,246,253,.96)}.chat-pending-list{display:grid;gap:7px}.chat-pending-item{padding:7px 8px;display:flex;align-items:center;gap:9px;border:1px solid #cddfeb;border-radius:14px;background:#fff;box-shadow:0 5px 12px rgba(23,68,103,.04)}.chat-pending-item.uploading{opacity:.68}.chat-pending-remove{width:29px;height:29px;flex:0 0 29px;border:0;border-radius:10px;background:#fff0f3;color:#c25268;font-size:17px}
.chat-composer{flex:0 0 auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #cfdfeb;background:rgba(245,250,254,.97)}.chat-composer-row{display:grid;grid-template-columns:46px 46px minmax(0,1fr) 56px;gap:8px;align-items:end}.chat-composer-btn,.chat-send-btn{height:46px;display:grid;place-items:center;border:1px solid #b9d2e4;border-radius:16px;background:#fff;color:#123e6b;box-shadow:0 5px 13px rgba(28,71,105,.06)}.chat-composer-btn svg,.chat-send-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.chat-input-shell{min-width:0;display:flex;align-items:flex-end;padding-right:7px;border:1px solid #b6d0e3;border-radius:18px;background:#fff;box-shadow:0 5px 13px rgba(28,71,105,.05)}#htnsChatInput{width:100%;min-height:48px;max-height:120px;padding:13px 8px 12px 14px;resize:none;overflow-y:auto;border:0;outline:none;background:transparent;color:#153c65;font-size:12px;line-height:1.35;font-weight:650}#htnsChatEmoji{width:38px;height:38px;flex:0 0 38px;border:0;background:transparent;color:#143f6c}#htnsChatEmoji svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}.chat-send-btn{height:56px;border:0;border-radius:18px;background:linear-gradient(140deg,#0c84fa 0%,#4cadff 100%);color:#fff;box-shadow:0 10px 19px rgba(17,122,226,.24)}.chat-send-btn:disabled,.chat-composer-btn:disabled,#htnsChatEmoji:disabled,.chat-quick-chip:disabled{opacity:.44;box-shadow:none}
.chat-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}.chat-quick-chip{min-height:44px;padding:8px 8px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d7dfe9;border-radius:18px;font-size:9.5px;font-weight:900;line-height:1.05}.chat-quick-chip svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}.chat-quick-chip.idea{background:var(--chat-purple);color:var(--chat-purple-ink)}.chat-quick-chip.update{background:var(--chat-mint);color:var(--chat-mint-ink)}.chat-quick-chip.encourage{background:var(--chat-pink);color:var(--chat-pink-ink)}
[data-theme="dark"] #htnsChatDrawer{background:linear-gradient(180deg,#0b223b,#0c2946);border-color:#315777}[data-theme="dark"] .chat-head-icon,[data-theme="dark"] .chat-close,[data-theme="dark"] .chat-tab,[data-theme="dark"] .chat-room-note,[data-theme="dark"] .chat-bubble,[data-theme="dark"] .chat-composer-btn,[data-theme="dark"] .chat-input-shell,[data-theme="dark"] .chat-pending-item,[data-theme="dark"] .chat-quick-chip{background:#102f50;border-color:#315777;color:#eaf3fa}[data-theme="dark"] .chat-head-copy h2,[data-theme="dark"] .chat-tab-copy strong,[data-theme="dark"] .chat-message-head strong{color:#eef6fd}[data-theme="dark"] .chat-head-copy p,[data-theme="dark"] .chat-tab-copy small,[data-theme="dark"] .chat-message-head span{color:#afc0d0}[data-theme="dark"] .chat-composer,[data-theme="dark"] .chat-pending-wrap{background:#0d2744;border-color:#315777}
@media(min-width:720px){#htnsChatDrawer{left:auto;right:16px;bottom:16px;width:min(440px,calc(100vw - 32px));height:min(84dvh,820px);border-radius:29px}}
@media(max-width:390px){#htnsChatDrawer{left:5px;right:5px;bottom:5px;height:min(94dvh,860px)}.chat-drawer-head{grid-template-columns:50px minmax(0,1fr) 50px;padding-left:12px;padding-right:12px}.chat-head-icon,.chat-close{width:50px;height:50px;border-radius:16px}#htnsChatTabs{padding-left:11px;padding-right:11px;gap:7px}.chat-tab{min-height:71px;padding:10px;gap:8px}.chat-tab-icon{width:38px;height:38px;flex-basis:38px}.chat-tab-copy strong{font-size:11.5px}.chat-tab-copy small{font-size:8.5px}.chat-composer-row{grid-template-columns:42px 42px minmax(0,1fr) 50px;gap:6px}.chat-composer-btn{height:42px}.chat-send-btn{height:50px}.chat-quick-actions{gap:6px}.chat-quick-chip{padding-left:5px;padding-right:5px;font-size:8.5px}}
@media(prefers-reduced-motion:reduce){#htnsChatDrawer,#htnsChatBackdrop{transition:none!important;animation:none!important;scroll-behavior:auto!important}}