/* Social Hub 3.0 — focused, app-like messaging interface */
.social-main{width:min(100% - 40px,1320px);max-width:1320px;padding-top:clamp(24px,4vw,48px);padding-bottom:72px}
.social-hero{max-width:none;min-height:250px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(24px,4.5vw,52px);margin-bottom:clamp(24px,3.5vw,38px)}
.social-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(174,190,235,.18);border-radius:999px;padding:7px 11px;background:rgba(8,11,21,.48);font-size:10px}
.social-hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#85f5ee;box-shadow:0 0 14px #85f5ee99}
.social-hero h1{max-width:850px;margin:23px 0 14px;font-size:clamp(38px,6.5vw,76px);letter-spacing:-.065em}
.social-hero>p{max-width:660px;margin:0;color:#b5bfdc;font-size:clamp(13px,1.5vw,15px);line-height:1.85}
.social-status{width:100%;max-width:540px;margin-top:26px;border-radius:14px;padding:12px 14px;background:rgba(7,10,19,.62)}
.social-status b{margin-left:auto}
.social-auth-layout{grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);gap:20px;margin:0 0 36px;align-items:stretch}
.social-panel{border-radius:22px;backdrop-filter:blur(16px)}
.auth-panel,.beta-panel{padding:clamp(22px,3.3vw,34px)}
.vc-chat-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.vc-chat-brand>a{display:grid;place-items:center;flex:0 0 52px;height:52px;border:1px solid rgba(133,245,238,.22);border-radius:16px;background:linear-gradient(145deg,rgba(117,84,232,.2),rgba(34,188,190,.1));box-shadow:0 10px 28px #0003}
.vc-chat-brand img{width:36px;height:36px}
.vc-chat-brand-copy{min-width:0}
.vc-chat-brand-name{font-size:13px;letter-spacing:.16em;font-weight:900;color:#f2f5ff}
.vc-chat-brand-subtitle{display:block;margin-top:4px;font-size:9px;letter-spacing:.15em;color:#9dece8;font-weight:800}
.vc-chat-brand-note{margin:6px 0 0;font-size:11px;line-height:1.55;color:#939fbd}
.auth-tabs{margin-bottom:25px;padding:5px;gap:5px}
.auth-tabs button{min-height:44px;font-size:12px}
.auth-panel h2,.beta-panel h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.045em}
.auth-panel>p:not(.small-note){font-size:13px;color:#aab5d2}
.auth-panel form{margin-top:22px}
.auth-panel label,.sidebar label,.report-panel label{font-size:11px;letter-spacing:.02em}
.auth-panel input,.sidebar input,.compose textarea,.report-panel textarea,.report-panel select{min-height:46px;padding:13px 14px;border-radius:13px;border-color:rgba(174,190,235,.2);background:rgba(6,10,19,.78)}
.auth-panel input:focus,.sidebar input:focus,.compose textarea:focus,.report-panel textarea:focus,.report-panel select:focus{border-color:#85f5ee;box-shadow:0 0 0 3px rgba(133,245,238,.11)}
.social-submit{min-height:48px;margin-top:20px}
.beta-panel{position:relative;isolation:isolate;background:radial-gradient(ellipse at 100% 0%,rgba(117,84,232,.14),transparent 48%),linear-gradient(150deg,rgba(19,25,43,.96),rgba(9,13,24,.98))}
.beta-panel>.eyebrow{font-size:10px;color:#9dece8}
.beta-panel h2{max-width:360px;margin:16px 0 24px}
.info-row{gap:14px;margin-top:18px}
.info-row>span{flex-basis:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,rgba(117,84,232,.22),rgba(34,188,190,.1));border-color:rgba(174,155,255,.23)}
.info-row strong{font-size:13px}
.info-row p{font-size:12px;color:#a6b0cb}
.small-note{color:#9aa5c3!important}
.social-account-bar{margin:0 0 16px;padding:22px 24px;border:1px solid rgba(174,190,235,.17);border-radius:21px;background:radial-gradient(ellipse at 0% 0%,rgba(117,84,232,.14),transparent 50%),linear-gradient(130deg,rgba(17,23,40,.94),rgba(9,13,24,.94))}
.social-account-bar h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.045em}
.social-account-bar p{color:#a7b2ce}
#logout{min-width:98px}
#app-feedback{margin:10px 0}
.mobile-chat-tabs{display:flex;gap:6px;padding:5px;margin:0 0 13px;border:1px solid rgba(174,190,235,.16);border-radius:15px;background:rgba(8,11,20,.82)}
.mobile-chat-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:45px;border:1px solid transparent;border-radius:11px;background:transparent;color:#a9b4d1;font:inherit;font-size:12px;font-weight:800}
.mobile-chat-tabs button.is-active{color:#f5f7ff;border-color:rgba(133,245,238,.2);background:linear-gradient(130deg,rgba(117,84,232,.24),rgba(34,188,190,.09));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.tab-count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:rgba(133,245,238,.12);color:#a4fff5;font-size:10px}
.social-workspace{grid-template-columns:minmax(290px,.37fr) minmax(0,.83fr);gap:16px;align-items:stretch}
.sidebar{padding:6px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(17,23,40,.97),rgba(9,13,24,.97))}
.side-section{padding:18px 0;border-bottom-color:rgba(174,190,235,.12)}
.side-section h3{font-size:12px;letter-spacing:.015em}
.sidebar form{gap:9px}
.sidebar input{min-height:43px;padding:11px 12px}
.sidebar form .btn{min-height:42px}
.section-heading{min-height:26px}
.count{border-color:rgba(133,245,238,.18);background:rgba(133,245,238,.07);color:#a6f8f0}
.side-list{gap:7px}
.list-empty{padding:9px 10px;border:1px dashed rgba(174,190,235,.15);border-radius:11px;color:#8c98b7;font-size:11px}
.request-row{gap:6px;padding:9px;border-color:rgba(174,190,235,.13);border-radius:12px;background:rgba(7,11,20,.66)}
.mini-action{min-height:30px;border-radius:9px;padding:6px 9px;border-color:rgba(174,155,255,.2);background:rgba(117,84,232,.12);font-size:10px}
.friend-row{min-height:51px;padding:9px 11px;border-color:rgba(174,190,235,.13);border-radius:13px;background:rgba(7,11,20,.62);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.friend-row:hover{transform:translateX(2px);border-color:rgba(133,245,238,.32);background:rgba(20,28,45,.92)}
.friend-row.active{border-color:rgba(133,245,238,.38);background:linear-gradient(110deg,rgba(117,84,232,.2),rgba(34,188,190,.06));box-shadow:inset 3px 0 #85f5ee}
.friend-avatar{flex-basis:35px;height:35px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#6d52be,#1b7a83);box-shadow:inset 0 1px rgba(255,255,255,.12)}
.friend-copy{font-size:12px}
.text-btn{min-height:32px;border-radius:9px;padding:7px 9px}
.text-btn:hover{background:rgba(133,245,238,.07);text-decoration:none}
.chat-panel{min-height:620px;border-radius:21px;background:rgba(9,13,24,.94)}
.chat-heading{align-items:center;padding:21px 23px;border-bottom-color:rgba(174,190,235,.13);background:radial-gradient(ellipse at 0% 0%,rgba(117,84,232,.13),transparent 65%),rgba(15,21,36,.96)}
.chat-heading h2{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.035em}
.chat-heading p{font-size:12px;color:#a7b2ce}
.connection-status{display:inline-flex;margin-top:9px;font-size:10px;color:#8e9bb9}
.refresh-btn{min-height:38px;border-radius:11px;border-color:rgba(174,190,235,.18);background:rgba(7,11,20,.62);transition:border-color .18s ease,background .18s ease}
.refresh-btn:hover{border-color:rgba(133,245,238,.35);background:rgba(20,28,45,.92)}
.history-toolbar{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid rgba(174,190,235,.08);background:rgba(7,11,20,.4)}
.history-toolbar span{font-size:10px;color:#8793b1}
.history-button{min-height:32px;border:1px solid rgba(174,190,235,.16);border-radius:9px;padding:6px 10px;background:rgba(17,23,40,.8);color:#bfc9e3;font:inherit;font-size:10px;font-weight:750}
.chat-empty{min-height:330px;padding:40px 24px;background:radial-gradient(ellipse at 50% 42%,rgba(117,84,232,.08),transparent 56%)}
.chat-empty>span{display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(174,155,255,.22);border-radius:20px;background:linear-gradient(145deg,rgba(117,84,232,.2),rgba(34,188,190,.08));font-size:28px}
.chat-empty h3{font-size:19px;letter-spacing:-.025em}
.chat-empty p{color:#939fbd}
.messages{flex:1;min-height:300px;max-height:unset;gap:13px;padding:22px;background:radial-gradient(ellipse at 70% 0%,rgba(117,84,232,.06),transparent 60%),rgba(7,10,18,.8);scrollbar-color:#3a4260 transparent;scrollbar-width:thin}
.message{max-width:min(82%,590px);gap:5px}
.message-meta{font-size:10px;color:#8592b1}
.message-bubble{padding:11px 14px;border-radius:5px 17px 17px 17px;border-color:rgba(174,190,235,.14);background:linear-gradient(140deg,rgba(24,32,51,.96),rgba(16,22,36,.96));font-size:13px;line-height:1.68}
.message.mine .message-bubble{border-radius:17px 5px 17px 17px;border-color:rgba(174,155,255,.28);background:linear-gradient(135deg,rgba(70,51,116,.92),rgba(20,55,65,.92))}
.compose{padding:16px;border-top-color:rgba(174,190,235,.13);background:rgba(13,18,31,.98)}
.compose textarea{min-height:84px;max-height:240px;line-height:1.65}
.compose-footer .btn{min-height:40px;border-radius:12px}
.compose-footer>span{display:flex;flex-direction:column;gap:3px}
.compose-footer .compose-hint{font-size:9px;color:#697795}
.chat-actions{padding:11px 16px;border-top-color:rgba(174,190,235,.11);background:rgba(9,13,24,.95)}
.report-panel{background:linear-gradient(140deg,rgba(24,20,39,.98),rgba(13,16,28,.98))}
.report-panel select{min-height:43px}
.social-main>.small-note{max-width:780px;margin:20px auto 0!important;text-align:center}
@media(min-width:1000px){
  .social-workspace{align-items:stretch}
  .sidebar{position:relative}
}
@media(max-width:900px){
  .social-main{width:min(100% - 30px,760px)}
  .social-auth-layout{grid-template-columns:1fr}
  .beta-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .beta-panel>.eyebrow,.beta-panel h2,.beta-panel>.small-note{grid-column:1/-1}
  .beta-panel h2{margin-bottom:8px}
  .info-row{margin-top:15px}
  .social-workspace{grid-template-columns:1fr}
  .chat-panel{min-height:580px}
  .messages{max-height:unset}
}
@media(max-width:600px){
  .social-main{width:calc(100% - 22px);padding-top:18px;padding-bottom:48px}
  .social-hero{min-height:0;padding:23px 19px;border-radius:21px;margin-bottom:20px}
  .social-hero h1{font-size:clamp(36px,10vw,52px);margin:19px 0 12px;letter-spacing:-.06em}
  .social-hero>p{font-size:12px;line-height:1.75}
  .social-status{gap:8px;margin-top:20px;padding:10px 11px;font-size:10px}
  .social-status b{font-size:8px;padding:4px 7px}
  .social-auth-layout{gap:12px}
  .auth-panel,.beta-panel{padding:19px;border-radius:19px}
  .vc-chat-brand{align-items:flex-start;gap:11px;margin-bottom:20px}
  .vc-chat-brand>a{flex-basis:44px;height:44px;border-radius:13px}
  .vc-chat-brand img{width:31px;height:31px}
  .vc-chat-brand-note{font-size:10px}
  .auth-tabs{margin-bottom:21px}
  .beta-panel{display:block}
  .beta-panel h2{margin:13px 0 18px}
  .info-row{margin-top:15px}
  .social-account-bar{padding:17px 16px;border-radius:18px}
  .social-account-bar h2{font-size:24px}
  .social-account-bar p{font-size:11px;max-width:230px}
  .social-account-bar .btn{min-height:39px;padding:8px 10px}
  .mobile-chat-tabs{position:sticky;top:7px;z-index:5;box-shadow:0 8px 26px rgba(0,0,0,.25)}
  .social-workspace{gap:10px}
  .social-workspace[data-mobile-pane="chat"] .sidebar{display:none}
  .social-workspace[data-mobile-pane="people"] .chat-panel{display:none}
  .sidebar{padding:5px 15px;border-radius:17px}
  .side-section{padding:15px 0}
  .side-list{grid-template-columns:1fr}
  .request-row{grid-template-columns:minmax(0,1fr) auto auto}
  .chat-panel{min-height:calc(100dvh - 185px);min-height:520px;border-radius:18px}
  .chat-heading{padding:15px;gap:10px}
  .chat-heading h2{font-size:21px}
  .chat-heading>div{min-width:0}
  .refresh-btn{min-height:36px}
  .history-toolbar{padding:7px 12px}
  .messages{min-height:280px;max-height:calc(100dvh - 390px);padding:14px;gap:11px}
  .message{max-width:90%}
  .message-bubble{padding:10px 12px;font-size:13px}
  .compose{padding:12px}
  .compose textarea{min-height:76px}
  .compose-footer .compose-hint{display:none}
  .chat-actions{padding:9px 12px}
  .report-panel{padding:14px}
  .social-main>.small-note{text-align:left;padding:0 4px}
}
@media(prefers-reduced-motion:reduce){
  .friend-row,.refresh-btn{transition:none}
  .friend-row:hover{transform:none}
}


/* Message actions: compact, accessible and thumb-friendly. */
.message{position:relative}
.message-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:2px 2px 0;opacity:.82;transition:opacity .16s ease}
.message.mine .message-actions{justify-content:flex-end}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-action{min-height:31px;border:1px solid rgba(174,190,235,.17);border-radius:9px;padding:6px 10px;background:rgba(16,22,36,.9);color:#aebbd8;font:inherit;font-size:10px;font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.message-action:hover{color:#f7f8ff;border-color:rgba(133,245,238,.35);background:rgba(28,39,58,.98)}
.message-action.primary{color:#d5fff9;border-color:rgba(133,245,238,.28);background:linear-gradient(135deg,rgba(33,150,146,.35),rgba(117,84,232,.25))}
.message-action.danger{color:#ffb8c2;border-color:rgba(255,110,135,.2);background:rgba(110,25,46,.17)}
.message-action.danger:hover{border-color:rgba(255,110,135,.45);background:rgba(110,25,46,.35)}
.message-editor{display:grid;gap:9px;min-width:min(70vw,300px)}
.message-editor textarea{width:100%;min-height:86px;resize:vertical;padding:11px 12px;border:1px solid rgba(133,245,238,.32);border-radius:12px;background:#0b1020;color:#f4f7ff;font:inherit;font-size:13px;line-height:1.6;outline:none}
.message-editor textarea:focus{border-color:#85f5ee;box-shadow:0 0 0 3px rgba(133,245,238,.09)}
.message-editor-actions{display:flex;justify-content:flex-end;gap:7px}
.is-deleted-message .message-bubble{color:#8893ae;background:rgba(13,17,29,.65);border-style:dashed;font-style:italic}
@media(max-width:600px){
 .message-actions{opacity:1;gap:4px}
 .message-action{min-height:35px;padding:7px 11px;font-size:11px}
 .message-editor{min-width:0;width:100%}
 .message{max-width:94%}
}
@media(prefers-reduced-motion:reduce){.message-actions,.message-action{transition:none}}