.social{max-width:520px;margin:auto;color:var(--ink)}
.social button,.social-action,.social-file{min-height:44px;min-width:44px;border-radius:14px;padding:10px 14px;cursor:pointer}
.social button{border:1px solid #cbd8dd;background:var(--paper);color:var(--ink);font:inherit}
.social button:disabled{opacity:.6;cursor:wait}
.social button:focus-visible,.social a:focus-visible,.social input:focus-visible,.social textarea:focus-visible,.social select:focus-visible{outline:3px solid var(--ocean);outline-offset:2px}
.social-action{display:inline-flex;align-items:center;background:var(--teal);color:white;text-decoration:none}
.social-tabs{display:flex;gap:8px;margin:16px 0}.social-tabs button{border-radius:999px;flex:1}.social-tabs [aria-selected=true]{background:var(--teal);color:white;border-color:var(--teal)}
.social-list{display:grid;gap:12px;margin:16px 0}.social-card{background:var(--paper);border-radius:20px;padding:16px;overflow-wrap:anywhere}.social-card h2{font-size:1.15rem;margin:0 0 10px}
.crew-member{display:flex;align-items:center;gap:12px}.crew-member>div{flex:1;min-width:0}.crew-member p{margin:4px 0;color:var(--fog)}.crew-member button{padding:10px}.crew-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:white;font-weight:700}
.thread-link{display:flex;justify-content:space-between;gap:12px;color:var(--ink);text-decoration:none;min-height:56px;align-items:center}.thread-link .thread-unread{background:var(--teal);color:white;border-radius:99px;padding:4px 9px}
.chat-thread{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-h,64px) - var(--ticker-h,40px) - 130px);min-height:330px}.chat-thread h1{font-size:1.2rem;margin:8px 0}.chat-status{margin:4px 0}.chat-thread>[data-refresh]{align-self:flex-start;padding:4px 12px}.chat-messages{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:100px;padding:12px 0;overflow-anchor:none}.chat-bubbles{display:flex;flex-direction:column;gap:12px}.chat-bubble{align-self:flex-start;background:var(--paper);border-radius:20px 20px 20px 4px;padding:12px;max-width:88%;overflow-wrap:anywhere}.chat-bubble.mine{align-self:flex-end;background:var(--teal);color:white;border-radius:20px 20px 4px 20px}.chat-bubble header{font-size:.75rem}.chat-bubble p,.note-body{white-space:pre-wrap}.chat-bubble p{margin:8px 0}.chat-reactions{display:flex;flex-wrap:wrap;gap:2px}.chat-reactions button{padding:4px;min-width:44px;font-size:1rem}.chat-reactions [aria-pressed=true]{background:var(--sand);border:2px solid var(--ocean)}.chat-photo img{display:block;max-width:100%;max-height:240px;border-radius:14px}.chat-bubble [data-delete]{font-size:.8rem;margin-top:6px}
.chat-composer{position:sticky;bottom:calc(var(--nav-h,64px) + var(--ticker-h,40px) + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:end;gap:8px;background:var(--bg);padding:10px 0;flex-shrink:0}.chat-input{flex:1 0 100%;font-size:.85rem}.chat-composer textarea{width:100%;resize:none;box-sizing:border-box}.chat-composer [type=submit]{margin-left:auto;background:var(--teal);color:white}.social-file{border:1px solid #cbd8dd;display:flex;align-items:center;position:relative;overflow:hidden}.social-file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.social-file:focus-within{outline:3px solid var(--ocean)}.chat-attachment{font-size:.75rem;max-width:120px;overflow-wrap:anywhere}body.kb-open .chat-composer{bottom:env(safe-area-inset-bottom)}body.kb-open .chat-thread{height:calc(100dvh - 100px);min-height:240px}
.social-form{display:grid;gap:12px;margin:16px 0}.social-form label{display:grid;gap:6px}.social input,.social textarea,.social select{font:inherit;border:1px solid #b7c7ce;border-radius:14px;padding:10px;min-height:44px;box-sizing:border-box;max-width:100%}.social-form .social-check{display:flex;align-items:center;gap:10px}.social-check input{width:24px;height:24px}.social-actions{display:flex;gap:8px;flex-wrap:wrap}.note-comments article{border-bottom:1px solid #dce5e9;padding:12px 0}.note-comments time{font-size:.8rem;color:var(--fog)}

/* Own-message contrast is independent of app.css. */
.chat-bubble.mine,.chat-bubble.mine *{color:#fff}
.chat-bubble.mine button{background:var(--teal)}
.social-heading,.thread-identity{display:flex;align-items:center;gap:12px}.social-heading{justify-content:space-between}.social-heading h1{margin:8px 0}.social-heading [data-refresh]{flex-shrink:0;padding:4px;width:44px;height:44px}
.chat-avatar{background:var(--teal)}.thread-summary{flex:1;min-width:0}.thread-summary strong,.thread-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread-preview{font-size:.85rem;color:var(--fog);margin-top:4px}.thread-meta{display:grid;justify-items:end;gap:6px;max-width:30%;font-size:.75rem}.thread-identity{min-width:0}.thread-identity h1{overflow-wrap:anywhere}
.chat-reactions:empty{display:none}.reaction-pill{font-size:.75rem;border:1px solid currentColor;border-radius:99px;padding:2px 6px}.chat-bubble [data-open-react]{font-size:.75rem;padding:4px 8px;background:transparent}.reaction-popover{display:flex;flex-wrap:wrap;gap:4px;max-width:280px;padding:8px 0}.reaction-popover[hidden]{display:none}.reaction-popover button{padding:4px;min-width:44px;min-height:44px}.chat-bubble.mine .reaction-popover [aria-pressed=true]{background:var(--ocean)}

.chat-bubble{position:relative}.reaction-popover{position:absolute;bottom:44px;left:0;z-index:5;width:260px;max-width:calc(100vw - 64px);box-sizing:border-box;background:var(--paper);border:1px solid #cbd8dd;border-radius:14px;padding:8px;box-shadow:0 4px 16px #18273326}.chat-bubble.mine .reaction-popover{left:auto;right:0;background:var(--teal)}

/* A fixed reaction sheet stays clear of adjacent bubbles and scroll clipping. */
.social .reaction-popover,.chat-bubble.mine .reaction-popover{position:fixed;bottom:calc(var(--nav-h,64px) + var(--ticker-h,40px) + env(safe-area-inset-bottom) + 12px);left:50%;right:auto;transform:translateX(-50%);z-index:30;width:280px;max-width:calc(100vw - 32px)}
.social .reaction-popover button{font-size:1rem}

/* Showcase social screens. The viewport itself scrolls except for message history. */
:root{--topbar-h:65px;--social-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(var(--topbar-h) + 76px);scroll-padding-bottom:calc(var(--nav-h,64px) + var(--ticker-h,44px) + 80px)}
body.has-tabs{--social-bottom:calc(var(--nav-h,64px) + env(safe-area-inset-bottom,0px))}
body.has-ticker{--social-bottom:calc(var(--nav-h,64px) + var(--ticker-h,44px) + env(safe-area-inset-bottom,0px))}
body.kb-open{--social-bottom:env(safe-area-inset-bottom,0px)}
.social-sticky{position:sticky;top:var(--topbar-h);z-index:12;background:#fff}
.social-sticky.is-stuck{box-shadow:0 5px 8px #063e5612}
.social-heading{padding:8px 0;background:#fff;gap:6px}
.social-heading h1,.media-heading h1{display:flex;align-items:center;gap:8px;font-size:1.15rem;color:var(--ticker);letter-spacing:-.02em}
.social-heading button,.social-icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;border:0;background:transparent;color:var(--ticker);text-decoration:none}
.social-tabs{gap:4px;padding:5px;margin:8px 0 16px;border-radius:28px;background:#edf5f7}
.social-tabs button{border:0;background:transparent;color:var(--fog);font-weight:650}
.social-card{box-shadow:0 4px 18px #063e5610}
.crew-grid{margin:22px 0 28px}
.social .crew-member,.crew-invite{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:0;border:0;background:transparent;text-align:center;text-decoration:none;color:var(--ticker)}
.crew-member strong,.crew-invite strong{font-size:.85rem;overflow-wrap:anywhere;line-height:1.3}
.crew-member small{font-size:.75rem;color:var(--fog);text-transform:capitalize}
.crew-member .crew-avatar,.crew-invite>span{width:clamp(68px,19vw,92px);height:clamp(68px,19vw,92px);font-size:1.5rem;box-shadow:0 3px 10px #063e5620}
.crew-invite>span{display:grid;place-items:center;border:2px dashed #8bc6c5;border-radius:50%;background:#edf7f7;color:var(--teal);box-shadow:none}
.social .crew-info{display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;border:0}
.crew-info>span{flex:1;min-width:0}.crew-info strong,.crew-info small{display:block}.crew-info>.ec-icon{color:var(--teal)}
.crew-screen h2{color:#fff;text-shadow:0 1px 3px #000,0 0 6px #0009;font-size:1rem}.crew-screen [role=status]:empty{display:none}
.chat-thread{height:calc(var(--social-viewport-h,100dvh) - var(--topbar-h) - var(--social-bottom) - 32px);min-height:240px}
body.kb-open .chat-thread{height:calc(var(--social-viewport-h,100dvh) - var(--topbar-h) - 32px);min-height:0}
.chat-thread>.social-heading{flex:none}.thread-identity{flex:1;gap:8px}.chat-avatar{background:linear-gradient(135deg,#0e8c8c,#0876a3)}
.chat-messages{scroll-padding-top:12px;scroll-padding-bottom:16px;padding:12px 2px 12px 38px;background:#f6f8f9;border-radius:16px}
.chat-bubble{max-width:90%;padding:10px 12px;box-shadow:0 2px 8px #063e560a;border-radius:16px 16px 16px 4px}
.message-avatar{position:absolute;left:-34px;top:2px;width:28px;height:28px;display:grid;place-items:center;background:linear-gradient(135deg,#0876a3,#0e8c8c);color:white;border-radius:50%;font-size:.6rem;font-weight:750}
.chat-bubble header{font-weight:750;color:var(--ticker)}.chat-bubble time{font-weight:400;color:var(--fog)}
.chat-bubble.mine{background:#d0f2df;border-radius:16px 16px 4px 16px}
.chat-bubble.mine,.chat-bubble.mine *{color:#183b38}
.chat-bubble.mine button{background:transparent}.chat-bubble.mine .reaction-popover{background:#fff}.chat-bubble.mine .reaction-popover [aria-pressed=true]{background:#d0f2df}
.chat-reactions{gap:4px;margin-top:5px}.reaction-pill{background:white;border-color:#d7e9e5;color:#183b38}
.chat-photo{display:flex;flex-direction:column}.chat-photo img{border-radius:12px;width:100%}
.chat-composer{bottom:var(--social-bottom);z-index:12;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;padding:10px 0;background:#fff}
.chat-input{flex:1;min-width:0}.social .chat-composer textarea{border-radius:24px;min-height:44px;height:44px;padding:10px 12px;background:#f1f7f8;font-size:.85rem}
.social .social-file{border:0;padding:8px;width:44px;color:var(--teal)}
.social .chat-composer [type=submit]{width:44px;height:44px;padding:10px;border:0;border-radius:50%;flex:none;background:var(--teal);color:white}
.chat-attachment:empty{display:none}.chat-attachment{position:absolute;bottom:100%;right:0;padding:4px;background:var(--paper);border-radius:8px}
body.kb-open .reaction-popover{bottom:env(safe-area-inset-bottom,0px)}

/* Shared glass surfaces retain each feature’s layout and interactions. */
.social-card,.social-sticky,.social-heading,.social-tabs,.chat-composer,.chat-bubble:not(.mine){background:var(--glass);color:var(--ink);border:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter)}
/* Sticky controls keep a readable backing when this stylesheet loads alone. */
.social-sticky,.social-heading,.chat-composer{background:rgba(255,255,255,.40)}
@supports (background:var(--glass)){.social-sticky,.social-heading,.chat-composer{background:var(--glass,rgba(255,255,255,.40))}}

.crew-grid{padding:16px 8px;border-radius:20px}.chat-messages{background:transparent}


/* Review polish: compact controls without standalone bars. */
.crew-grid{position:relative;margin-top:0;padding-top:56px}.social .crew-refresh{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:50%;background:transparent}.crew-refresh::after{content:"";position:absolute;inset:-2px}

.tag-test{display:inline-block;vertical-align:middle;margin-left:4px;padding:2px 6px;border-radius:999px;background:#ffe4a3;color:#684200;border:1px solid #d99b2b;font-size:10px;font-weight:800;line-height:1.4;letter-spacing:.04em}

/* People cards use the kit grid; retain member and invitation controls. */
.crew-screen{min-width:0}.social .crew-member{padding:16px 8px;background:var(--glass);border-radius:16px;min-height:150px}
.crew-member .ec-card-body{min-width:0}.crew-member strong,.crew-member small{display:block}.crew-member small{margin-top:6px}
.crew-screen .crew-invite{padding:16px 8px;min-height:150px}.social .crew-refresh{width:44px;height:44px;min-height:44px;min-width:44px}