/* BRO2KIT SOCIAL1: BRO City social layer (people list, say-hi, friends, private chat tools, face icon, really here, how chat works). Loaded after city.css. */
.soc-ok{color:var(--ok)}.soc-strong{color:var(--text);font-weight:700}
/* setup screen */
.g-how{grid-column:1/-1}
.soc-howgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:8px}
.soc-how{display:grid;gap:2px;align-content:start;background:var(--s2);border-radius:12px;padding:10px 12px}.soc-how b{color:var(--gold2);font-size:14px}.soc-how span{font-size:13.5px;color:var(--muted);line-height:1.45}
.soc-facebox{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.soc-facepic{width:76px;height:76px;border-radius:50%;border:2px solid var(--line);background:#0B111C;display:grid;place-items:center;overflow:hidden;font-size:11px;color:var(--muted);text-align:center}
.soc-facepic img{width:100%;height:100%;object-fit:cover;display:block}
.soc-facetxt{display:grid;gap:6px;min-width:0}.soc-facetxt .btn{min-height:40px;padding:6px 14px;font-size:14px}
.soc-facenote.ok{color:var(--ok)}.soc-facenote.bad{color:var(--bad)}
#verifyBox{margin-top:10px;display:grid;gap:8px;justify-items:start}#verifyBox .btn{min-height:40px;padding:6px 14px;font-size:14px}
/* name tags */
.tag .soc-face{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.5);background:#0B111C;display:block}
.tag.me .soc-face{border-color:var(--gold)}
.tag .soc-bdgs{display:flex;gap:3px;margin-top:-1px}
.soc-b{font-style:normal;font-size:11px;line-height:1;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(7,11,18,.82);border:1px solid rgba(255,255,255,.3);color:#fff}
.soc-b-v{background:#1d7a55;border-color:#7DDBB5}.soc-b-f{color:var(--gold2);border-color:var(--gold)}.soc-b-h{background:#16365c;border-color:#8ec5ff}
/* people at the places */
.spot[data-n]{max-width:340px}.spot[data-n]::after{content:' \00b7 ' attr(data-n);font-weight:700}
/* say hi */
.soc-hi{position:absolute;z-index:7;left:50%;bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px));transform:translateX(-50%);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;background:rgba(16,24,38,.96);border:1px solid var(--gold);border-radius:18px;padding:6px 8px 6px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:max-content;max-width:calc(100vw - 20px)}
.soc-hi span{font-weight:700;font-size:14px}.soc-hi .btn,.soc-hi .gold{min-height:38px;padding:5px 12px;font-size:13.5px}.soc-hi .x{min-width:34px;min-height:34px}
body.touch .soc-hi{bottom:auto;top:176px}
body.touch.typing .soc-hi{display:none}
/* typing, unread */
.soc-typing{font-size:12.5px;color:var(--muted);font-style:italic;margin:0;padding:0 4px;text-shadow:0 1px 3px #000}
.soc-rel{position:relative}
.soc-n{position:absolute;right:-4px;top:-5px;min-width:19px;height:19px;border-radius:999px;background:#e5484d;color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:1px solid #070B12}
/* emote wheel */
.pop.soc-wheel{grid-template-columns:none;display:block;width:214px;height:214px;border-radius:50%;padding:0;right:14px;bottom:max(158px,calc(env(safe-area-inset-bottom) + 158px));background:rgba(16,24,38,.94)}
.pop.soc-wheel[hidden]{display:none!important}
.pop.soc-wheel button{position:absolute;left:50%;top:50%;width:66px;height:66px;min-width:0;border-radius:50%;padding:2px;margin:-33px 0 0 -33px;font-size:22px;align-content:center}
.pop.soc-wheel button span{font-size:9.5px;line-height:1.1}
.pop.soc-wheel button:nth-child(1){transform:translate(0,-70px)}.pop.soc-wheel button:nth-child(2){transform:translate(61px,-35px)}.pop.soc-wheel button:nth-child(3){transform:translate(61px,35px)}
.pop.soc-wheel button:nth-child(4){transform:translate(0,70px)}.pop.soc-wheel button:nth-child(5){transform:translate(-61px,35px)}.pop.soc-wheel button:nth-child(6){transform:translate(-61px,-35px)}
.pop.soc-wheel button:hover,.pop.soc-wheel button:focus-visible{border-color:var(--gold);background:#22304a}
/* panels */
.soc-toprow{display:flex;gap:6px;flex-wrap:wrap}.soc-toprow .btn{min-height:38px;padding:5px 12px;font-size:13px;flex:1 1 auto}
.pb .it.soc-it{flex-wrap:wrap}.pb .it.soc-it .nm{flex:1 1 150px}
.soc-acts{display:flex;gap:5px;flex-wrap:wrap}.pb .it .soc-acts .btn,.pb .it .soc-acts .gold{min-height:36px;padding:5px 10px;font-size:13px}
.soc-fs{border:1px solid var(--hair);border-radius:12px;padding:6px 10px;margin:0;display:grid;gap:2px}.soc-fs legend{font-size:13px;color:var(--gold2);font-weight:700;padding:0 4px}
.soc-home{display:grid;gap:6px;background:var(--s2);border-radius:12px;padding:10px}.soc-home select{min-height:38px}
.pb .gold{min-height:44px}
/* private chat */
.soc-lock{font-size:12.5px;line-height:1.4;color:var(--gold2);background:rgba(224,173,72,.1);border:1px solid var(--line);border-radius:10px;padding:6px 8px;margin:0}
.soc-dmtools{display:flex;gap:5px;flex-wrap:wrap}.soc-dmtools .btn{min-height:34px;padding:4px 10px;font-size:12.5px;flex:1 1 auto}
.soc-dmtools .btn.on{border-color:var(--ok);color:var(--ok)}
.soc-dmrep{display:grid;gap:6px;background:var(--s2);border-radius:12px;padding:8px}.soc-dmrep .gold{min-height:38px}
.dm{width:min(350px,calc(100vw - 56px))}.dm #dmLog{height:min(210px,30vh)}.dm .ph{display:flex;align-items:center;gap:4px}.dm .ph h2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-pill{position:absolute;z-index:10;right:76px;bottom:max(14px,env(safe-area-inset-bottom));font:inherit;font-weight:800;font-size:14px;color:var(--text);background:rgba(16,24,38,.97);border:1px solid var(--gold);border-radius:999px;padding:9px 16px;min-height:44px;cursor:pointer;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-pill.new{background:#e5484d;border-color:#fff;color:#fff}
body.touch .soc-pill{bottom:auto;top:132px;right:auto;left:10px}
/* really here */
.soc-herechip{position:absolute;z-index:7;left:50%;top:58px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(22,54,92,.96);border:1px solid #8ec5ff;border-radius:999px;padding:4px 6px 4px 14px;font-size:13px;font-weight:700;width:max-content;max-width:calc(100vw - 16px)}
.soc-herechip .btn{min-height:34px;padding:3px 12px;font-size:13px}
@media (max-width:520px){.soc-herechip{top:auto;bottom:max(150px,calc(env(safe-area-inset-bottom) + 150px));font-size:12px}.soc-facebox{grid-template-columns:60px 1fr}.soc-facepic{width:60px;height:60px}}
@media (prefers-reduced-motion:reduce){.pop.soc-wheel button{transition:none}}