
:root{--wc-navy:#17314f;--wc-border:#e1e7ee;--wc-soft:#f4f7fa;--wc-mint:#dff7ed;--wc-blue:#eaf4ff}
.wc-page{padding:12px 12px 92px!important;max-width:760px;margin:0 auto;min-width:0;overflow-x:hidden}
.wc-page *{box-sizing:border-box}
.wc-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 2px 10px}
.wc-header h2{margin:0;color:var(--wc-navy);font-size:24px;line-height:1.05}
.wc-header p{margin:4px 0 0;color:#8290a1;font-size:11px}
.wc-online{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#5b6f85}
.wc-online i{width:7px;height:7px;border-radius:50%;background:#35c987}
.wc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.wc-tab{border:1px solid var(--wc-border);background:#fff;color:#78879a;border-radius:13px;padding:9px 7px;font-size:11px;font-weight:850;position:relative}
.wc-tab.active{background:#183153;color:#fff;border-color:#183153}
.wc-tab span{margin-left:5px;background:#ff6d8d;color:#fff;border-radius:999px;padding:2px 5px;font-size:9px}
.wc-chat,.wc-help-chat{background:#f1f4f6;border:1px solid #dfe5eb;border-radius:18px;overflow:hidden;min-height:570px;display:flex;flex-direction:column}
.wc-day{align-self:center;margin:10px auto 3px;background:#fff;border:1px solid #e1e5ea;border-radius:999px;padding:4px 9px;font-size:10px;color:#7f8b98}
.wc-msg-list{padding:8px 10px 12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:510px;min-height:390px;scroll-behavior:smooth}
.wc-row{display:flex;align-items:flex-start;gap:6px;position:relative;padding-right:28px}
.wc-row.mine{justify-content:flex-end;padding-right:0;padding-left:28px}
.wc-avatar{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d7efff,#eadfff);color:#415e7e;font-size:10px;font-weight:900}
.wc-bubble{max-width:min(78%,520px);background:#fff;border-radius:5px 14px 14px 14px;padding:7px 9px;box-shadow:0 1px 2px rgba(15,38,60,.08);min-width:92px}
.wc-row.mine .wc-bubble{background:#dff7e8;border-radius:14px 5px 14px 14px}
.wc-row.hq:not(.mine) .wc-bubble{background:#eef5ff}
.wc-bubble.notice{border-left:3px solid #6aa7d8}
.wc-name{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:#586d83;font-size:10px;font-weight:900;margin-bottom:3px}
.wc-hq{background:#17314f;color:#fff;padding:2px 5px;border-radius:999px;font-size:8px}
.wc-muted{background:#fff0f3;color:#b44860;padding:2px 5px;border-radius:999px;font-size:8px}
.wc-text{font-size:12px;line-height:1.48;color:#2f465e;white-space:pre-wrap;overflow-wrap:anywhere}
.wc-meta{text-align:right;color:#98a3ae;font-size:8px;margin-top:3px}
.wc-quote{background:rgba(255,255,255,.65);border-left:3px solid #6ea1c8;border-radius:6px;padding:5px 7px;margin-bottom:6px;display:flex;flex-direction:column;gap:2px;max-width:100%;overflow:hidden}
.wc-quote b{font-size:9px;color:#456581}.wc-quote span{font-size:9px;color:#7e8b99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-more{position:absolute;right:2px;top:1px;border:0;background:transparent;color:#8b96a2;font-size:17px;padding:2px 4px;line-height:1;z-index:5}
.wc-row.mine .wc-more{right:auto;left:2px}
.wc-menu{display:none;position:absolute;right:20px;top:22px;width:132px;background:#fff;border:1px solid #dce3e9;border-radius:11px;box-shadow:0 12px 28px rgba(23,49,79,.18);overflow:hidden;z-index:30}
.wc-row.mine .wc-menu{right:auto;left:20px}
.wc-menu.show{display:block}
.wc-menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 10px;font-size:10px;color:#56697d}
.wc-menu button+button{border-top:1px solid #f0f2f4}.wc-menu button.danger{color:#b2485e}
.wc-compose{margin-top:auto;position:sticky;bottom:0;background:#f6f7f8;border-top:1px solid #dfe4e9;padding:7px}
.wc-compose-line{display:grid;grid-template-columns:30px 1fr auto;gap:6px;align-items:end}
.wc-compose textarea{resize:none;min-height:36px;max-height:90px;border:1px solid #dce3e9;border-radius:18px;padding:9px 11px;font:10px/1.35 inherit;outline:none;background:#fff;color:#30475f}
.wc-attach{width:30px;height:30px;border-radius:50%;border:1px solid #d6dde4;background:#fff;color:#66788b;font-size:18px;line-height:1}
.wc-send{border:0;border-radius:16px;background:#183153;color:#fff;padding:9px 12px;font-size:11px;font-weight:900}
.wc-reply-preview{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border-left:3px solid #6b9ec8;border-radius:9px;padding:6px 8px;margin-bottom:6px}
.wc-reply-preview div{min-width:0;display:flex;flex-direction:column}.wc-reply-preview b{font-size:9px;color:#456581}.wc-reply-preview span{font-size:9px;color:#8995a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-reply-preview button{border:0;background:transparent;color:#8793a1;font-size:16px}
.wc-help-intro{background:#fff;padding:11px 12px;border-bottom:1px solid #e2e7eb}.wc-help-intro b{font-size:13px;color:#2f465e}.wc-help-intro p{margin:3px 0 0;font-size:10px;line-height:1.4;color:#8290a0}
.wc-admin-help{display:grid;grid-template-columns:190px 1fr;gap:8px}
.wc-help-list{background:#fff;border:1px solid #dfe5eb;border-radius:16px;padding:7px;display:flex;flex-direction:column;gap:5px;max-height:570px}
.wc-ticket{border:0;background:#f7f9fb;text-align:left;border-radius:11px;padding:9px}.wc-ticket.active{background:#eaf3ff}.wc-ticket b,.wc-ticket span,.wc-ticket small{display:block}.wc-ticket b{font-size:11px;color:#344e68}.wc-ticket span{font-size:9px;color:#718092;margin-top:3px}.wc-ticket small{font-size:8px;color:#9aa4ae;margin-top:4px}
.wc-help-person{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#fff;border-bottom:1px solid #dfe5eb}.wc-help-person b,.wc-help-person small{display:block}.wc-help-person b{font-size:11px;color:#344e68}.wc-help-person small{font-size:9px;color:#8b97a4;margin-top:2px}
.wc-modal{position:fixed;inset:0;background:rgba(19,37,56,.42);display:none;align-items:flex-end;justify-content:center;padding:12px;z-index:30000}.wc-modal.show{display:flex}
.wc-sheet{width:min(440px,100%);background:#fff;border-radius:20px;padding:15px;box-shadow:0 24px 60px rgba(23,49,79,.25)}.wc-sheet h3{margin:0 0 7px;font-size:15px;color:#2c435a}.wc-sheet p{margin:0 0 14px;font-size:11px;line-height:1.45;color:#788698}
.wc-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.wc-sheet-actions button{border:0;border-radius:11px;padding:9px;font-size:11px;font-weight:900}.wc-cancel{background:#f0f3f6;color:#647589}.wc-confirm{background:#b44860;color:#fff}
.wc-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:40000;background:#183153;color:#fff;border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800;box-shadow:0 8px 22px rgba(23,49,79,.22);max-width:calc(100vw - 30px);text-align:center}
.wc-nav-item{position:relative!important;justify-content:center!important}.wc-nav-item .nav-icon{display:block!important;width:19px;height:19px}.wc-unread{position:absolute;top:3px;right:16%;width:16px;height:16px;border-radius:50%;background:#ff6d8d;color:#fff;border:2px solid #fff;display:grid;place-items:center;font-size:8px}
@media(max-width:620px){.wc-admin-help{grid-template-columns:1fr}.wc-help-list{max-height:none;display:grid;grid-template-columns:1fr 1fr}.wc-ticket:nth-child(n+3){display:none}.wc-help-chat{min-height:500px}.wc-msg-list{max-height:490px}}
@media(max-width:420px){.wc-page{padding-left:9px!important;padding-right:9px!important}.wc-header h2{font-size:22px}.wc-bubble{max-width:82%}.wc-tabs{gap:4px}.wc-tab{font-size:10px}.bottom-nav .nav-item span{font-size:10px!important}}
/* Community V2 Live refinements */
.wc-live{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:850;color:#4f7c67;background:#edf9f3;border:1px solid #d7eee3;border-radius:999px;padding:5px 8px}.wc-live i{width:7px;height:7px;border-radius:50%;background:#35c987}.wc-live.off{color:#7e8c9a;background:#f4f6f8;border-color:#e3e7eb}.wc-live.off i{background:#a5afb9}
.wc-compose-line{grid-template-columns:1fr auto}.wc-attach{display:none!important}
.wc-avatar.img{overflow:hidden;background:#eef4fa}.wc-avatar.img img{width:100%;height:100%;object-fit:cover;display:block}
.wc-loading,.wc-error,.wc-suspended{margin:20px auto;background:#fff;border:1px solid #dfe5eb;border-radius:18px;padding:28px 20px;text-align:center;color:#6f7f90;max-width:520px}.wc-error strong,.wc-suspended strong{display:block;color:#304a63;font-size:15px;margin-bottom:7px}.wc-error span,.wc-suspended p{font-size:11px;line-height:1.5;margin:0}.wc-error button{margin-top:13px;border:0;border-radius:12px;background:#183153;color:#fff;padding:9px 13px;font-size:11px;font-weight:850}.wc-empty{padding:50px 16px;text-align:center;color:#98a3ae;font-size:11px}.wc-empty.small{padding:22px 10px}.wc-muted-bar{margin-top:auto;background:#fff7df;border-top:1px solid #eedfac;color:#7c6a32;padding:10px 12px;text-align:center;font-size:10px;font-weight:750}.wc-select-help{display:grid;place-items:center;color:#8996a4;font-size:11px;padding:30px}.wc-toast.bad{background:#9f3f54}
.wc-ticket{cursor:pointer}.wc-send:disabled{opacity:.55}.wc-row.mine .wc-name{justify-content:flex-end}
@media(max-width:420px){.wc-chat,.wc-help-chat{min-height:calc(100dvh - 235px)}.wc-msg-list{min-height:calc(100dvh - 335px);max-height:calc(100dvh - 300px)}}

.bottom-nav{grid-template-columns:repeat(6,1fr)!important}.wc-nav-item span{font-size:10px!important}

/* Chat V2.2 navigation isolation fix */
.view-area.wc-community-open > :not(#stemkidsCommunityLive){display:none!important}
.view-area.wc-community-open > #stemkidsCommunityLive{display:block!important}

/* Chat V2.3 exclusive active-state guard */
body.wc-chat-active .bottom-nav .nav-item.active:not(.wc-nav-item){
  color:var(--muted)!important;
  background:transparent!important;
}
body.wc-chat-active .bottom-nav .nav-item.active:not(.wc-nav-item) .nav-icon{transform:none!important}
body.wc-chat-active .bottom-nav .wc-nav-item{
  color:var(--green)!important;
  background:linear-gradient(145deg,var(--mint),var(--sky))!important;
}

/* Chat stability V3.3: prevent mobile Safari input zoom/keyboard jump */
.wc-compose-line textarea{font-size:16px!important;-webkit-text-size-adjust:100%;}

/* Chat V3.4 Shared Community Pin */
#wcPins:empty,.wc-pins-empty{display:none!important}
.wc-pins{background:linear-gradient(135deg,#f4f1ff,#f5fcff);border-bottom:1px solid #dddff1;padding:9px 10px;max-height:155px;overflow:auto;overscroll-behavior:contain}
.wc-pins-title{display:flex;align-items:center;gap:6px;font-size:11px;color:#555bad;font-weight:800;margin-bottom:5px}
.wc-pins-title span{margin-left:auto;color:#8d92b1;font-size:9px}
.wc-pin-row{display:flex;gap:5px;align-items:center;border:1px solid #e2e3f4;background:#fff;border-radius:10px;padding:5px 7px;margin:4px 0}
.wc-pin-jump{display:flex;text-align:left;flex:1;min-width:0;align-items:center;gap:6px;border:0;background:none;cursor:pointer;font-size:10px}
.wc-pin-jump strong{flex:none;max-width:32%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#395373;font-size:10px}
.wc-pin-jump span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#748298}
.wc-pin-remove{flex:none;border:0;border-radius:8px;background:#f3f5fc;color:#63748b;font-size:15px;width:24px;height:24px;cursor:pointer}
.wc-pin-tag{color:#5a62c6;background:#eef0ff;border-radius:6px;padding:2px 5px;font-size:8px;margin-left:5px}
.wc-pin-highlight .wc-bubble{outline:2px solid #8a86df;outline-offset:2px}

/* Chat V3.4 Phone Notification opt-in — Lucide bell */
.wc-push-control{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f5f9ff;border-bottom:1px solid #e2ebf5;padding:8px 10px}
.wc-push-control>div{display:flex;align-items:center;gap:7px;min-width:0;color:#506884}
.wc-push-control>div span{font-size:10px;line-height:1.35}
.wc-push-control>div svg{flex:none}
.wc-push-control>button{flex:none;border:1px solid #cdebdc;border-radius:10px;background:#e4f8ef;color:#277e5d;padding:8px;font-size:10px;cursor:pointer;font-weight:700}
.wc-push-control>button:disabled{opacity:.6}
@media(max-width:380px){.wc-push-control{flex-direction:column;align-items:stretch}.wc-push-control>button{width:100%}}
