/* =========================================================================
 * 2D to 3D — Social layer (world chat · friends · DMs · presence nameplates)
 * Loaded by index.html AFTER styles.css. All player UI lives in the shell
 * (never inside the PlayCanvas build) — this is the overlay above the iframe.
 * Palette follows the shell: deep purple panels, gold actions, teal/pink.
 * ========================================================================= */

/* ---- Presence nameplates (DOM overlay positioned by the game bridge) ---- */
#social-tags{position:fixed;inset:0;z-index:2;pointer-events:none;font-family:var(--font)}
.soc-tag{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .15s}
.soc-tag__name{background:rgba(20,12,48,.78);border:1px solid var(--line);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.soc-tag__name.male{color:#9ccbff;border-color:rgba(109,179,255,.55)}
.soc-tag__name.female{color:#ffb3cd;border-color:rgba(255,93,143,.55)}
.soc-tag__bubble{position:relative;background:rgba(255,255,255,.96);color:#2b1a6b;font-size:12px;line-height:1.35;padding:6px 10px;border-radius:12px;max-width:180px;word-break:break-word;box-shadow:0 6px 18px rgba(0,0,0,.35);margin-bottom:2px}
.soc-tag__bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(255,255,255,.96);border-bottom:0}
.soc-tag[hidden]{display:none}

/* ---- Shared chrome ---- */
.soc-pub,.soc-fri{position:fixed;z-index:3;font-family:var(--font);pointer-events:none}
.soc-pub{left:16px;top:64px;width:min(92vw,330px)}
.soc-fri{right:16px;bottom:16px;width:min(92vw,300px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.soc-pub[hidden],.soc-fri[hidden]{display:none}
.soc-pill{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;background:rgba(20,12,48,.85);color:#fff;padding:9px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.3);user-select:none}
.soc-pill:hover{background:rgba(43,26,107,.92)}
.soc-dot{width:8px;height:8px;border-radius:50%;background:#8a93a6;flex:0 0 auto}
.soc-dot.on{background:#39d98a;box-shadow:0 0 8px #39d98a}
.soc-badge{background:#ff6b6b;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 5px}
.soc-badge.show{display:inline-flex}
.soc-panel{pointer-events:auto;display:none;flex-direction:column;background:rgba(20,12,48,.94);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.5);overflow:hidden;margin-top:8px;backdrop-filter:blur(6px)}
.soc-panel.show{display:flex}
.soc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(135deg,rgba(255,210,63,.18),rgba(255,122,69,.14));color:#fff;font-size:14px;font-weight:800}
.soc-head .soc-sub{font-weight:500;font-size:11px;color:var(--ink-dim);margin-left:auto}
.soc-min{cursor:pointer;font-size:16px;line-height:1;opacity:.8;padding:0 2px}
.soc-scene{padding:6px 12px;font-size:11px;color:var(--ink-dim);background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.soc-msgs{height:220px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;background:rgba(10,6,28,.35)}
.soc-msg{font-size:13px;line-height:1.45;color:#fff;word-break:break-word}
.soc-msg.sys{color:var(--ink-faint);font-size:11px;font-style:italic}
.soc-t{color:#aab3c5;font-size:10px;margin-right:6px;font-family:ui-monospace,Menlo,Consolas,monospace}
.soc-nick{font-weight:800;cursor:pointer}
.soc-nick:hover{text-decoration:underline}
.soc-nick.male{color:#9ccbff}
.soc-nick.female{color:#ff8fb8}
.soc-send{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.soc-send input{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(10,6,28,.6);color:#fff;font-family:inherit;font-size:13px}
.soc-send input:focus{outline:none;border-color:var(--accent-2)}
.soc-btn{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#2a0e00;border:none;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap}
.soc-btn:hover{filter:brightness(1.08)}
.soc-typing{display:none;padding:5px 12px;font-size:10px;color:#ffd23f;background:rgba(255,210,63,.12)}
.soc-typing.show{display:block}
.soc-toast{position:fixed;right:16px;bottom:76px;z-index:60;background:rgba(20,12,48,.96);color:#fff;padding:10px 14px;border-radius:12px;font-size:12px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:260px;display:none;pointer-events:none;border:1px solid var(--line)}
.soc-toast.show{display:block}

/* ---- Friends panel specifics ---- */
.soc-me{padding:7px 12px;font-size:11px;color:var(--ink-dim);background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.soc-me b{color:#fff}
.soc-id{font-family:ui-monospace,Menlo,Consolas,monospace}
.soc-copy{cursor:pointer;color:var(--accent-2);font-weight:800}
.soc-list{overflow-y:auto;padding:6px;max-height:46vh;display:flex;flex-direction:column;gap:2px}
.soc-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;cursor:pointer}
.soc-row:hover{background:rgba(255,255,255,.07)}
.soc-row .soc-name{flex:1;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-row .soc-state{font-size:10px;color:var(--ink-faint)}
.soc-row .soc-state.on{color:#39d98a}
.soc-del{font-size:10px;color:#8a93a6;cursor:pointer;padding:2px 4px}
.soc-del:hover{color:#ff8a8a}
.soc-empty{padding:16px;text-align:center;color:var(--ink-faint);font-size:12px}
.soc-req{padding:8px 10px;font-size:12px;background:rgba(255,210,63,.12);border-bottom:1px solid var(--line);color:#fff}
.soc-req b{color:var(--accent-2)}
.soc-req .soc-acts{margin-top:4px;display:flex;gap:10px}
.soc-acts span{cursor:pointer;color:var(--accent-2);font-weight:800}
.soc-acts span.no{color:#8a93a6}
.soc-add{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.soc-add input{flex:1;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(10,6,28,.6);color:#fff;font-family:inherit;font-size:13px}
.soc-chat{display:none;flex-direction:column;height:46vh}
.soc-chat.show{display:flex}
.soc-chat .soc-msgs{height:auto;flex:1}
.soc-back{cursor:pointer;color:var(--accent-2);font-weight:800;font-size:12px}

/* Modals must paint ABOVE the social layer (social sits at z-index 3). */
#shell .modal{z-index:5}