/* Friends and messages share the cabinet design language. */
/* Community surfaces: restrained accents, readable groups and consistent controls. */
.social-page{padding-top:36px;min-height:75vh}.social-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.social-header h1{font-size:28px;margin:0 0 6px;letter-spacing:-.8px}.social-header p{margin:0;color:var(--muted);font-size:14px}.social-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.social-tabs button.on{border-color:var(--accent);color:var(--accent);background:#ff8a1e15}.social-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;height:min(650px,75vh);min-height:430px}.social-list{overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:10px}.social-person{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:var(--text);width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer}.social-person:hover,.social-person.on{background:#ff8a1e14}.social-person img,.social-avatar{width:42px;height:42px;border-radius:13px;object-fit:cover;flex:none}.social-person div{min-width:0;flex:1}.social-person b{display:block;font-size:14px}.social-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;margin-top:4px}.social-badge{background:var(--accent);color:#fff;border-radius:8px;padding:3px 7px;font-size:11px}.social-chat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;min-width:0}.social-chat-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.social-chat-head a{font-weight:700}.social-messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:20px;overscroll-behavior:contain}.social-bubble{max-width:85%;padding:12px 14px;background:#262528;border-radius:14px 14px 14px 3px;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}.social-bubble.mine{align-self:flex-end;background:#593118;border-radius:14px 14px 3px 14px}.social-bubble small{display:block;font-size:10px;text-align:right;color:#aca39c;margin-top:6px;white-space:normal}.social-compose{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border)}.social-compose textarea{resize:none;min-width:0;flex:1;min-height:46px;max-height:120px}.social-empty{margin:auto;text-align:center;color:var(--muted);padding:24px;font-size:14px;line-height:1.7}.social-search{display:flex;gap:10px;margin-bottom:20px}.social-search .input{flex:1;min-width:0}.social-friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:12px}.social-friend-card{padding:16px;background:var(--card);border:1px solid var(--border);border-radius:16px}.social-friend-card .social-person{padding:0;margin-bottom:14px;cursor:default}.social-actions{display:flex;gap:8px;flex-wrap:wrap}.social-actions .btn{font-size:12px;padding:9px 12px}.social-profile{max-width:850px;margin:auto}.social-profile-hero{padding:30px;border:1px solid #433020;border-radius:22px;background:linear-gradient(120deg,#261c16,var(--card));margin-bottom:20px;display:flex;gap:24px;align-items:center}.social-profile-hero>img{width:94px;height:94px;border-radius:24px;object-fit:cover}.social-profile-hero h1{font-size:28px;margin:0 0 8px}.social-profile-bio{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:14px;line-height:1.7}.social-profile-hero .social-actions{margin-top:16px}.social-online{color:#75d98b}.social-settings{max-width:650px}.social-settings label{display:flex;gap:10px;margin:18px 0;color:var(--text);font-size:14px}.social-settings textarea{width:100%;min-height:100px}.social-error{color:#f99191;font-size:13px;margin:10px 0}.social-settings input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.social-status{font-size:12px;color:var(--muted)}
@media(max-width:700px){.social-page{padding-top:24px}.social-header{align-items:flex-start}.social-header h1{font-size:24px}.social-layout{grid-template-columns:1fr;height:auto}.social-list{max-height:210px}.social-chat{height:60vh;min-height:380px}.social-profile-hero{padding:20px;align-items:flex-start;flex-wrap:wrap}.social-profile-hero>img{width:72px;height:72px}.social-compose .btn{padding:10px}.social-bubble{max-width:95%}.social-tabs button{padding:9px 12px;font-size:12px}}

.social-profile > section,.social-profile #profileFriends > section{margin-bottom:20px}
.social-layout{height:clamp(430px,calc(100dvh - 260px),650px)}
.social-back{display:none}
@media(max-width:700px){.social-layout{height:auto}.social-layout:has(.social-chat-head) .social-list{display:none}.social-layout:not(:has(.social-chat-head)) .social-chat{display:none}.social-chat{height:calc(100dvh - 250px);min-height:380px}.social-back{display:inline-flex}.social-chat-head{padding:12px;flex-wrap:wrap}.social-chat-head #chatReport{font-size:11px}.social-compose{gap:7px;padding:10px}}

.social-settings{max-width:760px;padding:26px}
.social-settings #privacyOptions{display:grid;gap:8px;margin:20px 0}
.social-settings #privacyOptions label{margin:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:#ffffff03;align-items:center;font-size:13px;line-height:1.5}
.social-settings #privacyOptions label:has(input:checked){border-color:#ff8a1e44;background:#ff8a1e08}
.social-settings input[type=checkbox]{flex:none}
.social-settings textarea{resize:vertical;line-height:1.6}
.social-settings label[for=profileBio]{font-size:13px;color:var(--muted)}
.social-empty{display:flex;align-items:center;flex-direction:column;gap:12px;max-width:360px}
.social-empty b{color:var(--text);font-size:17px;line-height:1.45}
.social-empty-symbol{display:grid;place-items:center;width:56px;height:56px;border:1px solid #ff8a1e33;background:#ff8a1e10;color:var(--accent);border-radius:17px;margin-bottom:6px}
.social-empty-symbol .i{width:25px;height:25px}
.social-profile-hero .sub{display:block;margin-top:12px}
.social-friend-card{transition:border-color .15s,background .15s}
.social-friend-card:hover{border-color:#ff8a1e44}
.social-tabs .btn:focus-visible,.social-person:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.social-settings{padding:18px}.social-settings #privacyOptions label{padding:12px}.social-header>div{min-width:0}.social-header> .btn{white-space:nowrap}.social-header h1{font-size:23px}.social-header p{font-size:12px;line-height:1.6}}