/* ============================================================
   SPHERA — style.css  |  Your Universe of Connection
   Premium social media platform combining LinkedIn + Instagram + X + Facebook
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#06060f;
  --bg2:#0c0c1e;
  --bg3:#111128;
  --surface:#161630;
  --surface2:#1e1e3a;
  --border:rgba(255,255,255,0.06);
  --text:#f0f0ff;
  --muted:#6b6b9a;
  --muted2:#4a4a7a;
  --radius:14px;
  --radius-sm:8px;
  --violet:#6d28d9;
  --violet2:#7c3aed;
  --blue:#2563eb;
  --cyan:#0ea5e9;
  --pink:#db2777;
  --gold:#d97706;
  --green:#059669;
  --grad:linear-gradient(135deg,#6d28d9,#2563eb,#0ea5e9);
  --grad2:linear-gradient(135deg,#6d28d9,#2563eb);
  --glow:rgba(109,40,217,0.5);
  --sidebar-w:256px;
  --rp-w:290px;
  --topnav-h:60px;
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;overflow:hidden}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:4px}

/* ============================================================
   SHELL LAYOUT
============================================================ */
.app-shell{display:flex;height:100vh;overflow:hidden}

/* ============================================================
   LEFT SIDEBAR
============================================================ */
.left-sidebar{
  width:var(--sidebar-w);background:var(--bg2);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  flex-shrink:0;overflow-y:auto;overflow-x:hidden;transition:width 0.3s;z-index:20;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.ls-brand{
  display:flex;align-items:center;gap:10px;padding:18px 16px 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.brand-orb{
  width:36px;height:36px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  color:#fff;box-shadow:0 0 20px var(--glow);flex-shrink:0;
  animation:orbPulse 3s ease-in-out infinite;
}
@keyframes orbPulse{0%,100%{box-shadow:0 0 20px var(--glow)}50%{box-shadow:0 0 40px rgba(109,40,217,0.8)}}
.brand-name{font-size:21px;font-weight:900;letter-spacing:1px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.ls-nav{padding:10px 8px;display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-bottom:20px}
.lnav{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:transparent;border:none;color:var(--muted);
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s;
  text-align:left;position:relative;
}
.lnav:hover{background:var(--surface);color:var(--text)}
.active-lnav{background:var(--surface);color:var(--text)!important}
.active-lnav .lnav-icon{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lnav-icon{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.nav-badge{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:0.5px;
  padding:2px 7px;border-radius:20px;background:var(--grad2);color:#fff;
}
.nav-badge.live{background:linear-gradient(135deg,#dc2626,#ef4444);animation:livePulse 1.5s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.6}}
.nav-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--cyan);background:rgba(14,165,233,0.1);padding:1px 7px;border-radius:20px}

.ls-divider{height:1px;background:var(--border);margin:4px 12px}

.ls-channels{padding:8px 8px 4px}
.ls-section-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;padding:2px 8px 8px}
.channel-item{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);font-size:12px;font-weight:500;transition:all 0.2s}
.channel-item:hover{background:var(--surface);color:var(--text)}
.ch-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ch-professional{background:#2563eb}
.ch-creative{background:#7c3aed}
.ch-personal{background:#db2777}
.ch-business{background:#d97706}
.add-channel-btn{width:calc(100% - 20px);margin:6px 10px;padding:7px;background:transparent;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--muted);font-family:'Outfit',sans-serif;font-size:11px;cursor:pointer;transition:all 0.2s}
.add-channel-btn:hover{border-color:var(--violet2);color:var(--violet2)}

.ls-cross-post{padding:8px 12px;flex-shrink:0}
.cp-toggles{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.cp-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0}
.cp-toggle input{appearance:none;width:28px;height:15px;background:var(--surface2);border-radius:10px;cursor:pointer;position:relative;transition:all 0.2s;flex-shrink:0}
.cp-toggle input:checked{background:var(--grad2)}
.cp-toggle input::after{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left 0.2s}
.cp-toggle input:checked::after{left:15px}
.cp-dot{width:14px;height:14px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:8px;font-weight:900;color:#fff}
.cp-ig{background:linear-gradient(135deg,#f09433,#dc2743)}
.cp-li{background:#0a66c2}
.cp-x{background:#000;border:1px solid #333}
.cp-fb{background:#1877f2}
.cp-tt{background:linear-gradient(135deg,#69c9d0,#ee1d52)}

.ls-user-card{
  display:flex;align-items:center;gap:10px;padding:12px 12px;
  margin-top:auto;border-top:1px solid var(--border);flex-shrink:0;
  cursor:pointer;transition:all 0.2s;
}
.ls-user-card:hover{background:var(--surface)}
.lsu-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--violet2)}
.lsu-info{flex:1;overflow:hidden}
.lsu-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsu-handle{font-size:10px;color:var(--muted)}
.sphera-score{color:var(--cyan);font-weight:600}
.lsu-menu{color:var(--muted);cursor:pointer;padding:4px}

/* ============================================================
   MAIN CONTENT
============================================================ */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* Top Nav */
.top-nav{
  height:var(--topnav-h);background:rgba(6,6,15,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  padding:0 20px;gap:14px;flex-shrink:0;z-index:10;position:sticky;top:0;
}
.tn-left{display:flex;align-items:center;gap:12px;flex:1}
.tn-toggle-sidebar{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px;border-radius:8px}
.tn-toggle-sidebar:hover{background:var(--surface);color:var(--text)}
.tn-search{
  flex:1;max-width:500px;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:30px;
  padding:8px 16px;transition:all 0.2s;
}
.tn-search:focus-within{border-color:var(--violet2);box-shadow:0 0 0 2px rgba(124,58,237,0.15)}
.tn-search-icon{color:var(--muted);font-size:16px}
.tn-search-input{flex:1;background:transparent;border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:13px;outline:none}
.tn-search-input::placeholder{color:var(--muted)}
.search-kbd{background:var(--surface2);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:10px}
.tn-actions{display:flex;align-items:center;gap:10px}
.tn-action-btn{
  display:flex;align-items:center;gap:6px;padding:8px 20px;
  background:var(--grad2);border:none;border-radius:30px;color:#fff;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;box-shadow:0 0 20px var(--glow);transition:all 0.2s;
}
.tn-action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 30px var(--glow)}
.tn-icon-btn{position:relative;width:38px;height:38px;background:var(--surface);border:1px solid var(--border);border-radius:50%;color:var(--text);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.tn-icon-btn:hover{border-color:var(--violet2)}
.notif-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;background:var(--pink);border-radius:50%;border:2px solid var(--bg);animation:livePulse 1.5s infinite}
.tn-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--violet2);cursor:pointer}

/* PAGES */
.page{display:none;overflow-y:auto;flex:1;padding-bottom:40px}
.active-page{display:block}

/* ============================================================
   STORIES BAR
============================================================ */
.stories-bar{
  display:flex;gap:12px;padding:16px 20px 8px;overflow-x:auto;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.stories-bar::-webkit-scrollbar{height:2px}
.story-add-card{
  flex-shrink:0;width:68px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
}
.story-plus{width:56px;height:56px;border-radius:50%;background:var(--surface2);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--violet2);transition:all 0.2s}
.story-add-card:hover .story-plus{border-color:var(--violet2);background:rgba(124,58,237,0.1)}
.story-label{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap}
.story-card{
  flex-shrink:0;width:68px;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;position:relative;
}
.story-ring{position:absolute;top:0;width:60px;height:60px;border-radius:50%;border:2px solid var(--muted2)}
.story-ring-unseen{border-color:transparent;background:var(--grad);background-clip:padding-box;border:2px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box}
.story-bg{width:56px;height:56px;border-radius:50%;object-fit:cover}
.story-avatar{position:absolute;bottom:14px;right:0px;width:20px;height:20px;border-radius:50%;border:2px solid var(--bg2);object-fit:cover}
.story-avatar-grad{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;background:var(--grad2)}
.sg2{background:linear-gradient(135deg,#0ea5e9,#6d28d9)}
.sg3{background:linear-gradient(135deg,#db2777,#9333ea)}
.sg4{background:linear-gradient(135deg,#d97706,#dc2626)}
.sg5{background:linear-gradient(135deg,#059669,#0ea5e9)}
.story-username{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;max-width:68px;text-overflow:ellipsis}

/* ============================================================
   CATEGORY PILLS BAR
============================================================ */
.category-bar{padding:12px 20px 4px;border-bottom:1px solid var(--border);flex-shrink:0}
.cat-pills-wrap{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.cat-pills-wrap::-webkit-scrollbar{height:2px}
.cat-pill{
  flex-shrink:0;padding:6px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;color:var(--muted);font-family:'Outfit',sans-serif;
  font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.cat-pill:hover{border-color:var(--violet2);color:var(--text)}
.active-pill{background:var(--grad2);border-color:transparent;color:#fff!important;box-shadow:0 0 14px var(--glow)}

/* ============================================================
   CONTENT GRID (CapCut-style masonry)
============================================================ */
.content-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:8px;padding:16px 20px;
}
.content-card{
  position:relative;border-radius:12px;overflow:hidden;
  cursor:pointer;transition:all 0.3s;
  background:var(--surface);
}
.content-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.cc-media-wrap{position:relative;overflow:hidden}
.cc-media-wrap img,.cc-media-wrap video{width:100%;display:block;object-fit:cover;transition:transform 0.4s}
.content-card:hover .cc-media-wrap img,.content-card:hover .cc-media-wrap video{transform:scale(1.05)}
.cc-tall .cc-media-wrap img{height:280px}
.cc-short .cc-media-wrap img{height:180px}
.cc-video-badge{
  position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);
  border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;color:#fff;
}
.cc-overlay{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 40%);
  opacity:0;transition:opacity 0.3s;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;
}
.content-card:hover .cc-overlay{opacity:1}
.cc-play-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);
  width:48px;height:48px;background:rgba(255,255,255,0.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:transform 0.2s;
}
.content-card:hover .cc-play-icon{transform:translate(-50%,-50%) scale(1)}
.cc-overlay-stats{display:flex;gap:10px;font-size:11px;color:rgba(255,255,255,0.9)}
.cc-overlay-caption{font-size:12px;font-weight:600;color:#fff;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-featured-badge{position:absolute;top:8px;left:8px;background:var(--violet2);color:#fff;border-radius:20px;padding:2px 8px;font-size:9px;font-weight:700}
.cc-info{padding:10px}
.cc-username{font-size:12px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-stats-row{display:flex;gap:10px;font-size:11px;color:var(--muted)}
.cc-stat{display:flex;align-items:center;gap:3px}
.load-more-wrap{text-align:center;padding:20px}
.load-more-btn{padding:10px 32px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.load-more-btn:hover{border-color:var(--violet2);color:var(--text)}

/* ============================================================
   DISCOVER PAGE
============================================================ */
.discover-hero{padding:48px 40px;text-align:center;background:radial-gradient(ellipse at center,rgba(109,40,217,0.12),transparent 70%)}
.dh-title{font-size:40px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.dh-sub{font-size:16px;color:var(--muted);max-width:500px;margin:0 auto 28px}
.dh-search{display:flex;gap:8px;max-width:520px;margin:0 auto}
.big-search{flex:1;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-radius:30px;color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:all 0.2s}
.big-search:focus{border-color:var(--violet2)}
.big-search-btn{padding:14px 24px;background:var(--grad2);border:none;border-radius:30px;color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 0 20px var(--glow)}
.discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:24px 40px}

/* ============================================================
   NETWORK PAGE
============================================================ */
.network-header{padding:24px 24px 16px}
.page-title{font-size:22px;font-weight:800;margin-bottom:16px}
.network-stats{display:flex;gap:12px;flex-wrap:wrap}
.ns-stat{padding:12px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;min-width:100px}
.ns-num{display:block;font-size:20px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ns-label{font-size:11px;color:var(--muted)}
.section-title-sm{font-size:15px;font-weight:700;padding:0 24px 12px}
.people-grid,.communities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:0 24px}
.person-card,.community-card{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all 0.2s}
.person-card:hover,.community-card:hover{border-color:var(--violet2);transform:translateY(-2px)}
.pc-avatar{width:48px;height:48px;border-radius:50%;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;margin-bottom:10px}
.pc-name{font-size:13px;font-weight:700;margin-bottom:3px}
.pc-title{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.pc-score{font-size:10px;color:var(--cyan);margin-bottom:10px}
.pc-connect-btn{width:100%;padding:7px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.pc-connect-btn:hover{background:var(--grad2);border-color:transparent;box-shadow:0 0 14px var(--glow)}
.community-card{}
.cc-banner{height:60px;border-radius:8px;background:var(--grad2);margin-bottom:10px}
.cc-cname{font-size:13px;font-weight:700;margin-bottom:4px}
.cc-members{font-size:11px;color:var(--muted);margin-bottom:10px}
.cc-join-btn{width:100%;padding:7px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.cc-join-btn:hover{background:var(--violet2);border-color:transparent}

/* ============================================================
   MESSAGES PAGE
============================================================ */
.messages-layout{display:flex;height:calc(100vh - var(--topnav-h));overflow:hidden}
.msg-list-panel{width:300px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.msg-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.msg-list-header h3{font-size:15px;font-weight:700}
.new-msg-btn{padding:5px 12px;background:var(--grad2);border:none;border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;cursor:pointer}
.msg-search{background:var(--surface);border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:'Outfit',sans-serif;padding:10px 16px;font-size:12px;outline:none;width:100%}
.msg-list{flex:1;overflow-y:auto}
.msg-item{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:all 0.2s;border-bottom:1px solid var(--border)}
.msg-item:hover,.active-msg{background:var(--surface)}
.msg-item-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
.msg-item-body{flex:1;overflow:hidden}
.msg-item-name{font-size:13px;font-weight:600;margin-bottom:2px}
.msg-item-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item-meta{text-align:right;font-size:10px;color:var(--muted);flex-shrink:0}
.msg-unread-dot{width:8px;height:8px;background:var(--violet2);border-radius:50%;margin-top:4px;margin-left:auto}
.msg-chat-panel{flex:1;display:flex;align-items:center;justify-content:center}
.chat-empty{text-align:center;color:var(--muted)}
.ce-orb{font-size:48px;margin-bottom:12px;opacity:0.3}

/* ============================================================
   PULSE PAGE
============================================================ */
.pulse-header{text-align:center;padding:48px 40px 24px;position:relative}
.pulse-orb-wrap{display:flex;justify-content:center;margin-bottom:16px}
.pulse-orb{width:56px;height:56px;border-radius:50%;background:var(--grad);box-shadow:0 0 40px var(--glow);animation:orbPulse 1.5s ease-in-out infinite}
.pulse-title{font-size:32px;font-weight:900;margin-bottom:8px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pulse-sub{font-size:15px;color:var(--muted)}
.pulse-streams{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:12px 24px 24px}
.stream-card{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:all 0.2s}
.stream-card:hover{border-color:var(--violet2)}
.sc-live{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.live-dot{width:7px;height:7px;background:#ef4444;border-radius:50%;animation:livePulse 1s infinite}
.sc-live-label{font-size:10px;font-weight:700;color:#ef4444;text-transform:uppercase}
.sc-topic{font-size:16px;font-weight:700;margin-bottom:6px}
.sc-count{font-size:12px;color:var(--cyan);margin-bottom:8px}
.sc-preview{font-size:12px;color:var(--muted);line-height:1.5}
.pulse-globe-wrap{text-align:center;padding:12px 24px 40px}
.pulse-globe{
  width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(109,40,217,0.3),rgba(37,99,235,0.2),transparent);
  border:1px solid rgba(109,40,217,0.4);margin:0 auto 12px;position:relative;
  box-shadow:0 0 60px rgba(109,40,217,0.3);animation:globeSpin 20s linear infinite;
}
@keyframes globeSpin{from{box-shadow:0 0 60px rgba(109,40,217,0.3)}to{box-shadow:0 0 80px rgba(37,99,235,0.4)}}
.pg-caption{font-size:12px;color:var(--muted)}

/* ============================================================
   TIME CAPSULE PAGE
============================================================ */
.capsule-hero{text-align:center;padding:48px 40px 32px;background:radial-gradient(ellipse at center,rgba(109,40,217,0.1),transparent 70%)}
.capsule-icon{font-size:52px;margin-bottom:14px}
.capsule-title{font-size:32px;font-weight:900;display:inline-block;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.capsule-sub{font-size:15px;color:var(--muted);max-width:480px;margin:0 auto 24px;line-height:1.6}
.capsule-create-btn{padding:13px 32px;background:var(--grad);border:none;border-radius:30px;color:#fff;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 0 30px var(--glow);transition:all 0.2s}
.capsule-create-btn:hover{transform:translateY(-2px)}
.capsule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:0 24px}
.capsule-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.capsule-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(109,40,217,0.05),transparent);pointer-events:none}
.cc-locked-icon{font-size:32px;margin-bottom:10px}
.cc-capsule-title{font-size:15px;font-weight:700;margin-bottom:6px}
.cc-capsule-sub{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.4}
.cc-unlock-date{font-size:11px;color:var(--cyan);font-weight:600;padding:4px 10px;background:rgba(14,165,233,0.1);border-radius:20px;display:inline-block}

/* ============================================================
   PROFILE PAGE
============================================================ */
.profile-cover{position:relative;height:200px;overflow:hidden}
.cover-img{width:100%;height:100%;object-fit:cover}
.cover-edit-btn{position:absolute;bottom:12px;right:16px;padding:7px 16px;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:12px;cursor:pointer}
.profile-header{display:flex;gap:20px;padding:0 24px 20px;align-items:flex-end;border-bottom:1px solid var(--border);margin-top:-40px}
.ph-avatar-wrap{position:relative;flex-shrink:0}
.ph-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);position:relative;z-index:2}
.ph-avatar-ring{position:absolute;inset:-3px;border-radius:50%;background:var(--grad);z-index:1;animation:orbPulse 3s infinite}
.ph-avatar-edit{position:absolute;bottom:4px;right:0px;width:26px;height:26px;background:var(--violet2);border:2px solid var(--bg);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;z-index:3}
.ph-info{flex:1;padding-top:50px}
.ph-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.ph-name{font-size:22px;font-weight:900}
.ph-verified{font-size:12px;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.ph-sphera-score{font-size:12px;color:var(--cyan);font-weight:600;margin-left:auto}
.ph-title{font-size:13px;color:var(--muted);margin-bottom:5px}
.ph-location{font-size:12px;color:var(--muted);margin-bottom:8px}
.ph-open{color:var(--green);font-weight:600}
.ph-bio{font-size:13px;line-height:1.6;margin-bottom:10px}
.ph-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ph-tag{padding:3px 10px;background:rgba(109,40,217,0.15);border:1px solid rgba(109,40,217,0.3);border-radius:20px;font-size:11px;color:#a78bfa}
.ph-stats{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.ph-stat{display:flex;flex-direction:column;gap:1px}
.ph-stat strong{font-size:15px;font-weight:800}
.ph-stat span{font-size:10px;color:var(--muted)}
.ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ph-btn-primary{padding:9px 22px;background:var(--grad2);border:none;border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 0 16px var(--glow);transition:all 0.2s}
.ph-btn-secondary{padding:9px 22px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.ph-btn-secondary:hover{border-color:var(--violet2)}
.ph-btn-icon{width:36px;height:36px;background:var(--surface2);border:1px solid var(--border);border-radius:50%;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.profile-tabs{display:flex;padding:0 24px;border-bottom:1px solid var(--border);gap:2px;overflow-x:auto}
.profile-tabs::-webkit-scrollbar{height:2px}
.ptab{padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.ptab:hover{color:var(--text)}
.active-ptab{color:var(--text);border-bottom-color:var(--violet2)}
.profile-content{overflow-y:auto}
.profile-tab-panel{display:none;padding:20px 24px}
.active-ptabp{display:block}
.profile-posts-grid,.profile-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.profile-media-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;transition:all 0.2s}
.profile-media-grid img:hover{transform:scale(1.03)}

/* About cards */
.about-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.about-card{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.ac-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-bottom:12px}
.ac-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:12px;line-height:1.5}
.ac-item span{color:var(--muted)}
.ac-item-icon{font-size:20px;flex-shrink:0}
.skills-cloud{display:flex;flex-wrap:wrap;gap:6px}
.skill-tag{padding:4px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text)}
.cross-platforms{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cp-link{padding:8px 12px;text-align:center;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;transition:all 0.2s}
.cp-link.cp-li{background:#0a66c2;color:#fff}
.cp-link.cp-ig{background:linear-gradient(135deg,#f09433,#dc2743);color:#fff}
.cp-link.cp-x{background:#000;color:#fff;border:1px solid #333}
.cp-link.cp-yt{background:#ff0000;color:#fff}

/* Analytics */
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.analytics-card{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.ac-big{grid-column:span 2}
.anl-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-bottom:10px}
.anl-big{font-size:28px;font-weight:900;margin-bottom:4px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.anl-change{font-size:12px;color:var(--green)}
.sphera-score-display{display:flex;gap:20px;align-items:center}
.ssd-ring{width:90px;height:90px;border-radius:50%;background:conic-gradient(var(--violet2) 84.7%,var(--surface2) 84.7%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ssd-value{font-size:22px;font-weight:900;background:#fff;border-radius:50%;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:var(--bg3)}
.ssd-breakdown{flex:1;display:flex;flex-direction:column;gap:8px}
.ssd-row{display:flex;justify-content:space-between;font-size:12px}
.ssd-pct{color:var(--violet2);font-weight:700}
.mood-ring-wrap{text-align:center}
.mood-ring{width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--green) 68%,var(--muted2) 68% 92%,#dc2626 92%);margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.mood-center{font-size:12px;font-weight:700;background:var(--bg3);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.mood-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:10px;color:var(--muted)}
.ml-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ml-pos{background:var(--green)}
.ml-neu{background:var(--muted2)}
.ml-neg{background:#dc2626}
.anl-bar-chart{display:flex;align-items:flex-end;gap:3px;height:50px;margin-top:10px}
.anl-bar{flex:1;background:var(--grad2);border-radius:2px;transition:all 0.3s}

/* Capsule cards in profile */
.capsule-profile-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}

/* ============================================================
   RIGHT PANEL
============================================================ */
.right-panel{
  width:var(--rp-w);background:var(--bg2);border-left:1px solid var(--border);
  overflow-y:auto;flex-shrink:0;padding:16px;display:flex;flex-direction:column;gap:14px;
}
.rp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.rpc-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rpc-icon{font-size:15px;color:var(--violet2)}
.rpc-title{font-size:13px;font-weight:700;flex:1}
.rpc-badge{font-size:9px;font-weight:700;padding:2px 7px;background:var(--grad2);color:#fff;border-radius:20px}
.rpc-sub{font-size:11px;color:var(--muted);margin-bottom:10px}

/* AI Match */
.ai-match-list{display:flex;flex-direction:column;gap:8px}
.am-item{display:flex;align-items:center;gap:8px;padding:8px;background:var(--surface2);border-radius:8px;cursor:pointer;transition:all 0.2s}
.am-item:hover{border:1px solid rgba(109,40,217,0.3)}
.am-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff}
.am-info{flex:1;overflow:hidden}
.am-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-match{font-size:10px;color:var(--cyan)}
.am-connect{padding:4px 10px;background:var(--grad2);border:none;border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:10px;font-weight:700;cursor:pointer}

/* Trending Topics */
.trending-topics{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tt-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer}
.tt-item:hover .tt-tag{color:var(--violet2)}
.tt-tag{font-size:12px;font-weight:600;transition:color 0.2s}
.tt-count{font-size:10px;color:var(--muted)}

/* Pulse mini */
.pulse-mini-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pm-item{font-size:12px;line-height:1.4;padding:8px;background:var(--surface2);border-radius:8px;border-left:2px solid var(--violet2)}
.pm-time{font-size:10px;color:var(--muted);margin-top:2px}

/* Mood */
.mood-selector{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mood-btn{padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s}
.mood-btn:hover{border-color:var(--violet2);color:var(--text)}
.active-mood{background:var(--grad2);border-color:transparent;color:#fff}

/* Score card */
.score-display{padding:4px 0}
.score-number{font-size:36px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.score-bar-wrap{}
.score-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-bottom:4px}
.score-fill{height:100%;background:var(--grad);border-radius:3px}
.score-label{font-size:11px;color:var(--cyan)}

/* ============================================================
   CREATE POST MODAL
============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn 0.2s ease}
.modal-overlay.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.create-post-card{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:20px;width:560px;max-width:95vw;box-shadow:0 40px 100px rgba(0,0,0,0.7);animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.cp-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cp-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--violet2)}
.cp-header-info{flex:1}
.cp-name{font-size:14px;font-weight:700;margin-bottom:3px}
.cp-audience{background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;padding:3px 10px;font-size:11px}
.cp-close{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;margin-left:auto;padding:4px}
.cp-textarea{width:100%;background:transparent;border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:15px;line-height:1.6;outline:none;resize:none;placeholder-color:var(--muted);margin-bottom:14px}
.cp-textarea::placeholder{color:var(--muted)}
.cp-mood-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cp-mood-label{font-size:11px;color:var(--muted);font-weight:600}
.cp-mood-pills{display:flex;gap:6px}
.cmp{font-size:20px;cursor:pointer;width:34px;height:34px;background:var(--surface2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.cmp:hover{background:var(--surface)}
.active-cmp{background:rgba(109,40,217,0.2);box-shadow:0 0 10px var(--glow)}
.cp-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cp-att-btn{padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s}
.cp-att-btn:hover{border-color:var(--violet2);color:var(--text)}
.cp-cross-post-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px;background:var(--surface);border-radius:10px}
.cp-cp-label{font-size:11px;color:var(--muted);font-weight:600}
.cp-cp-icons{display:flex;gap:6px}
.cp-platform-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;cursor:pointer;opacity:0.4;transition:all 0.2s}
.cp-platform-icon:hover{opacity:1}
.active-cpi{opacity:1;box-shadow:0 0 10px rgba(109,40,217,0.4)}
.cp-platform-icon.cp-ig{background:linear-gradient(135deg,#f09433,#dc2743)}
.cp-platform-icon.cp-li{background:#0a66c2}
.cp-platform-icon.cp-x{background:#000;border:1px solid #333}
.cp-platform-icon.cp-fb{background:#1877f2}
.cp-platform-icon.cp-tt{background:linear-gradient(135deg,#69c9d0,#ee1d52)}
.cp-preview{margin-bottom:12px}
.cp-preview img,.cp-preview video{width:100%;border-radius:10px;max-height:200px;object-fit:cover}
.cp-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:12px}
.cp-hashtags{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.hashtag-sug{font-size:11px;color:var(--violet2);cursor:pointer;background:rgba(109,40,217,0.1);padding:3px 8px;border-radius:20px}
.hashtag-sug:hover{background:rgba(109,40,217,0.2)}
.cp-post-btn{padding:10px 24px;background:var(--grad);border:none;border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 0 20px var(--glow);transition:all 0.2s;white-space:nowrap}
.cp-post-btn:hover{transform:translateY(-1px);box-shadow:0 4px 30px var(--glow)}

/* Story viewer */
.story-viewer{background:var(--bg3);border-radius:20px;width:360px;height:600px;position:relative;overflow:hidden}
.sv-progress{position:absolute;top:10px;left:10px;right:10px;height:2px;background:rgba(255,255,255,0.2);border-radius:1px;z-index:5}
.sv-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.5);border:none;color:#fff;font-size:16px;cursor:pointer;z-index:5;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sv-content{width:100%;height:100%}
.sv-content img{width:100%;height:100%;object-fit:cover}
.sv-info{position:absolute;bottom:16px;left:16px;right:16px;color:#fff}

/* Video modal */
.video-modal-card{
  background:var(--bg3);border-radius:20px;display:flex;overflow:hidden;
  width:min(90vw,900px);max-height:90vh;box-shadow:0 40px 100px rgba(0,0,0,0.8);
  animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.vm-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.6);border:none;color:#fff;font-size:16px;cursor:pointer;z-index:20;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.vm-left{width:360px;flex-shrink:0;position:relative;background:#000}
.vm-video{width:100%;height:100%;object-fit:contain}
.vm-video-placeholder{position:relative;width:100%;height:100%;min-height:400px}
.vm-video-placeholder img{width:100%;height:100%;object-fit:cover}
.vm-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;color:rgba(255,255,255,0.8);background:rgba(0,0,0,0.2)}
.vm-right{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.vm-user-row{display:flex;align-items:center;gap:10px}
.vm-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--violet2)}
.vm-user-info{flex:1}
.vm-username{font-size:14px;font-weight:700}
.vm-time{font-size:11px;color:var(--muted)}
.vm-follow-btn{padding:7px 16px;background:var(--grad2);border:none;border-radius:20px;color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;cursor:pointer}
.vm-caption{font-size:13px;line-height:1.6}
.vm-hashtags{display:flex;flex-wrap:wrap;gap:6px}
.vm-hashtag{font-size:12px;color:var(--violet2)}
.vm-actions{display:flex;gap:8px;flex-wrap:wrap}
.vm-action-btn{padding:7px 14px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.vm-action-btn:hover{border-color:var(--violet2)}
.vm-remix-btn{background:rgba(109,40,217,0.15);border-color:rgba(109,40,217,0.3);color:#a78bfa}
.vm-reactions{display:flex;gap:8px;flex-wrap:wrap}
.vm-react{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;transition:all 0.2s}
.vm-react:hover{transform:scale(1.2);background:var(--surface2)}
.vm-comments-section{flex:1;min-height:0}
.vm-comments-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px}
.vm-comments-list{display:flex;flex-direction:column;gap:8px;max-height:160px;overflow-y:auto;margin-bottom:10px}
.vmc-item{display:flex;gap:8px}
.vmc-avatar{width:30px;height:30px;border-radius:50%;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0}
.vmc-body strong{font-size:12px}
.vmc-body p{font-size:12px;color:var(--muted);margin-top:1px}
.vm-comment-input-row{display:flex;gap:8px;align-items:center}
.vmc-self-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.vm-comment-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text);font-family:'Outfit',sans-serif;padding:7px 14px;font-size:12px;outline:none;transition:border-color 0.2s}
.vm-comment-input:focus{border-color:var(--violet2)}
.vm-comment-send{width:34px;height:34px;background:var(--grad2);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px}

/* Toast */
.toast-el{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(20,20,40,0.95);border:1px solid var(--border);border-radius:30px;padding:10px 24px;font-size:13px;font-weight:500;z-index:999;backdrop-filter:blur(20px);animation:slideUp 0.3s ease;box-shadow:0 8px 40px rgba(0,0,0,0.5)}
.toast-el.hidden{display:none}
/* ============================================================
   INFINITE MARQUEE STRIP (CapCut-style scrolling cards)
============================================================ */
.marquee-section{padding:8px 0 20px;overflow:hidden}
.marquee-label{
  padding:0 20px 12px;font-size:13px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.marquee-label span{color:var(--violet2);cursor:pointer;font-size:12px}
.marquee-label span:hover{text-decoration:underline}
.marquee-outer{
  overflow:hidden;position:relative;margin-bottom:10px;
  /* fade edges */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.marquee-track{
  display:flex;gap:10px;width:max-content;
  animation:marqueeMoveLeft 40s linear infinite;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-reverse{
  animation:marqueeMoveRight 38s linear infinite;
}
@keyframes marqueeMoveLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes marqueeMoveRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
.mq-card{
  flex-shrink:0;width:130px;height:200px;border-radius:12px;overflow:hidden;
  cursor:pointer;position:relative;transition:transform 0.2s,box-shadow 0.2s;
}
.mq-card:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 40px rgba(0,0,0,0.6)}
.mq-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.mq-card:hover img{transform:scale(1.08)}
.mq-play-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.2);opacity:0;transition:opacity 0.2s;font-size:28px;color:rgba(255,255,255,0.9);
}
.mq-card:hover .mq-play-icon{opacity:1}
.mq-card-info{
  position:absolute;bottom:0;left:0;right:0;padding:8px;
  background:linear-gradient(to top,rgba(0,0,0,0.85),transparent);
}
.mq-card-user{font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-card-likes{font-size:9px;color:rgba(255,255,255,0.7)}
.mq-featured{
  position:absolute;top:6px;left:6px;background:var(--violet2);color:#fff;
  font-size:8px;font-weight:700;padding:2px 6px;border-radius:20px;
}

/* ============================================================
   POST TYPE TABS (in create post modal)
============================================================ */
.post-type-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px;scrollbar-width:none}
.post-type-tabs::-webkit-scrollbar{display:none}
.ptt{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.ptt:hover{background:var(--surface);color:var(--text)}
.ptt.active-ptt{background:var(--grad2);border-color:transparent;color:#fff}

/* ============================================================
   REELS PAGE — full-screen vertical scroll
============================================================ */
#pageReels{padding:0;overflow:hidden;height:calc(100vh - var(--topnav-h))}
.reels-container{
  display:flex;flex-direction:column;overflow-y:scroll;height:100%;scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.reels-container::-webkit-scrollbar{display:none}
.reel-card{
  flex-shrink:0;width:100%;height:calc(100vh - var(--topnav-h));
  scroll-snap-align:start;position:relative;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.reel-card-img{width:100%;height:100%;object-fit:cover;filter:brightness(0.85)}
.reel-side-actions{
  position:absolute;right:16px;bottom:100px;display:flex;flex-direction:column;gap:18px;align-items:center;
}
.rsa-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;color:#fff;font-size:11px;font-weight:600;
}
.rsa-btn-icon{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:transform 0.2s,background 0.2s;
}
.rsa-btn:hover .rsa-btn-icon{transform:scale(1.15);background:rgba(109,40,217,0.6)}
.reel-bottom{
  position:absolute;bottom:0;left:0;right:60px;padding:20px 16px;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
}
.reel-user-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.reel-avatar{width:38px;height:38px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:var(--grad2)}
.reel-username{font-size:14px;font-weight:700;color:#fff}
.reel-follow-btn{padding:4px 12px;border:1.5px solid #fff;border-radius:20px;background:transparent;color:#fff;font-size:11px;font-weight:700;cursor:pointer;margin-left:8px;transition:all 0.2s}
.reel-follow-btn:hover{background:#fff;color:#000}
.reel-caption{font-size:13px;color:rgba(255,255,255,0.9);line-height:1.5;margin-bottom:8px}
.reel-tags{display:flex;gap:6px;flex-wrap:wrap}
.reel-tag{font-size:12px;color:var(--violet2);font-weight:600;cursor:pointer}
.reel-audio-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,0.7)}
.reel-audio-icon{width:28px;height:28px;background:var(--grad2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reel-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.2)}
.reel-progress-fill{height:100%;background:var(--grad2);animation:reelProgress 12s linear infinite}
@keyframes reelProgress{from{width:0%}to{width:100%}}

/* ============================================================
   WATCH PAGE
============================================================ */
.watch-header{padding:20px 20px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.watch-tabs{display:flex;gap:8px}
.watch-tab{padding:7px 16px;border-radius:20px;border:none;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.watch-tab.active-wtab,.watch-tab:hover{background:var(--grad2);color:#fff}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:16px 20px}
.watch-card{border-radius:14px;overflow:hidden;background:var(--surface);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.watch-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.wc-thumb{position:relative}
.wc-thumb img{width:100%;height:160px;object-fit:cover;display:block}
.wc-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.8);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px}
.wc-live-badge{position:absolute;top:8px;left:8px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;animation:pulse 2s infinite}
.wc-info{padding:10px 12px}
.wc-title{font-size:13px;font-weight:700;margin-bottom:4px;line-height:1.4}
.wc-meta{font-size:11px;color:var(--muted)}
.wc-views{font-size:11px;color:var(--muted)}

/* ============================================================
   GROUPS PAGE
============================================================ */
.groups-layout{display:flex;height:calc(100vh - var(--topnav-h));overflow:hidden}
.groups-sidebar{width:280px;flex-shrink:0;border-right:1px solid var(--border);padding:16px;overflow-y:auto;background:var(--bg)}
.gs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gs-title{font-size:18px;font-weight:800}
.gs-create-btn{padding:6px 14px;border-radius:20px;background:var(--grad2);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.gs-search{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;margin-bottom:12px}
.gs-label{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:8px}
.gs-group-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:background 0.2s;margin-bottom:4px}
.gs-group-item:hover,.gs-group-item.active-gsi{background:rgba(109,40,217,0.15)}
.gs-group-avatar{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0}
.gs-group-name{font-size:13px;font-weight:700}
.gs-group-members{font-size:11px;color:var(--muted)}
.groups-main{flex:1;overflow-y:auto;padding:0}
.group-feed-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--muted)}
.gfp-icon{font-size:48px}
.group-view{padding:0}
.gv-banner{width:100%;height:200px;object-fit:cover;display:block}
.gv-info{padding:16px 20px}
.gv-name{font-size:22px;font-weight:800;margin-bottom:4px}
.gv-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.gv-actions{display:flex;gap:10px;margin-bottom:20px}
.gv-join-btn{padding:8px 24px;border-radius:20px;background:var(--grad2);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.gv-share-btn{padding:8px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.gv-posts{display:flex;flex-direction:column;gap:16px;padding:0 20px 20px}
.gv-post-card{background:var(--surface);border-radius:14px;padding:16px;border:1px solid var(--border)}
.gvp-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gvp-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}
.gvp-name{font-size:13px;font-weight:700}
.gvp-time{font-size:11px;color:var(--muted)}
.gvp-text{font-size:13px;line-height:1.6;color:var(--text-dim);margin-bottom:10px}
.gvp-actions{display:flex;gap:10px;border-top:1px solid var(--border);padding-top:10px}
.gvp-act-btn{flex:1;padding:6px;border-radius:8px;background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:background 0.2s}
.gvp-act-btn:hover{background:var(--border);color:var(--text)}

/* ============================================================
   EVENTS PAGE
============================================================ */
.events-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.ev-create-btn{padding:8px 20px;border-radius:20px;background:var(--grad2);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.events-tabs{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border)}
.ev-tab{padding:7px 16px;border-radius:20px;border:none;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.ev-tab.active-etab,.ev-tab:hover{background:var(--grad2);color:#fff}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:16px 20px}
.event-card{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.event-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.ec-banner{width:100%;height:150px;object-fit:cover;display:block}
.ec-body{padding:14px}
.ec-date{font-size:11px;font-weight:800;color:var(--violet2);text-transform:uppercase;margin-bottom:4px}
.ec-title{font-size:15px;font-weight:800;margin-bottom:6px}
.ec-location{font-size:12px;color:var(--muted);margin-bottom:10px}
.ec-attendees{font-size:11px;color:var(--muted);margin-bottom:10px}
.ec-actions{display:flex;gap:8px}
.ec-rsvp-btn{flex:1;padding:7px;border-radius:10px;background:var(--grad2);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:opacity 0.2s}
.ec-rsvp-btn:hover{opacity:0.85}
.ec-int-btn{padding:7px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:12px;cursor:pointer}

/* ============================================================
   MARKETPLACE PAGE
============================================================ */
.market-header{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.market-sell-btn{padding:8px 20px;border-radius:20px;background:var(--grad2);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.market-search-bar{display:flex;gap:10px;padding:12px 20px}
.market-search{flex:1;padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px}
.market-filter{padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;cursor:pointer}
.market-cats{display:flex;gap:8px;padding:0 20px 12px;overflow-x:auto;scrollbar-width:none}
.market-cats::-webkit-scrollbar{display:none}
.mcat{flex-shrink:0;padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.mcat.active-mcat,.mcat:hover{background:var(--grad2);border-color:transparent;color:#fff}
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:0 20px 20px}
.market-item{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.market-item:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.mi-img{width:100%;height:180px;object-fit:cover;display:block}
.mi-body{padding:10px 12px}
.mi-price{font-size:16px;font-weight:800;color:var(--violet2);margin-bottom:4px}
.mi-title{font-size:13px;font-weight:700;margin-bottom:4px}
.mi-location{font-size:11px;color:var(--muted)}
.mi-condition{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:700;margin-top:6px}

/* ============================================================
   NOTIFICATION & FRIEND REQUEST PANELS
============================================================ */
.notif-panel,.friend-req-panel{
  position:absolute;top:48px;right:0;width:340px;max-height:480px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);z-index:1000;animation:slideDown 0.2s ease;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.np-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.np-title{font-size:16px;font-weight:800}
.np-markall{font-size:12px;color:var(--violet2);background:none;border:none;cursor:pointer;font-weight:600}
.np-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background 0.15s}
.np-item:hover{background:var(--surface)}
.np-item.np-unread{background:rgba(109,40,217,0.08)}
.np-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
.np-content{flex:1;min-width:0}
.np-text{font-size:13px;line-height:1.4;margin-bottom:3px}
.np-time{font-size:11px;color:var(--muted)}
.np-dot{width:8px;height:8px;border-radius:50%;background:var(--violet2);flex-shrink:0;margin-top:6px}
.frq-actions{display:flex;gap:6px;margin-top:8px}
.frq-accept{padding:5px 14px;border-radius:8px;background:var(--grad2);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.frq-decline{padding:5px 14px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:12px;cursor:pointer}

/* Reaction popup */
.reaction-popup{
  position:absolute;bottom:calc(100% + 8px);left:0;background:var(--card);
  border:1px solid var(--border);border-radius:30px;padding:6px 10px;
  display:flex;gap:4px;box-shadow:0 8px 30px rgba(0,0,0,0.4);
  z-index:100;animation:popIn 0.15s ease;opacity:0;pointer-events:none;
  transition:opacity 0.15s;
}
.reaction-popup.show{opacity:1;pointer-events:all}
@keyframes popIn{from{transform:scale(0.7)}to{transform:scale(1)}}
.rp-emoji{font-size:22px;cursor:pointer;transition:transform 0.15s;line-height:1}
.rp-emoji:hover{transform:scale(1.4) translateY(-4px)}

/* ============================================================
   CAREERORBIT — SPHERA's Job Board (NOT LinkedIn)
============================================================ */
/* Launchpad Banner (like Open to Work — but SPHERA branded) */
.co-launchpad-banner{
  display:flex;align-items:center;gap:14px;
  margin:16px 20px 0;padding:14px 18px;
  background:linear-gradient(135deg,rgba(217,119,6,0.15),rgba(109,40,217,0.15));
  border:1px solid rgba(217,119,6,0.4);border-radius:16px;position:relative;
}
.co-lp-left{display:flex;align-items:center;gap:12px;flex:1}
.co-lp-icon{font-size:28px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.co-lp-title{font-size:14px;font-weight:700;margin-bottom:3px}
.co-lp-title strong{color:#f59e0b}
.co-lp-sub{font-size:12px;color:var(--muted)}
.co-lp-edit{padding:6px 16px;border-radius:20px;background:linear-gradient(135deg,#d97706,#dc2626);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.co-lp-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;margin-left:8px}

/* 3-column layout */
.co-layout{display:grid;grid-template-columns:260px 1fr 380px;gap:0;height:calc(100vh - var(--topnav-h) - 80px);overflow:hidden;margin-top:12px}

/* Left sidebar */
.co-sidebar{border-right:1px solid var(--border);padding:16px;overflow-y:auto;background:var(--bg)}
.co-search-block{margin-bottom:16px}
.co-search-title{font-size:16px;font-weight:800;margin-bottom:10px;background:linear-gradient(135deg,#f59e0b,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.co-search-row{display:flex;gap:6px}
.co-search-input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px}
.co-search-btn{padding:8px 12px;border-radius:10px;background:var(--grad2);border:none;color:#fff;cursor:pointer;font-size:14px;flex-shrink:0}
.co-filters{padding-top:12px;border-top:1px solid var(--border)}
.co-filter-label{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:6px}
.co-filter-pills{display:flex;gap:5px;flex-wrap:wrap}
.co-pill{padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s}
.co-pill.active-copill,.co-pill:hover{background:rgba(109,40,217,0.25);border-color:var(--violet2);color:var(--violet2)}
.co-salary-slider{width:100%;accent-color:var(--violet2);margin:8px 0 4px}
.co-salary-display{font-size:13px;font-weight:800;color:var(--violet2)}
.co-tracker-section{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.co-tracker-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px}
.co-tracker-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.co-tracker-status.applied{background:#f59e0b}
.co-tracker-status.saved{background:#0ea5e9}
.co-tracker-status.viewed{background:#6d28d9}

/* Middle: Job cards */
.co-main{overflow-y:auto;border-right:1px solid var(--border)}
.co-jobs-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.co-jobs-count{font-size:13px;font-weight:700;color:var(--muted)}
.co-job-card{padding:16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s;position:relative}
.co-job-card:hover,.co-job-card.co-active-job{background:rgba(109,40,217,0.08)}
.co-job-card.co-active-job{border-left:3px solid var(--violet2)}
.cj-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.cj-logo{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#fff;padding:4px;flex-shrink:0}
.cj-logo-fallback{width:44px;height:44px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff}
.cj-title{font-size:14px;font-weight:800;line-height:1.3;color:var(--text);margin-bottom:3px}
.cj-company{font-size:12px;color:var(--muted);font-weight:600}
.cj-location{font-size:12px;color:var(--muted);margin-bottom:6px}
.cj-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.cj-tag{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(109,40,217,0.15);color:var(--violet2);border:1px solid rgba(109,40,217,0.3)}
.cj-tag.remote{background:rgba(5,150,105,0.15);color:#10b981;border-color:rgba(5,150,105,0.3)}
.cj-tag.tssci{background:rgba(220,38,38,0.15);color:#ef4444;border-color:rgba(220,38,38,0.3)}
.cj-salary{font-size:13px;font-weight:800;color:#f59e0b;margin-bottom:8px}
.cj-footer{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}
.cj-easy-apply{padding:3px 10px;border-radius:20px;background:var(--grad2);border:none;color:#fff;font-size:10px;font-weight:700;cursor:pointer}
.cj-match{font-size:11px;font-weight:700;color:#10b981}
.cj-save-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;position:absolute;top:14px;right:14px;transition:color 0.2s}
.cj-save-btn:hover,.cj-save-btn.saved{color:#f59e0b}

/* Right: Job Detail panel */
.co-detail{overflow-y:auto;padding:20px;background:var(--bg)}
.co-detail-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cd-header{margin-bottom:16px}
.cd-logo-lg{width:64px;height:64px;border-radius:14px;object-fit:contain;background:#fff;padding:6px;margin-bottom:10px}
.cd-logo-lg-fb{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;color:#fff;margin-bottom:10px}
.cd-title{font-size:20px;font-weight:800;margin-bottom:4px}
.cd-company{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:8px}
.cd-meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cd-meta-item{font-size:12px;color:var(--muted)}
.cd-salary{font-size:18px;font-weight:800;color:#f59e0b;margin-bottom:12px}
.cd-actions{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.cd-apply-btn{flex:1;padding:10px;border-radius:12px;background:linear-gradient(135deg,#d97706,#dc2626);border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:opacity 0.2s;min-width:120px}
.cd-apply-btn.easy{background:var(--grad2)}
.cd-apply-btn:hover{opacity:0.85}
.cd-save-btn{padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px;cursor:pointer}
.cd-section{margin-bottom:16px}
.cd-section-title{font-size:13px;font-weight:800;color:var(--violet2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px}
.cd-desc{font-size:13px;line-height:1.7;color:var(--text-dim)}
.cd-req-list{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.cd-req-list li{font-size:13px;color:var(--text-dim);display:flex;gap:6px;align-items:flex-start}
.cd-req-list li::before{content:"✦";color:var(--violet2);flex-shrink:0;margin-top:2px}
.cd-connections{display:flex;flex-direction:column;gap:8px}
.cd-conn-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.cd-conn-avatar{width:28px;height:28px;border-radius:50%;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}

/* ============================================================
   ELEVATE — SPHERA's Learning Hub (NOT LinkedIn Learning)
============================================================ */
.el-oreilly-banner{
  display:flex;align-items:center;gap:16px;margin:16px 20px 0;padding:14px 18px;
  background:linear-gradient(135deg,rgba(234,88,12,0.15),rgba(5,150,105,0.1));
  border:1px solid rgba(234,88,12,0.4);border-radius:16px;
}
.el-or-img{width:80px;height:60px;object-fit:cover;border-radius:8px;flex-shrink:0}
.el-or-text{flex:1}
.el-or-title{font-size:14px;font-weight:800;margin-bottom:3px;color:#f97316}
.el-or-sub{font-size:12px;color:var(--muted);line-height:1.5}
.el-or-actions{display:flex;gap:8px;flex-shrink:0}
.el-or-open{padding:7px 16px;border-radius:20px;background:linear-gradient(135deg,#ea580c,#f59e0b);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.el-or-disconnect{padding:7px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:12px;cursor:pointer}

.el-layout{display:grid;grid-template-columns:220px 1fr;gap:0;height:calc(100vh - var(--topnav-h) - 96px);overflow:hidden;margin-top:12px}
.el-sidebar{border-right:1px solid var(--border);padding:16px;overflow-y:auto;background:var(--bg)}
.el-sb-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.el-sb-section:last-child{border-bottom:none}
.el-sb-title{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.el-sb-link{padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;color:var(--text-dim)}
.el-sb-link:hover,.el-sb-link.active-esl{background:rgba(109,40,217,0.15);color:var(--violet2)}
.el-goal-item{margin-bottom:10px}
.el-goal-label{font-size:12px;font-weight:600;margin-bottom:4px;display:flex;justify-content:space-between}
.el-goal-bar{height:5px;border-radius:10px;background:var(--border);overflow:hidden}
.el-goal-fill{height:100%;border-radius:10px;background:var(--grad2)}

.el-main{overflow-y:auto;padding:0}
.el-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 16px}
.el-tab{padding:12px 16px;border-bottom:2px solid transparent;background:none;border-left:none;border-right:none;border-top:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.el-tab.active-eltab,.el-tab:hover{color:var(--violet2);border-bottom-color:var(--violet2)}
.el-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:16px}

/* Course card */
.el-course-card{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.el-course-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.ec-thumb{position:relative;height:130px;overflow:hidden}
.ec-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px}
.ec-provider{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:20px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px}
.ec-provider.oreilly{background:#ea580c;color:#fff}
.ec-provider.sphera{background:var(--grad2);color:#fff}
.ec-provider.live{background:#dc2626;color:#fff;animation:pulse 2s infinite}
.ec-cert-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.7);border-radius:20px;padding:2px 8px;font-size:9px;font-weight:700;color:#f59e0b}
.ec-body{padding:12px}
.ec-title{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:4px}
.ec-instructor{font-size:11px;color:var(--muted);margin-bottom:8px}
.ec-progress-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ec-progress-bar{flex:1;height:4px;border-radius:10px;background:var(--border);overflow:hidden}
.ec-progress-fill{height:100%;border-radius:10px;background:linear-gradient(to right,#6d28d9,#0ea5e9)}
.ec-progress-pct{font-size:10px;font-weight:700;color:var(--violet2);white-space:nowrap}
.ec-meta{display:flex;gap:10px;font-size:11px;color:var(--muted);align-items:center}
.ec-rating{color:#f59e0b}
.ec-duration{color:var(--muted)}

.hidden{display:none!important}

/* ============================================================
   NEXUS — SPHERA's Global Broadcast Platform
   Design: Ocean-depth holographic dark theme. Zero X/Twitter resemblance.
============================================================ */
#pageNexus{padding:0;overflow:hidden;height:calc(100vh - var(--topnav-h))}
.nx-shell{display:grid;grid-template-columns:260px 1fr 320px;height:100%;overflow:hidden}
.nx-leftnav{border-right:1px solid var(--border);padding:16px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;background:linear-gradient(180deg,var(--bg) 0%,rgba(14,165,233,0.03) 100%);scrollbar-width:none}
.nx-leftnav::-webkit-scrollbar{display:none}
.nx-brand{display:flex;align-items:center;gap:10px;padding:8px 12px 16px;margin-bottom:4px}
.nx-brand-icon{font-size:28px;filter:drop-shadow(0 0 10px rgba(14,165,233,0.6))}
.nx-brand-name{font-size:20px;font-weight:900;background:linear-gradient(135deg,#0ea5e9,#6d28d9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nx-brand-tagline{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:-1px}
.nx-navitem{width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:40px;background:transparent;border:none;color:var(--text-dim);font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:left;position:relative}
.nx-navitem:hover{background:rgba(14,165,233,0.08);color:var(--text)}
.nx-navitem.active-nxi{color:#0ea5e9;font-weight:800}
.nx-navitem.active-nxi::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:linear-gradient(#0ea5e9,#6d28d9);border-radius:2px}
.nx-nav-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0;transition:transform 0.2s}
.nx-navitem:hover .nx-nav-icon{transform:scale(1.15)}
.nx-nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#6d28d9);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.nx-transmit-btn{width:calc(100% - 8px);margin:12px 4px 0;padding:14px;border-radius:40px;background:linear-gradient(135deg,#0ea5e9,#6d28d9);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 0 24px rgba(14,165,233,0.35);transition:all 0.2s;letter-spacing:0.3px}
.nx-transmit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(14,165,233,0.5)}
.nx-user-row{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(14,165,233,0.05);border:1px solid rgba(14,165,233,0.1);margin-top:auto;cursor:pointer;transition:all 0.2s}
.nx-user-row:hover{background:rgba(14,165,233,0.1)}
.nx-user-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#6d28d9);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.nx-user-info{flex:1;overflow:hidden}
.nx-user-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-user-handle{font-size:11px;color:var(--muted)}
.nx-verified{color:#0ea5e9;font-size:11px}
.nx-pro-badge{padding:2px 7px;border-radius:20px;font-size:9px;font-weight:800;background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;flex-shrink:0}
.nx-main{overflow-y:auto;border-right:1px solid var(--border);scrollbar-width:thin}
.nx-tab-panel{display:none}
.nx-tab-panel.active-nxp{display:block}
.nx-feed-header{position:sticky;top:0;z-index:10;padding:0 16px;height:52px;display:flex;align-items:center;gap:8px;background:rgba(10,10,20,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nx-feed-tabs{display:flex;gap:0;flex:1}
.nx-ftab{padding:0 20px;height:52px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.nx-ftab:hover{color:var(--text)}
.nx-ftab.active-nxft{color:#0ea5e9;border-bottom-color:#0ea5e9}
.nx-settings-btn{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:6px;border-radius:50%;transition:all 0.2s;flex-shrink:0}
.nx-settings-btn:hover{background:rgba(14,165,233,0.1);color:#0ea5e9}
.nx-compose-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.nx-compose-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#6d28d9);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;flex-shrink:0;border:2px solid rgba(14,165,233,0.3)}
.nx-compose-input{flex:1;background:transparent;border:none;color:var(--muted);font-family:'Outfit',sans-serif;font-size:15px;cursor:pointer;outline:none}
.nx-compose-media-btns{display:flex;gap:2px}
.nx-qm-btn{background:transparent;border:none;font-size:16px;cursor:pointer;padding:6px 8px;color:#0ea5e9;border-radius:8px;transition:background 0.15s}
.nx-qm-btn:hover{background:rgba(14,165,233,0.1)}
.nx-qtransmit-btn{padding:6px 16px;border-radius:20px;border:1.5px solid #0ea5e9;background:transparent;color:#0ea5e9;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.nx-qtransmit-btn:hover{background:#0ea5e9;color:#fff}
.nx-transmission{padding:14px 16px;border-bottom:1px solid var(--border);transition:background 0.15s;cursor:pointer;position:relative}
.nx-transmission:hover{background:rgba(14,165,233,0.04)}
.nx-tx-header{display:flex;gap:10px;margin-bottom:8px;align-items:flex-start}
.nx-tx-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;box-shadow:0 0 12px rgba(14,165,233,0.25)}
.nx-tx-meta{flex:1;overflow:hidden}
.nx-tx-name-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:1px}
.nx-tx-name{font-size:14px;font-weight:800}
.nx-tx-handle,.nx-tx-dot,.nx-tx-time{font-size:12px;color:var(--muted)}
.nx-tx-more{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:50%;transition:all 0.2s;flex-shrink:0;margin-top:-2px}
.nx-tx-more:hover{background:rgba(14,165,233,0.1);color:#0ea5e9}
.nx-amplify-label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-bottom:6px;padding-left:52px}
.nx-tx-body{padding-left:52px}
.nx-tx-text{font-size:15px;line-height:1.6;margin-bottom:10px;color:var(--text)}
.nx-tx-hashtag{color:#0ea5e9;font-weight:600}
.nx-tx-hashtag:hover{text-decoration:underline}
.nx-tx-media{border-radius:16px;overflow:hidden;margin-bottom:10px;border:1px solid var(--border)}
.nx-tx-media img{width:100%;max-height:380px;object-fit:cover;display:block}
.nx-tx-poll{background:rgba(14,165,233,0.05);border:1px solid rgba(14,165,233,0.2);border-radius:14px;padding:12px;margin-bottom:10px}
.nx-poll-option{padding:8px 12px;border-radius:10px;border:1.5px solid rgba(14,165,233,0.3);margin-bottom:6px;cursor:pointer;transition:all 0.2s;font-size:13px;font-weight:600;position:relative;overflow:hidden}
.nx-poll-option:hover{border-color:#0ea5e9;background:rgba(14,165,233,0.08)}
.nx-poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(14,165,233,0.15);border-radius:10px;transition:width 0.8s ease}
.nx-poll-option-text,.nx-poll-pct{position:relative;z-index:1}
.nx-poll-pct{float:right;font-size:12px;color:#0ea5e9;font-weight:700}
.nx-poll-meta{font-size:11px;color:var(--muted);margin-top:6px}
.nx-tx-quote{border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:10px;background:rgba(14,165,233,0.03);transition:background 0.2s}
.nx-tx-quote:hover{background:rgba(14,165,233,0.07)}
.nx-qt-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:700}
.nx-tx-actions{display:flex;align-items:center;gap:4px;padding-top:4px}
.nx-tx-action{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:20px;background:transparent;border:none;color:var(--muted);font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s}
.nx-tx-action:hover.reply-act{color:#0ea5e9;background:rgba(14,165,233,0.09)}
.nx-tx-action:hover.amplify-act{color:#10b981;background:rgba(16,185,129,0.09)}
.nx-tx-action:hover.spark-act{color:#f43f5e;background:rgba(244,63,94,0.09)}
.nx-tx-action:hover.view-act{color:#a78bfa;background:rgba(167,139,250,0.09)}
.nx-tx-action:hover.share-act,.nx-tx-action:hover.bookmark-act{color:#f59e0b;background:rgba(245,158,11,0.09)}
.nx-tx-action.sparked{color:#f43f5e}
.nx-tx-action.amplified{color:#10b981}
.nx-tx-action.bookmarked{color:#f59e0b}
.nx-act-icon{font-size:16px;line-height:1}
.nx-acted-separator{flex:1}
.nx-explore-search{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.nx-search-input{flex:1;padding:10px 16px;border-radius:24px;border:1px solid var(--border);background:rgba(14,165,233,0.05);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:all 0.2s}
.nx-search-input:focus{border-color:#0ea5e9;background:rgba(14,165,233,0.08)}
.nx-search-input::placeholder{color:var(--muted)}
.nx-search-btn{padding:10px 16px;border-radius:24px;background:linear-gradient(135deg,#0ea5e9,#6d28d9);border:none;color:#fff;font-size:16px;cursor:pointer;transition:all 0.2s}
.nx-explore-tabs,.nx-notif-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.nx-etab,.nx-ntab{flex-shrink:0;padding:12px 18px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.nx-etab:hover,.nx-ntab:hover{color:var(--text)}
.nx-etab.active-nxet,.nx-ntab.active-nxnt{color:#0ea5e9;border-bottom-color:#0ea5e9}
.nx-trend-card{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.nx-trend-card:hover{background:rgba(14,165,233,0.04)}
.nx-trend-category{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px}
.nx-trend-tag{font-size:16px;font-weight:800;margin-bottom:3px}
.nx-trend-count{font-size:12px;color:var(--muted)}
.nx-alert-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.nx-alert-item:hover{background:rgba(14,165,233,0.04)}
.nx-alert-item.unread{background:rgba(14,165,233,0.06)}
.nx-alert-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff}
.nx-alert-icon{font-size:20px;flex-shrink:0;padding-top:2px}
.nx-alert-content{flex:1;min-width:0}
.nx-alert-text{font-size:13px;line-height:1.5;margin-bottom:3px}
.nx-alert-text strong{color:var(--text);font-weight:700}
.nx-alert-time{font-size:11px;color:var(--muted)}
.nx-alert-dot{width:8px;height:8px;border-radius:50%;background:#0ea5e9;flex-shrink:0;margin-top:6px}
.nx-channel-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.nx-channel-item:hover{background:rgba(14,165,233,0.04)}
.nx-channel-av{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.nx-channel-info{flex:1;overflow:hidden}
.nx-channel-name{font-size:14px;font-weight:800;margin-bottom:3px}
.nx-channel-preview{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-channel-meta{text-align:right;flex-shrink:0;font-size:11px;color:var(--muted)}
.nx-spaces-hero{text-align:center;padding:40px 20px 20px;background:radial-gradient(ellipse at center,rgba(14,165,233,0.08),transparent 70%)}
.nx-spaces-title{font-size:28px;font-weight:900;margin-bottom:8px;background:linear-gradient(135deg,#0ea5e9,#6d28d9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nx-spaces-sub{font-size:14px;color:var(--muted)}
.nx-space-card{padding:16px;margin:12px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(109,40,217,0.1));border:1px solid rgba(14,165,233,0.2);transition:all 0.2s;cursor:pointer}
.nx-space-card:hover{border-color:#0ea5e9;transform:translateY(-2px)}
.nx-space-live-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.nx-space-live{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:livePulse 1s infinite}
.nx-space-live-label{font-size:11px;font-weight:800;color:#ef4444;text-transform:uppercase}
.nx-space-viewers{font-size:11px;color:var(--muted)}
.nx-space-title{font-size:16px;font-weight:800;margin-bottom:8px}
.nx-space-hosts{display:flex;margin-bottom:8px}
.nx-space-host-av{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);background:linear-gradient(135deg,#0ea5e9,#6d28d9);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff}
.nx-space-join-btn{padding:7px 18px;border-radius:20px;background:linear-gradient(135deg,#0ea5e9,#6d28d9);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.nx-space-join-btn:hover{opacity:0.85}
.nx-community-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.nx-community-card:hover{background:rgba(14,165,233,0.04)}
.nx-comm-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px}
.nx-comm-info{flex:1;overflow:hidden}
.nx-comm-name{font-size:14px;font-weight:800;margin-bottom:3px}
.nx-comm-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.nx-comm-join{padding:5px 14px;border-radius:20px;border:1.5px solid #0ea5e9;background:transparent;color:#0ea5e9;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;transition:all 0.2s}
.nx-comm-join:hover{background:#0ea5e9;color:#fff}
.nx-profile-cover{height:160px;position:relative}
.nx-profile-header{display:flex;align-items:flex-end;padding:0 16px 14px;margin-top:-48px;gap:12px}
.nx-profile-av-wrap{position:relative;flex-shrink:0}
.nx-profile-av{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#6d28d9);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:36px;color:#fff;border:4px solid var(--bg);position:relative;z-index:2}
.nx-profile-av-ring{position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#6d28d9);z-index:1;animation:orbPulse 3s infinite;opacity:0.5}
.nx-pro-full-badge{position:absolute;bottom:0;right:0;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:800;background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;z-index:3;border:2px solid var(--bg)}
.nx-profile-info{padding:0 16px 14px}
.nx-profile-name{font-size:20px;font-weight:900;margin-bottom:2px}
.nx-profile-handle{font-size:13px;color:var(--muted);margin-bottom:8px}
.nx-profile-bio{font-size:14px;line-height:1.6;color:var(--text-dim);margin-bottom:8px}
.nx-profile-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:10px}
.nx-profile-stats{display:flex;gap:16px;font-size:13px;color:var(--text-dim);flex-wrap:wrap}
.nx-profile-stats strong{color:var(--text);font-weight:800}
.nx-profile-tabs-row{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.nx-profile-tab{flex:1;padding:12px 8px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.nx-profile-tab:hover{color:var(--text)}
.nx-profile-tab.active-nxpt{color:#0ea5e9;border-bottom-color:#0ea5e9}
.nx-pill-btn{padding:8px 18px;border-radius:20px;background:transparent;color:var(--text);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.nx-pill-btn:hover{background:rgba(14,165,233,0.08);color:#0ea5e9}
.nx-rightsidebar{padding:12px;overflow-y:auto;background:var(--bg2);display:flex;flex-direction:column;gap:14px;scrollbar-width:none}
.nx-rightsidebar::-webkit-scrollbar{display:none}
.nx-rs-search{position:relative;display:flex;align-items:center}
.nx-rs-search .nx-search-input{padding-left:40px}
.nx-rs-search-icon{position:absolute;left:14px;color:var(--muted);font-size:16px;pointer-events:none}
.nx-rs-card{background:rgba(14,165,233,0.04);border:1px solid rgba(14,165,233,0.12);border-radius:18px;padding:16px}
.nx-rs-card-title{font-size:17px;font-weight:800;margin-bottom:12px}
.nx-rs-show-more{width:100%;padding:8px;border-radius:10px;background:transparent;border:none;color:#0ea5e9;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-top:8px;transition:background 0.15s;text-align:center}
.nx-rs-show-more:hover{background:rgba(14,165,233,0.08)}
.nx-rs-trend{padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.15s}
.nx-rs-trend:last-child{border-bottom:none}
.nx-rs-trend:hover .nx-rs-ttag{color:#0ea5e9}
.nx-rs-tcat{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.nx-rs-ttag{font-size:14px;font-weight:800;margin:2px 0;transition:color 0.15s}
.nx-rs-tcount{font-size:11px;color:var(--muted)}
.nx-wtf-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.nx-wtf-item:last-child{border-bottom:none}
.nx-wtf-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}
.nx-wtf-info{flex:1;overflow:hidden}
.nx-wtf-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-wtf-handle{font-size:11px;color:var(--muted)}
.nx-wtf-follow{padding:5px 12px;border-radius:20px;border:1.5px solid #0ea5e9;background:transparent;color:#0ea5e9;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;transition:all 0.2s}
.nx-wtf-follow:hover{background:#0ea5e9;color:#fff}
.nx-wtf-follow.following{background:rgba(14,165,233,0.1)}
.nx-rs-pro-card{background:linear-gradient(135deg,rgba(14,165,233,0.12),rgba(109,40,217,0.12));border:1px solid rgba(14,165,233,0.3);border-radius:18px;padding:20px;text-align:center}
.nx-pro-icon{font-size:28px;margin-bottom:8px;color:#f59e0b;text-shadow:0 0 20px rgba(245,158,11,0.6)}
.nx-pro-title{font-size:17px;font-weight:800;margin-bottom:6px}
.nx-pro-sub{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.nx-pro-btn{width:100%;padding:10px;border-radius:20px;background:linear-gradient(135deg,#f59e0b,#dc2626);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 20px rgba(245,158,11,0.3);transition:all 0.2s}
.nx-pro-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,158,11,0.4)}
.nx-rs-footer{font-size:10px;color:var(--muted);line-height:1.8;padding:4px 0}
.nx-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(16px);display:flex;align-items:flex-start;justify-content:center;z-index:300;padding-top:5vh;animation:fadeIn 0.15s ease}
.nx-modal-overlay.hidden{display:none}
.nx-modal-card{background:var(--bg3);border:1px solid rgba(14,165,233,0.2);border-radius:22px;padding:16px;width:600px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 40px 120px rgba(0,0,0,0.8),0 0 60px rgba(14,165,233,0.1);animation:slideUp 0.25s cubic-bezier(0.34,1.56,0.64,1)}
.nx-modal-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.nx-modal-close{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:6px;border-radius:50%;transition:all 0.2s;margin-left:auto}
.nx-modal-close:hover{background:rgba(239,68,68,0.1);color:#ef4444}
.nx-modal-textarea{width:100%;min-height:120px;background:transparent;border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:16px;line-height:1.7;outline:none;resize:none}
.nx-modal-textarea::placeholder{color:var(--muted)}
.nx-audience-sel{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.3);border-radius:20px;color:#0ea5e9;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;padding:3px 10px;cursor:pointer}
.nx-modal-poll{background:rgba(14,165,233,0.05);border:1px solid rgba(14,165,233,0.2);border-radius:14px;padding:14px;margin-bottom:10px}
.nx-poll-title{font-size:13px;font-weight:700;color:#0ea5e9;margin-bottom:8px}
.nx-poll-input{width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;margin-bottom:6px;outline:none}
.nx-poll-input:focus{border-color:#0ea5e9}
.nx-poll-duration{font-size:12px;color:var(--muted);margin-top:4px}
.nx-modal-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px;margin-top:8px;gap:12px}
.nx-toolbar-actions{display:flex;gap:2px}
.nx-toolbar-btn{background:transparent;border:none;font-size:17px;cursor:pointer;padding:7px 9px;color:#0ea5e9;border-radius:10px;transition:background 0.15s}
.nx-toolbar-btn:hover{background:rgba(14,165,233,0.1)}
.nx-char-wrap{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.nx-char-ring{width:36px;height:36px}
.nx-char-count{position:absolute;font-size:9px;font-weight:700;color:var(--muted)}





/* ============================================================
   BAZAAR — SPHERA Social Commerce Platform
   Features: eBay auctions · Temu flash deals · TikTok Shop · Amazon Prime
============================================================ */
#pageMarketplace{padding:0;overflow:hidden;flex-direction:column;height:calc(100vh - var(--topnav-h))}
#pageMarketplace.active-page{display:flex}

/* Topbar */
.mkp-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg2);gap:12px;flex-shrink:0}
.mkp-topbar-left{display:flex;align-items:center;gap:12px;flex:1}
.mkp-logo{font-size:20px;font-weight:900;white-space:nowrap;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0}
.mkp-logo span{background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mkp-search-wrap{display:flex;flex:1;border-radius:8px;overflow:hidden;border:1.5px solid var(--border);background:var(--surface);transition:border-color 0.2s}
.mkp-search-wrap:focus-within{border-color:#f59e0b}
.mkp-cat-select{padding:0 10px;background:rgba(245,158,11,0.1);border:none;border-right:1px solid var(--border);color:var(--text);font-family:'Outfit',sans-serif;font-size:12px;cursor:pointer;outline:none;white-space:nowrap}
.mkp-search-input{flex:1;padding:9px 12px;background:transparent;border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;outline:none}
.mkp-search-input::placeholder{color:var(--muted)}
.mkp-search-btn{padding:9px 18px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity 0.2s}
.mkp-search-btn:hover{opacity:0.9}
.mkp-topbar-right{display:flex;gap:8px;flex-shrink:0}
.mkp-my-orbit-btn{padding:8px 14px;border-radius:8px;background:rgba(245,158,11,0.1);border:1.5px solid rgba(245,158,11,0.3);color:#f59e0b;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-my-orbit-btn:hover{background:rgba(245,158,11,0.2)}
.mkp-sell-btn{padding:8px 18px;border-radius:8px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 2px 16px rgba(245,158,11,0.35);transition:all 0.2s}
.mkp-sell-btn:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(245,158,11,0.5)}

/* Daily Deals Banner */
.mkp-deals-banner{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(245,158,11,0.12));border-bottom:1px solid rgba(239,68,68,0.2);flex-shrink:0;overflow:hidden}
.mkp-deals-label{font-size:12px;font-weight:900;color:#ef4444;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.mkp-deals-scroll{display:flex;gap:10px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px 0}
.mkp-deals-scroll::-webkit-scrollbar{display:none}
.mkp-deal-pill{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.3);border:1px solid rgba(239,68,68,0.3);border-radius:8px;padding:5px 10px;cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.mkp-deal-pill:hover{border-color:#ef4444;background:rgba(239,68,68,0.08)}
.mkp-deal-pill-img{width:36px;height:36px;border-radius:6px;object-fit:cover;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:18px}
.mkp-deal-pill-info{display:flex;flex-direction:column;gap:1px}
.mkp-deal-pill-name{font-size:11px;font-weight:700}
.mkp-deal-pill-price{font-size:12px;color:#ef4444;font-weight:800}
.mkp-deal-pill-off{font-size:10px;color:var(--muted);text-decoration:line-through}
.mkp-deals-timer{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.mkp-deals-clock{color:#ef4444;font-weight:800;font-variant-numeric:tabular-nums}

/* Shell: sidebar + content */
.mkp-shell{display:grid;grid-template-columns:220px 1fr;flex:1;overflow:hidden}
.mkp-sidebar{border-right:1px solid var(--border);overflow-y:auto;padding:12px 0;scrollbar-width:thin;background:var(--bg2)}
.mkp-sb-section{padding:10px 14px;border-bottom:1px solid var(--border)}
.mkp-sb-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.7px;color:var(--muted);margin-bottom:8px}
.mkp-check-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-dim);padding:3px 0;cursor:pointer;transition:color 0.15s}
.mkp-check-row:hover{color:var(--text)}
.mkp-check-row input[type=checkbox]{accent-color:#f59e0b;width:14px;height:14px;cursor:pointer}
.mkp-cat-tree{display:flex;flex-direction:column;gap:1px}
.mkp-cat-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px;transition:all 0.15s}
.mkp-cat-row:hover{background:rgba(245,158,11,0.08);color:#f59e0b}
.mkp-cat-row.active-cat{background:rgba(245,158,11,0.1);color:#f59e0b;font-weight:700}
.mkp-cat-count{font-size:11px;color:var(--muted)}
.mkp-price-range{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mkp-price-input{flex:1;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;outline:none;width:0}
.mkp-price-input:focus{border-color:#f59e0b}
.mkp-apply-price{width:100%;padding:7px;border-radius:6px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:opacity 0.2s}
.mkp-apply-price:hover{opacity:0.88}
.mkp-loc-input{width:100%;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;outline:none;box-sizing:border-box}
.mkp-loc-input:focus{border-color:#f59e0b}

/* Main content area */
.mkp-content{overflow-y:auto;display:flex;flex-direction:column;gap:0}
.mkp-results-bar{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg2);position:sticky;top:0;z-index:5}
.mkp-result-count{font-size:13px;font-weight:700;color:var(--text)}
.mkp-sort-select{padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;cursor:pointer}
.mkp-view-btns{display:flex;gap:2px}
.mkp-view-btn{width:30px;height:30px;border-radius:6px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:14px;cursor:pointer;transition:all 0.15s}
.mkp-view-btn:hover{color:var(--text);border-color:#f59e0b}
.mkp-view-btn.active-mkpv{background:rgba(245,158,11,0.1);color:#f59e0b;border-color:#f59e0b}
.mkp-section-title{font-size:14px;font-weight:800;margin-bottom:10px;padding:8px 16px 0}
.mkp-recently-viewed{padding:8px 16px;border-bottom:1px solid var(--border)}
.mkp-rv-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.mkp-rv-list::-webkit-scrollbar{display:none}
.mkp-rv-item{flex-shrink:0;width:70px;cursor:pointer;text-align:center}
.mkp-rv-img{width:70px;height:70px;border-radius:8px;object-fit:cover;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid var(--border);transition:border-color 0.2s}
.mkp-rv-item:hover .mkp-rv-img{border-color:#f59e0b}
.mkp-rv-price{font-size:11px;font-weight:700;color:#f59e0b;margin-top:3px}

/* Item Grid */
.mkp-item-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mkp-item-grid.list-view{grid-template-columns:1fr}

/* Item Card */
.mkp-card{background:var(--bg3);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative;display:flex;flex-direction:column}
.mkp-card:hover{border-color:#f59e0b;transform:translateY(-3px);box-shadow:0 8px 32px rgba(245,158,11,0.15)}
.mkp-card.list-card{flex-direction:row;border-radius:10px}
.mkp-card-img-wrap{position:relative;overflow:hidden}
.mkp-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:48px;transition:transform 0.3s}
.mkp-card:hover .mkp-card-img{transform:scale(1.04)}
.mkp-card.list-card .mkp-card-img{width:160px;height:140px;aspect-ratio:unset;flex-shrink:0}
/* Badges overlay */
.mkp-card-badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px}
.mkp-badge{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:800;color:#fff}
.mkp-badge.auction{background:#6d28d9}
.mkp-badge.buynow{background:#059669}
.mkp-badge.offer{background:#0ea5e9}
.mkp-badge.deal{background:#ef4444;animation:flashBadge 1.5s infinite}
.mkp-badge.tiktok{background:linear-gradient(135deg,#010101,#ff0050);color:#fff}
.mkp-badge.prime{background:linear-gradient(135deg,#00a8cc,#146eb4)}
.mkp-badge.hot{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.mkp-badge.free-ship{background:#059669}
.mkp-badge.new{background:#0ea5e9}
@keyframes flashBadge{0%,100%{opacity:1}50%{opacity:0.7}}
.mkp-watchlist-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.6);border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;backdrop-filter:blur(4px)}
.mkp-watchlist-btn:hover{background:rgba(239,68,68,0.3);transform:scale(1.1)}
.mkp-watchlist-btn.watching{color:#ef4444}
/* Countdown bar */
.mkp-countdown-bar{height:3px;background:rgba(255,255,255,0.1)}
.mkp-countdown-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f59e0b);transition:width 1s linear}

/* Card body */
.mkp-card-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:4px}
.mkp-card-title{font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkp-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.mkp-cond-tag{padding:1px 5px;border-radius:4px;font-size:10px;font-weight:700}
.mkp-cond-tag.New{background:rgba(14,165,233,0.15);color:#0ea5e9}
.mkp-cond-tag.LikeNew,.mkp-cond-tag\[\"Like\ New\"\]{background:rgba(16,185,129,0.15);color:#10b981}
.mkp-cond-tag.Good{background:rgba(245,158,11,0.15);color:#f59e0b}
.mkp-cond-tag.Acceptable{background:rgba(156,163,175,0.15);color:#9ca3af}
.mkp-cond-tag.ForParts{background:rgba(239,68,68,0.1);color:#ef4444}
/* Price area */
.mkp-card-price-row{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.mkp-card-price{font-size:18px;font-weight:900;color:#f59e0b}
.mkp-card-was{font-size:12px;color:var(--muted);text-decoration:line-through}
.mkp-card-off{font-size:11px;font-weight:800;color:#ef4444}
/* Auction row */
.mkp-auction-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:2px}
.mkp-bids{color:var(--muted)}
.mkp-time-left{color:#ef4444;font-weight:700;font-variant-numeric:tabular-nums}
/* Seller row */
.mkp-seller-row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-top:4px}
.mkp-seller-badge{padding:1px 5px;border-radius:4px;font-size:9px;font-weight:800}
.mkp-seller-badge.top-rated{background:rgba(16,185,129,0.15);color:#10b981}
.mkp-seller-badge.power{background:rgba(245,158,11,0.15);color:#f59e0b}
.mkp-stars{color:#f59e0b;font-size:11px}
/* Reviews */
.mkp-review-row{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
/* Action buttons */
.mkp-card-actions{display:flex;gap:6px;padding:8px 12px 12px}
.mkp-btn-bidn,.mkp-btn-buy,.mkp-btn-offer{flex:1;padding:7px 0;border-radius:8px;border:none;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-btn-bidn{background:linear-gradient(135deg,#6d28d9,#0ea5e9);color:#fff}
.mkp-btn-bidn:hover{opacity:0.88}
.mkp-btn-buy{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.mkp-btn-buy:hover{opacity:0.88}
.mkp-btn-offer{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.mkp-btn-offer:hover{border-color:#f59e0b;color:#f59e0b}
/* TikTok video play overlay */
.mkp-tiktok-play{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.7);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;pointer-events:none}
/* Shipping row */
.mkp-ship-row{font-size:11px;color:#10b981;font-weight:600}
/* Prime badge inline */
.mkp-prime-inline{font-size:11px;font-weight:800;background:linear-gradient(90deg,#00a8cc,#146eb4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Watching count */
.mkp-watching{font-size:11px;color:#f43f5e}
/* Load more */
.mkp-load-more-wrap{padding:20px;text-align:center}
.mkp-load-more-btn{padding:10px 32px;border-radius:24px;background:transparent;border:1.5px solid var(--border);color:var(--text);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-load-more-btn:hover{border-color:#f59e0b;color:#f59e0b}

/* ── ITEM DETAIL MODAL ── */
.mkp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(16px);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;animation:fadeIn 0.15s ease}
.mkp-modal-overlay.hidden{display:none}
.mkp-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:2}
.mkp-modal-close:hover{background:rgba(239,68,68,0.3)}
.mkp-item-modal{background:var(--bg3);border:1px solid var(--border);border-radius:20px;width:900px;max-width:100%;position:relative;animation:slideUp 0.3s ease;overflow:hidden}
.mkp-item-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
/* Left: Images */
.mkp-item-images{border-right:1px solid var(--border)}
.mkp-main-image{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:80px}
.mkp-thumbs{display:flex;gap:6px;padding:10px;overflow-x:auto;border-top:1px solid var(--border);scrollbar-width:none}
.mkp-thumb{width:60px;height:60px;border-radius:8px;object-fit:cover;cursor:pointer;border:2px solid transparent;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:22px;transition:border-color 0.15s;flex-shrink:0}
.mkp-thumb:hover,.mkp-thumb.active-thumb{border-color:#f59e0b}
/* Right: Details */
.mkp-item-details{padding:20px;overflow-y:auto;max-height:80vh}
.mkp-item-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mkp-item-title{font-size:17px;font-weight:800;line-height:1.4;margin-bottom:6px}
.mkp-item-condition{font-size:12px;color:var(--muted);margin-bottom:10px}
.mkp-item-reviews{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px}
.mkp-item-reviews .mkp-stars{font-size:14px}
.mkp-item-rev-count{color:#f59e0b;cursor:pointer;font-weight:700}
.mkp-item-rev-count:hover{text-decoration:underline}
/* Price block */
.mkp-item-price-block{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);border-radius:12px;padding:14px;margin-bottom:12px}
.mkp-item-price{font-size:28px;font-weight:900;color:#f59e0b;margin-bottom:2px}
.mkp-item-price-was{font-size:13px;color:var(--muted);text-decoration:line-through}
.mkp-item-price-save{font-size:13px;color:#ef4444;font-weight:700}
/* Bid block */
.mkp-bid-block{background:rgba(109,40,217,0.08);border:1px solid rgba(109,40,217,0.2);border-radius:12px;padding:14px;margin-bottom:12px}
.mkp-bid-current{font-size:12px;color:var(--muted);margin-bottom:4px}
.mkp-bid-amount{font-size:26px;font-weight:900;color:#a78bfa;margin-bottom:4px}
.mkp-bid-meta{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-bottom:10px}
.mkp-bid-input-row{display:flex;gap:8px}
.mkp-bid-input{flex:1;padding:9px 12px;border-radius:8px;border:1.5px solid rgba(109,40,217,0.4);background:var(--surface);color:var(--text);font-size:14px;font-weight:700;outline:none}
.mkp-bid-input:focus{border-color:#6d28d9}
.mkp-place-bid-btn{padding:9px 18px;border-radius:8px;background:linear-gradient(135deg,#6d28d9,#a78bfa);border:none;color:#fff;font-weight:800;cursor:pointer;font-size:13px;white-space:nowrap;transition:all 0.2s}
.mkp-place-bid-btn:hover{opacity:0.88}
.mkp-bid-history-toggle{font-size:12px;color:#a78bfa;cursor:pointer;margin-top:6px;display:inline-block}
.mkp-bid-history-toggle:hover{text-decoration:underline}
.mkp-bid-history{margin-top:8px;display:none}
.mkp-bid-history.show{display:block}
.mkp-bid-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--border)}
/* CTA Buttons */
.mkp-detail-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.mkp-detail-buy-btn{width:100%;padding:13px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-weight:800;font-size:15px;cursor:pointer;transition:all 0.2s}
.mkp-detail-buy-btn:hover{opacity:0.88;transform:translateY(-1px)}
.mkp-detail-offer-btn{width:100%;padding:12px;border-radius:10px;background:transparent;border:1.5px solid var(--border);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s}
.mkp-detail-offer-btn:hover{border-color:#f59e0b;color:#f59e0b}
.mkp-detail-cart-btn{width:100%;padding:12px;border-radius:10px;background:rgba(245,158,11,0.1);border:1.5px solid rgba(245,158,11,0.3);color:#f59e0b;font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s}
.mkp-detail-cart-btn:hover{background:rgba(245,158,11,0.2)}
/* Protection row */
.mkp-protection{display:flex;align-items:center;gap:6px;font-size:12px;color:#10b981;padding:8px;background:rgba(16,185,129,0.06);border-radius:8px;margin-bottom:12px}
/* Seller card */
.mkp-seller-card{background:rgba(14,165,233,0.05);border:1px solid rgba(14,165,233,0.15);border-radius:12px;padding:12px;margin-bottom:12px}
.mkp-seller-card-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mkp-seller-info{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mkp-seller-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
.mkp-seller-name{font-size:14px;font-weight:800}
.mkp-seller-score{display:flex;align-items:center;gap:6px;font-size:12px}
.mkp-seller-pct{color:#10b981;font-weight:700}
.mkp-seller-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.mkp-seller-tag{padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700}
.mkp-seller-tag.tr{background:rgba(16,185,129,0.15);color:#10b981}
.mkp-seller-tag.ps{background:rgba(245,158,11,0.15);color:#f59e0b}
.mkp-seller-tag.fast{background:rgba(14,165,233,0.15);color:#0ea5e9}
.mkp-contact-seller{width:100%;padding:8px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-contact-seller:hover{border-color:#0ea5e9;color:#0ea5e9}
/* Shipping + Returns */
.mkp-shipping-card{background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.15);border-radius:12px;padding:12px;margin-bottom:12px;font-size:13px;line-height:1.8}
.mkp-ship-row-detail{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--border);padding:5px 0}
.mkp-ship-row-detail:last-child{border-bottom:none}
/* Desc + Q&A + Reviews tabs */
.mkp-detail-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}
.mkp-detail-tab{flex:1;padding:9px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-detail-tab:hover{color:var(--text)}
.mkp-detail-tab.active-dt{color:#f59e0b;border-bottom-color:#f59e0b}
.mkp-detail-tab-panel{display:none;font-size:13px;line-height:1.7;color:var(--text-dim)}
.mkp-detail-tab-panel.active-dtp{display:block}
/* Reviews list */
.mkp-review-item{padding:10px 0;border-bottom:1px solid var(--border)}
.mkp-review-item:last-child{border-bottom:none}
.mkp-review-header{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mkp-review-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.mkp-review-name{font-size:12px;font-weight:700}
.mkp-review-date{font-size:11px;color:var(--muted);margin-left:auto}
.mkp-review-text{font-size:12px;line-height:1.6;color:var(--text-dim)}
.mkp-review-helpful{font-size:11px;color:var(--muted);margin-top:4px}
.mkp-review-helpful span{color:#f59e0b;cursor:pointer}
/* Q&A */
.mkp-qa-item{padding:10px 0;border-bottom:1px solid var(--border)}
.mkp-qa-q{font-size:13px;font-weight:700;margin-bottom:4px}
.mkp-qa-a{font-size:12px;color:var(--text-dim)}
.mkp-qa-meta{font-size:11px;color:var(--muted);margin-top:3px}
.mkp-ask-btn{padding:8px 16px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;margin-top:10px;transition:all 0.2s}
.mkp-ask-btn:hover{border-color:#f59e0b;color:#f59e0b}
/* Related items */
.mkp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.mkp-related-item{border:1px solid var(--border);border-radius:8px;padding:8px;cursor:pointer;transition:all 0.2s;font-size:11px}
.mkp-related-item:hover{border-color:#f59e0b}
.mkp-related-img{width:100%;aspect-ratio:1;border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:5px}
.mkp-related-price{font-weight:800;color:#f59e0b}
/* Offer modal (inside detail modal) */
.mkp-offer-form{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);border-radius:12px;padding:14px;margin-bottom:12px;display:none}
.mkp-offer-form.show{display:block}
.mkp-offer-label{font-size:12px;font-weight:700;margin-bottom:6px;color:var(--muted)}
.mkp-offer-input{width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid rgba(245,158,11,0.3);background:var(--surface);color:var(--text);font-size:16px;font-weight:700;outline:none;box-sizing:border-box;margin-bottom:8px}
.mkp-offer-input:focus{border-color:#f59e0b}
.mkp-submit-offer-btn{width:100%;padding:10px;border-radius:8px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:all 0.2s}
.mkp-submit-offer-btn:hover{opacity:0.88}

/* ── SELL MODAL ── */
.mkp-sell-modal{background:var(--bg3);border:1px solid var(--border);border-radius:20px;width:640px;max-width:95vw;position:relative;overflow:hidden;animation:slideUp 0.3s ease}
.mkp-sell-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.mkp-sell-title{font-size:18px;font-weight:900;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mkp-sell-steps{display:flex;gap:0}
.mkp-step{flex:1;padding:8px 4px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;transition:all 0.2s;cursor:pointer}
.mkp-step.active-step{color:#f59e0b;border-bottom-color:#f59e0b}
.mkp-step.done-step{color:#10b981;border-bottom-color:#10b981}
#mkpSellBody{padding:20px;max-height:60vh;overflow-y:auto}
.mkp-sell-step-panel{display:none}
.mkp-sell-step-panel.active-sell-step{display:block}
.mkp-sell-section-title{font-size:16px;font-weight:800;margin-bottom:14px}
.mkp-sell-label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px;margin-top:12px}
.mkp-sell-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;outline:none;box-sizing:border-box;transition:border-color 0.2s}
.mkp-sell-input:focus{border-color:#f59e0b}
.mkp-sell-textarea{width:100%;min-height:100px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:'Outfit',sans-serif;font-size:13px;outline:none;resize:vertical;box-sizing:border-box}
.mkp-sell-textarea:focus{border-color:#f59e0b}
.mkp-sell-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mkp-sell-cat-btn{padding:12px 8px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;text-align:center;font-size:13px;font-weight:600;transition:all 0.2s;color:var(--text)}
.mkp-sell-cat-btn:hover{border-color:#f59e0b;color:#f59e0b;background:rgba(245,158,11,0.06)}
.mkp-sell-cat-btn.active-scat{border-color:#f59e0b;background:rgba(245,158,11,0.1);color:#f59e0b;font-weight:800}
.mkp-condition-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.mkp-cond-pill{padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text-dim);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-cond-pill:hover{border-color:#f59e0b;color:#f59e0b}
.mkp-cond-pill.active-cond{background:rgba(245,158,11,0.1);border-color:#f59e0b;color:#f59e0b}
.mkp-listing-type-btns{display:flex;gap:8px;margin-bottom:14px}
.mkp-lt-btn{flex:1;padding:10px;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-dim);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.mkp-lt-btn:hover{border-color:#f59e0b;color:#f59e0b}
.mkp-lt-btn.active-lt{background:rgba(245,158,11,0.1);border-color:#f59e0b;color:#f59e0b}
.mkp-sell-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between}
.mkp-sell-back-btn{padding:10px 20px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-weight:700;cursor:pointer;font-size:13px;transition:all 0.2s}
.mkp-sell-back-btn:hover{border-color:#f59e0b}
.mkp-sell-next-btn{padding:10px 28px;border-radius:8px;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:all 0.2s}
.mkp-sell-next-btn:hover{opacity:0.88}
.mkp-review-card{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);border-radius:12px;padding:14px;margin-bottom:14px;font-size:13px;line-height:2}
.mkp-fees-card{background:var(--bg2);border-radius:10px;padding:12px;font-size:13px}
.mkp-fees-title{font-weight:800;margin-bottom:8px}
.mkp-fee-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:12px}
.mkp-fee-row:last-child{border-bottom:none}
.mkp-fee-val{color:#10b981;font-weight:700}

/* ── MY ORBIT MODAL ── */
.mkp-my-orbit-modal{background:var(--bg3);border:1px solid var(--border);border-radius:20px;width:700px;max-width:95vw;position:relative;animation:slideUp 0.3s ease;overflow:hidden}
.mkp-orbit-title{font-size:20px;font-weight:900;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mkp-orbit-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}
.mkp-orbit-tabs::-webkit-scrollbar{display:none}
.mkp-otab{flex-shrink:0;padding:10px 16px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.mkp-otab:hover{color:var(--text)}
.mkp-otab.active-otab{color:#f59e0b;border-bottom-color:#f59e0b}
.mkp-orbit-content{padding:16px;min-height:300px;max-height:60vh;overflow-y:auto}
/* Orbit item rows */
.mkp-orbit-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;border:1px solid var(--border);margin-bottom:8px;cursor:pointer;transition:all 0.15s}
.mkp-orbit-item:hover{border-color:#f59e0b;background:rgba(245,158,11,0.04)}
.mkp-orbit-item-img{width:56px;height:56px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.mkp-orbit-item-info{flex:1;overflow:hidden}
.mkp-orbit-item-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkp-orbit-item-meta{font-size:12px;color:var(--muted);margin-top:2px}
.mkp-orbit-item-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.mkp-orbit-item-status.active{background:rgba(16,185,129,0.15);color:#10b981}
.mkp-orbit-item-status.won{background:rgba(14,165,233,0.15);color:#0ea5e9}
.mkp-orbit-item-status.outbid{background:rgba(239,68,68,0.15);color:#ef4444}
.mkp-orbit-item-status.delivered{background:rgba(16,185,129,0.1);color:#10b981}
.mkp-orbit-item-status.watching{background:rgba(245,158,11,0.15);color:#f59e0b}
.mkp-orbit-item-price{font-size:14px;font-weight:900;color:#f59e0b;flex-shrink:0}
/* Feedback list */
.mkp-feedback-item{padding:10px;border-bottom:1px solid var(--border);font-size:13px}
.mkp-feedback-item.positive{border-left:3px solid #10b981}
.mkp-feedback-item.negative{border-left:3px solid #ef4444}
.mkp-feedback-item.neutral{border-left:3px solid #9ca3af}
.mkp-feedback-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mkp-fb-col{text-align:center;padding:12px;border-radius:10px;border:1px solid var(--border)}
.mkp-fb-num{font-size:24px;font-weight:900}
.mkp-fb-label{font-size:11px;color:var(--muted)}
.mkp-fb-positive .mkp-fb-num{color:#10b981}
.mkp-fb-negative .mkp-fb-num{color:#ef4444}
.mkp-fb-neutral .mkp-fb-num{color:#9ca3af}
/* Temu spin wheel teaser */
.mkp-spin-banner{background:linear-gradient(135deg,rgba(239,68,68,0.15),rgba(245,158,11,0.15));border:1px solid rgba(239,68,68,0.3);border-radius:12px;padding:14px;text-align:center;margin-bottom:14px;cursor:pointer;transition:all 0.2s}
.mkp-spin-banner:hover{border-color:#ef4444}
.mkp-spin-title{font-size:16px;font-weight:900;margin-bottom:4px}
.mkp-spin-sub{font-size:12px;color:var(--muted)}
/* TikTok Live Shop banner */
.mkp-live-shop-banner{background:linear-gradient(135deg,rgba(255,0,80,0.12),rgba(14,165,233,0.12));border:1px solid rgba(255,0,80,0.25);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:14px;cursor:pointer;transition:all 0.2s}
.mkp-live-shop-banner:hover{border-color:#ff0050}
.mkp-live-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:livePulse 1s infinite;flex-shrink:0}
.mkp-live-shop-text{flex:1}
.mkp-live-shop-title{font-size:15px;font-weight:800}
.mkp-live-shop-sub{font-size:12px;color:var(--muted)}
.mkp-live-join-btn{padding:8px 16px;border-radius:20px;background:linear-gradient(135deg,#ff0050,#0ea5e9);border:none;color:#fff;font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0}

/* ============================================================
   YOUTUBE MUSIC × REELS — Music Picker & Reel Song Bar
============================================================ */
/* Floating Add Music button */
.ytm-fab{position:fixed;bottom:28px;right:28px;display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:24px;background:linear-gradient(135deg,#ff0000,#cc0000);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 24px rgba(255,0,0,0.4);z-index:50;transition:all 0.2s;display:none}
#pageReels.active-page .ytm-fab{display:flex}
.ytm-fab:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(255,0,0,0.55)}
.ytm-fab-icon{font-size:16px}

/* Modal overlay */
.ytm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);backdrop-filter:blur(20px);z-index:400;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn 0.15s ease}
.ytm-modal-overlay.hidden{display:none}

/* Modal sheet */
.ytm-modal{background:#0f0f0f;border-top:1px solid rgba(255,255,255,0.1);border-radius:20px 20px 0 0;width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;animation:slideUp 0.3s ease;overflow:hidden}

/* Header */
.ytm-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.ytm-header-left{display:flex;align-items:center;gap:12px}
.ytm-yt-logo{width:38px;height:38px;background:#ff0000;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:900;flex-shrink:0}
.ytm-title{font-size:17px;font-weight:900;color:#fff}
.ytm-subtitle{font-size:12px;color:rgba(255,255,255,0.5);margin-top:1px}
.ytm-premium-badge{padding:1px 6px;border-radius:4px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;font-weight:900;font-size:10px}
.ytm-close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.ytm-close:hover{background:rgba(255,0,0,0.3)}

/* Search */
.ytm-search-row{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ytm-search{flex:1;padding:10px 14px;border-radius:24px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#fff;font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:border-color 0.2s}
.ytm-search:focus{border-color:#ff0000}
.ytm-search::placeholder{color:rgba(255,255,255,0.35)}
.ytm-search-btn{width:40px;height:40px;border-radius:50%;background:#ff0000;border:none;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;transition:opacity 0.2s}
.ytm-search-btn:hover{opacity:0.85}

/* Category pills */
.ytm-cats{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,0.06)}
.ytm-cats::-webkit-scrollbar{display:none}
.ytm-cat-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.ytm-cat-pill:hover{background:rgba(255,0,0,0.15);border-color:rgba(255,0,0,0.4);color:#fff}
.ytm-cat-pill.active-ytmc{background:rgba(255,0,0,0.2);border-color:#ff0000;color:#ff4444;font-weight:800}

/* Content area */
.ytm-content{flex:1;overflow-y:auto;padding:12px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,0,0,0.3) transparent}

/* Section label */
.ytm-section-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:rgba(255,255,255,0.4);margin:12px 0 8px}

/* Track row */
.ytm-track{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;cursor:pointer;transition:all 0.15s;border:1px solid transparent}
.ytm-track:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,0,0,0.2)}
.ytm-track.selected-track{background:rgba(255,0,0,0.08);border-color:#ff0000}
.ytm-track-num{width:22px;text-align:center;font-size:12px;color:rgba(255,255,255,0.3);flex-shrink:0}
.ytm-track-thumb{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#ff0000,#cc0000);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;position:relative}
.ytm-track-thumb::after{content:'▶';position:absolute;font-size:12px;color:rgba(255,255,255,0);transition:color 0.15s}
.ytm-track:hover .ytm-track-thumb::after{color:#fff}
.ytm-track-info{flex:1;overflow:hidden}
.ytm-track-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ytm-track-artist{font-size:12px;color:rgba(255,255,255,0.45);margin-top:1px}
.ytm-track-duration{font-size:12px;color:rgba(255,255,255,0.35);flex-shrink:0}
.ytm-track-use{padding:6px 14px;border-radius:20px;background:#ff0000;border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;transition:all 0.2s;opacity:0}
.ytm-track:hover .ytm-track-use{opacity:1}
.ytm-track.selected-track .ytm-track-use{opacity:1;background:#fff;color:#ff0000}

/* Now Playing bar inside modal */
.ytm-now-playing{display:none;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,0,0,0.1);border-top:1px solid rgba(255,0,0,0.2)}
.ytm-now-playing.show{display:flex}
.ytm-np-icon{font-size:20px;animation:spin 4s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ytm-np-info{flex:1;overflow:hidden}
.ytm-np-name{font-size:13px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ytm-np-artist{font-size:11px;color:rgba(255,255,255,0.5)}
.ytm-np-apply{padding:8px 18px;border-radius:20px;background:#ff0000;border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;cursor:pointer;flex-shrink:0;transition:all 0.2s}
.ytm-np-apply:hover{opacity:0.85}

/* Reel music bar (bottom of reel card) */
.reel-yt-music-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(255,0,0,0.12);border-top:1px solid rgba(255,0,0,0.2);animation:fadeIn 0.3s ease}
.reel-yt-disc{width:28px;height:28px;background:linear-gradient(135deg,#ff0000,#660000);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;animation:spin 3s linear infinite}
.reel-yt-scroll{flex:1;overflow:hidden;white-space:nowrap}
.reel-yt-scroll-inner{display:inline-block;animation:scrollText 8s linear infinite;font-size:12px;color:#fff;font-weight:600}
@keyframes scrollText{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.reel-yt-badge{padding:1px 5px;border-radius:4px;background:rgba(255,0,0,0.4);color:#ff7777;font-size:9px;font-weight:800;flex-shrink:0}

/* ============================================================
   SPHERA MEGA FEATURES — All New Page Styles
   Stories · Live · Spaces · Creator Studio · Sphera Pay
   Local · Book Club · Recipe Hub · Fitness · AI Match · AI News
============================================================ */

/* ── STORIES ─────────────────────────────────────────────── */
.stories-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}
.stories-create-btn{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-weight:700;cursor:pointer;font-size:13px}
.stories-tray{display:flex;gap:14px;padding:16px 20px;overflow-x:auto;scrollbar-width:none}
.story-card{flex-shrink:0;width:96px;cursor:pointer;text-align:center}
.story-ring{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ec4899,#7c3aed);padding:3px;margin:0 auto 6px}
.story-ring.seen{background:var(--border)}
.story-avatar{width:100%;height:100%;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:26px;border:3px solid var(--bg1)}
.story-add-ring{background:linear-gradient(135deg,#7c3aed,#0ea5e9)}
.story-name{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Story Viewer Overlay */
.stories-viewer-overlay{position:fixed;inset:0;background:#000;z-index:999;display:flex;flex-direction:column}
.stories-viewer-overlay.hidden{display:none}
.sv-bar{display:flex;gap:4px;padding:12px 16px 0}
.sv-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-seg-fill{height:100%;background:#fff;transition:width 0.1s linear}
.sv-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;z-index:1001}
.sv-content{flex:1;display:flex;align-items:center;justify-content:center;font-size:80px}
.sv-bottom{position:absolute;bottom:20px;left:0;right:0;display:flex;gap:10px;padding:0 20px}
.sv-reply{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:10px 16px;color:#fff;font-size:14px}
.sv-emoji{background:none;border:none;font-size:24px;cursor:pointer}
.sv-prev,.sv-next{position:absolute;top:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:28px;border-radius:50%;width:40px;height:40px;cursor:pointer;transform:translateY(-50%)}
.sv-prev{left:10px}
.sv-next{right:10px}

/* ── GO LIVE ─────────────────────────────────────────────── */
.live-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.live-go-btn{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;border-radius:20px;padding:8px 20px;font-weight:700;cursor:pointer;animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
.live-layout{display:grid;grid-template-columns:1fr 340px 260px;gap:16px;padding:0 20px 20px;height:calc(100vh - 130px);overflow:hidden}
.live-preview-col,.live-chat-col,.live-active-streams{background:var(--bg2);border-radius:14px;padding:16px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.live-preview-screen{flex:1;background:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:240px}
.live-preview-placeholder{text-align:center;color:var(--text2)}
.live-cam-icon{font-size:48px;margin-bottom:10px}
.live-controls{display:flex;gap:8px}
.lc-btn{flex:1;padding:8px 4px;background:var(--bg3);border:none;border-radius:10px;color:var(--text1);cursor:pointer;font-size:12px;font-weight:600;transition:all .2s}
.lc-btn:hover{background:var(--accent);color:#fff}
.live-title-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text1);font-size:14px}
.live-cat-select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text1)}
.live-stats-row{display:flex;gap:12px;justify-content:center;font-size:13px}
.live-stat{color:var(--text2)}
.live-chat-feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.live-chat-msg{font-size:13px;padding:4px 0}
.live-chat-msg strong{color:var(--accent)}
.live-chat-input-row{display:flex;gap:8px}
.live-chat-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:8px 14px;color:var(--text1);font-size:13px}
.live-chat-send{background:var(--accent);border:none;border-radius:50%;width:36px;height:36px;color:#fff;cursor:pointer;font-size:16px}
.live-section-label{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.06em;margin-bottom:8px}
.live-stream-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;transition:background .2s}
.live-stream-card:hover{background:var(--bg3)}
.lsc-thumb{width:56px;height:40px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;flex-shrink:0}
.lsc-live-dot{position:absolute;top:4px;left:4px;width:7px;height:7px;background:#dc2626;border-radius:50%;animation:livePulse 2s infinite}
.lsc-info{font-size:12px}
.lsc-title{font-weight:600;color:var(--text1);margin-bottom:2px}
.lsc-meta{color:var(--text2);font-size:11px}

/* ── SPACES ──────────────────────────────────────────────── */
.spaces-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.spaces-create-btn{background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;border:none;border-radius:20px;padding:8px 18px;font-weight:700;cursor:pointer}
.spaces-tabs{display:flex;gap:8px;padding:0 20px 14px}
.spaces-tab{padding:7px 16px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.spaces-tab.active-stab{background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;border-color:transparent}
.spaces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:0 20px}
.space-card{background:var(--bg2);border-radius:16px;padding:18px;border:1px solid var(--border);cursor:pointer;transition:all .3s}
.space-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.sc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.sc-live-badge{background:#dc2626;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;animation:livePulse 2s infinite}
.sc-title{font-weight:700;font-size:15px;margin-bottom:6px}
.sc-host{font-size:12px;color:var(--text2);margin-bottom:10px}
.sc-speakers{display:flex;gap:-6px;margin-bottom:10px}
.sc-speaker-av{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:2px solid var(--bg2);display:flex;align-items:center;justify-content:center;font-size:14px;margin-right:-8px}
.sc-footer{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text2)}
.sc-join-btn{background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;border:none;border-radius:16px;padding:6px 14px;font-size:12px;cursor:pointer;font-weight:600}

/* ── CREATOR STUDIO ──────────────────────────────────────── */
.cs-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.cs-export-btn{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:7px 16px;color:var(--text1);cursor:pointer}
.cs-overview-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 20px 16px}
.cs-stat-card{background:var(--bg2);border-radius:14px;padding:16px;border:1px solid var(--border);position:relative;overflow:hidden}
.cs-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cs-accent,var(--accent))}
.cs-stat-icon{font-size:22px;margin-bottom:8px}
.cs-stat-val{font-size:26px;font-weight:800;color:var(--text1)}
.cs-stat-label{font-size:12px;color:var(--text2);margin-bottom:4px}
.cs-stat-change{font-size:11px;font-weight:600}
.cs-stat-up{color:#10b981}
.cs-stat-down{color:#ef4444}
.cs-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 20px 16px}
.cs-chart-box{background:var(--bg2);border-radius:14px;padding:16px;border:1px solid var(--border)}
.cs-chart-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px}
.cs-sparkline{display:flex;align-items:flex-end;gap:4px;height:60px}
.cs-bar{flex:1;border-radius:3px 3px 0 0;min-height:4px;transition:height .5s}
.cs-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:0 20px}
.cs-content-card{background:var(--bg2);border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.cs-content-thumb{height:110px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:36px}
.cs-content-body{padding:10px}
.cs-content-title{font-size:13px;font-weight:600;margin-bottom:4px}
.cs-content-stats{display:flex;gap:10px;font-size:11px;color:var(--text2)}

/* ── SPHERA PAY ──────────────────────────────────────────── */
.pay-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.pay-badge{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#10b981;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600}
.pay-layout{max-width:600px;margin:0 auto;padding:0 20px}
.pay-wallet-card{background:linear-gradient(135deg,#1d4ed8,#7c3aed,#ec4899);border-radius:20px;padding:28px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden;min-height:180px}
.pay-wallet-card::after{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}
.pw-chip{font-size:28px;color:rgba(255,255,255,.7);margin-bottom:20px}
.pw-balance-label{font-size:12px;opacity:.8;margin-bottom:4px}
.pw-balance{font-size:36px;font-weight:800;margin-bottom:20px}
.pw-card-num{font-size:16px;letter-spacing:.18em;opacity:.8;margin-bottom:6px;font-family:monospace}
.pw-name{font-size:13px;font-weight:700;letter-spacing:.08em}
.pw-network{position:absolute;bottom:20px;right:24px;font-size:18px;font-weight:900;opacity:.9}
.pw-network span{font-size:12px;opacity:.7}
.pay-actions-row{display:flex;gap:12px;margin-bottom:24px}
.pay-action-btn{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text1);transition:all .2s}
.pay-action-btn span{font-size:22px;background:linear-gradient(135deg,#7c3aed,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pay-action-btn:hover{border-color:var(--accent);background:var(--bg3)}
.pay-recent-label{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.06em;margin-bottom:10px}
.pay-tx-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg2);border-radius:12px;margin-bottom:8px;border:1px solid var(--border)}
.pay-tx-icon{width:42px;height:42px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pay-tx-info{flex:1}
.pay-tx-title{font-size:14px;font-weight:600;margin-bottom:2px}
.pay-tx-date{font-size:11px;color:var(--text2)}
.pay-tx-amount{font-size:16px;font-weight:700}
.pay-tx-credit{color:#10b981}
.pay-tx-debit{color:#ef4444}

/* ── LOCAL ───────────────────────────────────────────────── */
.local-header{padding:16px 20px 8px}
.local-location-row{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.local-change-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px}
.local-cats{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.local-cat{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.local-cat.active-lcat{background:var(--accent);color:#fff;border-color:transparent}
.local-map-preview{height:180px;background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:14px;margin:0 20px 16px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);cursor:pointer;position:relative;overflow:hidden}
.local-map-preview::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E")}
.lmp-placeholder{text-align:center;color:var(--text2);font-size:32px}
.local-feed{display:flex;flex-direction:column;gap:12px;padding:0 20px}
.local-post{background:var(--bg2);border-radius:14px;padding:14px;border:1px solid var(--border)}
.lp-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lp-cat-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--bg3);color:var(--text2)}
.lp-time{font-size:11px;color:var(--text2);margin-left:auto}
.lp-title{font-weight:600;margin-bottom:6px}
.lp-body{font-size:13px;color:var(--text2);line-height:1.5}
.lp-footer{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--text2)}

/* ── BOOK CLUB ────────────────────────────────────────────── */
.bc-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.bc-add-btn{background:linear-gradient(135deg,#059669,#0ea5e9);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:13px}
.bc-tabs{display:flex;gap:8px;padding:0 20px 16px;overflow-x:auto;scrollbar-width:none}
.bc-tab{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.bc-tab.active-bctab{background:linear-gradient(135deg,#059669,#0ea5e9);color:#fff;border-color:transparent}
.bc-content{padding:0 20px}
.bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.bc-book{cursor:pointer;transition:transform .2s}
.bc-book:hover{transform:translateY(-4px)}
.bc-cover{height:200px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:60px;margin-bottom:10px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.bc-title{font-size:13px;font-weight:600;margin-bottom:2px}
.bc-author{font-size:11px;color:var(--text2);margin-bottom:4px}
.bc-stars{color:#f59e0b;font-size:12px}

/* ── RECIPE HUB ──────────────────────────────────────────── */
.rh-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.rh-create-btn{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:13px}
.rh-cats{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.rh-cat{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.rh-cat.active-rhcat{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-color:transparent}
.rh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:0 20px}
.rh-card{background:var(--bg2);border-radius:16px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .3s}
.rh-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.rh-card-img{height:160px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:56px}
.rh-card-body{padding:14px}
.rh-card-title{font-weight:700;margin-bottom:4px}
.rh-card-meta{display:flex;gap:12px;font-size:12px;color:var(--text2);margin-bottom:8px}
.rh-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.rh-tag{background:var(--bg3);border-radius:10px;padding:2px 8px;font-size:11px;color:var(--text2)}
.rh-shop-btn{width:100%;background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;border-radius:10px;padding:8px;color:#fff;font-weight:600;cursor:pointer;margin-top:10px;font-size:13px}

/* ── FITNESS ─────────────────────────────────────────────── */
.fit-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.fit-log-btn{background:linear-gradient(135deg,#10b981,#0ea5e9);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer}
.fit-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 20px 16px}
.fit-stat-card{background:var(--bg2);border-radius:14px;padding:14px;border:1px solid var(--border);text-align:center}
.fsc-icon{font-size:24px;margin-bottom:6px}
.fsc-val{font-size:22px;font-weight:800;color:var(--text1)}
.fsc-label{font-size:11px;color:var(--text2)}
.fsc-ring{width:48px;height:48px;border-radius:50%;border:4px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;position:relative;font-size:11px;font-weight:700}
.fit-tabs{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto;scrollbar-width:none}
.fit-tab{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.fit-tab.active-fttab{background:linear-gradient(135deg,#10b981,#0ea5e9);color:#fff;border-color:transparent}
.fit-content{padding:0 20px}
.fit-workout-card{background:var(--bg2);border-radius:14px;padding:16px;border:1px solid var(--border);display:flex;align-items:center;gap:14px;margin-bottom:12px;cursor:pointer;transition:all .2s}
.fit-workout-card:hover{border-color:#10b981}
.fwc-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.fwc-info{flex:1}
.fwc-title{font-weight:700;margin-bottom:2px}
.fwc-meta{font-size:12px;color:var(--text2)}
.fwc-badge{background:linear-gradient(135deg,#10b981,#0ea5e9);color:#fff;padding:4px 10px;border-radius:10px;font-size:12px;font-weight:600}

/* ── AI MATCH 2.0 ────────────────────────────────────────── */
.aim-header{padding:16px 20px 4px}
.aim-subtitle{font-size:13px;color:var(--text2);margin-top:4px}
.aim-tabs{display:flex;gap:8px;padding:10px 20px 14px;overflow-x:auto;scrollbar-width:none}
.aim-tab{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.aim-tab.active-aimtab{background:linear-gradient(135deg,#7c3aed,#0ea5e9);color:#fff;border-color:transparent}
.aim-match-score-bar{display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--bg2);margin:0 20px 16px;border-radius:14px;border:1px solid var(--border);font-size:13px}
.aim-ai-pulse{font-size:18px;animation:aimPulse 1.5s infinite}
@keyframes aimPulse{0%,100%{opacity:1}50%{opacity:.3}}
.aim-progress{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.aim-progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#0ea5e9);border-radius:2px;width:0;transition:width 2s ease}
.aim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 20px}
.aim-card{background:var(--bg2);border-radius:16px;padding:18px;border:1px solid var(--border);transition:all .3s;cursor:pointer}
.aim-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.aim-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.aim-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}
.aim-name{font-weight:700;margin-bottom:3px}
.aim-title-role{font-size:12px;color:var(--text2)}
.aim-match-badge{margin-left:auto;font-size:13px;font-weight:800;background:linear-gradient(135deg,#7c3aed,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.aim-reasons{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.aim-reason-tag{background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);border-radius:10px;padding:3px 8px;font-size:11px;color:#a78bfa}
.aim-card-actions{display:flex;gap:8px}
.aim-connect-btn{flex:1;background:linear-gradient(135deg,#7c3aed,#0ea5e9);border:none;border-radius:10px;padding:8px;color:#fff;font-weight:700;cursor:pointer;font-size:13px}
.aim-skip-btn{background:var(--bg3);border:none;border-radius:10px;padding:8px 14px;color:var(--text2);cursor:pointer}

/* ── AI NEWS ANCHOR ──────────────────────────────────────── */
.ana-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}
.ana-live-badge{background:#dc2626;color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;animation:livePulse 2s infinite}
.ana-studio{display:grid;grid-template-columns:360px 1fr;gap:20px;padding:0 20px;height:calc(100vh - 120px)}
.ana-avatar-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.ana-avatar-wrap{background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:20px;padding:30px;display:flex;flex-direction:column;align-items:center;border:2px solid var(--border);position:relative;overflow:hidden;width:100%}
.ana-avatar{font-size:80px;margin-bottom:12px;animation:anaFloat 4s ease-in-out infinite}
@keyframes anaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ana-sound-bars{display:flex;align-items:flex-end;gap:3px;height:30px;margin-bottom:10px}
.ana-bar{width:4px;background:linear-gradient(to top,#7c3aed,#0ea5e9);border-radius:2px;animation:anaBarAnim 0.8s ease-in-out infinite}
.ana-bar:nth-child(1){animation-delay:0s;height:40%}
.ana-bar:nth-child(2){animation-delay:.15s;height:70%}
.ana-bar:nth-child(3){animation-delay:.3s;height:100%}
.ana-bar:nth-child(4){animation-delay:.15s;height:70%}
.ana-bar:nth-child(5){animation-delay:0s;height:40%}
@keyframes anaBarAnim{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
.ana-bar.paused{animation-play-state:paused}
.ana-ticker{position:absolute;bottom:0;left:0;right:0;background:rgba(124,58,237,.8);color:#fff;font-size:11px;padding:5px 12px;white-space:nowrap;overflow:hidden}
.ana-ticker-inner{display:inline-block;animation:tickerScroll 18s linear infinite}
@keyframes tickerScroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.ana-play-btn{background:linear-gradient(135deg,#7c3aed,#0ea5e9);border:none;border-radius:20px;padding:10px 24px;color:#fff;font-weight:700;cursor:pointer;font-size:14px}
.ana-news-col{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.ana-news-item{background:var(--bg2);border-radius:14px;padding:16px;border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.ana-news-item:hover{border-color:var(--accent)}
.ana-news-item.active-news{border-color:#7c3aed;background:rgba(124,58,237,.08)}
.ana-news-item.active-news::before{content:'▶ NOW READING';position:absolute;top:8px;right:10px;font-size:10px;font-weight:700;color:#7c3aed}
.ana-cat-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--bg3);color:var(--text2);margin-bottom:6px}
.ana-news-title{font-weight:700;margin-bottom:4px;line-height:1.4}
.ana-news-summary{font-size:13px;color:var(--text2);line-height:1.5}
.ana-news-meta{display:flex;gap:12px;margin-top:8px;font-size:11px;color:var(--text2)}


/* ============================================================
   VIDEO STUDIO — Lumora Embedded + Sphera Publish Bar
============================================================ */
#pageVideostudio{padding:0;flex-direction:column;height:calc(100vh - var(--topnav-h));overflow:hidden}
#pageVideostudio.active-page{display:flex}

/* Publish bar */
.vs-publish-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(236,72,153,.12));border-bottom:1px solid rgba(124,58,237,.35);flex-shrink:0;gap:16px;flex-wrap:wrap}
.vs-pub-left{display:flex;align-items:center;gap:10px}
.vs-pub-logo{font-size:20px}
.vs-pub-title{font-size:15px;font-weight:800;color:var(--text1)}
.vs-pub-subtitle{font-size:11px;color:var(--text2);font-style:italic}
.vs-pub-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vs-pub-label{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:.06em;white-space:nowrap}
.vs-pub-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:20px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.vs-pub-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* SPHERA button — most prominent */
.vs-pub-sphera{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;font-size:13px;padding:7px 16px}
/* Platform-specific colors */
.vs-pub-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.vs-pub-tt{background:#000;color:#fff;border:1px solid #555}
.vs-pub-li{background:#0077b5;color:#fff}
.vs-pub-yt{background:#ff0000;color:#fff}
.vs-pub-fb{background:#1877f2;color:#fff}
.vs-pub-x{background:#000;color:#fff;border:1px solid #555}
.vs-pub-nx{background:linear-gradient(135deg,#0ea5e9,#7c3aed);color:#fff}

/* Lumora iframe fills remaining space */
.vs-lumora-frame{flex:1;width:100%;border:none;background:#0f0a1a}

/* Publish success toast override handled by showToast */

/* ============================================================
   LINKEDUP — Tinder-style Dating Feature
============================================================ */
#pageLinkedup{padding:0;flex-direction:column;height:calc(100vh - var(--topnav-h));overflow:hidden;background:var(--bg)}
#pageLinkedup.active-page{display:flex}

/* Top bar */
.lu-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.lu-topbar-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px;transition:all .2s}
.lu-topbar-btn.active-lu-tab,.lu-topbar-btn:hover{background:rgba(236,72,153,.15);color:#ec4899}
.lu-logo{font-size:18px;font-weight:900;background:linear-gradient(135deg,#ec4899,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:6px}
.lu-heart{-webkit-text-fill-color:initial;animation:luHeartbeat 1.4s ease-in-out infinite}
@keyframes luHeartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}

/* Views */
.lu-view{display:none;flex:1;flex-direction:column;overflow:hidden;position:relative}
.active-lu-view{display:flex}

/* Filter chips */
.lu-filters{display:flex;gap:8px;padding:12px 20px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.lu-filter-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:12px;cursor:pointer;transition:all .2s;font-weight:600}
.lu-filter-chip:hover,.lu-filter-chip.active-luf{background:linear-gradient(135deg,#ec4899,#f97316);color:#fff;border-color:transparent}

/* Card stage */
.lu-card-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:16px 20px 0}

/* Individual card */
.lu-card{position:absolute;width:min(360px,calc(100vw - 180px));height:min(460px,calc(100vh - 240px));border-radius:20px;overflow:hidden;cursor:grab;user-select:none;box-shadow:0 12px 40px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;touch-action:none}
.lu-card:active{cursor:grabbing}
.lu-card.swiping{transition:none}
.lu-card.fly-right{transition:transform .5s ease,opacity .4s;transform:translateX(140vw) rotate(30deg)!important;opacity:0}
.lu-card.fly-left{transition:transform .5s ease,opacity .4s;transform:translateX(-140vw) rotate(-30deg)!important;opacity:0}
.lu-card.fly-up{transition:transform .5s ease,opacity .4s;transform:translateY(-120vh) scale(1.1)!important;opacity:0}
/* Card z-index layering — done via JS */
.lu-card-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.lu-card-gradient{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%)}
.lu-card-info{position:absolute;bottom:0;left:0;right:0;padding:20px;color:#fff}
.lu-card-name{font-size:24px;font-weight:900;margin-bottom:2px}
.lu-card-age{font-size:16px;font-weight:400;margin-left:8px;opacity:.9}
.lu-card-location{font-size:12px;opacity:.8;margin-bottom:8px;display:flex;align-items:center;gap:4px}
.lu-card-bio{font-size:13px;opacity:.85;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lu-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.lu-card-tag{background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border-radius:10px;padding:3px 9px;font-size:11px}
.lu-card-verified{position:absolute;top:14px;right:14px;background:rgba(236,72,153,.85);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px}
.lu-card-activity{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;border-radius:10px;padding:4px 8px;font-size:11px;font-weight:600}
/* Info button on card */
.lu-card-info-btn{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:none;border-radius:50%;width:34px;height:34px;color:#fff;font-size:16px;cursor:pointer}

/* Swipe stamps */
.lu-stamp{position:absolute;top:80px;font-size:28px;font-weight:900;padding:8px 18px;border-radius:12px;border:4px solid;transform:rotate(-20deg);pointer-events:none;z-index:100;opacity:0;transition:opacity .15s}
.lu-stamp-like{left:30px;color:#4ade80;border-color:#4ade80;transform:rotate(-20deg)}
.lu-stamp-pass{right:30px;color:#f87171;border-color:#f87171;transform:rotate(20deg)}
.lu-stamp-super{left:50%;transform:translateX(-50%) rotate(-5deg);color:#a78bfa;border-color:#a78bfa}
.lu-stamp.visible{opacity:1}
.lu-stamp.hidden{opacity:0}

/* Action buttons */
.lu-actions{display:flex;align-items:center;justify-content:center;gap:20px;padding:14px 0 16px;flex-shrink:0}
.lu-action-btn{border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.lu-action-btn:hover{transform:scale(1.12)}
.lu-action-btn:active{transform:scale(.95)}
.lu-pass{width:58px;height:58px;background:var(--bg2);color:#f87171;font-size:24px;border:2px solid rgba(248,113,113,.3)}
.lu-superlike{width:46px;height:46px;background:var(--bg2);color:#a78bfa;font-size:18px;border:2px solid rgba(167,139,250,.3)}
.lu-like{width:58px;height:58px;background:linear-gradient(135deg,#ec4899,#f97316);color:#fff;font-size:26px}
.lu-like:hover{box-shadow:0 0 24px rgba(236,72,153,.5)}
.lu-rewind{width:38px;height:38px;background:var(--bg2);color:#fbbf24;font-size:16px;border:2px solid rgba(251,191,36,.3)}
.lu-boost{width:38px;height:38px;background:var(--bg2);color:#7c3aed;font-size:16px;border:2px solid rgba(124,58,237,.3)}

/* MATCH POPUP */
.lu-match-popup{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9998;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px)}
.lu-match-popup.hidden{display:none}
.lu-match-modal{background:linear-gradient(135deg,#1a0020,#0d0522);border:1px solid rgba(236,72,153,.3);border-radius:28px;padding:40px 36px;text-align:center;max-width:360px;width:90%;animation:matchPop .5s cubic-bezier(.175,.885,.32,1.275)}
@keyframes matchPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.lu-match-hearts{font-size:52px;animation:luHeartbeat 1.2s infinite;margin-bottom:12px}
.lu-match-title{font-size:32px;font-weight:900;background:linear-gradient(135deg,#ec4899,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.lu-match-subtitle{font-size:14px;color:var(--text2);margin-bottom:20px}
.lu-match-avatars{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
.lu-match-av{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff;border:3px solid rgba(236,72,153,.5)}
.lu-match-av-you{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.lu-match-av-them{background:linear-gradient(135deg,#ec4899,#f97316)}
.lu-match-spark{font-size:24px;animation:sparkSpin 2s linear infinite}
@keyframes sparkSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.lu-match-msg-btn{width:100%;background:linear-gradient(135deg,#ec4899,#f97316);border:none;border-radius:14px;padding:14px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:10px;transition:all .2s}
.lu-match-msg-btn:hover{box-shadow:0 0 20px rgba(236,72,153,.5)}
.lu-match-continue-btn{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px;padding:12px;color:var(--text2);font-size:14px;cursor:pointer}

/* MATCHES VIEW */
.lu-matches-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;flex-shrink:0}
.lu-matches-header h3{font-size:16px;font-weight:700}
.lu-matches-count{font-size:12px;color:var(--text2);background:rgba(236,72,153,.15);border:1px solid rgba(236,72,153,.3);border-radius:10px;padding:3px 10px}
.lu-new-matches-row{display:flex;gap:12px;padding:0 20px 16px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.lu-match-bubble{flex-shrink:0;text-align:center;cursor:pointer}
.lu-match-bubble-av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff;border:3px solid transparent;background-clip:padding-box;position:relative;margin:0 auto 4px}
.lu-match-bubble-av::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#f97316);z-index:-1}
.lu-match-bubble-name{font-size:11px;color:var(--text2);white-space:nowrap}
.lu-messages-list{flex:1;overflow-y:auto;padding:0 20px 20px}
.lu-msg-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;cursor:pointer;transition:background .2s}
.lu-msg-row:hover{background:var(--bg2)}
.lu-msg-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;flex-shrink:0}
.lu-msg-info{flex:1}
.lu-msg-name{font-size:14px;font-weight:700;margin-bottom:2px}
.lu-msg-preview{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-msg-time{font-size:11px;color:var(--text2);white-space:nowrap}
.lu-msg-unread{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#f97316);flex-shrink:0}

/* Out of cards state */
.lu-empty-state{text-align:center;color:var(--text2);padding:40px 20px}
.lu-empty-icon{font-size:56px;margin-bottom:12px}
.lu-empty-title{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text1)}
.lu-empty-sub{font-size:14px;line-height:1.6;margin-bottom:20px}
.lu-empty-boost-btn{background:linear-gradient(135deg,#ec4899,#f97316);border:none;border-radius:20px;padding:12px 28px;color:#fff;font-weight:700;cursor:pointer;font-size:14px}


/* ============================================================
   SPHERA AUTH MODAL
============================================================ */
.sphera-auth-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at top,#1a0a2e 0%,#0a0015 60%);z-index:99999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(20px)}
.sphera-auth-overlay.hidden{display:none}
.sphera-auth-card{width:min(440px,92vw);background:rgba(255,255,255,.04);border:1px solid rgba(236,72,153,.25);border-radius:28px;padding:44px 40px 36px;box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.sphera-auth-logo{font-size:32px;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,#a78bfa,#ec4899,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-bottom:6px}
.sphera-auth-tagline{text-align:center;color:rgba(255,255,255,.45);font-size:13px;margin-bottom:28px}
.sphera-auth-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:14px;padding:4px;gap:4px;margin-bottom:28px}
.sphera-auth-tab{flex:1;padding:10px;border:none;border-radius:10px;background:none;color:rgba(255,255,255,.5);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.active-auth-tab{background:rgba(236,72,153,.2);color:#fff;box-shadow:0 0 0 1px rgba(236,72,153,.4)}
.sphera-input-group{margin-bottom:16px}
.sphera-input-group label{display:block;font-size:12px;color:rgba(255,255,255,.6);font-weight:600;margin-bottom:6px;letter-spacing:.5px}
.sphera-auth-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 16px;color:#fff;font-size:14px;transition:all .2s;box-sizing:border-box}
.sphera-auth-input:focus{outline:none;border-color:rgba(236,72,153,.5);background:rgba(236,72,153,.06);box-shadow:0 0 0 3px rgba(236,72,153,.1)}
.sphera-auth-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#ec4899,#f97316);border:none;border-radius:14px;padding:14px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:6px;margin-bottom:12px;transition:all .2s;letter-spacing:.3px}
.sphera-auth-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(236,72,153,.35)}
.sphera-auth-btn:active{transform:translateY(0)}
.sphera-auth-btn:disabled{opacity:.6;cursor:not-allowed}
.sphera-auth-error{min-height:20px;color:#f87171;font-size:12px;text-align:center;margin-top:4px}
.sphera-auth-footer{text-align:center;font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}
.sphera-auth-footer a{color:#ec4899;cursor:pointer;font-weight:600}
.sphera-auth-divider{text-align:center;color:rgba(255,255,255,.25);font-size:12px;margin:16px 0;position:relative}
.sphera-auth-divider::before,.sphera-auth-divider::after{content:'';position:absolute;top:50%;width:35%;height:1px;background:rgba(255,255,255,.1)}
.sphera-auth-divider::before{left:0}.sphera-auth-divider::after{right:0}
.sphera-social-btns{display:flex;gap:8px;justify-content:center}
.sphera-social-btn{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px;color:#fff;font-size:13px;cursor:pointer;transition:all .2s}
.sphera-social-btn:hover{background:rgba(255,255,255,.12)}

/* Loading spinner */
.sphera-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   SPHERA PROFILE PANEL & PAGES
============================================================ */

/* Slide-in panel */
.sphera-profile-panel{position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none;opacity:0;transition:opacity .3s}
.sphera-profile-panel.profile-open{pointer-events:all;opacity:1}
.sphera-profile-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.sphera-profile-drawer{position:relative;margin-left:auto;width:min(680px,100vw);height:100vh;background:#0c0018;overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-24px 0 80px rgba(0,0,0,.6)}
.sphera-profile-panel.profile-open .sphera-profile-drawer{transform:translateX(0)}

.profile-close-btn{position:sticky;top:0;left:0;margin:16px;z-index:10;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50%;width:38px;height:38px;color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(10px);transition:all .2s}
.profile-close-btn:hover{background:rgba(236,72,153,.3);border-color:rgba(236,72,153,.5)}
.profile-scroll{padding-bottom:80px}

/* Cover photo */
.profile-cover-wrap{position:relative;margin-top:-62px}
.profile-cover{height:200px;width:100%;position:relative}
.profile-cover-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,#0c0018)}
.profile-cover-edit-btn{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 14px;color:#fff;font-size:12px;cursor:pointer;backdrop-filter:blur(8px);transition:all .2s}
.profile-cover-edit-btn:hover{background:rgba(0,0,0,.8)}

/* Avatar row */
.profile-avatar-row{display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px;margin-top:-52px;position:relative;z-index:2}
.profile-avatar-wrap{position:relative}
.profile-avatar{width:104px;height:104px;border-radius:50%;border:4px solid #0c0018;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 0 0 2px rgba(236,72,153,.4)}
.profile-avatar-edit{position:absolute;bottom:4px;right:4px;background:rgba(15,10,30,.9);border:2px solid rgba(255,255,255,.2);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.profile-avatar-edit:hover{background:rgba(236,72,153,.3)}
.profile-action-btns{display:flex;gap:8px;padding-bottom:8px}

/* Follow / Edit buttons */
.profile-follow-btn,.profile-edit-btn,.profile-msg-btn{border-radius:20px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;border:none}
.profile-follow-btn{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff}
.profile-follow-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(236,72,153,.35)}
.profile-follow-btn.following{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:#fff}
.profile-edit-btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:#fff}
.profile-edit-btn:hover{background:rgba(255,255,255,.15)}
.profile-msg-btn{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);color:#fff}
.profile-msg-btn:hover{background:rgba(255,255,255,.13)}

/* Info section */
.profile-info{padding:16px 24px 0}
.profile-display-name{font-size:22px;font-weight:800;color:#fff;margin:0 0 2px;display:flex;align-items:center;gap:8px}
.profile-verified{color:#f97316;font-size:16px}
.profile-username{color:rgba(255,255,255,.45);font-size:14px;margin:0 0 10px}
.profile-bio{color:rgba(255,255,255,.8);font-size:14px;line-height:1.6;margin:0 0 10px;white-space:pre-wrap}
.profile-bio-empty{color:rgba(255,255,255,.3);font-size:14px;cursor:pointer;margin:0 0 10px}
.profile-bio-empty:hover{color:rgba(236,72,153,.7)}
.profile-meta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:13px;color:rgba(255,255,255,.45)}
.profile-meta-row a{color:rgba(139,92,246,.8);text-decoration:none}
.profile-meta-row a:hover{color:#a78bfa}

/* Stats row */
.profile-stats-row{display:flex;gap:24px;margin-bottom:16px}
.profile-stat{cursor:pointer;text-align:center}
.profile-stat:hover .profile-stat-num{color:#ec4899}
.profile-stat-num{font-size:18px;font-weight:800;color:#fff;display:block;transition:color .2s}
.profile-stat-label{font-size:12px;color:rgba(255,255,255,.4)}

/* Tabs */
.profile-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);padding:0 24px;margin-bottom:2px}
.profile-tab{flex:1;padding:14px 0;background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px}
.profile-tab:hover{color:rgba(255,255,255,.7)}
.active-profile-tab{color:#fff;border-bottom-color:#ec4899}

/* Posts grid */
.profile-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px 0}
.profile-post-tile{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.04)}
.profile-post-tile img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.profile-post-tile:hover img{transform:scale(1.06)}
.profile-post-tile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;gap:16px;color:#fff;font-size:14px;font-weight:600}
.profile-post-tile:hover .profile-post-tile-overlay{display:flex}
.profile-post-text-tile{background:rgba(255,255,255,.04);padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.profile-post-text-tile p{color:#fff;font-size:13px;line-height:1.5;margin:0}
.profile-post-tile-meta{font-size:11px;color:rgba(255,255,255,.4);margin-top:8px;display:block}
.profile-empty-posts{grid-column:1/-1;padding:60px 0;text-align:center;color:rgba(255,255,255,.35)}
.profile-empty-posts p{margin-top:12px;font-size:15px}

/* ── Edit Profile Modal ── */
.ep-overlay{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center}
.ep-overlay.ep-open{display:flex}
.ep-card{background:rgba(15,8,32,.97);border:1px solid rgba(255,255,255,.1);border-radius:24px;width:min(520px,92vw);max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.7)}
.ep-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0}
.ep-header h3{font-size:20px;font-weight:800;color:#fff;margin:0}
.ep-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:4px;transition:color .2s}
.ep-close:hover{color:#fff}
.ep-body{padding:20px 28px}
.ep-field{margin-bottom:18px}
.ep-field label{display:block;font-size:12px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.5px;margin-bottom:6px}
.ep-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;color:#fff;font-size:14px;transition:all .2s;box-sizing:border-box;font-family:inherit;resize:none}
.ep-input:focus{outline:none;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.ep-textarea{min-height:90px}
.ep-charcount{font-size:11px;color:rgba(255,255,255,.3);text-align:right;margin-top:4px}
.ep-footer{display:flex;gap:10px;padding:16px 28px 24px;justify-content:flex-end}
.ep-cancel-btn{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 20px;color:#fff;font-size:14px;cursor:pointer;transition:all .2s}
.ep-cancel-btn:hover{background:rgba(255,255,255,.12)}
.ep-save-btn{background:linear-gradient(135deg,#7c3aed,#ec4899);border:none;border-radius:12px;padding:10px 24px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.ep-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(236,72,153,.3)}
.ep-save-btn:disabled{opacity:.6;cursor:not-allowed}

/* ── Profile hover card ── */
.profile-hover-card{position:absolute;z-index:9998;width:270px;background:rgba(15,8,32,.95);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(20px);animation:hoverFade .2s ease}
@keyframes hoverFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── Skeleton shimmer ── */
.skeleton-shimmer{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:400% 100%;animation:shimmer 1.6s infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skeleton-line{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 75%);background-size:400% 100%;animation:shimmer 1.6s infinite}

/* ============================================================
   ME DROPDOWN — LinkedIn-style profile menu
============================================================ */
.me-menu-wrap{position:relative}
.me-btn{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:12px;transition:background .2s}
.me-btn:hover{background:rgba(255,255,255,.08)}
.me-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex-shrink:0;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.me-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.me-label{display:flex;flex-direction:column;align-items:center;line-height:1}
.me-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-caret{font-size:10px;color:rgba(255,255,255,.4)}

/* Dropdown */
.me-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:280px;background:rgba(12,6,28,.97);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.7);backdrop-filter:blur(20px);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .2s,transform .2s;z-index:9995}
.me-dropdown.me-open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}

/* User card */
.me-card{display:flex;align-items:center;gap:12px;padding:18px;cursor:pointer;transition:background .2s}
.me-card:hover{background:rgba(255,255,255,.05)}
.me-card-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#ec4899);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden}
.me-card-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.me-card-name{font-size:15px;font-weight:700;color:#fff}
.me-card-username{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}

/* View profile btn */
.me-view-profile-btn{display:block;width:calc(100% - 32px);margin:0 16px 12px;background:none;border:1.5px solid rgba(255,255,255,.18);border-radius:20px;padding:9px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.me-view-profile-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}

/* Divider + labels */
.me-divider{height:1px;background:rgba(255,255,255,.07);margin:4px 0}
.me-section-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.8px;padding:10px 18px 4px}

/* Items */
.me-item{display:block;width:100%;padding:10px 18px;background:none;border:none;color:rgba(255,255,255,.75);font-size:13px;text-align:left;cursor:pointer;transition:all .2s;border-radius:8px}
.me-item:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:22px}

/* Sign out = red danger */
.me-signout-btn{display:block;width:100%;padding:12px 18px;background:none;border:none;color:#f87171;font-size:13px;font-weight:700;text-align:left;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.me-signout-btn:hover{background:rgba(248,113,113,.1);color:#fca5a5}

/* ── Me button v2 — avatar-only, SPHERA style (no "Me" label) ── */
.me-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:14px;transition:background .2s}
.me-btn:hover,.me-btn:focus{background:rgba(255,255,255,.07);outline:none}
.me-avatar-ring{width:40px;height:40px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#7c3aed,#ec4899,#f97316);transition:box-shadow .25s}
.me-btn:hover .me-avatar-ring{box-shadow:0 0 14px rgba(236,72,153,.5)}
.me-avatar{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;overflow:hidden;border:2px solid #0c0018}
.me-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.me-chevron{font-size:9px;color:rgba(255,255,255,.4);line-height:1;margin-top:-2px;transition:transform .2s}
.me-dropdown.me-open ~ .me-chevron,.me-btn[aria-expanded="true"] .me-chevron{transform:rotate(180deg)}
/* Remove old label styles that no longer exist */
.me-label,.me-name,.me-caret{display:none}

/* ============================================================
   LAYOUT OVERFLOW FIXES
   Fixes: topbar clipping dropdown, right panel hidden off-screen
============================================================ */

/* 1. Topbar — must be overflow:visible so the Me dropdown renders outside it */
.top-nav{overflow:visible !important;z-index:100 !important}
.tn-actions{overflow:visible !important;position:relative}
.me-menu-wrap{overflow:visible !important}

/* 2. App shell — allow right panel to be visible; handle overflow at page level */
.app-shell{overflow:visible !important}

/* 3. Main content — keep overflow hidden (prevents page escape) */
.main-content{overflow:hidden;min-width:0;flex:1}

/* 4. Right panel — collapse to icon strip on narrow viewports, full at wide */
@media(max-width:1280px){
  .right-panel{width:240px;min-width:240px}
}
@media(max-width:1100px){
  /* Hide full right panel, show a compact floating button instead */
  .right-panel{display:none}
  .right-panel-toggle{display:flex !important}
}
@media(min-width:1101px){
  .right-panel{display:flex !important;width:var(--rp-w)}
}

/* 5. Compact right-panel toggle for narrow screens */
.right-panel-toggle{
  display:none;position:fixed;bottom:80px;right:16px;z-index:500;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#ec4899);border:none;
  color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 6px 24px rgba(124,58,237,.45);
  align-items:center;justify-content:center;
  transition:transform .2s
}
.right-panel-toggle:hover{transform:scale(1.08)}

/* 6. Prevent horizontal scroll at body level */
body{overflow-x:hidden !important}

/* 7. Ensure the page (feed area) doesn't expand beyond available space */
#pageFeed > *{max-width:100%;box-sizing:border-box}

/* My Profile — pinned at bottom of sidebar */
.lnav-profile-pin{
  margin:4px 8px 8px;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);
  border-radius:12px;
}
.lnav-profile-pin:hover{
  background:rgba(124,58,237,.18) !important;
  border-color:rgba(124,58,237,.35);
}

/* ============================================================
   REEL UPLOAD CARD + VIDEO ELEMENT
============================================================ */
/* Video fills the card exactly like the img does */
.reel-card-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;background:#000;
}
/* Upload-prompt card — shows before a video is chosen */
.reel-upload-card{
  cursor:pointer;
  border:2px dashed rgba(124,58,237,.4);
  background:rgba(12,6,28,.85);
  transition:border-color .2s, background .2s;
}
.reel-upload-card:hover{
  border-color:rgba(124,58,237,.85);
  background:rgba(20,10,44,.9);
}
.reel-upload-prompt{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  pointer-events:none;
}
.reel-upload-icon{font-size:48px;filter:drop-shadow(0 0 12px #7c3aed)}
.reel-upload-text{font-size:14px;font-weight:700;color:#fff}
.reel-upload-sub{font-size:11px;color:rgba(255,255,255,.45)}

/* ============================================================
   YOUTUBE CHANNEL CONNECT — FAB + Modal + Video Grid
============================================================ */

/* Floating "YouTube" button (sits above Add Music FAB) */
.yt-connect-fab{
  position:fixed;bottom:130px;right:20px;z-index:501;
  display:none;    /* shown only when Reels is active — toggled by JS */
  flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:60px;height:60px;border-radius:50%;background:#ff0000;border:none;
  color:#fff;cursor:pointer;box-shadow:0 6px 24px rgba(255,0,0,.5);
  transition:transform .2s,box-shadow .2s;
}
.yt-connect-fab:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(255,0,0,.7)}
.yt-connect-label{font-size:8px;font-weight:700;letter-spacing:.3px;line-height:1}

/* Modal overlay */
.yt-channel-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
  z-index:9900;display:flex;align-items:center;justify-content:center;padding:16px;
}
.yt-channel-modal-overlay.hidden{display:none}

/* Modal card */
.yt-channel-modal{
  background:rgba(12,6,28,.97);border:1px solid rgba(255,0,0,.25);
  border-radius:24px;width:min(760px,100%);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.8);position:relative;
}
.yt-cm-close{
  position:absolute;top:14px;right:16px;background:rgba(255,255,255,.08);
  border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.yt-cm-close:hover{background:rgba(255,0,0,.3)}

/* Header */
.yt-cm-header{display:flex;align-items:center;gap:14px;padding:20px 24px 0}
.yt-cm-logo{
  width:48px;height:48px;border-radius:12px;background:#ff0000;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;font-weight:900;flex-shrink:0;
}
.yt-cm-title{font-size:18px;font-weight:800;color:#fff}
.yt-cm-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}

/* Input row */
.yt-cm-input-wrap{display:flex;gap:10px;padding:16px 24px 0}
.yt-cm-input{
  flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:30px;padding:12px 18px;color:#fff;font-size:13px;
  font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s;
}
.yt-cm-input:focus{border-color:rgba(255,0,0,.5);box-shadow:0 0 0 2px rgba(255,0,0,.15)}
.yt-cm-go-btn{
  padding:12px 24px;background:#ff0000;border:none;border-radius:30px;
  color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;
  font-family:'Outfit',sans-serif;transition:background .2s;
}
.yt-cm-go-btn:hover{background:#cc0000}
.yt-cm-hint{font-size:11px;color:rgba(255,255,255,.3);padding:6px 24px 8px}

/* Status bar */
.yt-cm-status{padding:10px 24px;font-size:13px;border-radius:10px;margin:0 24px}
.yt-cm-status-loading{color:rgba(255,255,255,.6);animation:pulse 1.2s infinite}
.yt-cm-status-error{color:#f87171;background:rgba(248,113,113,.1)}

/* Video grid */
.yt-cm-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;padding:12px 24px;overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(255,0,0,.3) transparent;
}
.yt-cm-video-card{cursor:pointer;border-radius:12px;overflow:hidden;
  border:2px solid transparent;transition:border-color .2s,transform .15s;
  background:rgba(255,255,255,.04);}
.yt-cm-video-card:hover{transform:translateY(-2px);border-color:rgba(255,0,0,.3)}
.yt-cm-selected{border-color:#ff0000 !important;background:rgba(255,0,0,.08) !important}
.yt-cm-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden}
.yt-cm-thumb{width:100%;height:100%;object-fit:cover;display:block}
.yt-cm-dur{position:absolute;bottom:4px;right:5px;background:rgba(0,0,0,.8);
  color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.yt-cm-check{
  position:absolute;inset:0;background:rgba(255,0,0,.5);display:flex;
  align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff;
}
.yt-cm-check.hidden{display:none}
.yt-cm-vtitle{font-size:11px;font-weight:600;color:#fff;padding:6px 8px 2px;
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-cm-vmeta{font-size:10px;color:rgba(255,255,255,.35);padding:0 8px 8px}

/* Footer */
.yt-cm-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-top:1px solid rgba(255,255,255,.07);gap:12px;
}
.yt-cm-footer span{font-size:13px;color:rgba(255,255,255,.5)}
.yt-cm-import-btn{
  padding:12px 28px;background:linear-gradient(135deg,#ff0000,#7c3aed);
  border:none;border-radius:30px;color:#fff;font-weight:800;font-size:13px;
  cursor:pointer;font-family:'Outfit',sans-serif;
  box-shadow:0 4px 20px rgba(255,0,0,.4);transition:transform .2s,box-shadow .2s;
}
.yt-cm-import-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(255,0,0,.6)}

/* YouTube badge on reel card */
.reel-yt-badge-overlay{position:absolute;top:14px;left:14px;z-index:3}
.reel-yt-badge-pill{
  background:rgba(255,0,0,.85);color:#fff;font-size:10px;font-weight:800;
  padding:3px 10px;border-radius:20px;letter-spacing:.4px;
  display:flex;align-items:center;gap:4px;backdrop-filter:blur(4px);
}

/* YouTube embed preview card (inside connect modal) */
.yt-cm-preview-card{
  cursor:pointer;border-radius:16px;border:2px solid rgba(255,0,0,.3);
  background:rgba(255,0,0,.06);padding:20px;transition:border-color .2s,background .2s;
}
.yt-cm-preview-card:hover{border-color:rgba(255,0,0,.7);background:rgba(255,0,0,.12)}
.yt-cm-preview-inner{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.yt-cm-preview-logo{
  width:52px;height:52px;border-radius:50%;background:#ff0000;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
}
.yt-cm-preview-text strong{display:block;font-size:15px;font-weight:800;color:#fff;margin-bottom:4px}
.yt-cm-preview-text span{font-size:12px;color:rgba(255,255,255,.45)}
.yt-cm-preview-hint{font-size:11px;color:rgba(255,255,255,.3)}
/* Reel card embed preview overlay */
.reel-yt-embed-preview{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at center, rgba(255,0,0,.18) 0%, rgba(0,0,0,.85) 100%);
}
.reel-yt-embed-logo{font-size:56px;filter:drop-shadow(0 0 20px #ff0000)}
.reel-yt-embed-label{font-size:16px;font-weight:800;color:#fff}
.reel-yt-embed-hint{font-size:12px;color:rgba(255,255,255,.5)}

/* YouTube iframe fills vm-left exactly like the video element */
.vm-yt-iframe{
  width:100%;height:100%;border:none;
  position:absolute;inset:0;
  min-height:400px;
  background:#000;
}
/* Ensure vm-left stretches to full modal height */
.video-modal-card{align-items:stretch}
.vm-left{align-self:stretch;min-height:400px}

/* Tap-to-unmute hint overlay */
.reel-yt-tap-hint{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;
  pointer-events:none;z-index:20;white-space:nowrap;
}
/* Spinning vinyl / audio icon */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Video Studio Mode Tabs (Lumora / Prezi) ─────────────────── */
.vs-mode-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.vs-mode-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.active-vsmt {
  background: linear-gradient(135deg,rgba(14,165,233,0.25),rgba(109,40,217,0.25));
  border-color: rgba(14,165,233,0.5); color: #fff;
}
#preziPanel { display:flex; }

/* ═══════════════════════════════════════════════════════════════════
   MY ORBIT — Career Intelligence Dashboard
   SPHERA CareerOrbit sidebar panel — zero LinkedIn resemblance
═══════════════════════════════════════════════════════════════════ */

/* Sidebar tab switcher */
.co-tab-bar {
  display: flex; gap: 6px; padding: 10px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.co-tab-btn {
  flex: 1; padding: 7px 4px; border: none; border-radius: 8px 8px 0 0;
  background: transparent; color: rgba(255,255,255,0.4);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s;
  border-bottom: 2px solid transparent;
}
.co-tab-btn:hover { color: rgba(255,255,255,0.7); }
.co-tab-btn.active-cotab {
  color: #a78bfa;
  border-bottom: 2px solid #7c3aed;
  background: rgba(124,58,237,0.06);
}

/* My Orbit panel container */
#myOrbitPanel {
  display: none; flex-direction: column; gap: 14px;
  padding: 14px 12px; overflow-y: auto;
}
#myOrbitPanel.orbit-visible { display: flex; }

/* ── Orbital Profile Card ──────────────────────────────── */
.orbit-profile-card {
  background: linear-gradient(135deg,rgba(124,58,237,0.12),rgba(14,165,233,0.06));
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 14px; padding: 16px; position: relative; overflow: hidden;
}
.orbit-profile-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle,rgba(124,58,237,0.25),transparent 70%);
  z-index: -1;
}
.orbit-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  border: 2px solid rgba(124,58,237,0.4); margin-bottom: 10px;
}
.orbit-name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.orbit-title { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; margin-bottom: 8px; }
.orbit-pro-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg,rgba(245,158,11,0.2),rgba(234,88,12,0.15));
  border: 1px solid rgba(245,158,11,0.35); border-radius: 20px;
  padding: 3px 10px; font-size: 10px; font-weight: 700; color: #fbbf24;
  margin-bottom: 8px;
}
.orbit-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.orbit-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 20px;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25);
  color: #a78bfa;
}

/* ── Orbit Intelligence (stats) ────────────────────────── */
.orbit-intel-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-intel-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.35); margin-bottom: 12px;
}
.orbit-stat-row { display: flex; gap: 8px; }
.orbit-stat-item {
  flex: 1; background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.15);
  border-radius: 10px; padding: 10px 8px; text-align: center; cursor: pointer;
  transition: background .2s;
}
.orbit-stat-item:hover { background: rgba(124,58,237,0.14); }
.orbit-stat-icon { font-size: 16px; margin-bottom: 4px; }
.orbit-stat-num { font-size: 16px; font-weight: 800; color: #a78bfa; }
.orbit-stat-lbl { font-size: 9px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.orbit-intel-link {
  display: block; margin-top: 10px; font-size: 11px; color: #7c3aed;
  text-align: center; cursor: pointer; text-decoration: underline;
}
.orbit-intel-link:hover { color: #a78bfa; }

/* ── Orbital Signal (quick post) ───────────────────────── */
.orbit-signal-post {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-post-input {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(124,58,237,0.2); border-radius: 10px;
  padding: 10px; color: rgba(255,255,255,0.8); font-size: 12px;
  resize: none; font-family: inherit; box-sizing: border-box;
}
.orbit-post-input::placeholder { color: rgba(255,255,255,0.3); }
.orbit-post-actions { display: flex; gap: 6px; margin-top: 8px; }
.orbit-post-type-btn {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 6px; color: rgba(255,255,255,0.5);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.orbit-post-type-btn:hover { background: rgba(124,58,237,0.15); color: #a78bfa; }
.orbit-post-submit {
  background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  border: none; border-radius: 8px; padding: 6px 14px;
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ── Orbit Flash (career news) ──────────────────────────── */
.orbit-flash-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-flash-story {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.orbit-flash-story:last-child { border-bottom: none; padding-bottom: 0; }
.orbit-flash-headline { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.4; }
.orbit-flash-meta { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 3px; }
.orbit-flash-story:hover .orbit-flash-headline { color: #a78bfa; }

/* ── Orbit Chat (messaging preview) ────────────────────── */
.orbit-chat-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-chat-search {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 7px 10px; color: rgba(255,255,255,0.7); font-size: 11px;
  box-sizing: border-box; margin-bottom: 10px;
}
.orbit-chat-search::placeholder { color: rgba(255,255,255,0.3); }
.orbit-chat-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.orbit-chat-tab {
  flex: 1; padding: 5px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px; font-size: 11px; font-weight: 700;
  cursor: pointer; background: transparent; color: rgba(255,255,255,0.4);
  transition: all .2s;
}
.orbit-chat-tab.active-ochtab {
  background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35);
  color: #a78bfa;
}
.orbit-msg-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; transition: background .15s; border-radius: 6px;
}
.orbit-msg-item:last-child { border-bottom: none; }
.orbit-msg-item:hover { background: rgba(124,58,237,0.06); padding: 7px 4px; }
.orbit-msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.orbit-msg-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); }
.orbit-msg-preview { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.orbit-msg-date { font-size: 10px; color: rgba(255,255,255,0.3); margin-left: auto; flex-shrink: 0; }

/* ── Shared section title ───────────────────────────────── */
.orbit-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.35); margin-bottom: 10px;
}

/* ── StarMap (saved roles) ─────────────────────────────── */
.orbit-starmap-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-star-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.orbit-star-item:last-child { border-bottom: none; }
.orbit-star-item:hover .orbit-star-title { color: #a78bfa; }
.orbit-star-icon { font-size: 14px; flex-shrink: 0; }
.orbit-star-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.orbit-star-co { font-size: 10px; color: rgba(255,255,255,0.4); }
.orbit-empty-state { font-size: 11px; color: rgba(255,255,255,0.3); text-align: center; padding: 10px 0; }

/* ── Career Clusters ───────────────────────────────────── */
.orbit-clusters-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-cluster-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.orbit-cluster-item:last-child { border-bottom: none; }
.orbit-cluster-item:hover .orbit-cluster-name { color: #a78bfa; }
.orbit-cluster-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.orbit-cluster-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); flex: 1; }
.orbit-cluster-members { font-size: 10px; color: rgba(255,255,255,0.35); }

/* ── Orbit Signals (feeds) ─────────────────────────────── */
.orbit-signals-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px;
}
.orbit-sig-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.orbit-sig-item:last-child { border-bottom: none; }
.orbit-sig-icon { font-size: 16px; flex-shrink: 0; }
.orbit-sig-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.orbit-sig-sub { font-size: 10px; color: rgba(255,255,255,0.38); }
.orbit-sig-badge {
  margin-left: auto; font-size: 9px; padding: 1px 6px;
  border-radius: 20px; background: rgba(124,58,237,0.2); color: #a78bfa;
  border: 1px solid rgba(124,58,237,0.3); flex-shrink: 0;
}

/* ── Career Launches (events) ──────────────────────────── */
.orbit-launches-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px; margin-bottom: 8px;
}
.orbit-launch-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.orbit-launch-item:last-child { border-bottom: none; }
.orbit-launch-date {
  background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.25);
  border-radius: 8px; padding: 4px 8px; text-align: center; flex-shrink: 0;
}
.orbit-launch-month { font-size: 9px; font-weight: 700; color: #0ea5e9; text-transform: uppercase; }
.orbit-launch-day { font-size: 16px; font-weight: 800; color: #38bdf8; line-height: 1; }
.orbit-launch-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.orbit-launch-desc { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.orbit-launch-item:hover .orbit-launch-name { color: #0ea5e9; }

/* ── Orbital Pro Hub ─────────────────────────────── */
.orbit-pro-hub-card {
  background: linear-gradient(135deg,rgba(245,158,11,0.08),rgba(124,58,237,0.06));
  border: 1px solid rgba(245,158,11,0.18); border-radius: 14px; padding: 14px;
}
.orbit-pro-feature-card {
  min-width: 130px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 12px 10px; display: flex; flex-direction: column;
}

/* ── Browse by Goal ──────────────────────────────── */
.orbit-goal-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; position: relative;
  transition: background .2s, border-color .2s;
}
.orbit-goal-card:hover { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); }
.orbit-goal-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 4px;
}
.orbit-goal-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); }
.orbit-goal-sub { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.3; }
.orbit-goal-arrow {
  position: absolute; top: 10px; right: 10px;
  color: rgba(255,255,255,0.3); font-size: 16px;
}

/* ── Orbital Pro Perks ───────────────────────────── */
.orbit-perk-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.orbit-perk-item:last-child { border-bottom: none; }
.orbit-perk-logo {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

/* ── Orbital Pro Plan buttons ────────────────────── */
.orbit-plan-btn {
  width: 100%; text-align: left; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; color: rgba(255,255,255,0.7); font-size: 12px;
  cursor: pointer; transition: all .2s;
}
.orbit-plan-btn:hover { background: rgba(124,58,237,0.1); color: #a78bfa; border-color: rgba(124,58,237,0.25); }

/* ── Orbit Network Hub ───────────────────────────── */
.orbit-nw-tab {
  padding: 3px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: rgba(255,255,255,0.4); font-size: 10px;
  font-weight: 700; cursor: pointer; transition: all .2s;
}
.orbit-nw-tab.active-orbnwtab {
  background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); color: #a78bfa;
}
.orbit-nw-stat {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; transition: background .2s;
}
.orbit-nw-stat:hover { background: rgba(124,58,237,0.08); }
.orbit-nw-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.orbit-nw-label { font-size: 12px; color: rgba(255,255,255,0.7); flex: 1; }
.orbit-nw-num { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.45); }

/* ── Incoming Orbit Requests ─────────────────────── */
.orbit-req-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.orbit-req-item:last-child { border-bottom: none; }
.orbit-req-ignore {
  padding: 4px 8px; border-radius: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.orbit-req-ignore:hover { background: rgba(255,255,255,0.06); }
.orbit-req-accept {
  padding: 4px 8px; border-radius: 6px;
  background: rgba(124,58,237,0.2); border: 1px solid rgba(124,58,237,0.4);
  color: #a78bfa; font-size: 10px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.orbit-req-accept:hover { background: rgba(124,58,237,0.35); }

/* ── Orbits In Your Atmosphere ───────────────────── */
.orbit-suggest-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column;
  align-items: center; text-align: center; position: relative;
  transition: background .2s;
}
.orbit-suggest-card:hover { background: rgba(124,58,237,0.06); }
.orbit-suggest-dismiss {
  position: absolute; top: 6px; right: 6px; background: none; border: none;
  color: rgba(255,255,255,0.3); font-size: 11px; cursor: pointer; line-height: 1;
}
.orbit-suggest-dismiss:hover { color: rgba(255,255,255,0.7); }
.orbit-suggest-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 6px;
}
.orbit-suggest-name { font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.orbit-suggest-title { font-size: 9px; color: rgba(255,255,255,0.4); line-height: 1.3; margin-bottom: 4px; }
.orbit-suggest-school { font-size: 9px; color: rgba(255,255,255,0.35); margin-bottom: 8px; }
.orbit-suggest-connect {
  width: 100%; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.35);
  border-radius: 20px; padding: 5px 0; color: #a78bfa; font-size: 10px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.orbit-suggest-connect:hover { background: rgba(124,58,237,0.3); }

/* ── Orbit Career Intel / Trajectories ───────────── */
.orbit-trajectory-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer;
}
.orbit-trajectory-item:last-of-type { border-bottom: none; }
.orbit-traj-icon { font-size: 14px; flex-shrink: 0; opacity: 0.6; }

/* ============================================================
   SPHERA SETTINGS — Two-pane LinkedIn-style layout
   Zero LinkedIn resemblance · Full SPHERA native design
============================================================ */
.ss-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.82);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px); padding: 20px;
}
.ss-modal {
  background: #0c0018; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  display: flex; width: min(900px,95vw); height: min(680px,90vh);
  overflow: hidden; position: relative;
}

/* ── Left sidebar ─────────────────────────────────── */
.ss-sidebar {
  width: 220px; min-width: 220px; background: rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; overflow: hidden;
}
.ss-sidebar-header {
  padding: 20px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ss-sidebar-title {
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg,#a78bfa,#38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ss-nav { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: none; }
.ss-nav-item {
  width: 100%; text-align: left; padding: 11px 18px;
  background: none; border: none; border-left: 3px solid transparent;
  color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.ss-nav-item:hover { background: rgba(124,58,237,0.08); color: rgba(255,255,255,0.9); }
.ss-nav-item.ss-nav-active {
  background: rgba(124,58,237,0.12); color: #a78bfa;
  border-left-color: #7c3aed;
}
.ss-nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.ss-sidebar-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 6px;
}
.ss-footer-btn {
  width: 100%; padding: 8px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  color: rgba(255,255,255,0.55); font-size: 11px; cursor: pointer;
  text-align: left; transition: all .2s;
}
.ss-footer-btn:hover { background: rgba(239,68,68,0.1); color: #f87171; }

/* ── Right content panel ──────────────────────────── */
.ss-content {
  flex: 1; overflow-y: auto; padding: 24px 28px 40px;
  scrollbar-width: thin; scrollbar-color: rgba(124,58,237,0.3) transparent;
}

/* Section title */
.ss-section-title {
  font-size: 15px; font-weight: 800; color: #fff;
  margin: 24px 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ss-section-title:first-child { margin-top: 0; }

/* Settings group card */
.ss-group {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}

/* Individual row */
.ss-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; font-size: 13px; color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background .15s;
  min-height: 46px;
}
.ss-row:last-child { border-bottom: none; }
.ss-row:hover { background: rgba(124,58,237,0.06); }
.ss-arrow { cursor: pointer; }
.ss-arrow span:last-child { color: rgba(255,255,255,0.35); font-size: 16px; }
.ss-arrow:hover span:last-child { color: #a78bfa; }

/* Value text next to label */
.ss-val { font-size: 12px; color: rgba(255,255,255,0.4); margin-left: auto; margin-right: 8px; }
.ss-val-off { color: rgba(239,68,68,0.7); }

/* Toggle row (value + switch) */
.ss-toggle-row {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* CSS Toggle switch */
.ss-switch {
  position: relative; display: inline-block;
  width: 42px; height: 23px; flex-shrink: 0;
}
.ss-switch input { opacity: 0; width: 0; height: 0; }
.ss-slider {
  position: absolute; inset: 0; border-radius: 23px;
  background: rgba(255,255,255,0.12); cursor: pointer;
  transition: background .3s;
}
.ss-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; transition: transform .3s, box-shadow .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.ss-switch input:checked + .ss-slider { background: linear-gradient(135deg,#7c3aed,#0ea5e9); }
.ss-switch input:checked + .ss-slider::after { transform: translateX(19px); }

/* Close button */
.ss-close-btn {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; width: 32px; height: 32px; color: rgba(255,255,255,0.7);
  font-size: 14px; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ss-close-btn:hover { background: rgba(239,68,68,0.2); color: #f87171; }

@media (max-width: 680px) {
  .ss-sidebar { display: none; }
  .ss-modal { width: 100%; height: 100vh; border-radius: 0; }
}

/* ============================================================
   TOP-NAV LAUNCHPAD BUTTON
============================================================ */
.tn-launchpad-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(109,40,217,0.2), rgba(37,99,235,0.2));
  border: 1px solid rgba(109,40,217,0.5);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 30px;
  transition: all 0.25s;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(109,40,217,0.3);
  letter-spacing: 0.3px;
}
.tn-launchpad-btn:hover {
  background: linear-gradient(135deg, rgba(109,40,217,0.4), rgba(37,99,235,0.4));
  border-color: var(--violet2);
  color: #fff;
  box-shadow: 0 0 24px rgba(109,40,217,0.6);
  transform: translateY(-1px);
}
.tn-launchpad-btn.lp-active {
  background: var(--grad2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px var(--glow);
}
.lp-btn-icon {
  font-size: 16px;
  line-height: 1;
}
.lp-btn-label {
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   LAUNCHPAD OVERLAY
============================================================ */
.launchpad-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.launchpad-overlay.lp-open {
  pointer-events: all;
  opacity: 1;
}

/* Frosted backdrop */
.lp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,20,0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Panel */
.lp-panel {
  position: relative;
  z-index: 1;
  width: min(860px, 96vw);
  max-height: calc(100vh - 40px);
  margin-top: 20px;
  background: rgba(17,17,40,0.92);
  border: 1px solid rgba(109,40,217,0.3);
  border-radius: 24px;
  padding: 24px 28px 32px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.lp-open .lp-panel {
  transform: scale(1) translateY(0);
}

/* Header */
.lp-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.lp-title {
  font-size: 18px;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.lp-search {
  flex: 1;
  padding: 9px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.lp-search:focus {
  border-color: var(--violet2);
  background: rgba(109,40,217,0.08);
  box-shadow: 0 0 0 3px rgba(109,40,217,0.15);
}
.lp-search::placeholder { color: var(--muted); }
.lp-close {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.lp-close:hover { background: rgba(239,68,68,0.2); color: #f87171; border-color: rgba(239,68,68,0.3); }

/* Section labels */
.lp-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Grid */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

/* Tiles */
.lp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  font-family: 'Outfit', sans-serif;
  text-align: center;
  min-height: 90px;
}
.lp-tile:hover {
  background: rgba(109,40,217,0.18);
  border-color: rgba(109,40,217,0.5);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 8px 32px rgba(109,40,217,0.35);
}
.lp-tile:active {
  transform: scale(0.97);
}

/* Active tile (current page) */
.lp-tile.lp-tile-active {
  background: rgba(109,40,217,0.25);
  border-color: rgba(109,40,217,0.6);
  box-shadow: 0 0 20px rgba(109,40,217,0.4);
}

.lp-tile-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}
.lp-tile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.lp-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--grad2);
  color: #fff;
  text-transform: uppercase;
}
.lp-tile-badge.live {
  background: linear-gradient(135deg,#dc2626,#ef4444);
  animation: livePulse 1.5s infinite;
}

/* No results */
.lp-no-results {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
  grid-column: 1 / -1;
}

/* Hidden tiles during search */
.lp-tile.lp-hidden { display: none; }

@media (max-width: 560px) {
  .lp-panel { padding: 18px 14px 24px; }
  .lp-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
  .lp-tile { padding: 12px 8px 10px; min-height: 76px; border-radius: 12px; }
  .lp-tile-icon { font-size: 22px; }
  .lp-tile-label { font-size: 10px; }
}

/* ============================================================
   SIDEBAR FOCUSED MODE (after launchpad navigation)
   — hides all nav items except the currently active one
============================================================ */
/* Hide all non-active nav items, dividers, and sections */
.left-sidebar.sb-focused .lnav:not(.active-lnav) {
  display: none;
}
.left-sidebar.sb-focused .ls-divider {
  display: none;
}
.left-sidebar.sb-focused .ls-section-label {
  display: none;
}
.left-sidebar.sb-focused .channel-item {
  display: none;
}
.left-sidebar.sb-focused .add-channel-btn {
  display: none;
}
.left-sidebar.sb-focused .cp-toggles {
  display: none;
}
.left-sidebar.sb-focused .ls-cross-post .ls-section-label {
  display: none;
}

/* Make the active item stand out with a glow + larger size */
.left-sidebar.sb-focused .active-lnav {
  background: linear-gradient(135deg, rgba(109,40,217,0.25), rgba(37,99,235,0.2));
  border: 1px solid rgba(109,40,217,0.5);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(109,40,217,0.35);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text) !important;
  margin: 8px;
}
.left-sidebar.sb-focused .active-lnav .lnav-icon {
  font-size: 20px;
}

/* Hint bar at top of sidebar in focused mode */
.left-sidebar.sb-focused .ls-nav::before {
  content: '⊞ tap Apps to browse all';
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted2);
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px 6px;
  cursor: pointer;
}

/* Reset focused mode when sidebar toggle (☰) is clicked — handled via JS */

/* ============================================================
   SPHERECHAT — Full Messaging System
   Premium iMessage/Instagram DM-inspired design
============================================================ */

/* ── 3-Column Layout ─────────────────────────────────────── */
#pageMessages { padding: 0; overflow: hidden; position: relative; }
#pageMessages.active-page { display: flex; flex-direction: column; height: 100%; }
.sc-layout { flex: 1; min-height: 0; }
.sc-layout {
  display: flex; height: 100%; overflow: hidden;
  background: var(--bg);
}

/* ── Left: Conversation List ─────────────────────────────── */
.sc-left {
  width: 320px; min-width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.sc-left-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
}
.sc-brand {
  font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg,#a78bfa,#38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-new-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa; font-size: 15px; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.sc-new-btn:hover { background: rgba(124,58,237,0.3); transform: scale(1.08); }

/* Search */
.sc-search-wrap {
  position: relative; margin: 0 12px 10px;
}
.sc-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.35); font-size: 14px; pointer-events: none;
}
.sc-search-input {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 22px;
  padding: 8px 12px 8px 32px; color: rgba(255,255,255,0.8);
  font-size: 12px; box-sizing: border-box; transition: all .2s;
}
.sc-search-input:focus { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.08); outline: none; }
.sc-search-input::placeholder { color: rgba(255,255,255,0.3); }

/* Tabs */
.sc-tabs {
  display: flex; gap: 4px; padding: 0 12px 10px; flex-shrink: 0;
}
.sc-tab {
  flex: 1; padding: 5px 4px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s; position: relative;
}
.sc-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }
.sc-tab.active-sctab {
  background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.4);
  color: #a78bfa;
}
.sc-tab-badge {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg,#7c3aed,#ec4899);
  color: #fff; font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 20px; min-width: 14px; text-align: center;
}

/* Conversation list */
.sc-convo-list {
  flex: 1; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.2) transparent;
}
.sc-convo-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; cursor: pointer; transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,0.03); position: relative;
}
.sc-convo-item:hover { background: rgba(255,255,255,0.04); }
.sc-convo-item.sc-active { background: rgba(124,58,237,0.12); }
.sc-convo-item.sc-active .sc-convo-name { color: #a78bfa; }

/* Avatar in convo list */
.sc-convo-av-wrap { position: relative; flex-shrink: 0; }
.sc-convo-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
}
.sc-convo-av-group {
  width: 44px; height: 44px; position: relative; flex-shrink: 0;
}
.sc-group-av-a {
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  border: 2px solid rgba(13,13,24,1);
}
.sc-group-av-b {
  position: absolute; bottom: 0; right: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
  border: 2px solid rgba(13,13,24,1);
}
.sc-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0d0d18;
}

/* Convo body */
.sc-convo-body { flex: 1; min-width: 0; }
.sc-convo-name {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.sc-convo-preview {
  font-size: 11px; color: rgba(255,255,255,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-convo-preview.sc-unread-preview { color: rgba(255,255,255,0.75); font-weight: 600; }
.sc-convo-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0;
}
.sc-convo-time { font-size: 10px; color: rgba(255,255,255,0.35); }
.sc-unread-count {
  background: linear-gradient(135deg,#7c3aed,#ec4899);
  color: #fff; font-size: 9px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ── Center: Chat Thread ─────────────────────────────────── */
.sc-center {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  overflow: hidden;
}

/* Empty state */
.sc-empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,0.4); text-align: center; padding: 40px;
}
.sc-empty-orb {
  font-size: 52px; margin-bottom: 8px;
  filter: grayscale(0.3);
}
.sc-empty-title { font-size: 20px; font-weight: 800; color: rgba(255,255,255,0.75); }
.sc-empty-sub { font-size: 13px; color: rgba(255,255,255,0.35); max-width: 220px; line-height: 1.5; }
.sc-start-btn {
  margin-top: 8px; background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  border: none; border-radius: 22px; padding: 10px 24px;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.sc-start-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Chat header */
.sc-chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02); flex-shrink: 0;
}
.sc-header-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.sc-header-info { flex: 1; min-width: 0; }
.sc-header-name { font-size: 14px; font-weight: 800; color: #fff; }
.sc-header-status { font-size: 11px; color: #22c55e; display: flex; align-items: center; gap: 4px; }
.sc-header-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.sc-header-away { color: rgba(255,255,255,0.35); }
.sc-header-actions { display: flex; gap: 6px; }
.sc-action-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.sc-action-btn:hover { background: rgba(124,58,237,0.2); color: #a78bfa; border-color: rgba(124,58,237,0.4); }

/* Message scroll area */
.sc-msgs {
  flex: 1; overflow-y: auto; padding: 16px 18px; display: flex;
  flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(124,58,237,0.2) transparent;
}

/* Date divider */
.sc-date-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 8px; flex-shrink: 0;
}
.sc-date-divider::before, .sc-date-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.sc-date-label {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3);
  white-space: nowrap; text-transform: uppercase; letter-spacing: .5px;
}

/* Message row */
.sc-msg-row {
  display: flex; align-items: flex-end; gap: 7px;
  margin-bottom: 2px; flex-shrink: 0;
}
.sc-msg-row.sc-out { flex-direction: row-reverse; }

/* Bubble avatar (incoming only) */
.sc-bubble-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* Bubble */
.sc-bubble {
  max-width: 68%; padding: 10px 14px; border-radius: 18px;
  font-size: 13px; line-height: 1.45; position: relative;
  word-break: break-word; transition: transform .15s;
}
.sc-bubble:hover { transform: scale(1.01); }

/* Incoming bubble */
.sc-bubble.sc-in {
  background: rgba(255,255,255,0.08);
  border-radius: 4px 18px 18px 18px;
  color: rgba(255,255,255,0.88);
}
/* Outgoing bubble */
.sc-bubble.sc-out {
  background: linear-gradient(135deg,#7c3aed,#5b21b6);
  border-radius: 18px 18px 4px 18px;
  color: #fff;
}
/* Image bubble */
.sc-img-bubble {
  padding: 4px; overflow: hidden;
  max-width: 200px; cursor: pointer;
}
.sc-img-bubble img {
  width: 100%; border-radius: 14px; display: block;
  transition: opacity .2s;
}
.sc-img-bubble img:hover { opacity: 0.85; }
/* Voice bubble */
.sc-voice-bubble {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-width: 180px;
}
.sc-voice-play {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.sc-voice-play:hover { background: rgba(255,255,255,0.35); }
.sc-voice-waveform {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.sc-wave-bar {
  width: 3px; border-radius: 2px; background: rgba(255,255,255,0.5);
  transition: height .3s;
}
.sc-voice-dur { font-size: 10px; color: rgba(255,255,255,0.6); flex-shrink: 0; }

/* Read receipts + time */
.sc-msg-footer {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px; padding: 0 4px;
  justify-content: flex-end;
}
.sc-msg-time { font-size: 9px; color: rgba(255,255,255,0.3); }
.sc-read-receipt { font-size: 10px; color: #60a5fa; }

/* Reactions under bubble */
.sc-reactions {
  display: flex; gap: 3px; margin-top: 4px;
  flex-wrap: wrap;
}
.sc-reaction-pill {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 2px 7px; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; gap: 3px;
  transition: all .2s;
}
.sc-reaction-pill:hover { background: rgba(124,58,237,0.25); border-color: rgba(124,58,237,0.5); }
.sc-reaction-pill span { font-size: 9px; color: rgba(255,255,255,0.5); }

/* Reaction hover bar */
.sc-reaction-bar {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: rgba(20,20,40,0.96); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 4px 8px;
  display: flex; gap: 4px; margin-bottom: 4px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  white-space: nowrap; z-index: 10;
}
.sc-bubble:hover .sc-reaction-bar { opacity: 1; pointer-events: all; }
.sc-react-emoji {
  font-size: 18px; cursor: pointer; padding: 2px;
  transition: transform .2s;
}
.sc-react-emoji:hover { transform: scale(1.3); }

/* Typing indicator */
.sc-typing-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; flex-shrink: 0;
}
.sc-typing-bubble {
  background: rgba(255,255,255,0.08);
  border-radius: 4px 18px 18px 18px;
  padding: 10px 16px; display: flex; gap: 4px; align-items: center;
}
.sc-typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: scTypeBounce 1.2s infinite;
}
.sc-typing-dot:nth-child(2) { animation-delay: .2s; }
.sc-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes scTypeBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* ── Composer Bar ─────────────────────────────────────────── */
.sc-composer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 12px 16px 16px; display: flex; align-items: flex-end;
  gap: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
}
.sc-composer-left { display: flex; gap: 4px; }
.sc-composer-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none;
  color: rgba(255,255,255,0.45); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.sc-composer-icon-btn:hover { color: #a78bfa; background: rgba(124,58,237,0.15); }
.sc-composer-icon-btn.sc-emoji-active { color: #f59e0b; }
.sc-input-wrap { flex: 1; position: relative; }
.sc-composer-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  padding: 13px 18px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
  min-height: 52px;
  max-height: 200px;
  transition: all .25s;
  line-height: 1.5;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.3) transparent;
}
.sc-composer-input:focus {
  border-color: rgba(124,58,237,0.65);
  background: rgba(124,58,237,0.07);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12), 0 4px 24px rgba(124,58,237,0.15);
}
.sc-composer-input::placeholder { color: rgba(255,255,255,0.3); font-size: 14px; }
.sc-send-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  border: none; color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
  box-shadow: 0 4px 18px rgba(124,58,237,0.45);
}
.sc-send-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(124,58,237,0.65); }
.sc-send-btn:active { transform: scale(0.94); }

/* ── Emoji Picker ─────────────────────────────────────────── */
.sc-emoji-picker {
  position: absolute; bottom: 60px; left: 10px;
  z-index: 5000;
  background: rgba(18,18,36,0.97); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; padding: 14px; box-shadow: 0 16px 60px rgba(0,0,0,0.7);
  backdrop-filter: blur(20px); min-width: 300px;
  transition: opacity .2s, transform .2s;
}
.sc-emoji-picker.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
.sc-emoji-picker:not(.hidden) { opacity: 1; transform: translateY(0); }
.sc-emoji-grid {
  display: grid; grid-template-columns: repeat(8,1fr); gap: 4px;
}
.sc-emoji-btn {
  font-size: 22px; cursor: pointer; text-align: center; padding: 4px;
  border-radius: 8px; transition: background .15s, transform .15s;
  border: none; background: transparent;
}
.sc-emoji-btn:hover { background: rgba(124,58,237,0.2); transform: scale(1.2); }


/* ── Right Info Panel ─────────────────────────────────────── */
.sc-right {
  width: 280px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .3s ease, opacity .3s ease;
  background: rgba(255,255,255,0.015);
}
.sc-right.hidden { width: 0; opacity: 0; pointer-events: none; }
.sc-right-inner { overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }

.sc-right-profile {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sc-right-av {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.4);
}
.sc-right-name { font-size: 15px; font-weight: 800; color: #fff; }
.sc-right-handle { font-size: 11px; color: rgba(255,255,255,0.4); }
.sc-right-actions { display: flex; gap: 8px; margin-top: 4px; }
.sc-right-action-btn {
  flex: 1; padding: 7px 10px; border-radius: 10px;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25);
  color: #a78bfa; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all .2s;
}
.sc-right-action-btn:hover { background: rgba(124,58,237,0.25); }

.sc-right-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.3); margin-bottom: 8px;
}
.sc-shared-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
}
.sc-shared-thumb {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: rgba(124,58,237,0.12); display: flex;
  align-items: center; justify-content: center;
  font-size: 24px; cursor: pointer; transition: opacity .2s;
}
.sc-shared-thumb:hover { opacity: 0.75; }

.sc-pinned-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px; background: rgba(255,255,255,0.04);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
}
.sc-pinned-icon { font-size: 14px; flex-shrink: 0; color: #f59e0b; }
.sc-pinned-text { font-size: 11px; color: rgba(255,255,255,0.65); line-height: 1.4; }

/* ── New Conversation Modal ───────────────────────────────── */
.sc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
}
.sc-modal-overlay.hidden { display: none; }
.sc-new-modal {
  background: rgba(16,16,36,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; width: min(420px,94vw); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
}
.sc-nmodal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.sc-nmodal-close {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; width: 28px; height: 28px; color: rgba(255,255,255,0.6);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.sc-nmodal-close:hover { background: rgba(239,68,68,0.2); color: #f87171; }
.sc-nmodal-search-wrap {
  position: relative; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-nmodal-search {
  width: 100%; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 22px;
  padding: 9px 12px 9px 32px; color: rgba(255,255,255,0.85);
  font-size: 13px; box-sizing: border-box;
}
.sc-nmodal-search:focus { border-color: rgba(124,58,237,0.5); outline: none; }
.sc-nmodal-search::placeholder { color: rgba(255,255,255,0.3); }
.sc-nmodal-results { max-height: 320px; overflow-y: auto; }
.sc-nmodal-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; transition: background .15s;
}
.sc-nmodal-result:hover { background: rgba(124,58,237,0.1); }
.sc-nmodal-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.sc-nmodal-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88); }
.sc-nmodal-handle { font-size: 11px; color: rgba(255,255,255,0.4); }

/* Message slide-in animation */
@keyframes scMsgSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SPHERECHAT AI FEATURES
============================================================ */

/* ── 1. Smart Reply Chips ──────────────────────────────────── */
.sc-smart-replies {
  display: flex; gap: 6px; padding: 8px 18px 4px;
  flex-wrap: wrap; flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}
.sc-smart-chip {
  padding: 6px 14px; border-radius: 20px;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3);
  color: #c4b5fd; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.sc-smart-chip:hover {
  background: rgba(124,58,237,0.28); border-color: rgba(124,58,237,0.6);
  color: #fff; transform: translateY(-1px);
}

/* ── 2. Tone Rewriter ──────────────────────────────────────── */
.sc-tone-panel {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: rgba(14,14,32,0.97); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px 14px 0 0; padding: 10px 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  backdrop-filter: blur(16px); z-index: 100;
  animation: scMsgSlideIn .2s ease;
}
.sc-tone-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.4); flex-shrink: 0;
}
.sc-tone-btn {
  padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.sc-tone-btn:hover { background: rgba(124,58,237,0.25); color: #a78bfa; border-color: rgba(124,58,237,0.4); }
.sc-tone-btn.sc-generating { opacity: 0.5; pointer-events: none; }
.sc-tone-close {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,0.35); font-size: 16px; cursor: pointer; line-height: 1;
}
.sc-tone-close:hover { color: rgba(255,255,255,0.8); }

/* ── 3. Summarizer Modal ──────────────────────────────────── */
.sc-summary-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
}
.sc-summary-modal.hidden { display: none; }
.sc-summary-box {
  background: rgba(14,14,32,0.98); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 20px; width: min(480px,94vw); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  animation: scMsgSlideIn .3s cubic-bezier(0.34,1.56,0.64,1);
}
.sc-summary-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sc-summary-title {
  font-size: 14px; font-weight: 800;
  background: linear-gradient(135deg,#a78bfa,#38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-summary-close {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; width: 28px; height: 28px; color: rgba(255,255,255,0.6);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.sc-summary-close:hover { background: rgba(239,68,68,0.2); color: #f87171; }
.sc-summary-body { padding: 20px; min-height: 100px; }
.sc-summary-loading {
  display: flex; gap: 6px; align-items: center;
  color: rgba(255,255,255,0.4); font-size: 13px; padding: 10px 0;
}
.sc-summary-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a78bfa; animation: scTypeBounce 1.2s infinite;
}
.sc-summary-dot:nth-child(2) { animation-delay: .2s; }
.sc-summary-dot:nth-child(3) { animation-delay: .4s; }
.sc-summary-bullet {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  animation: scMsgSlideIn .2s ease;
}
.sc-summary-bullet:last-child { border-bottom: none; }
.sc-summary-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; margin-top: 1px;
}
.sc-summary-text { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.5; }

/* ── 4. Task Extraction Banner ──────────────────────────────── */
.sc-task-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: rgba(245,158,11,0.08);
  border-top: 1px solid rgba(245,158,11,0.2); flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}
.sc-task-icon { font-size: 16px; flex-shrink: 0; }
.sc-task-text { flex: 1; font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.4; }
.sc-task-text strong { color: #fbbf24; font-weight: 700; }
.sc-task-add-btn {
  padding: 5px 12px; border-radius: 20px;
  background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.35);
  color: #fbbf24; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s;
}
.sc-task-add-btn:hover { background: rgba(245,158,11,0.3); }
.sc-task-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 14px; cursor: pointer; line-height: 1; flex-shrink: 0;
}
.sc-task-dismiss:hover { color: rgba(255,255,255,0.7); }

/* ── 5. @AI Bot Bubble ──────────────────────────────────────── */
.sc-ai-bubble-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.4);
}
.sc-ai-bubble {
  background: linear-gradient(135deg,rgba(124,58,237,0.15),rgba(14,165,233,0.1));
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 4px 18px 18px 18px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.9); position: relative; max-width: 80%;
}
.sc-ai-label {
  font-size: 9px; font-weight: 800; color: #a78bfa;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px;
}
.sc-ai-thinking {
  display: flex; gap: 4px; align-items: center;
  color: rgba(255,255,255,0.4); font-size: 12px; padding: 2px 0;
}

/* AI header action button */
.sc-ai-header-btn {
  padding: 5px 12px; border-radius: 20px;
  background: linear-gradient(135deg,rgba(124,58,237,0.2),rgba(14,165,233,0.15));
  border: 1px solid rgba(124,58,237,0.35);
  color: #a78bfa; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.sc-ai-header-btn:hover {
  background: linear-gradient(135deg,rgba(124,58,237,0.35),rgba(14,165,233,0.3));
  color: #fff; transform: translateY(-1px);
}

/* Rewrite btn in composer */
.sc-rewrite-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none;
  color: rgba(255,255,255,0.45); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.sc-rewrite-btn:hover { color: #f59e0b; background: rgba(245,158,11,0.12); }
.sc-rewrite-btn.sc-rewrite-active { color: #f59e0b; }

/* Reminder dot in convo sidebar */
.sc-reminder-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24; flex-shrink: 0;
}



/* ============================================================
   SPHERECHAT — TIME CAPSULE / MEMORY VAULT / EMOTIONAL AI
============================================================ */

/* ── Feature 1: Send to Future — Seal Sheet ────────────────── */
.sc-seal-sheet {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: rgba(10,8,25,0.98); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 18px 18px 0 0; padding: 16px 18px;
  backdrop-filter: blur(20px); z-index: 200;
  animation: scMsgSlideIn .22s cubic-bezier(0.34,1.56,0.64,1);
}
.sc-seal-title {
  font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.sc-seal-title span { font-size: 18px; }
.sc-seal-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sc-seal-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.sc-seal-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; }
.sc-seal-input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 10px; padding: 8px 12px; color: #fff; font-size: 13px;
  font-family: inherit; outline: none; width: 100%;
  color-scheme: dark;
}
.sc-seal-input:focus { border-color: rgba(124,58,237,0.6); background: rgba(124,58,237,0.08); }
.sc-seal-btn {
  padding: 9px 20px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg,#7c3aed,#6366f1);
  border: none; color: #fff; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.sc-seal-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(124,58,237,0.5); }
.sc-seal-cancel {
  background: none; border: none; color: rgba(255,255,255,0.35);
  font-size: 18px; cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: color .2s; padding: 4px;
}
.sc-seal-cancel:hover { color: rgba(255,255,255,0.8); }

/* Sealed bubble in thread */
.sc-sealed-bubble {
  border-radius: 14px !important; overflow: hidden;
  background: linear-gradient(135deg,rgba(99,102,241,0.12),rgba(124,58,237,0.1)) !important;
  border: 1px solid rgba(99,102,241,0.35) !important;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px !important;
  cursor: pointer; transition: all .2s;
}
.sc-sealed-bubble:hover { background: rgba(99,102,241,0.2) !important; }
.sc-sealed-icon { font-size: 22px; flex-shrink: 0; }
.sc-sealed-info { flex: 1; min-width: 0; }
.sc-sealed-label { font-size: 10px; font-weight: 800; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.sc-sealed-text { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sealed-date { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.sc-countdown-badge {
  background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.35);
  border-radius: 20px; padding: 3px 10px; font-size: 10px; font-weight: 700; color: #a78bfa;
  white-space: nowrap;
}

/* Composer seal button */
.sc-seal-btn-composer {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none;
  color: rgba(255,255,255,0.45); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.sc-seal-btn-composer:hover { color: #a78bfa; background: rgba(124,58,237,0.15); }

/* ── Feature 2: Memory Vault ────────────────────────────────── */
.sc-vault-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: rgba(109,40,217,0.1);
  border-bottom: 1px solid rgba(109,40,217,0.25); flex-shrink: 0;
  animation: scMsgSlideIn .25s ease;
}
.sc-vault-icon { font-size: 18px; flex-shrink: 0; }
.sc-vault-text { flex: 1; font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.4; }
.sc-vault-text strong { color: #c4b5fd; font-weight: 700; }
.sc-vault-cta {
  padding: 5px 14px; border-radius: 20px;
  background: rgba(109,40,217,0.25); border: 1px solid rgba(109,40,217,0.4);
  color: #c4b5fd; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.sc-vault-cta:hover { background: rgba(109,40,217,0.45); color:#fff; }
.sc-vault-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 14px; cursor: pointer; flex-shrink: 0;
}
/* Vaulted convo badge */
.sc-convo-vault-badge {
  font-size: 9px; background: rgba(109,40,217,0.25);
  border: 1px solid rgba(109,40,217,0.35); border-radius: 20px;
  padding: 1px 6px; color: #c4b5fd; font-weight: 700; white-space: nowrap;
  margin-left: 4px;
}
/* Vault anniversary notification */
.sc-vault-anniversary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; margin: 0;
  background: linear-gradient(135deg,rgba(109,40,217,0.15),rgba(99,102,241,0.1));
  border: 1px solid rgba(109,40,217,0.3); border-radius: 14px;
  animation: scMsgSlideIn .3s cubic-bezier(0.34,1.56,0.64,1);
}
.sc-vault-anni-icon { font-size: 28px; flex-shrink: 0; }
.sc-vault-anni-text { flex: 1; }
.sc-vault-anni-title { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.sc-vault-anni-sub { font-size: 11px; color: rgba(255,255,255,0.5); }

/* Memory Vault header button */
.sc-vault-header-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: transparent; color: rgba(255,255,255,0.45); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0;
}
.sc-vault-header-btn:hover { color: #c4b5fd; background: rgba(109,40,217,0.18); }
.sc-vault-header-btn.sc-vaulted { color: #c4b5fd; }

/* ── Feature 3: Emotional AI banner ──────────────────────────── */
.sc-emotional-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; flex-shrink: 0;
  background: linear-gradient(90deg,rgba(236,72,153,0.08),rgba(124,58,237,0.08));
  border-top: 1px solid; border-image: linear-gradient(90deg,rgba(236,72,153,0.35),rgba(124,58,237,0.35)) 1;
  animation: scMsgSlideIn .3s ease;
}
.sc-emotional-icon { font-size: 18px; flex-shrink: 0; }
.sc-emotional-text { flex: 1; font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.sc-emotional-text strong { color: #f9a8d4; font-weight: 700; }
.sc-emotional-save {
  padding: 5px 14px; border-radius: 20px;
  background: linear-gradient(135deg,rgba(236,72,153,0.2),rgba(124,58,237,0.2));
  border: 1px solid rgba(236,72,153,0.35);
  color: #f9a8d4; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.sc-emotional-save:hover { background: rgba(236,72,153,0.35); color: #fff; }
.sc-emotional-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 14px; cursor: pointer; flex-shrink: 0;
}

/* ============================================================
   SPHERECHAT — LOCATION LOCK & EVENT TRIGGER SEALS
============================================================ */

/* ── Tabbed Seal Sheet ─────────────────────────────────────── */
.sc-seal-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 3px;
}
.sc-seal-tab {
  flex: 1; padding: 6px 8px; border-radius: 8px; border: none;
  background: transparent; color: rgba(255,255,255,0.45); font-size: 11px;
  font-weight: 700; cursor: pointer; transition: all .2s; text-align: center;
}
.sc-seal-tab.active {
  background: rgba(124,58,237,0.3); color: #c4b5fd;
  box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
.sc-seal-tab:hover:not(.active) { color: rgba(255,255,255,0.7); }
.sc-seal-tab-panel { display: none; }
.sc-seal-tab-panel.active { display: block; }

/* ── Location seal states ──────────────────────────────────── */
.sc-geo-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; margin-bottom: 10px;
  font-size: 12px; transition: all .3s;
}
.sc-geo-status.idle { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.sc-geo-status.loading { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); color: #a5b4fc; }
.sc-geo-status.captured { background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.3); color: #6ee7b7; }
.sc-geo-status.error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; }
.sc-geo-icon { font-size: 18px; flex-shrink: 0; }
.sc-geo-text { flex: 1; line-height: 1.4; }
.sc-geo-text strong { display: block; font-weight: 700; margin-bottom: 1px; }
.sc-geo-capture-btn {
  padding: 6px 14px; border-radius: 20px; border: none; cursor: pointer;
  background: linear-gradient(135deg,#6366f1,#7c3aed); color: #fff;
  font-size: 11px; font-weight: 800; transition: all .2s; white-space: nowrap;
}
.sc-geo-capture-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.4); }
.sc-geo-capture-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Radius selector */
.sc-geo-radius {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.sc-geo-radius select {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: rgba(255,255,255,0.75); padding: 4px 8px;
  font-size: 11px; font-family: inherit; cursor: pointer;
  color-scheme: dark;
}

/* Location sealed bubble badge */
.sc-sealed-location { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #6ee7b7; margin-top: 3px; }

/* ── Event Trigger seals ───────────────────────────────────── */
.sc-event-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.sc-event-tile {
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.08);
  transition: all .2s; text-align: left;
}
.sc-event-tile:hover { border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.08); }
.sc-event-tile.selected { border-color: rgba(124,58,237,0.7); background: rgba(124,58,237,0.15); }
.sc-event-tile-icon { font-size: 20px; margin-bottom: 4px; }
.sc-event-tile-name { font-size: 11px; font-weight: 800; color: #fff; margin-bottom: 1px; }
.sc-event-tile-desc { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.3; }

/* Event config input area */
.sc-event-config { margin-top: 8px; animation: scMsgSlideIn .18s ease; }
.sc-event-config-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px; }

/* ── Extended sealed bubble extras ───────────────────────────── */
.sc-sealed-event-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px; padding: 2px 8px; font-size: 10px; color: #fbbf24; font-weight: 700;
  margin-top: 3px;
}
.sc-unlock-prompt {
  display: flex; gap: 6px; margin-top: 8px; align-items: center;
}
.sc-unlock-input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 6px 10px; color: #fff; font-size: 12px; font-family: inherit;
  outline: none;
}
.sc-unlock-input:focus { border-color: rgba(124,58,237,0.5); }
.sc-unlock-try-btn {
  padding: 6px 14px; border-radius: 8px; border: none;
  background: linear-gradient(135deg,#7c3aed,#6366f1); color: #fff;
  font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap;
}

/* ============================================================
   SPHERECHAT — PRIVACY SHIELD
============================================================ */

/* Incognito mode indicator */
.sc-incognito-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: rgba(17,24,39,0.95);
  border-bottom: 1px solid rgba(99,102,241,0.2); flex-shrink: 0;
  animation: scMsgSlideIn .2s ease;
}
.sc-incognito-icon { font-size: 16px; }
.sc-incognito-text { flex:1; font-size:11px; color: rgba(255,255,255,0.5); }
.sc-incognito-text strong { color: #a78bfa; }
.sc-incognito-toggle {
  padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.15); color:#a78bfa; font-size:10px; font-weight:800;
  cursor:pointer; transition: all .2s;
}
.sc-incognito-toggle:hover { background: rgba(99,102,241,0.3); }
.sc-incognito-active { background: rgba(15,10,30,0.98) !important; }
.sc-header-incognito { position: relative; }
.sc-header-incognito::after {
  content: '👁️'; position:absolute; top:-4px; right:-4px; font-size:10px;
  background: #7c3aed; border-radius: 50%; width:14px; height:14px;
  display:flex; align-items:center; justify-content:center; font-size:8px;
}

/* Self-destruct */
.sc-destruct-btn {
  width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:rgba(255,255,255,0.4); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.sc-destruct-btn:hover { color:#f87171; background:rgba(239,68,68,0.12); }
.sc-destruct-btn.active { color:#f87171; }
.sc-destruct-panel {
  position:absolute; bottom:100%; right:0; width:220px;
  background:rgba(10,8,25,0.98); border:1px solid rgba(239,68,68,0.3);
  border-radius:14px; padding:14px; z-index:200;
  animation: scMsgSlideIn .2s ease; backdrop-filter:blur(20px);
}
.sc-destruct-label { font-size:11px; font-weight:800; color:#fca5a5; margin-bottom:10px; }
.sc-destruct-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sc-destruct-opt {
  padding:6px; border-radius:8px; border:1px solid rgba(239,68,68,0.2);
  background:rgba(239,68,68,0.06); color:rgba(255,255,255,0.7); font-size:11px;
  font-weight:700; cursor:pointer; text-align:center; transition:all .2s;
}
.sc-destruct-opt:hover, .sc-destruct-opt.selected {
  background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.5); color:#fca5a5;
}
.sc-destruct-off { border-color:rgba(255,255,255,0.1); background:transparent; color:rgba(255,255,255,0.4); }

/* Self-destruct bubble countdown */
.sc-destruct-bubble { position:relative; }
.sc-destruct-countdown {
  position:absolute; top:-8px; right:-8px; width:20px; height:20px;
  border-radius:50%; background:#ef4444; color:#fff; font-size:9px; font-weight:900;
  display:flex; align-items:center; justify-content:center; z-index:10;
  animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.sc-bubble-dissolve { animation: dissolve .6s ease forwards !important; }
@keyframes dissolve { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0.8)} }

/* Auto-blur */
.sc-blurred { filter:blur(6px); cursor:pointer; user-select:none; transition:filter .3s; }
.sc-blurred:hover { filter:blur(2px); }
.sc-blurred.revealed { filter:none !important; }
.sc-blur-hint {
  font-size:9px; color:rgba(255,255,255,0.3); text-align:center; margin-top:3px;
  font-style:italic;
}

/* Visibility/screenshot warning */
.sc-privacy-toast {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(239,68,68,0.95); color:#fff; border-radius:12px;
  padding:10px 20px; font-size:12px; font-weight:800; z-index:9999;
  display:flex; align-items:center; gap:8px; animation:scMsgSlideIn .3s ease;
  box-shadow:0 8px 32px rgba(239,68,68,0.4); backdrop-filter:blur(10px);
}

/* Scam detection banner */
.sc-scam-banner {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:rgba(239,68,68,0.1);
  border-top:1px solid rgba(239,68,68,0.25); flex-shrink:0;
  animation:scMsgSlideIn .25s ease;
}
.sc-scam-icon { font-size:18px; flex-shrink:0; }
.sc-scam-text { flex:1; font-size:12px; color:rgba(255,255,255,0.8); }
.sc-scam-text strong { color:#fca5a5; font-weight:800; }
.sc-scam-dismiss { background:none; border:none; color:rgba(255,255,255,0.3); font-size:14px; cursor:pointer; }

/* ============================================================
   SPHERECHAT — CONTACT INTELLIGENCE
============================================================ */

/* Reply nudge badge on convo item */
.sc-nudge-badge {
  font-size:9px; background:rgba(245,158,11,0.2); border:1px solid rgba(245,158,11,0.4);
  border-radius:20px; padding:2px 7px; color:#fbbf24; font-weight:800; white-space:nowrap; flex-shrink:0;
}
/* Follow-up pin */
.sc-followup-pin {
  width:22px; height:22px; border-radius:50%; border:none; background:transparent;
  color:rgba(255,255,255,0.25); font-size:12px; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sc-followup-pin:hover { color:#fbbf24; }
.sc-followup-pin.pinned { color:#fbbf24; }

/* Heatmap panel in right sidebar */
.sc-heatmap-panel {
  padding:14px 16px 10px; border-top:1px solid rgba(255,255,255,0.06);
}
.sc-heatmap-title { font-size:11px; font-weight:800; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; }
.sc-heatmap-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sc-heatmap-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff;
}
.sc-heatmap-name { font-size:12px; color:rgba(255,255,255,0.75); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-heatmap-bar-wrap { width:70px; height:6px; background:rgba(255,255,255,0.07); border-radius:3px; flex-shrink:0; }
.sc-heatmap-bar { height:6px; border-radius:3px; background:linear-gradient(90deg,#7c3aed,#6366f1); }
.sc-heatmap-count { font-size:10px; color:rgba(255,255,255,0.35); width:20px; text-align:right; flex-shrink:0; }

/* Reply nudge floating strip */
.sc-reply-nudge-strip {
  padding:6px 14px; background:rgba(245,158,11,0.08);
  border-bottom:1px solid rgba(245,158,11,0.2); flex-shrink:0;
  display:flex; align-items:center; gap:8px; font-size:11px; color:#fbbf24;
  animation:scMsgSlideIn .25s ease;
}

/* ============================================================
   SPHERECHAT — WORK MODE
============================================================ */

/* Bubble right-click context menu */
.sc-bubble-menu {
  position:fixed; z-index:9999; min-width:180px;
  background:rgba(15,12,30,0.98); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:6px; backdrop-filter:blur(20px);
  box-shadow:0 12px 40px rgba(0,0,0,0.6); animation:scMsgSlideIn .15s ease;
}
.sc-bubble-menu-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-radius:8px; cursor:pointer; transition:background .15s;
  font-size:12px; color:rgba(255,255,255,0.8);
}
.sc-bubble-menu-item:hover { background:rgba(124,58,237,0.15); color:#fff; }
.sc-bubble-menu-item .mi-icon { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.sc-bubble-menu-sep { height:1px; background:rgba(255,255,255,0.06); margin:4px 0; }

/* Task card in chat */
.sc-task-card {
  background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.25);
  border-radius:12px; padding:12px 14px; margin:4px 0; cursor:pointer; transition:all .2s;
}
.sc-task-card:hover { background:rgba(99,102,241,0.14); }
.sc-task-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.sc-task-card-title { font-size:13px; font-weight:700; color:#fff; flex:1; }
.sc-task-card-badge {
  font-size:9px; background:rgba(99,102,241,0.25); border-radius:20px;
  padding:2px 8px; color:#a5b4fc; font-weight:800; white-space:nowrap;
}
.sc-task-card-text { font-size:11px; color:rgba(255,255,255,0.5); line-height:1.4; }
.sc-task-card-done { opacity:0.5; text-decoration:line-through; }

/* Calendar event card in chat */
.sc-cal-card {
  background:rgba(5,150,105,0.08); border:1px solid rgba(5,150,105,0.25);
  border-radius:12px; padding:12px 14px; margin:4px 0;
}
.sc-cal-card-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.sc-cal-card-icon { font-size:20px; }
.sc-cal-card-title { font-size:13px; font-weight:700; color:#fff; }
.sc-cal-card-date { font-size:11px; color:#6ee7b7; }
.sc-cal-add-btn {
  margin-top:8px; padding:5px 14px; border-radius:20px; border:1px solid rgba(5,150,105,0.4);
  background:rgba(5,150,105,0.15); color:#6ee7b7; font-size:11px; font-weight:800;
  cursor:pointer; transition:all .2s;
}
.sc-cal-add-btn:hover { background:rgba(5,150,105,0.3); }

/* Shared to-do list thread item */
.sc-todo-list {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:14px; margin:6px 0; min-width:240px;
}
.sc-todo-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sc-todo-title { font-size:13px; font-weight:800; color:#fff; flex:1; }
.sc-todo-add-row { display:flex; gap:6px; margin-top:8px; }
.sc-todo-input {
  flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:6px 10px; color:#fff; font-size:12px; font-family:inherit; outline:none;
}
.sc-todo-input:focus { border-color:rgba(124,58,237,0.4); }
.sc-todo-add-btn {
  padding:6px 12px; border-radius:8px; border:none;
  background:rgba(124,58,237,0.3); color:#c4b5fd; font-size:12px; font-weight:800; cursor:pointer;
}
.sc-todo-item { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.sc-todo-item:last-of-type { border-bottom:none; }
.sc-todo-check { width:16px; height:16px; cursor:pointer; accent-color:#7c3aed; flex-shrink:0; }
.sc-todo-item-text { font-size:12px; color:rgba(255,255,255,0.75); flex:1; }
.sc-todo-item-text.done { text-decoration:line-through; opacity:0.4; }

/* Meeting mode */
.sc-meeting-bar {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(124,58,237,0.1));
  border-bottom:1px solid rgba(239,68,68,0.25); flex-shrink:0;
  animation:scMsgSlideIn .25s ease;
}
.sc-meeting-dot {
  width:10px; height:10px; border-radius:50%; background:#ef4444;
  animation:pulse 1s infinite; flex-shrink:0;
}
.sc-meeting-text { flex:1; font-size:12px; color:rgba(255,255,255,0.75); }
.sc-meeting-text strong { color:#fca5a5; }
.sc-meeting-end {
  padding:5px 14px; border-radius:20px; border:1px solid rgba(239,68,68,0.4);
  background:rgba(239,68,68,0.15); color:#fca5a5; font-size:11px; font-weight:800;
  cursor:pointer; transition:all .2s;
}
.sc-meeting-end:hover { background:rgba(239,68,68,0.35); }

/* Meeting recap card */
.sc-meeting-recap {
  background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.2);
  border-radius:14px; padding:16px; margin:8px 0;
}
.sc-meeting-recap-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sc-meeting-recap-title { font-size:13px; font-weight:800; color:#fff; }
.sc-meeting-recap-section { margin-bottom:8px; }
.sc-meeting-recap-label { font-size:10px; font-weight:800; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; }
.sc-meeting-recap-item { font-size:12px; color:rgba(255,255,255,0.7); padding:2px 0; padding-left:12px; position:relative; }
.sc-meeting-recap-item::before { content:'•'; position:absolute; left:0; color:#f87171; }

/* Voice transcript */
.sc-transcript-bubble {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:8px 12px; margin-top:6px; font-size:11px;
  color:rgba(255,255,255,0.6); line-height:1.5; font-style:italic;
}
.sc-transcript-label { font-size:9px; font-weight:800; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:3px; }

/* ============================================================
   ROUND 1 — STREAKS, REACTIONS, MEDIA SEARCH
============================================================ */

/* Chat Streaks */
.sc-streak-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg,rgba(251,146,60,0.2),rgba(239,68,68,0.15));
  border: 1px solid rgba(251,146,60,0.35); border-radius: 20px;
  padding: 3px 10px; font-size: 11px; font-weight: 800; color: #fb923c;
}
.sc-streak-flame { font-size: 14px; animation: flicker 1.5s ease-in-out infinite; }
@keyframes flicker { 0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.15) rotate(2deg)} }
.sc-streak-toast {
  display: flex; flex-direction: column; gap: 2px;
}
.sc-streak-toast-title { font-weight: 900; font-size: 14px; }
.sc-streak-toast-sub { font-size: 11px; opacity: 0.8; }

/* Reactions */
.sc-reactions-bar {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.sc-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 2px 8px; font-size: 13px; cursor: pointer;
  transition: all .2s; user-select: none; position: relative; overflow: hidden;
}
.sc-reaction-chip:hover, .sc-reaction-chip.reacted {
  background: rgba(124,58,237,0.2); border-color: rgba(124,58,237,0.45);
}
.sc-reaction-count { font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.65); }
.sc-add-reaction-btn {
  background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 20px; padding: 2px 6px; font-size: 12px; cursor: pointer;
  color: rgba(255,255,255,0.35); transition: all .2s;
}
.sc-add-reaction-btn:hover { border-color: rgba(124,58,237,0.4); color: #a78bfa; }

/* Reaction burst animation */
.sc-reaction-burst {
  position: fixed; pointer-events: none; z-index: 9999;
  font-size: 24px; animation: burstFly 0.8s ease forwards;
}
@keyframes burstFly {
  0% { transform: translateY(0) scale(0.5); opacity: 1; }
  100% { transform: translateY(-80px) scale(1.3); opacity: 0; }
}

/* Reaction picker */
.sc-reaction-picker {
  position: fixed; z-index: 9999;
  background: rgba(15,12,30,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 40px; padding: 8px 12px; display: flex; gap: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); backdrop-filter: blur(20px);
  animation: scMsgSlideIn .15s ease;
}
.sc-reaction-picker-btn {
  font-size: 22px; border: none; background: transparent; cursor: pointer;
  border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; transition: transform .15s;
}
.sc-reaction-picker-btn:hover { transform: scale(1.3); }

/* Smart media search */
.sc-media-search-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 520px; max-height: 80vh; z-index: 9999;
  background: rgba(10,8,25,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7); backdrop-filter: blur(30px);
  animation: scMsgSlideIn .25s ease;
}
.sc-media-search-header {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.sc-media-search-input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 8px 14px; color: #fff; font-size: 14px;
  font-family: inherit; outline: none;
}
.sc-media-search-input:focus { border-color: rgba(124,58,237,0.5); }
.sc-media-search-close { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 20px; cursor: pointer; }
.sc-media-search-filters { display: flex; gap: 6px; padding: 10px 20px; flex-shrink: 0; }
.sc-media-filter-btn {
  padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.sc-media-filter-btn.active { background: rgba(124,58,237,0.25); border-color: rgba(124,58,237,0.5); color: #c4b5fd; }
.sc-media-search-results { flex: 1; overflow-y: auto; padding: 10px 20px 20px; }
.sc-media-result {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; cursor: pointer; transition: background .15s; margin-bottom: 6px;
}
.sc-media-result:hover { background: rgba(255,255,255,0.05); }
.sc-media-result-icon { font-size: 24px; flex-shrink: 0; }
.sc-media-result-info { flex: 1; min-width: 0; }
.sc-media-result-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-media-result-meta { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.sc-media-result-contact { font-size: 10px; color: #a78bfa; margin-top: 2px; }
.sc-media-empty { text-align: center; color: rgba(255,255,255,0.3); font-size: 13px; padding: 40px 0; }

/* ============================================================
   ROUND 2 — THREADED REPLIES, VOICE TRANSCRIPTION, XP/BADGES
============================================================ */

/* Threaded reply quote */
.sc-thread-quote {
  background: rgba(124,58,237,0.08); border-left: 3px solid rgba(124,58,237,0.5);
  border-radius: 0 8px 8px 0; padding: 4px 10px; margin-bottom: 4px;
  font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.4;
  cursor: pointer; transition: background .2s;
}
.sc-thread-quote:hover { background: rgba(124,58,237,0.14); }
.sc-thread-quote-name { font-weight: 800; color: #a78bfa; font-size: 10px; margin-bottom: 2px; }

/* Voice note transcript */
.sc-voice-row { display: flex; flex-direction: column; gap: 4px; }
.sc-voice-bubble { display: flex; align-items: center; gap: 10px; }
.sc-voice-transcribe-btn {
  font-size: 10px; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 20px; padding: 2px 10px; color: #c4b5fd; cursor: pointer;
  white-space: nowrap; transition: all .2s; flex-shrink: 0;
}
.sc-voice-transcribe-btn:hover { background: rgba(124,58,237,0.3); }

/* XP / Gamification */
.sc-xp-toast {
  background: linear-gradient(135deg,rgba(124,58,237,0.9),rgba(99,102,241,0.9));
  color: #fff; border-radius: 14px; padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(124,58,237,0.35);
}
.sc-xp-icon { font-size: 22px; }
.sc-xp-text { flex: 1; }
.sc-xp-text strong { display: block; font-size: 13px; font-weight: 900; }
.sc-xp-text span { font-size: 11px; opacity: 0.8; }

/* XP bar in right panel */
.sc-xp-panel {
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06);
}
.sc-xp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sc-xp-level { font-size: 11px; font-weight: 800; color: #c4b5fd; }
.sc-xp-points { font-size: 10px; color: rgba(255,255,255,0.4); }
.sc-xp-bar-wrap { height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; }
.sc-xp-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg,#7c3aed,#6366f1); transition: width .4s ease; }
.sc-badges-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 3px 10px; font-size: 10px; font-weight: 800;
  color: rgba(255,255,255,0.65); white-space: nowrap;
}
.sc-badge.earned { background: rgba(251,146,60,0.15); border-color: rgba(251,146,60,0.4); color: #fb923c; }

/* Level up banner */
.sc-levelup-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(90deg,#7c3aed,#6366f1,#0ea5e9);
  padding: 12px 20px; text-align: center; color: #fff; font-weight: 900;
  font-size: 14px; letter-spacing: 0.5px; animation: levelUpBanner 4s ease forwards;
}
@keyframes levelUpBanner {
  0%{transform:translateY(-100%)} 10%{transform:translateY(0)} 85%{transform:translateY(0)} 100%{transform:translateY(-100%)}
}

/* ============================================================
   ROUND 3 — TOPIC CHANNELS, PINNED SUMMARIES, STATUS STORIES
============================================================ */

/* Topic channels in Communities */
.sc-channel-list {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 0;
}
.sc-channel-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 10px; cursor: pointer; transition: background .15s;
  font-size: 13px; color: rgba(255,255,255,0.65);
}
.sc-channel-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sc-channel-item.active { background: rgba(124,58,237,0.18); color: #c4b5fd; }
.sc-channel-hash { font-weight: 900; color: rgba(255,255,255,0.35); font-size: 16px; flex-shrink: 0; }
.sc-channel-name { flex: 1; }
.sc-channel-unread { background: #7c3aed; border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }

/* Pinned AI summary in channel */
.sc-channel-summary-pin {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; background: rgba(124,58,237,0.07);
  border-bottom: 1px solid rgba(124,58,237,0.15); flex-shrink: 0;
}
.sc-channel-summary-icon { font-size: 18px; flex-shrink: 0; padding-top: 2px; }
.sc-channel-summary-text { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; flex: 1; }
.sc-channel-summary-text strong { color: #c4b5fd; }
.sc-channel-summary-refresh {
  background: none; border: 1px solid rgba(124,58,237,0.35); border-radius: 8px;
  color: #a78bfa; font-size: 10px; padding: 3px 8px; cursor: pointer; flex-shrink: 0;
}

/* Status story with AI caption */
.sc-story-ai-btn {
  padding: 4px 12px; border-radius: 20px;
  background: linear-gradient(135deg,rgba(124,58,237,0.3),rgba(99,102,241,0.3));
  border: 1px solid rgba(124,58,237,0.4); color: #c4b5fd;
  font-size: 11px; font-weight: 800; cursor: pointer; transition: all .2s;
}
.sc-story-ai-btn:hover { background: rgba(124,58,237,0.5); }
.sc-story-caption-box {
  background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.25);
  border-radius: 10px; padding: 8px 12px; font-size: 12px;
  color: rgba(255,255,255,0.8); line-height: 1.5; margin-top: 6px;
  font-style: italic;
}

/* ============================================================
   SPRINT 1 — MESSAGE GROUPING, HOVER ACTIONS, FOCUS MODE
============================================================ */

/* Message Grouping — iMessage style */
.sc-msg-row.sc-grouped {
  margin-top: 1px !important;
}
.sc-msg-row.sc-grouped .sc-bubble-av {
  visibility: hidden;
}
.sc-msg-row.sc-group-last {
  margin-bottom: 10px;
}
.sc-msg-row.sc-grouped .sc-msg-bubble.sc-in {
  border-top-left-radius: 4px !important;
}
.sc-msg-row:not(.sc-grouped) .sc-msg-bubble.sc-in {
  border-bottom-left-radius: 4px !important;
}
.sc-msg-row.sc-grouped .sc-msg-bubble.sc-out {
  border-top-right-radius: 4px !important;
}
.sc-msg-row:not(.sc-group-last) .sc-msg-bubble.sc-out {
  border-bottom-right-radius: 4px !important;
}
.sc-msg-row.sc-grouped .sc-msg-time {
  display: none;
}

/* Hover action bar */
.sc-hover-actions {
  position: absolute;
  top: -34px;
  right: 6px;
  display: none;
  align-items: center;
  gap: 2px;
  background: rgba(10,8,25,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 4px 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  z-index: 100;
  animation: scMsgSlideIn 0.12s ease;
  white-space: nowrap;
}
.sc-msg-row:hover .sc-hover-actions,
.sc-msg-row:focus-within .sc-hover-actions {
  display: flex;
}
.sc-hover-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 8px;
  transition: all .15s;
  line-height: 1;
}
.sc-hover-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sc-hover-btn span {
  font-size: 10px;
  font-weight: 700;
  display: block;
  text-align: center;
}

/* Focus Mode */
.sc-focus-mode .sc-list-panel,
.sc-focus-mode .sc-right-panel {
  display: none !important;
}
.sc-focus-mode .sc-chat-panel {
  flex: 1 !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}
.sc-focus-mode .sc-chat-header {
  background: rgba(5,4,15,0.98) !important;
}
.sc-focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 20px;
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}
.sc-focus-pill:hover { background: rgba(124,58,237,0.35); }
.sc-focus-pill.active {
  background: rgba(124,58,237,0.35);
  border-color: rgba(124,58,237,0.6);
}

/* ============================================================
   SPRINT 2 — MESSAGE EDITING, CRM-LITE, AUTO-PRIORITIZED INBOX
============================================================ */

/* Message editing */
.sc-msg-bubble.editing {
  outline: 2px solid rgba(124,58,237,0.6);
  border-radius: 12px;
}
.sc-edit-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 24px;
}
.sc-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.sc-edit-save, .sc-edit-cancel {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.sc-edit-save { background: rgba(124,58,237,0.8); color: #fff; }
.sc-edit-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.sc-edited-label {
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  margin-left: 6px;
  font-style: italic;
}
.sc-edit-history-btn {
  font-size: 9px;
  color: rgba(124,58,237,0.7);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
}

/* CRM-lite panel */
.sc-crm-panel {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-crm-title {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.sc-crm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.sc-crm-label {
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  width: 80px;
  flex-shrink: 0;
}
.sc-crm-value {
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.sc-crm-stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
}
.sc-crm-stage.lead { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.sc-crm-stage.qualified { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.sc-crm-stage.partner { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.sc-crm-stage.client { background: rgba(124,58,237,0.2); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.4); }
.sc-crm-notes {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  cursor: text;
  min-height: 36px;
  outline: none;
  font-family: inherit;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.sc-crm-notes:focus { border-color: rgba(124,58,237,0.4); color: rgba(255,255,255,0.8); }

/* Auto-prioritized inbox badge */
.sc-priority-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sc-priority-urgent { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.sc-priority-high { background: rgba(251,146,60,0.2); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.sc-priority-normal { display: none; }

.sc-inbox-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.sc-sort-label { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 600; }
.sc-sort-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all .2s;
}
.sc-sort-btn.active { background: rgba(124,58,237,0.2); border-color: rgba(124,58,237,0.4); color: #c4b5fd; }

/* ============================================================
   SPRINT 3 — CONNECTED APPS, CONTEXT NOTIFICATIONS
============================================================ */

/* Connected apps panel */
.sc-connected-apps {
  position: fixed;
  right: 20px;
  top: 70px;
  width: 320px;
  background: rgba(10,8,25,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  z-index: 9000;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn 0.2s ease;
}
.sc-apps-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc-apps-title { font-size: 13px; font-weight: 900; color: #fff; }
.sc-apps-close { background: none; border: none; color: rgba(255,255,255,0.35); cursor: pointer; font-size: 16px; }
.sc-app-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-app-item:hover { background: rgba(255,255,255,0.04); }
.sc-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.sc-app-info { flex: 1; }
.sc-app-name { font-size: 13px; font-weight: 700; color: #fff; }
.sc-app-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 1px; }
.sc-app-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
}
.sc-app-connected { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.sc-app-connect-btn { background: rgba(124,58,237,0.2); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.3); cursor: pointer; border-radius: 20px; }

/* Unified inbox items */
.sc-unified-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .15s;
}
.sc-unified-item:hover { background: rgba(255,255,255,0.04); }
.sc-unified-source {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sc-source-email { background: rgba(59,130,246,0.2); color: #60a5fa; }
.sc-source-calendar { background: rgba(16,185,129,0.2); color: #34d399; }
.sc-source-slack { background: rgba(74,21,75,0.4); color: #da00ff; }
.sc-unified-text { flex: 1; }
.sc-unified-title { font-size: 12px; font-weight: 700; color: #fff; }
.sc-unified-preview { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; line-height: 1.4; }
.sc-unified-time { font-size: 10px; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* Context-aware notification */
.sc-context-notif {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: rgba(10,8,25,0.97);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 16px;
  padding: 12px 16px;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  animation: scMsgSlideIn 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sc-context-notif-icon { font-size: 20px; flex-shrink: 0; }
.sc-context-notif-body { flex: 1; }
.sc-context-notif-title { font-size: 12px; font-weight: 900; color: #fff; }
.sc-context-notif-msg { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; line-height: 1.4; }
.sc-context-notif-actions { display: flex; gap: 6px; margin-top: 8px; }
.sc-context-notif-btn {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  border: none;
  cursor: pointer;
}
.sc-context-notif-btn.primary { background: rgba(124,58,237,0.8); color: #fff; }
.sc-context-notif-btn.secondary { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }

/* ============================================================
   CONVERSATION INTELLIGENCE LAYER
============================================================ */

/* Intelligence panel — pinned above composer */
.sc-intel-panel {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0;
  transition: all .3s ease;
  overflow: hidden;
  max-height: 0;
}
.sc-intel-panel.visible { max-height: 200px; }

.sc-intel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  animation: scMsgSlideIn .2s ease;
}

/* Insight type variants */
.sc-intel-bar.insight { background: rgba(99,102,241,0.08); border-left: 3px solid rgba(99,102,241,0.5); }
.sc-intel-bar.decision { background: rgba(16,185,129,0.08); border-left: 3px solid rgba(16,185,129,0.5); }
.sc-intel-bar.conflict { background: rgba(239,68,68,0.08); border-left: 3px solid rgba(239,68,68,0.5); }
.sc-intel-bar.offtopic { background: rgba(251,146,60,0.08); border-left: 3px solid rgba(251,146,60,0.5); }

.sc-intel-icon { font-size: 16px; flex-shrink: 0; }
.sc-intel-text { flex: 1; min-width: 0; }
.sc-intel-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 1px;
}
.sc-intel-bar.insight .sc-intel-label { color: #818cf8; }
.sc-intel-bar.decision .sc-intel-label { color: #34d399; }
.sc-intel-bar.conflict .sc-intel-label { color: #f87171; }
.sc-intel-bar.offtopic .sc-intel-label { color: #fb923c; }
.sc-intel-msg {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-intel-actions { display: flex; gap: 4px; flex-shrink: 0; }
.sc-intel-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.sc-intel-bar.insight .sc-intel-btn { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.sc-intel-bar.decision .sc-intel-btn { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.sc-intel-bar.conflict .sc-intel-btn { background: rgba(239,68,68,0.2); color: #fca5a5; }
.sc-intel-bar.offtopic .sc-intel-btn { background: rgba(251,146,60,0.2); color: #fed7aa; }
.sc-intel-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.2);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Decision card — shown in chat after detection */
.sc-decision-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg,rgba(16,185,129,0.1),rgba(6,78,59,0.08));
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
}
.sc-decision-icon { font-size: 22px; flex-shrink: 0; }
.sc-decision-body { flex: 1; }
.sc-decision-title { font-size: 11px; font-weight: 900; color: #34d399; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.sc-decision-text { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; font-weight: 600; }
.sc-decision-actions { display: flex; gap: 6px; margin-top: 10px; }
.sc-decision-action-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.sc-decision-action-btn.primary { background: rgba(16,185,129,0.25); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.sc-decision-action-btn.secondary { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.1); }

/* Conflict / tension alert */
.sc-conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg,rgba(239,68,68,0.08),rgba(127,29,29,0.06));
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
}
.sc-conflict-icon { font-size: 20px; flex-shrink: 0; }
.sc-conflict-body { flex: 1; }
.sc-conflict-title { font-size: 11px; font-weight: 900; color: #f87171; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.sc-conflict-text { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.sc-conflict-tip { font-size: 11px; color: rgba(251,146,60,0.8); margin-top: 6px; font-style: italic; }

/* Live insight pulse dot */
.sc-intel-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #818cf8;
  flex-shrink: 0;
  animation: liveIntelPulse 2s ease-in-out infinite;
}
@keyframes liveIntelPulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}

/* ============================================================
   PERSONAL AI IDENTITY SYSTEM
============================================================ */

/* Style profile card in right panel */
.sc-ai-identity-card {
  margin: 0 14px 14px;
  background: linear-gradient(135deg,rgba(124,58,237,0.12),rgba(99,102,241,0.08));
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 16px;
  overflow: hidden;
}
.sc-ai-identity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-ai-identity-title {
  font-size: 11px;
  font-weight: 900;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  flex: 1;
}
.sc-ai-identity-learn-btn {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(124,58,237,0.35);
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  cursor: pointer;
  transition: all .2s;
}
.sc-ai-identity-learn-btn:hover { background: rgba(124,58,237,0.3); }

/* Style trait chips */
.sc-style-traits {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sc-style-trait {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.sc-style-trait.primary {
  background: rgba(124,58,237,0.2);
  border-color: rgba(124,58,237,0.3);
  color: #c4b5fd;
}

/* Style stats row */
.sc-style-stats {
  padding: 6px 14px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.sc-style-stat {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sc-style-stat strong { color: rgba(255,255,255,0.75); font-weight: 700; }

/* Reply as me button — shown in hover bar and composer */
.sc-reply-as-me {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(124,58,237,0.35);
  background: rgba(124,58,237,0.15);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.sc-reply-as-me:hover { background: rgba(124,58,237,0.3); border-color: rgba(124,58,237,0.5); }

/* Tone variant picker */
.sc-tone-picker {
  position: fixed;
  z-index: 9999;
  background: rgba(10,8,25,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 14px;
  width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn .18s ease;
}
.sc-tone-picker-title {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
.sc-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sc-tone-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: all .2s;
}
.sc-tone-btn:hover { background: rgba(124,58,237,0.2); border-color: rgba(124,58,237,0.35); color: #fff; }
.sc-tone-btn .sc-tone-icon { font-size: 20px; }
.sc-tone-btn .sc-tone-sub { font-size: 9px; color: rgba(255,255,255,0.3); font-weight: 400; }

/* Ghost draft preview */
.sc-ghost-preview {
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
}
.sc-ghost-text {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  min-height: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 8px 12px;
}
.sc-ghost-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sc-ghost-use {
  flex: 1;
  padding: 7px;
  border-radius: 10px;
  border: none;
  background: rgba(124,58,237,0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.sc-ghost-regen {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Style learning animation */
.sc-learning-pulse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #a78bfa;
  font-weight: 700;
}
.sc-learning-pulse::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: liveIntelPulse 1.5s ease infinite;
  display: inline-block;
}

/* Draft indicator in composer */
.sc-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 8px;
  padding: 2px 7px;
}

/* ============================================================
   LIFE LOG — TIMELINE, RESURFACING, RELATIONSHIP MEMORY
============================================================ */

/* ── Timeline View ── */
.sc-timeline-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,4,15,0.98);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
  animation: scFadeIn .2s ease;
}
@keyframes scFadeIn { from{opacity:0} to{opacity:1} }

.sc-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sc-timeline-title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  flex: 1;
}
.sc-timeline-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 7px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 200px;
  transition: all .2s;
}
.sc-timeline-search:focus { border-color: rgba(124,58,237,0.5); width: 240px; }
.sc-timeline-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .2s;
}
.sc-timeline-close:hover { background: rgba(255,255,255,0.1); }

.sc-timeline-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Month group header */
.sc-timeline-month {
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 0 8px;
  position: sticky;
  top: 0;
  background: rgba(5,4,15,0.95);
  backdrop-filter: blur(10px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-timeline-month::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}

/* Timeline event rows */
.sc-timeline-event {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all .15s;
  position: relative;
  padding-left: 24px;
}
.sc-timeline-event:hover { padding-left: 28px; }
.sc-timeline-event::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(124,58,237,0.5);
  border: 2px solid rgba(124,58,237,0.8);
  flex-shrink: 0;
}
.sc-timeline-event:hover::before { background: #7c3aed; }
.sc-tl-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.sc-tl-date { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 700; }
.sc-tl-preview { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tl-preview mark { background: rgba(124,58,237,0.3); color: #c4b5fd; border-radius: 3px; }
.sc-tl-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  border: 1px solid rgba(124,58,237,0.2);
  flex-shrink: 0;
  align-self: center;
}

/* ── Auto-resurfacing banner ── */
.sc-resurface-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg,rgba(14,165,233,0.08),rgba(6,78,59,0.05));
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 6px 0;
  animation: scMsgSlideIn .3s ease;
  cursor: pointer;
}
.sc-resurface-banner:hover { border-color: rgba(14,165,233,0.4); background: rgba(14,165,233,0.1); }
.sc-resurface-icon { font-size: 20px; flex-shrink: 0; }
.sc-resurface-body { flex: 1; }
.sc-resurface-label { font-size: 10px; font-weight: 900; color: #38bdf8; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
.sc-resurface-text { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.sc-resurface-quote { font-size: 11px; color: rgba(255,255,255,0.5); font-style: italic; margin-top: 4px; padding-left: 8px; border-left: 2px solid rgba(14,165,233,0.4); }

/* ── Relationship Memory Panel ── */
.sc-memory-panel {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sc-memory-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-memory-add-btn {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
}
.sc-memory-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-memory-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sc-memory-content { flex: 1; }
.sc-memory-category { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
.sc-memory-fact { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 1px; line-height: 1.4; }
.sc-memory-date { font-size: 9px; color: rgba(255,255,255,0.25); margin-top: 2px; }
.sc-memory-delete {
  background: none; border: none; color: rgba(255,255,255,0.15); cursor: pointer; font-size: 13px; flex-shrink: 0;
  transition: color .15s;
}
.sc-memory-delete:hover { color: rgba(239,68,68,0.7); }

/* Memory add form */
.sc-memory-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-memory-form select, .sc-memory-form input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.sc-memory-save-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 5px;
  border-radius: 8px;
  border: none;
  background: rgba(124,58,237,0.7);
  color: #fff;
  cursor: pointer;
  width: 100%;
}

/* Timeline button in header */
.sc-timeline-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sc-timeline-btn:hover { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); color: #c4b5fd; }

/* ============================================================
   PREDICTIVE CHAT ENGINE
============================================================ */

/* ── Pre-generated reply chips (shown in convo list) ── */
.sc-pre-reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.25);
  color: #a78bfa;
  flex-shrink: 0;
  animation: liveIntelPulse 2.5s ease infinite;
}

/* ── Predictive insights card (above composer) ── */
.sc-predict-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg,rgba(124,58,237,0.08),rgba(99,102,241,0.05));
  border-top: 1px solid rgba(124,58,237,0.15);
  animation: scMsgSlideIn .2s ease;
  transition: all .3s;
  overflow: hidden;
  flex-wrap: nowrap;
}
.sc-predict-bar.hidden { max-height: 0; padding: 0; border: none; }
.sc-predict-icon { font-size: 14px; flex-shrink: 0; }
.sc-predict-text { font-size: 11px; color: rgba(255,255,255,0.55); flex: 1; font-weight: 500; }
.sc-predict-text strong { color: #c4b5fd; font-weight: 800; }

/* Pre-suggested reply chips row */
.sc-pre-reply-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sc-pre-reply-row::-webkit-scrollbar { display: none; }
.sc-pre-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.1);
  color: #c4b5fd;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.sc-pre-reply-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(124,58,237,0.15);
  opacity: 0;
  transition: opacity .2s;
}
.sc-pre-reply-chip:hover::before { opacity: 1; }
.sc-pre-reply-chip:hover { border-color: rgba(124,58,237,0.55); transform: translateY(-1px); }
.sc-pre-reply-chip.already-used { opacity: 0.4; text-decoration: line-through; }
.sc-pre-reply-chip .sc-chip-ai { font-size: 9px; opacity: 0.6; }

/* Follow-up nudge notification */
.sc-followup-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg,rgba(251,146,60,0.08),rgba(239,68,68,0.05));
  border-left: 3px solid rgba(251,146,60,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background .15s;
}
.sc-followup-nudge:hover { background: rgba(251,146,60,0.12); }
.sc-followup-nudge-icon { font-size: 18px; flex-shrink: 0; }
.sc-followup-nudge-body { flex: 1; }
.sc-followup-nudge-title { font-size: 11px; font-weight: 900; color: #fb923c; }
.sc-followup-nudge-sub { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.sc-followup-nudge-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.2); cursor: pointer; font-size: 14px;
}

/* Prediction confidence indicator */
.sc-predict-confidence {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(124,58,237,0.12);
  color: #818cf8;
  border: 1px solid rgba(124,58,237,0.2);
  flex-shrink: 0;
}

/* Habit insight row in right panel */
.sc-habit-panel {
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sc-habit-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.sc-habit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-habit-icon { font-size: 14px; }
.sc-habit-label { font-size: 11px; color: rgba(255,255,255,0.5); flex: 1; }
.sc-habit-value { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.8); }

/* Active prediction dot on convo item */
.sc-pred-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #a78bfa;
  flex-shrink: 0;
  animation: liveIntelPulse 2s ease infinite;
}

/* ============================================================
   GOAL-DRIVEN CONVERSATIONS
============================================================ */

/* ── Goal banner pinned below chat header ── */
.sc-goal-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg,rgba(16,185,129,0.1),rgba(5,150,105,0.06));
  border-bottom: 1px solid rgba(16,185,129,0.2);
  animation: scMsgSlideIn .2s ease;
}
.sc-goal-icon { font-size: 16px; flex-shrink: 0; }
.sc-goal-info { flex: 1; min-width: 0; }
.sc-goal-label { font-size: 9px; font-weight: 900; color: rgba(52,211,153,0.7); text-transform: uppercase; letter-spacing: 0.7px; }
.sc-goal-name { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.9); }

/* Progress bar */
.sc-goal-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sc-goal-progress-track {
  width: 100px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.sc-goal-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg,#10b981,#34d399);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.sc-goal-pct { font-size: 10px; font-weight: 900; color: #34d399; }

/* Change / clear goal button */
.sc-goal-edit-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,0.25);
  background: rgba(16,185,129,0.1);
  color: #34d399;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}
.sc-goal-edit-btn:hover { background: rgba(16,185,129,0.2); }

/* ── Goal picker modal ── */
.sc-goal-picker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-goal-picker-box {
  background: rgba(10,8,25,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-goal-picker-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.sc-goal-picker-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
.sc-goal-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.sc-goal-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all .2s;
}
.sc-goal-preset:hover { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.sc-goal-preset.selected { border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.12); }
.sc-goal-preset-icon { font-size: 20px; flex-shrink: 0; }
.sc-goal-preset-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); }
.sc-goal-preset-sub { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px; }

/* Custom goal input */
.sc-goal-custom {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sc-goal-custom input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.sc-goal-custom input:focus { border-color: rgba(16,185,129,0.4); }
.sc-goal-custom input::placeholder { color: rgba(255,255,255,0.25); }

.sc-goal-confirm-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
}
.sc-goal-confirm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,0.3); }

/* ── Steps checklist (inline in chat) ── */
.sc-goal-steps-card {
  margin: 8px 12px;
  background: rgba(16,185,129,0.05);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 16px;
  padding: 14px 16px;
  animation: scMsgSlideIn .3s ease;
}
.sc-goal-steps-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(52,211,153,0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-goal-step-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}
.sc-goal-step-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(16,185,129,0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  margin-top: 1px;
  transition: all .3s;
}
.sc-goal-step-check.done {
  background: rgba(16,185,129,0.3);
  border-color: #10b981;
  color: #34d399;
}
.sc-goal-step-check.missing {
  border-color: rgba(251,146,60,0.5);
  background: rgba(251,146,60,0.08);
  color: #fb923c;
}
.sc-goal-step-text {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  flex: 1;
  line-height: 1.4;
}
.sc-goal-step-text.done { text-decoration: line-through; color: rgba(255,255,255,0.3); }
.sc-goal-step-text.missing { color: #fb923c; }
.sc-goal-missing-label { font-size: 9px; font-weight: 800; color: #fb923c; margin-left: 4px; }

/* Set goal button in header */
.sc-goal-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(16,185,129,0.4);
  background: transparent;
  color: rgba(52,211,153,0.7);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.sc-goal-set-btn:hover { border-style: solid; background: rgba(16,185,129,0.08); }

/* ============================================================
   IN-CHAT TOOLS — POLLS, TASK BOARD, NOTES, CALENDAR
============================================================ */

/* ── Tool Launcher (⚡ button popup) ── */
.sc-tool-launcher {
  position: fixed;
  z-index: 9999;
  background: rgba(10,8,25,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 14px;
  width: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(30px);
  animation: scMsgSlideIn .18s ease;
}
.sc-tool-launcher-title {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.sc-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sc-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all .2s;
}
.sc-tool-item:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.sc-tool-item .sc-tool-emoji { font-size: 24px; }
.sc-tool-item .sc-tool-name { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.8); }
.sc-tool-item .sc-tool-sub { font-size: 9px; color: rgba(255,255,255,0.3); }

/* ── Shared inline card wrapper ── */
.sc-inline-tool {
  margin: 6px 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  animation: scMsgSlideIn .3s ease;
}
.sc-tool-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sc-tool-card-icon { font-size: 18px; }
.sc-tool-card-title { font-size: 12px; font-weight: 900; color: rgba(255,255,255,0.9); flex: 1; }
.sc-tool-card-by { font-size: 10px; color: rgba(255,255,255,0.3); }
.sc-tool-card-body { padding: 12px 14px; }

/* ── POLL ── */
.sc-poll-question { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.sc-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.sc-poll-option:hover { border-color: rgba(124,58,237,0.4); }
.sc-poll-option.voted { border-color: rgba(124,58,237,0.6); background: rgba(124,58,237,0.08); }
.sc-poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(124,58,237,0.1);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  border-radius: 10px;
}
.sc-poll-option-text { font-size: 12px; color: rgba(255,255,255,0.8); flex: 1; position: relative; z-index: 1; font-weight: 600; }
.sc-poll-option-pct { font-size: 11px; font-weight: 800; color: #a78bfa; position: relative; z-index: 1; }
.sc-poll-total { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 4px; }

/* Poll creation form */
.sc-poll-form { padding: 14px 16px; }
.sc-poll-form input, .sc-poll-form textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: #fff; font-size: 12px; padding: 8px 12px;
  font-family: inherit; outline: none; margin-bottom: 6px;
  transition: border-color .2s;
}
.sc-poll-form input:focus, .sc-poll-form textarea:focus { border-color: rgba(124,58,237,0.5); }

/* ── TASK BOARD ── */
.sc-task-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sc-task-col-header { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sc-task-item {
  padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04); font-size: 11px; color: rgba(255,255,255,0.75);
  margin-bottom: 5px; cursor: pointer; transition: all .15s;
  display: flex; align-items: flex-start; gap: 6px;
}
.sc-task-item:hover { background: rgba(255,255,255,0.08); }
.sc-task-cb { width: 14px; height: 14px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all .2s; }
.sc-task-cb.done { background: #10b981; border-color: #10b981; color: #fff; }
.sc-task-add-row { display: flex; gap: 6px; margin-top: 6px; }
.sc-task-add-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 11px; padding: 5px 8px; font-family: inherit; outline: none; }
.sc-task-add-input:focus { border-color: rgba(124,58,237,0.4); border-style: solid; }
.sc-task-add-btn { background: rgba(124,58,237,0.3); border: none; border-radius: 8px; color: #c4b5fd; font-size: 13px; padding: 5px 10px; cursor: pointer; }

/* ── NOTES ── */
.sc-note-body textarea {
  width: 100%; box-sizing: border-box; min-height: 100px;
  background: transparent; border: none; resize: vertical;
  color: rgba(255,255,255,0.85); font-size: 12px; line-height: 1.7;
  font-family: inherit; outline: none; padding: 0;
}
.sc-note-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.sc-note-save { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 8px; border: none; background: rgba(124,58,237,0.4); color: #c4b5fd; cursor: pointer; }
.sc-note-chars { font-size: 10px; color: rgba(255,255,255,0.25); }

/* ── CALENDAR / EVENT ── */
.sc-cal-form { display: flex; flex-direction: column; gap: 8px; }
.sc-cal-form input, .sc-cal-form select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: #fff; font-size: 12px; padding: 8px 12px;
  font-family: inherit; outline: none;
  transition: border-color .2s;
}
.sc-cal-form input:focus { border-color: rgba(99,102,241,0.5); }
.sc-cal-event-card {
  background: linear-gradient(135deg,rgba(99,102,241,0.12),rgba(79,70,229,0.06));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 16px; padding: 14px 16px;
  animation: scMsgSlideIn .3s ease;
}
.sc-cal-event-title { font-size: 15px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.sc-cal-event-meta { font-size: 11px; color: rgba(255,255,255,0.5); display: flex; flex-direction: column; gap: 3px; }
.sc-cal-event-meta span { display: flex; align-items: center; gap: 5px; }
.sc-cal-rsvp { display: flex; gap: 6px; margin-top: 10px; }
.sc-cal-rsvp-btn { flex: 1; padding: 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 800; cursor: pointer; transition: all .2s; }
.sc-cal-rsvp-btn:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.4); color: #fff; }
.sc-cal-rsvp-btn.going { background: rgba(16,185,129,0.2); border-color: #10b981; color: #34d399; }
.sc-cal-rsvp-btn.maybe { background: rgba(245,158,11,0.2); border-color: #f59e0b; color: #fbbf24; }
.sc-cal-rsvp-btn.no { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5); color: #f87171; }

/* ── Tool button in composer ── */
.sc-tool-launch-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 700;
  padding: 4px 9px; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 4px;
}
.sc-tool-launch-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ============================================================
   INTELLIGENCE SUITE — GROUPS A · B · C
============================================================ */

/* ═══ GROUP A-1: SECOND BRAIN ═══════════════════════════ */
.sc-brain-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(5,4,15,0.97);
  backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .2s ease;
}
.sc-brain-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sc-brain-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-brain-close { background: none; border: none; color: rgba(255,255,255,0.3); font-size: 18px; cursor: pointer; }
.sc-brain-qa-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.sc-brain-qa-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  padding: 9px 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.sc-brain-qa-input:focus { border-color: rgba(124,58,237,0.5); }
.sc-brain-qa-btn {
  padding: 9px 16px;
  border-radius: 12px;
  border: none;
  background: rgba(124,58,237,0.6);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.sc-brain-qa-answer {
  margin: 0 16px 10px;
  padding: 12px 14px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  animation: scMsgSlideIn .2s ease;
}
.sc-brain-cards { flex: 1; overflow-y: auto; padding: 12px 16px; }
.sc-brain-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s;
}
.sc-brain-card:hover { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.3); }
.sc-brain-card-meta { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 5px; display: flex; gap: 8px; }
.sc-brain-card-text { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.5; }
.sc-brain-card-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.sc-brain-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(124,58,237,0.15); color: #c4b5fd; border: 1px solid rgba(124,58,237,0.2); }
/* Save-to-brain button on messages */
.sc-brain-save-btn {
  opacity: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.1);
  color: #a78bfa;
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  top: -6px;
  right: -2px;
}
.sc-msg-row:hover .sc-brain-save-btn { opacity: 1; }

/* ═══ GROUP A-2: EMOTION-AWARE UI ══════════════════════ */
.sc-chat-panel {
  transition: background .8s ease, border-color .8s ease;
}
.sc-emotion-indicator {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  white-space: nowrap;
}
.sc-emotion-indicator.visible { opacity: 1; }

/* ═══ GROUP A-3: REWIND ════════════════════════════════ */
.sc-rewind-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10,8,25,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  animation: scMsgSlideIn .2s ease;
}
.sc-rewind-play {
  background: rgba(124,58,237,0.4);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.sc-rewind-play:hover { background: rgba(124,58,237,0.6); }
.sc-rewind-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); position: relative; cursor: pointer; }
.sc-rewind-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#7c3aed,#ec4899); transition: width .3s; }
.sc-rewind-label { font-size: 10px; color: rgba(255,255,255,0.4); flex-shrink: 0; font-weight: 700; }
.sc-rewind-speed { font-size: 10px; font-weight: 800; color: #a78bfa; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.2); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.sc-rewind-msg { animation: scRewindIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes scRewindIn { from { opacity:0; transform:scale(.9) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* ═══ GROUP B-1: CONTEXTUAL SEARCH ════════════════════ */
.sc-smart-search-overlay {
  position: absolute;
  inset: 0;
  z-index: 210;
  background: rgba(5,4,15,0.98);
  backdrop-filter: blur(40px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-smart-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sc-smart-search-input {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(124,58,237,0.4);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  padding: 10px 16px;
  font-family: inherit;
  outline: none;
}
.sc-smart-search-input::placeholder { color: rgba(255,255,255,0.25); }
.sc-smart-search-hint { font-size: 10px; color: rgba(255,255,255,0.3); padding: 0 20px 10px; }
.sc-smart-search-results { flex: 1; overflow-y: auto; padding: 10px 16px; }
.sc-smart-result {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .2s;
}
.sc-smart-result:hover { background: rgba(124,58,237,0.09); border-color: rgba(124,58,237,0.25); }
.sc-smart-result-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.sc-smart-result-body { flex: 1; min-width: 0; }
.sc-smart-result-who { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.6); margin-bottom: 3px; }
.sc-smart-result-text { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.sc-smart-result-text mark { background: rgba(124,58,237,0.3); color: #c4b5fd; border-radius: 3px; padding: 0 2px; }
.sc-smart-result-meta { font-size: 10px; color: rgba(255,255,255,0.25); margin-top: 3px; }
.sc-smart-result-score { font-size: 10px; font-weight: 800; color: #34d399; background: rgba(16,185,129,0.1); border-radius: 6px; padding: 2px 6px; flex-shrink: 0; align-self: flex-start; }

/* ═══ GROUP B-2: FULL AUTO MODE ════════════════════════ */
.sc-auto-badge {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9990;
  background: linear-gradient(135deg,rgba(239,68,68,0.15),rgba(220,38,38,0.1));
  border: 1.5px solid rgba(239,68,68,0.4);
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: liveIntelPulse 2s ease infinite;
  cursor: pointer;
}
.sc-auto-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: liveIntelPulse 1s ease infinite; }
.sc-auto-badge-label { font-size: 11px; font-weight: 900; color: #f87171; }

.sc-auto-preview {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9995;
  background: rgba(10,8,25,0.97);
  border: 1.5px solid rgba(239,68,68,0.4);
  border-radius: 20px;
  padding: 16px 20px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: scMsgSlideIn .2s ease;
}
.sc-auto-preview-label { font-size: 10px; font-weight: 900; color: #f87171; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 8px; }
.sc-auto-preview-text { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; margin-bottom: 12px; }
.sc-auto-countdown { height: 4px; border-radius: 4px; background: rgba(239,68,68,0.2); margin-bottom: 12px; overflow: hidden; }
.sc-auto-countdown-fill { height: 100%; border-radius: 4px; background: #ef4444; transition: width .1s linear; }
.sc-auto-actions { display: flex; gap: 8px; }
.sc-auto-cancel { flex: 1; padding: 8px; border-radius: 12px; border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); color: #f87171; font-weight: 800; cursor: pointer; }
.sc-auto-send { flex: 1; padding: 8px; border-radius: 12px; border: none; background: rgba(239,68,68,0.5); color: #fff; font-weight: 800; cursor: pointer; }
.sc-auto-confidence { font-size: 10px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 8px; }

/* ═══ GROUP C-1: TEXT→VOICE ════════════════════════════ */
.sc-tts-btn {
  opacity: 0;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  bottom: -6px;
  left: 0;
  line-height: 1;
}
.sc-msg-row:hover .sc-tts-btn { opacity: 1; }
.sc-tts-btn.playing { color: #34d399; background: rgba(16,185,129,0.12); }

/* ═══ GROUP C-2: CROSS-PLATFORM MEMORY ════════════════ */
.sc-xmem-overlay {
  position: absolute;
  inset: 0;
  z-index: 205;
  background: rgba(5,4,15,0.97);
  backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .2s ease;
}
.sc-xmem-header { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.sc-xmem-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-xmem-sources { display: flex; gap: 6px; padding: 10px 20px; flex-shrink: 0; flex-wrap: wrap; }
.sc-xmem-source-btn { padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s; }
.sc-xmem-source-btn.active { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.12); color: #818cf8; }
.sc-xmem-items { flex: 1; overflow-y: auto; padding: 8px 16px; }
.sc-xmem-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  margin-bottom: 8px;
  transition: all .2s;
}
.sc-xmem-item:hover { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.2); }
.sc-xmem-source-icon { font-size: 20px; flex-shrink: 0; }
.sc-xmem-body { flex: 1; }
.sc-xmem-source-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.3); margin-bottom: 3px; }
.sc-xmem-text { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.sc-xmem-when { font-size: 10px; color: rgba(255,255,255,0.25); margin-top: 4px; }

/* ============================================================
   THINK BEFORE YOU SEND — EMOTIONAL INTELLIGENCE AI
============================================================ */

/* The gentle interrupt — slides up from the composer */
.sc-tbys-card {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  margin: 0 8px 6px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10,8,25,0.98);
  border: 1.5px solid rgba(251,146,60,0.35);
  box-shadow: 0 -10px 40px rgba(251,146,60,0.12), 0 20px 60px rgba(0,0,0,0.6);
  animation: scTBYSSlideUp .28s cubic-bezier(.34,1.2,.64,1);
  z-index: 500;
  backdrop-filter: blur(30px);
}
@keyframes scTBYSSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Severity colour schemes */
.sc-tbys-card.sev-warn  { border-color: rgba(251,146,60,0.4); }
.sc-tbys-card.sev-risk  { border-color: rgba(239,68,68,0.45); }
.sc-tbys-card.sev-late  { border-color: rgba(99,102,241,0.4); }
.sc-tbys-card.sev-info  { border-color: rgba(52,211,153,0.3); }

/* Coloured top accent stripe */
.sc-tbys-stripe {
  height: 3px;
  width: 100%;
}
.sev-warn  .sc-tbys-stripe { background: linear-gradient(90deg,#fb923c,#f59e0b); }
.sev-risk  .sc-tbys-stripe { background: linear-gradient(90deg,#ef4444,#dc2626); }
.sev-late  .sc-tbys-stripe { background: linear-gradient(90deg,#6366f1,#8b5cf6); }
.sev-info  .sc-tbys-stripe { background: linear-gradient(90deg,#10b981,#34d399); }

.sc-tbys-body { padding: 14px 16px 12px; }

.sc-tbys-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.sc-tbys-emoji { font-size: 22px; flex-shrink: 0; line-height: 1; }
.sc-tbys-content { flex: 1; min-width: 0; }
.sc-tbys-headline {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  margin-bottom: 3px;
  line-height: 1.3;
}
.sc-tbys-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* Highlight of the risky phrase */
.sc-tbys-flag {
  display: inline-block;
  background: rgba(251,146,60,0.15);
  border: 1px solid rgba(251,146,60,0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: #fb923c;
  font-weight: 700;
  font-style: italic;
  margin-top: 4px;
}
.sev-risk .sc-tbys-flag { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #f87171; }
.sev-late .sc-tbys-flag { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); color: #818cf8; }

/* Rewrite suggestion box */
.sc-tbys-rewrite {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.sc-tbys-rewrite:hover { background: rgba(255,255,255,0.07); }
.sc-tbys-rewrite-label {
  font-size: 9px;
  font-weight: 900;
  color: rgba(52,211,153,0.7);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 5px;
}
.sc-tbys-rewrite-use {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: rgba(52,211,153,0.2);
  color: #34d399;
  cursor: pointer;
  transition: all .15s;
}
.sc-tbys-rewrite-use:hover { background: rgba(52,211,153,0.35); }

/* 3 action buttons */
.sc-tbys-actions { display: flex; gap: 6px; }
.sc-tbys-btn {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid;
  transition: all .15s;
}
.sc-tbys-btn-rewrite {
  background: rgba(52,211,153,0.1);
  border-color: rgba(52,211,153,0.3);
  color: #34d399;
}
.sc-tbys-btn-rewrite:hover { background: rgba(52,211,153,0.2); }
.sc-tbys-btn-send {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
.sc-tbys-btn-send:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.sc-tbys-btn-delete {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.25);
  color: #f87171;
  flex: 0 0 auto;
  padding: 8px 12px;
}
.sc-tbys-btn-delete:hover { background: rgba(239,68,68,0.15); }

/* Mini "thinking" state */
.sc-tbys-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.sc-tbys-thinking-dots span {
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(251,146,60,0.6);
  animation: scTypingPulse .9s ease infinite;
  margin: 0 1px;
}
.sc-tbys-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.sc-tbys-thinking-dots span:nth-child(3) { animation-delay: .3s; }

/* Subtle "AI is watching" composer badge */
.sc-tbys-active-badge {
  font-size: 9px;
  font-weight: 800;
  color: rgba(52,211,153,0.5);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(52,211,153,0.15);
  background: rgba(52,211,153,0.06);
  letter-spacing: 0.4px;
}

/* ============================================================
   DIGITAL TWIN — YOUR AI VERSION
============================================================ */

/* ── Twin activation badge in header ── */
.sc-twin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: all .25s;
}
.sc-twin-badge.off {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.35);
}
.sc-twin-badge.on {
  background: linear-gradient(135deg,rgba(124,58,237,0.2),rgba(236,72,153,0.15));
  border: 1.5px solid rgba(124,58,237,0.5);
  color: #c4b5fd;
  animation: liveIntelPulse 2.5s ease infinite;
}

/* ── Twin global floating badge ── */
.sc-twin-global-badge {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  background: linear-gradient(135deg,rgba(124,58,237,0.18),rgba(236,72,153,0.12));
  border: 1.5px solid rgba(124,58,237,0.45);
  border-radius: 16px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: liveIntelPulse 2s ease infinite;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(124,58,237,0.2);
}
.sc-twin-global-badge span { font-size: 11px; font-weight: 900; color: #c4b5fd; }
.sc-twin-global-dot { width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; animation: liveIntelPulse 1s ease infinite; }

/* ── Twin panel (right panel card) ── */
.sc-twin-panel {
  background: linear-gradient(135deg,rgba(124,58,237,0.06),rgba(236,72,153,0.04));
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 18px;
  padding: 16px;
  margin-top: 12px;
}
.sc-twin-panel-title {
  font-size: 12px;
  font-weight: 900;
  color: #c4b5fd;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.sc-twin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.sc-twin-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}
.sc-twin-stat-val { font-size: 16px; font-weight: 900; color: #fff; }
.sc-twin-stat-label { font-size: 9px; color: rgba(255,255,255,0.35); margin-top: 2px; font-weight: 700; }

/* Personality traits */
.sc-twin-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.sc-twin-trait {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.25);
  color: #c4b5fd;
}

/* Toggle */
.sc-twin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.sc-twin-toggle-label { flex: 1; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6); }
.sc-twin-toggle {
  position: relative;
  width: 40px; height: 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background .3s;
  flex-shrink: 0;
}
.sc-twin-toggle.on { background: rgba(124,58,237,0.5); }
.sc-twin-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s;
}
.sc-twin-toggle.on .sc-twin-toggle-knob { transform: translateX(18px); }

/* Twin message indicator */
.sc-twin-msg-tag {
  font-size: 8px;
  font-weight: 900;
  color: #a78bfa;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

/* Twin setup modal */
.sc-twin-setup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-twin-setup-box {
  background: rgba(10,8,25,0.98);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 24px;
  padding: 28px;
  width: 480px;
  max-width: 95vw;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-twin-setup-title { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.sc-twin-setup-sub { font-size: 12px; color: rgba(255,255,255,0.35); margin-bottom: 20px; line-height: 1.5; }
.sc-twin-setup-btn {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg,#7c3aed,#ec4899);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 8px;
}
.sc-twin-setup-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,58,237,0.3); }

/* ============================================================
   CONTENT ENGINE — TIKTOK KILLER
============================================================ */

/* ── Chat → Content Generator Modal ── */
.sc-content-gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-content-gen-box {
  background: rgba(10,8,25,0.99);
  border: 1px solid rgba(236,72,153,0.3);
  border-radius: 24px;
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  padding: 0;
}
.sc-content-gen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-content-gen-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }

/* Format selector */
.sc-content-formats { display: flex; gap: 6px; padding: 14px 24px; flex-wrap: wrap; }
.sc-content-format-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  font-size: 11px; font-weight: 800;
  cursor: pointer;
  transition: all .2s;
}
.sc-content-format-btn.active {
  border-color: rgba(236,72,153,0.5);
  background: rgba(236,72,153,0.12);
  color: #f472b6;
}

/* Generated content display */
.sc-content-result {
  padding: 0 24px 20px;
}
.sc-content-section { margin-bottom: 14px; }
.sc-content-section-label {
  font-size: 9px; font-weight: 900;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.sc-content-section-text {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  position: relative;
}
.sc-content-copy-btn {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; padding: 3px 8px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
}
.sc-content-copy-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sc-content-gen-actions {
  display: flex; gap: 8px; padding: 0 24px 20px;
}
.sc-content-gen-btn {
  flex: 1; padding: 11px;
  border-radius: 14px; border: none;
  font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all .2s;
}
.sc-content-post-btn {
  background: linear-gradient(135deg,#ec4899,#7c3aed);
  color: #fff;
}
.sc-content-post-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(236,72,153,0.3); }
.sc-content-regen-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}

/* ── Smart Content Feed ── */
.sc-feed-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(5,4,15,0.99);
  display: flex;
  flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-feed-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sc-feed-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-feed-tabs { display: flex; gap: 6px; padding: 10px 20px; flex-shrink: 0; overflow-x: auto; }
.sc-feed-tab {
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.4);
  font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.sc-feed-tab.active {
  border-color: rgba(236,72,153,0.5);
  background: rgba(236,72,153,0.1);
  color: #f472b6;
}
.sc-feed-grid {
  flex: 1; overflow-y: auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
}
.sc-feed-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}
.sc-feed-card:hover { transform: translateY(-2px); border-color: rgba(236,72,153,0.3); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.sc-feed-card-visual {
  height: 140px;
  background: linear-gradient(135deg,rgba(124,58,237,0.15),rgba(236,72,153,0.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  position: relative;
}
.sc-feed-card-body { padding: 12px 14px; }
.sc-feed-card-author {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.sc-feed-card-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.sc-feed-card-name { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7); }
.sc-feed-card-time { font-size: 10px; color: rgba(255,255,255,0.25); margin-left: auto; }
.sc-feed-card-text { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 8px; }
.sc-feed-card-stats { display: flex; gap: 12px; font-size: 10px; color: rgba(255,255,255,0.3); }
.sc-feed-card-stat { display: flex; align-items: center; gap: 3px; }

/* ── Viral badge ── */
.sc-viral-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 9px; font-weight: 900;
  padding: 3px 9px;
  border-radius: 20px;
  color: #fff;
  letter-spacing: 0.5px;
}
.sc-viral-hot { background: linear-gradient(135deg,#ef4444,#f97316); }
.sc-viral-trending { background: linear-gradient(135deg,#f59e0b,#eab308); color: #000; }
.sc-viral-rising { background: linear-gradient(135deg,#10b981,#34d399); }

/* ============================================================
   TRUST SCORE + SCAM DETECTION + CO-PILOT + INTENT MESSAGING
============================================================ */

/* ── Trust Score Badge ── */
.sc-trust-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 9px; font-weight: 900;
  letter-spacing: 0.4px;
}
.sc-trust-high { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #34d399; }
.sc-trust-med { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; }
.sc-trust-low { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }
.sc-trust-new { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); color: #818cf8; }

/* Trust panel in right sidebar */
.sc-trust-panel { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 14px; margin-top: 10px; }
.sc-trust-panel-title { font-size: 11px; font-weight: 900; color: rgba(255,255,255,0.5); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sc-trust-meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.06); margin-bottom: 8px; overflow: hidden; }
.sc-trust-meter-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.sc-trust-factors { display: flex; flex-direction: column; gap: 4px; }
.sc-trust-factor { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255,255,255,0.4); }
.sc-trust-factor-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Scam Detection Warning ── */
.sc-scam-warning {
  background: rgba(239,68,68,0.08);
  border: 1.5px solid rgba(239,68,68,0.35);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 6px 12px;
  animation: scMsgSlideIn .2s ease;
  display: flex; align-items: flex-start; gap: 10px;
}
.sc-scam-icon { font-size: 20px; flex-shrink: 0; }
.sc-scam-body { flex: 1; }
.sc-scam-title { font-size: 12px; font-weight: 900; color: #f87171; margin-bottom: 2px; }
.sc-scam-sub { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.4; }
.sc-scam-actions { display: flex; gap: 6px; margin-top: 6px; }
.sc-scam-dismiss { font-size: 10px; padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: none; color: rgba(255,255,255,0.4); cursor: pointer; }

/* ── Live Co-Pilot (inline suggestions while typing) ── */
.sc-copilot-suggest {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  margin: 0 8px 4px;
  background: rgba(10,8,25,0.96);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 14px;
  padding: 8px 12px;
  z-index: 400;
  animation: scMsgSlideIn .15s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sc-copilot-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sc-copilot-body { flex: 1; min-width: 0; }
.sc-copilot-label { font-size: 9px; font-weight: 900; color: rgba(52,211,153,0.6); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
.sc-copilot-text { font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.4; }
.sc-copilot-text mark { background: rgba(52,211,153,0.2); color: #34d399; border-radius: 2px; padding: 0 2px; }
.sc-copilot-use { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.1); color: #34d399; cursor: pointer; white-space: nowrap; flex-shrink: 0; align-self: center; }
.sc-copilot-use:hover { background: rgba(52,211,153,0.2); }

/* ── Intent-Based Messaging ── */
.sc-intent-panel {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  margin: 0 8px 4px;
  background: rgba(10,8,25,0.98);
  border: 1.5px solid rgba(124,58,237,0.35);
  border-radius: 18px;
  padding: 14px;
  z-index: 450;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  animation: scTBYSSlideUp .2s cubic-bezier(.34,1.2,.64,1);
}
.sc-intent-title { font-size: 12px; font-weight: 900; color: #c4b5fd; margin-bottom: 10px; }
.sc-intent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.sc-intent-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.6);
  font-size: 11px; font-weight: 700;
  cursor: pointer; text-align: left;
  transition: all .15s;
}
.sc-intent-btn:hover { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.3); color: #c4b5fd; }
.sc-intent-custom {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  padding: 9px 12px;
  font-family: inherit;
  outline: none;
}
.sc-intent-custom::placeholder { color: rgba(255,255,255,0.2); }
.sc-intent-result {
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* ============================================================
   ADVANCED INTELLIGENCE — 5 FEATURES
============================================================ */

/* ── Future Response Simulation ── */
.sc-future-sim {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  margin: 0 8px 4px;
  background: rgba(10,8,25,0.98);
  border: 1.5px solid rgba(99,102,241,0.35);
  border-radius: 18px;
  padding: 14px 16px;
  z-index: 460;
  box-shadow: 0 -10px 40px rgba(99,102,241,0.12);
  animation: scTBYSSlideUp .22s cubic-bezier(.34,1.2,.64,1);
}
.sc-future-title { font-size: 12px; font-weight: 900; color: #818cf8; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sc-future-outcomes { display: flex; flex-direction: column; gap: 6px; }
.sc-future-outcome {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all .15s;
}
.sc-future-outcome:hover { background: rgba(255,255,255,0.05); }
.sc-future-prob { font-size: 18px; font-weight: 900; flex-shrink: 0; width: 44px; text-align: center; }
.sc-future-prob.positive { color: #34d399; }
.sc-future-prob.neutral { color: #fbbf24; }
.sc-future-prob.negative { color: #f87171; }
.sc-future-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.sc-future-text { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; }
.sc-future-bar { height: 3px; border-radius: 3px; margin-top: 4px; }

/* ── Decision Confidence Meter ── */
.sc-decision-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px;
  margin: 8px 12px;
}
.sc-decision-title { font-size: 11px; font-weight: 900; color: rgba(255,255,255,0.6); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sc-decision-meter { position: relative; height: 10px; border-radius: 10px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 8px; }
.sc-decision-fill { height: 100%; border-radius: 10px; transition: width .5s ease; }
.sc-decision-score { font-size: 22px; font-weight: 900; text-align: center; margin-bottom: 4px; }
.sc-decision-label { font-size: 10px; text-align: center; color: rgba(255,255,255,0.35); }
.sc-decision-factors { display: flex; gap: 8px; margin-top: 8px; }
.sc-decision-factor { flex: 1; text-align: center; padding: 6px; border-radius: 8px; background: rgba(255,255,255,0.03); }
.sc-decision-factor-val { font-size: 14px; font-weight: 900; }
.sc-decision-factor-name { font-size: 8px; color: rgba(255,255,255,0.3); margin-top: 2px; }

/* ── Why Did This Happen Engine ── */
.sc-why-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-why-box {
  background: rgba(10,8,25,0.99);
  border: 1px solid rgba(251,146,60,0.3);
  border-radius: 24px;
  width: 520px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-why-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.sc-why-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-bottom: 16px; }
.sc-why-event {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sc-why-event:last-child { border-bottom: none; }
.sc-why-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 36px; }
.sc-why-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sc-why-line { width: 2px; flex: 1; background: rgba(255,255,255,0.06); margin-top: 4px; }
.sc-why-event-body { flex: 1; }
.sc-why-event-title { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.8); margin-bottom: 2px; }
.sc-why-event-desc { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.4; }
.sc-why-event-time { font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 3px; }
.sc-why-conclusion {
  margin-top: 14px; padding: 12px;
  background: rgba(251,146,60,0.06);
  border: 1px solid rgba(251,146,60,0.2);
  border-radius: 14px;
  font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5;
}

/* ── Social Gravity Map ── */
.sc-gravity-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,4,15,0.98);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-gravity-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sc-gravity-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-gravity-canvas { flex: 1; position: relative; overflow: hidden; }
.sc-gravity-node {
  position: absolute;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.sc-gravity-node:hover { transform: scale(1.15); box-shadow: 0 8px 30px rgba(124,58,237,0.4); }
.sc-gravity-label {
  position: absolute;
  font-size: 10px; font-weight: 800;
  color: rgba(255,255,255,0.6);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.sc-gravity-line { position: absolute; pointer-events: none; }
.sc-gravity-stats {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(10,8,25,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px 16px;
}
.sc-gravity-stat-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }

/* ── Blind Spot Detector ── */
.sc-blindspot-card {
  background: rgba(245,158,11,0.06);
  border: 1.5px solid rgba(245,158,11,0.25);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 12px;
  animation: scMsgSlideIn .2s ease;
}
.sc-blindspot-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.sc-blindspot-emoji { font-size: 18px; flex-shrink: 0; }
.sc-blindspot-title { font-size: 12px; font-weight: 900; color: #fbbf24; }
.sc-blindspot-body { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.sc-blindspot-points { margin-top: 8px; }
.sc-blindspot-point { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; font-size: 11px; color: rgba(255,255,255,0.5); }
.sc-blindspot-dismiss { font-size: 10px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(245,158,11,0.2); background: none; color: #fbbf24; cursor: pointer; margin-top: 8px; }

/* ============================================================
   CALL MANAGEMENT SYSTEM + USER SETTINGS
============================================================ */

/* ── Call Log Panel ── */
.sc-calls-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,4,15,0.99);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-calls-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sc-calls-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-calls-tabs { display: flex; gap: 4px; padding: 10px 20px; flex-shrink: 0; overflow-x: auto; }
.sc-calls-tab {
  padding: 7px 16px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.4);
  font-size: 11px; font-weight: 800;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.sc-calls-tab.active { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.08); color: #34d399; }
.sc-calls-tab .sc-call-count {
  background: rgba(255,255,255,0.1); border-radius: 10px; padding: 1px 6px; font-size: 9px;
}
.sc-calls-tab.active .sc-call-count { background: rgba(52,211,153,0.2); }
.sc-calls-list { flex: 1; overflow-y: auto; padding: 8px 20px; }

/* Call card */
.sc-call-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px; cursor: pointer; transition: all .15s;
}
.sc-call-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.sc-call-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.sc-call-info { flex: 1; min-width: 0; }
.sc-call-name { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.85); }
.sc-call-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.sc-call-type-icon { font-size: 12px; }
.sc-call-right { text-align: right; flex-shrink: 0; }
.sc-call-time { font-size: 10px; color: rgba(255,255,255,0.3); }
.sc-call-duration { font-size: 10px; color: rgba(255,255,255,0.2); margin-top: 2px; }
.sc-call-actions { display: flex; gap: 6px; margin-top: 4px; }
.sc-call-action-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5); font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sc-call-action-btn:hover { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.3); color: #34d399; }
.sc-call-spam { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.04); }
.sc-call-missed .sc-call-name { color: #f87171; }

/* Filter drawer */
.sc-calls-filter {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px; margin: 0 20px 10px;
}
.sc-calls-filter-title { font-size: 11px; font-weight: 900; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.sc-calls-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; color: rgba(255,255,255,0.5); }
.sc-calls-filter-row label { flex: 1; cursor: pointer; }

/* ── User Settings Panel ── */
.sc-settings-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(5,4,15,0.99);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-settings-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sc-settings-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; max-width: 700px; }
.sc-settings-section { margin-bottom: 20px; }
.sc-settings-section-title { font-size: 13px; font-weight: 900; color: rgba(255,255,255,0.7); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sc-settings-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 6px;
}
.sc-settings-item-info { flex: 1; }
.sc-settings-item-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); }
.sc-settings-item-desc { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.sc-settings-toggle {
  width: 38px; height: 20px; border-radius: 20px;
  background: rgba(255,255,255,0.1);
  position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.sc-settings-toggle.on { background: linear-gradient(135deg,#7c3aed,#ec4899); }
.sc-settings-toggle-knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; position: absolute; top: 2px; left: 2px;
  transition: left .2s;
}
.sc-settings-toggle.on .sc-settings-toggle-knob { left: 20px; }
.sc-settings-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: #fff;
  font-size: 11px; padding: 5px 8px;
  font-family: inherit; cursor: pointer;
}

/* ============================================================
   ANALYTICS + PLAYBOOKS + STORIES
============================================================ */

/* ── Communication Analytics Dashboard ── */
.sc-analytics-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,4,15,0.99);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-analytics-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sc-analytics-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-analytics-grid {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-content: start;
}
.sc-analytics-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 16px; overflow: hidden;
}
.sc-analytics-card-title { font-size: 10px; font-weight: 900; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.sc-analytics-big { font-size: 32px; font-weight: 900; margin-bottom: 2px; }
.sc-analytics-sub { font-size: 11px; color: rgba(255,255,255,0.3); }
.sc-analytics-bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-top: 10px; }
.sc-analytics-bar { flex: 1; border-radius: 4px 4px 0 0; min-width: 8px; transition: height .3s ease; position: relative; }
.sc-analytics-bar-label { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 7px; color: rgba(255,255,255,0.2); white-space: nowrap; }
.sc-analytics-ring { width: 80px; height: 80px; border-radius: 50%; position: relative; margin: 0 auto 8px; }
.sc-analytics-ring-inner { position: absolute; inset: 10px; border-radius: 50%; background: rgba(10,8,25,0.95); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; }
.sc-analytics-list-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 11px; color: rgba(255,255,255,0.5); }
.sc-analytics-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-analytics-progress { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.06); margin-top: 4px; overflow: hidden; flex: 1; }
.sc-analytics-progress-fill { height: 100%; border-radius: 4px; }

/* ── Conversation Playbooks ── */
.sc-playbook-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-playbook-box {
  background: rgba(10,8,25,0.99); border: 1px solid rgba(52,211,153,0.3);
  border-radius: 24px; width: 520px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; padding: 0; box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-playbook-header { padding: 20px 24px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sc-playbook-title { font-size: 18px; font-weight: 900; color: #fff; }
.sc-playbook-sub { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 4px; }
.sc-playbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 24px; }
.sc-playbook-card {
  padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all .15s;
}
.sc-playbook-card:hover { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.25); }
.sc-playbook-card-emoji { font-size: 22px; margin-bottom: 6px; }
.sc-playbook-card-name { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.8); }
.sc-playbook-card-desc { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.sc-playbook-active { padding: 14px 24px; }
.sc-playbook-step { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sc-playbook-step-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(52,211,153,0.1); color: #34d399; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; flex-shrink: 0; }
.sc-playbook-step.done .sc-playbook-step-num { background: rgba(52,211,153,0.3); }
.sc-playbook-step-text { font-size: 12px; color: rgba(255,255,255,0.6); flex: 1; }
.sc-playbook-step-hint { font-size: 10px; color: rgba(52,211,153,0.5); margin-top: 2px; }
.sc-playbook-use-btn { font-size: 10px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); color: #34d399; cursor: pointer; flex-shrink: 0; }

/* ── Stories / Status Updates ── */
.sc-stories-bar { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.sc-story-bubble {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0;
}
.sc-story-ring {
  width: 48px; height: 48px; border-radius: 50%;
  padding: 2px; background: linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);
  display: flex; align-items: center; justify-content: center;
}
.sc-story-ring.seen { background: rgba(255,255,255,0.15); }
.sc-story-ring.add { background: linear-gradient(135deg,rgba(52,211,153,0.5),rgba(124,58,237,0.5)); }
.sc-story-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
  background: rgba(10,8,25,0.95); border: 2px solid rgba(10,8,25,1);
}
.sc-story-name { font-size: 9px; color: rgba(255,255,255,0.4); max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* Story viewer */
.sc-story-viewer {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .1s ease;
}
.sc-story-content {
  width: 380px; max-width: 90vw; max-height: 85vh;
  border-radius: 20px; overflow: hidden;
  position: relative;
}
.sc-story-progress { display: flex; gap: 3px; padding: 8px 10px; position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.sc-story-progress-seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.2); overflow: hidden; }
.sc-story-progress-fill { height: 100%; background: #fff; border-radius: 3px; transition: width 5s linear; }
.sc-story-card-inner {
  padding: 40px 20px 20px;
  min-height: 400px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.sc-story-header { display: flex; align-items: center; gap: 8px; position: absolute; top: 18px; left: 14px; z-index: 2; }
.sc-story-header-name { font-size: 12px; font-weight: 800; color: #fff; }
.sc-story-header-time { font-size: 10px; color: rgba(255,255,255,0.4); }
.sc-story-text { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.4; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.sc-story-mood { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 8px; }
.sc-story-reactions { display: flex; gap: 6px; margin-top: 12px; }
.sc-story-react-btn { font-size: 18px; cursor: pointer; transition: transform .15s; background: none; border: none; }
.sc-story-react-btn:hover { transform: scale(1.3); }

/* ============================================================
   PINBOARDS + INTRO ENGINE + MINI GAMES
============================================================ */

/* ── Pinboard per contact ── */
.sc-pinboard-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,4,15,0.99);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-pinboard-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sc-pinboard-title { font-size: 18px; font-weight: 900; color: #fff; flex: 1; }
.sc-pinboard-grid {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-content: start;
}
.sc-pin-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 14px; position: relative;
  transition: all .15s; cursor: default;
}
.sc-pin-card:hover { border-color: rgba(255,255,255,0.15); }
.sc-pin-type { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
.sc-pin-text { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; word-break: break-word; }
.sc-pin-time { font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 6px; }
.sc-pin-delete { position: absolute; top: 8px; right: 8px; background: none; border: none; color: rgba(255,255,255,0.15); cursor: pointer; font-size: 12px; }
.sc-pin-delete:hover { color: #f87171; }
.sc-pin-add {
  border: 2px dashed rgba(255,255,255,0.1); background: none;
  border-radius: 16px; padding: 30px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.2); font-size: 12px; transition: all .15s;
}
.sc-pin-add:hover { border-color: rgba(124,58,237,0.3); color: rgba(124,58,237,0.6); }
.sc-pin-add-icon { font-size: 24px; }

/* Pin colors by type */
.sc-pin-note { border-left: 3px solid #fbbf24; }
.sc-pin-link { border-left: 3px solid #3b82f6; }
.sc-pin-idea { border-left: 3px solid #a855f7; }
.sc-pin-task { border-left: 3px solid #34d399; }
.sc-pin-image { border-left: 3px solid #ec4899; }

/* ── Introduction Engine ── */
.sc-intro-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-intro-box {
  background: rgba(10,8,25,0.99); border: 1px solid rgba(236,72,153,0.3);
  border-radius: 24px; width: 500px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-intro-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px; transition: all .15s;
}
.sc-intro-card:hover { border-color: rgba(236,72,153,0.3); }
.sc-intro-avatars { display: flex; align-items: center; flex-shrink: 0; }
.sc-intro-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
  border: 2px solid rgba(10,8,25,1);
}
.sc-intro-avatar-sm:nth-child(2) { margin-left: -10px; }
.sc-intro-reason { flex: 1; font-size: 11px; color: rgba(255,255,255,0.5); }
.sc-intro-reason strong { color: rgba(255,255,255,0.8); }
.sc-intro-btn {
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(236,72,153,0.3); background: rgba(236,72,153,0.08);
  color: #ec4899; font-size: 10px; font-weight: 800; cursor: pointer;
  flex-shrink: 0;
}

/* ── Mini Games ── */
.sc-games-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-games-box {
  background: rgba(10,8,25,0.99); border: 1px solid rgba(52,211,153,0.3);
  border-radius: 24px; width: 440px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-game-card {
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px; cursor: pointer; transition: all .15s;
}
.sc-game-card:hover { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.25); }
.sc-game-emoji { font-size: 28px; margin-bottom: 6px; }
.sc-game-name { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.8); }
.sc-game-desc { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }
.sc-game-area { padding: 14px; }
.sc-game-question { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 14px; text-align: center; }
.sc-game-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-game-option {
  padding: 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.7);
  font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: center; transition: all .15s;
}
.sc-game-option:hover { border-color: rgba(52,211,153,0.3); }
.sc-game-option.correct { background: rgba(52,211,153,0.15); border-color: #34d399; color: #34d399; }
.sc-game-option.wrong { background: rgba(239,68,68,0.1); border-color: #f87171; color: #f87171; }
.sc-game-score { text-align: center; font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 10px; }

/* ============================================================
   FILE SHARING + BROADCAST + INTEGRATIONS
============================================================ */

/* ── File sharing ── */
.sc-file-msg { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(255,255,255,0.04); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); margin: 4px 0; }
.sc-file-icon { font-size: 28px; flex-shrink: 0; }
.sc-file-info { flex: 1; min-width: 0; }
.sc-file-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-file-size { font-size: 10px; color: rgba(255,255,255,0.3); }
.sc-file-download { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); color: #34d399; font-size: 10px; font-weight: 800; cursor: pointer; }

/* ── Broadcast Messages ── */
.sc-broadcast-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  animation: scFadeIn .15s ease;
}
.sc-broadcast-box {
  background: rgba(10,8,25,0.99); border: 1px solid rgba(251,191,36,0.3);
  border-radius: 24px; width: 480px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.sc-broadcast-contact {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 10px; cursor: pointer; transition: background .15s;
}
.sc-broadcast-contact:hover { background: rgba(255,255,255,0.04); }
.sc-broadcast-contact.selected { background: rgba(52,211,153,0.08); }

/* ── Integrations Dashboard ── */
.sc-integrations-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(5,4,15,0.99);
  display: flex; flex-direction: column;
  animation: scFadeIn .15s ease;
}
.sc-integrations-grid {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start;
}
.sc-integration-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 18px; overflow: hidden;
}
.sc-integration-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sc-integration-logo { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sc-integration-name { font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.8); }
.sc-integration-status { font-size: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 800; }
.sc-integration-status.connected { background: rgba(52,211,153,0.1); color: #34d399; }
.sc-integration-status.available { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); }
.sc-integration-detail { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.sc-integration-connect {
  width: 100%; padding: 8px; border-radius: 10px;
  border: 1px solid rgba(124,58,237,0.3); background: rgba(124,58,237,0.08);
  color: #a855f7; font-size: 11px; font-weight: 800; cursor: pointer; margin-top: 10px;
}
.sc-integration-connect.active { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); color: #34d399; }

/* ============================================================
   REPLAY + MIRROR + PERSONAS + MOMENTUM + CONTRACTS
============================================================ */

/* ── Conversation Replay ── */
.sc-replay-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-replay-controls { display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0 }
.sc-replay-btn { width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center }
.sc-replay-btn:hover { background:rgba(124,58,237,0.15);border-color:rgba(124,58,237,0.3) }
.sc-replay-progress { flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,0.06);position:relative;cursor:pointer }
.sc-replay-progress-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#ec4899);transition:width .3s }
.sc-replay-time { font-size:10px;color:rgba(255,255,255,0.3);min-width:40px }
.sc-replay-msgs { flex:1;overflow-y:auto;padding:20px 40px;max-width:700px;margin:0 auto;width:100% }
.sc-replay-msg { opacity:0;transform:translateY(10px);transition:all .3s ease;margin-bottom:8px }
.sc-replay-msg.visible { opacity:1;transform:translateY(0) }
.sc-replay-marker { text-align:center;padding:8px;font-size:10px;font-weight:800;color:rgba(124,58,237,0.6);margin:12px 0 }

/* ── Mirror Mode ── */
.sc-mirror-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-mirror-box { background:rgba(10,8,25,0.99);border:1px solid rgba(168,85,247,0.3);border-radius:24px;width:500px;max-width:95vw;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,0.7) }
.sc-mirror-trait { display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);margin-bottom:6px }
.sc-mirror-trait-label { font-size:12px;font-weight:700;color:rgba(255,255,255,0.7);flex:1 }
.sc-mirror-trait-bar { width:100px;height:6px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden }
.sc-mirror-trait-fill { height:100%;border-radius:6px }

/* ── Personas ── */
.sc-persona-bar { display:flex;gap:6px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.04);overflow-x:auto;flex-shrink:0 }
.sc-persona-chip { padding:5px 12px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.4);font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .15s }
.sc-persona-chip.active { border-color:rgba(124,58,237,0.5);background:rgba(124,58,237,0.1);color:#c4b5fd }

/* ── Momentum Tracker ── */
.sc-momentum-badge { position:absolute;top:8px;right:60px;display:flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:900;z-index:10 }
.sc-momentum-badge.hot { background:rgba(52,211,153,0.1);color:#34d399;border:1px solid rgba(52,211,153,0.2) }
.sc-momentum-badge.warm { background:rgba(251,191,36,0.1);color:#fbbf24;border:1px solid rgba(251,191,36,0.2) }
.sc-momentum-badge.cool { background:rgba(96,165,250,0.1);color:#60a5fa;border:1px solid rgba(96,165,250,0.2) }
.sc-momentum-badge.cold { background:rgba(248,113,113,0.1);color:#f87171;border:1px solid rgba(248,113,113,0.2) }

/* ── Contracts ── */
.sc-contracts-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-contract-card { padding:14px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin-bottom:8px }
.sc-contract-status { display:inline-block;padding:2px 8px;border-radius:6px;font-size:9px;font-weight:900 }
.sc-contract-status.pending { background:rgba(251,191,36,0.1);color:#fbbf24 }
.sc-contract-status.completed { background:rgba(52,211,153,0.1);color:#34d399 }
.sc-contract-status.overdue { background:rgba(248,113,113,0.1);color:#f87171 }
.sc-contract-text { font-size:12px;color:rgba(255,255,255,0.7);margin:6px 0 }
.sc-contract-meta { font-size:10px;color:rgba(255,255,255,0.3);display:flex;gap:10px }

/* ============================================================
   NUDGES + HEALTH + VAULT + FLOW + PULSE
============================================================ */

/* ── Smart Nudges ── */
.sc-nudge-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-nudge-box { background:rgba(10,8,25,0.99);border:1px solid rgba(251,191,36,0.3);border-radius:24px;width:460px;max-width:95vw;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,0.7) }
.sc-nudge-card { display:flex;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);margin-bottom:8px;transition:all .15s }
.sc-nudge-card:hover { border-color:rgba(251,191,36,0.25) }
.sc-nudge-days { font-size:20px;font-weight:900;line-height:1 }
.sc-nudge-starter { font-size:11px;color:rgba(255,255,255,0.4);margin-top:4px;font-style:italic }
.sc-nudge-action { padding:5px 10px;border-radius:8px;border:1px solid rgba(251,191,36,0.3);background:rgba(251,191,36,0.08);color:#fbbf24;font-size:10px;font-weight:800;cursor:pointer;flex-shrink:0;align-self:center }

/* ── Relationship Health ── */
.sc-health-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-health-box { background:rgba(10,8,25,0.99);border:1px solid rgba(52,211,153,0.3);border-radius:24px;width:480px;max-width:95vw;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,0.7) }
.sc-health-ring { width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px }
.sc-health-ring-inner { width:90px;height:90px;border-radius:50%;background:rgba(10,8,25,1);display:flex;flex-direction:column;align-items:center;justify-content:center }
.sc-health-metric { display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,0.02);margin-bottom:4px }
.sc-health-metric-bar { flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,0.06) }
.sc-health-metric-fill { height:100%;border-radius:4px }

/* ── Message Vault ── */
.sc-vault-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-vault-card { padding:14px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin-bottom:8px;border-left:3px solid #fbbf24 }
.sc-vault-badge { display:inline-block;padding:2px 8px;border-radius:6px;font-size:9px;font-weight:900 }

/* ── Flow State ── */
.sc-flow-indicator { position:absolute;bottom:60px;right:16px;padding:5px 14px;border-radius:20px;font-size:10px;font-weight:900;z-index:10;display:flex;align-items:center;gap:6px;animation:scPulse 2s infinite }
.sc-flow-indicator.flowing { background:rgba(52,211,153,0.1);color:#34d399;border:1px solid rgba(52,211,153,0.2) }
.sc-flow-indicator.breaking { background:rgba(248,113,113,0.1);color:#f87171;border:1px solid rgba(248,113,113,0.2) }
@keyframes scPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── Network Pulse ── */
.sc-pulse-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-pulse-grid { flex:1;overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;align-content:start }
.sc-pulse-contact { display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06) }
.sc-pulse-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0 }
.sc-pulse-dot.active { background:#34d399;box-shadow:0 0 6px #34d399 }
.sc-pulse-dot.recent { background:#fbbf24 }
.sc-pulse-dot.inactive { background:rgba(255,255,255,0.15) }

/* ============================================================
   TIKTOK-KILLER: FYP + VOICE + REACTIONS + THEMES + POLLS +
   DISAPPEARING + SCHEDULE + SUMMARY + DUET + QUICK ACTIONS
============================================================ */

/* ── For You Feed ── */
.sc-fyp-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-fyp-feed { flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;max-width:550px;margin:0 auto;width:100% }
.sc-fyp-card { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:16px;position:relative; }
.sc-fyp-card:hover { border-color:rgba(124,58,237,0.3) }
.sc-fyp-tag { display:inline-block;padding:2px 8px;border-radius:6px;font-size:9px;font-weight:900;margin-right:4px }
.sc-fyp-content { font-size:14px;color:rgba(255,255,255,0.85);line-height:1.6;margin:10px 0 }
.sc-fyp-actions { display:flex;gap:12px;margin-top:8px }
.sc-fyp-action { background:none;border:none;color:rgba(255,255,255,0.3);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .15s }
.sc-fyp-action:hover { color:#ec4899 }
.sc-fyp-action.liked { color:#ec4899 }

/* ── Voice Notes ── */
.sc-voice-msg { display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(124,58,237,0.08);border-radius:14px;border:1px solid rgba(124,58,237,0.15) }
.sc-voice-play { width:28px;height:28px;border-radius:50%;border:none;background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center }
.sc-voice-wave { display:flex;align-items:center;gap:1px;height:24px;flex:1 }
.sc-voice-bar { width:3px;border-radius:2px;background:rgba(124,58,237,0.4);transition:height .1s }
.sc-voice-bar.active { background:#7c3aed }
.sc-voice-time { font-size:10px;color:rgba(255,255,255,0.3);min-width:30px }

/* ── Rich Reactions ── */
.sc-react-popup { position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px 8px;border-radius:20px;background:rgba(10,8,25,0.95);border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:50;animation:scSlideUp .15s ease }
.sc-react-emoji { font-size:20px;cursor:pointer;transition:transform .1s;padding:2px }
.sc-react-emoji:hover { transform:scale(1.3) }
.sc-msg-reactions { display:flex;gap:2px;margin-top:2px }
.sc-msg-reaction { padding:1px 6px;border-radius:10px;font-size:11px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);cursor:pointer }
@keyframes scSlideUp { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Chat Themes ── */
.sc-themes-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-themes-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px }
.sc-theme-card { border-radius:14px;height:120px;cursor:pointer;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;transition:all .15s }
.sc-theme-card:hover { transform:scale(1.03) }
.sc-theme-card.active { border-color:#7c3aed;box-shadow:0 0 20px rgba(124,58,237,0.3) }

/* ── Quick Polls ── */
.sc-poll-card { padding:12px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin:4px 0 }
.sc-poll-question { font-size:13px;font-weight:800;color:rgba(255,255,255,0.8);margin-bottom:8px }
.sc-poll-option { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);margin-bottom:4px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden }
.sc-poll-option:hover { border-color:rgba(124,58,237,0.3) }
.sc-poll-option.voted { border-color:rgba(52,211,153,0.3) }
.sc-poll-fill { position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:rgba(124,58,237,0.08);transition:width .5s }
.sc-poll-label { font-size:11px;color:rgba(255,255,255,0.7);position:relative;z-index:1;flex:1 }
.sc-poll-pct { font-size:11px;font-weight:800;color:rgba(124,58,237,0.6);position:relative;z-index:1 }

/* ── Disappearing Messages ── */
.sc-disappearing { animation:scFadeAway 1s forwards }
@keyframes scFadeAway { 0%{opacity:1;transform:scale(1)} 80%{opacity:0.3;transform:scale(0.98)} 100%{opacity:0;transform:scale(0.95);height:0;padding:0;margin:0;overflow:hidden} }

/* ── Schedule ── */
.sc-schedule-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }

/* ── AI Summary ── */
.sc-summary-card { padding:14px;border-radius:14px;background:rgba(124,58,237,0.06);border:1px solid rgba(124,58,237,0.2);margin:6px 0 }
.sc-summary-section { margin-bottom:8px }
.sc-summary-label { font-size:9px;font-weight:900;color:rgba(124,58,237,0.5);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px }
.sc-summary-text { font-size:12px;color:rgba(255,255,255,0.7);line-height:1.5 }

/* ── Duet Mode ── */
.sc-duet-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-duet-split { flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden }
.sc-duet-panel { overflow-y:auto;padding:12px;border:1px solid rgba(255,255,255,0.04) }
.sc-duet-panel-header { font-size:12px;font-weight:900;color:rgba(255,255,255,0.6);margin-bottom:8px;display:flex;align-items:center;gap:6px }

/* ── Quick Actions Toolbar ── */
.sc-quick-bar { display:flex;gap:4px;padding:4px 8px;overflow-x:auto;border-top:1px solid rgba(255,255,255,0.04);flex-shrink:0 }
.sc-quick-btn { padding:4px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.4);font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:3px }
.sc-quick-btn:hover { border-color:rgba(124,58,237,0.3);color:#c4b5fd }

/* ============================================================
   BATCH 4: MOOD BOARD + TRANSLATOR + BOOKMARKS + NOTES +
   TEMPLATES + EXPORT + AMBIENT + DEBATE + TYPING + SHIELD
============================================================ */

/* ── Mood Board ── */
.sc-mood-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-mood-grid { flex:1;overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-content:start }
.sc-mood-tile { border-radius:16px;padding:16px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;cursor:pointer;transition:transform .15s }
.sc-mood-tile:hover { transform:scale(1.02) }
.sc-mood-tile-text { font-size:13px;font-weight:700;color:#fff;line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,0.5) }
.sc-mood-tile-meta { font-size:9px;color:rgba(255,255,255,0.5);margin-top:4px }

/* ── Translator ── */
.sc-translate-bar { display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);margin-top:4px }

/* ── Bookmarks ── */
.sc-bookmarks-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-bookmark-card { display:flex;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);margin-bottom:6px;cursor:pointer;transition:all .15s }
.sc-bookmark-card:hover { border-color:rgba(251,191,36,0.3) }

/* ── Contact Notes ── */
.sc-notes-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }

/* ── Templates ── */
.sc-templates-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-template-item { padding:10px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);margin-bottom:6px;cursor:pointer;transition:all .15s }
.sc-template-item:hover { border-color:rgba(124,58,237,0.3);background:rgba(124,58,237,0.04) }

/* ── Chat Export ── */
.sc-export-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }

/* ── Ambient Sounds ── */
.sc-ambient-bar { position:absolute;top:50px;right:12px;z-index:10;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;background:rgba(10,8,25,0.95);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 24px rgba(0,0,0,0.5);animation:scFadeIn .15s ease }
.sc-ambient-btn { padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.4);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px }
.sc-ambient-btn:hover { border-color:rgba(124,58,237,0.3) }
.sc-ambient-btn.playing { border-color:rgba(52,211,153,0.3);background:rgba(52,211,153,0.06);color:#34d399 }

/* ── AI Debate ── */
.sc-debate-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-debate-msg { padding:12px;border-radius:14px;margin-bottom:8px;max-width:80% }
.sc-debate-msg.user { background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.2);margin-left:auto }
.sc-debate-msg.ai { background:rgba(236,72,153,0.1);border:1px solid rgba(236,72,153,0.2) }

/* ── Typing Insights ── */
.sc-typing-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }

/* ── Encryption Shield ── */
.sc-shield-badge { display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:8px;font-size:9px;font-weight:900;background:rgba(52,211,153,0.08);color:#34d399;border:1px solid rgba(52,211,153,0.15) }

/* ============================================================
   BATCH 5: HEATMAP + LEADERBOARD + WORDCLOUD + REMIX +
   CHALLENGES + FOLDERS + RECEIPTS + FOCUS + TIMELINE + RXDASH
============================================================ */

/* ── Sentiment Heatmap ── */
.sc-heatmap-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-heatmap-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:4px }
.sc-heatmap-cell { width:100%;aspect-ratio:1;border-radius:4px;position:relative;cursor:pointer }
.sc-heatmap-cell:hover { outline:2px solid rgba(255,255,255,0.3) }
.sc-heatmap-legend { display:flex;align-items:center;gap:10px;font-size:10px;color:rgba(255,255,255,0.3);padding:8px 20px }

/* ── Contact Leaderboard ── */
.sc-leader-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-leader-row { display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,0.02);margin-bottom:4px;transition:all .15s }
.sc-leader-row:hover { background:rgba(255,255,255,0.04) }
.sc-leader-rank { font-size:16px;font-weight:900;min-width:30px;text-align:center }

/* ── Word Cloud ── */
.sc-cloud-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-cloud-words { flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:30px;overflow:hidden }
.sc-cloud-word { cursor:pointer;transition:transform .15s;line-height:1 }
.sc-cloud-word:hover { transform:scale(1.15) }

/* ── Message Remix ── */
.sc-remix-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }

/* ── Challenges ── */
.sc-challenge-card { padding:12px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin-bottom:8px }
.sc-challenge-progress { height:6px;border-radius:6px;background:rgba(255,255,255,0.06);margin-top:6px }
.sc-challenge-fill { height:100%;border-radius:6px;background:linear-gradient(90deg,#7c3aed,#ec4899) }

/* ── Smart Folders ── */
.sc-folders-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:scFadeIn .15s ease }
.sc-folder-item { display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);margin-bottom:6px;cursor:pointer;transition:all .15s }
.sc-folder-item:hover { border-color:rgba(124,58,237,0.3) }

/* ── Read Receipts ── */
.sc-receipt { font-size:9px;margin-left:4px }
.sc-receipt.sent { color:rgba(255,255,255,0.2) }
.sc-receipt.delivered { color:rgba(59,130,246,0.5) }
.sc-receipt.read { color:#34d399 }

/* ── Focus Mode ── */
.sc-focus-active .sc-sidebar,.sc-focus-active .sc-right-panel { opacity:0.15;pointer-events:none;transition:opacity .3s }
.sc-focus-banner { position:absolute;top:50px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:12px;background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.2);color:#a855f7;font-size:10px;font-weight:900;z-index:10;display:flex;align-items:center;gap:6px }

/* ── Contact Timeline ── */
.sc-timeline-overlay { position:fixed;inset:0;z-index:9998;background:rgba(5,4,15,0.99);display:flex;flex-direction:column;animation:scFadeIn .15s ease }
.sc-timeline-row { display:flex;gap:12px;padding:0 20px;margin-bottom:16px }
.sc-timeline-dot-col { display:flex;flex-direction:column;align-items:center;width:20px }
.sc-timeline-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0 }
.sc-timeline-line { width:2px;flex:1;background:rgba(255,255,255,0.06) }

/* ============================================================
   📱 MOBILE RESPONSIVE — Added for phone/tablet support
   Tested breakpoints: ≤768px (phones), 769-1024px (tablets)
============================================================ */

/* ── Hamburger button (mobile only) ── */
.mob-menu-btn {
  display:none;
  position:fixed;top:12px;left:12px;z-index:1100;
  width:40px;height:40px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);font-size:18px;cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}

/* ── Mobile bottom navigation bar ── */
.mob-nav-bar {
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:6px 0 env(safe-area-inset-bottom, 6px);
  flex-direction:row;justify-content:space-around;align-items:center;
}
.mob-nav-item {
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--muted);
  font-family:'Outfit',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:0.3px;padding:6px 12px;cursor:pointer;
  border-radius:10px;transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.mob-nav-item .mob-icon { font-size:20px;line-height:1; }
.mob-nav-item:hover,.mob-nav-item.active { color:var(--text); }
.mob-nav-item.active .mob-icon { filter:drop-shadow(0 0 6px var(--violet)); }

/* ── Sidebar overlay backdrop ── */
.sidebar-backdrop {
  display:none;
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(2px);
}

@media screen and (max-width: 768px) {
  html, body { overflow:hidden; }

  /* Show mobile controls */
  .mob-menu-btn  { display:flex; }
  .mob-nav-bar   { display:flex; }

  /* App shell adjustments */
  .app-shell { flex-direction:column; height:100dvh; }

  /* ── Left sidebar — slide-in overlay on mobile ── */
  .left-sidebar {
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:280px !important;
    z-index:1050;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 40px rgba(0,0,0,.8);
  }
  .left-sidebar.mob-open {
    transform:translateX(0);
  }
  .sidebar-backdrop.mob-open { display:block; }

  /* ── Hide right panels on mobile ── */
  .right-panel,
  [class*="right-panel"],
  [class*="rp-"],
  .discover-panel,
  .suggested-panel { display:none !important; }

  /* ── Main content full width with bottom nav space ── */
  .main-content {
    width:100% !important;
    max-width:100vw !important;
    margin:0 !important;
    padding-bottom:72px; /* space for bottom nav */
  }

  /* ── Top nav / header adjustments ── */
  .top-nav, .topnav {
    padding-left:60px !important; /* space for hamburger */
  }

  /* ── Feed / post cards ── */
  .post-card, .feed-card, .card {
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
  }

  /* ── Chat panel mobile ── */
  .sc-shell { height:calc(100dvh - 72px) !important; }
  .sc-sidebar { width:100% !important; }
  .sc-chat-area { width:100% !important; }

  /* Show chat list OR chat view, not both */
  .sc-shell.chat-open .sc-sidebar { display:none; }
  .sc-shell:not(.chat-open) .sc-chat-area { display:none; }

  /* ── Story/reel scrollers ── */
  .stories-row, .reels-row {
    padding:12px 12px !important;
    gap:10px !important;
  }

  /* ── Compose / post input ── */
  .compose-bar, .post-compose {
    padding:10px 12px !important;
  }

  /* ── Modal / overlay scaling ── */
  .modal-box, [class*="modal"] {
    width:95vw !important;
    max-width:95vw !important;
    border-radius:16px !important;
  }

  /* ── Touch-friendly tap targets ── */
  button, .btn, [role="button"] { min-height:40px; }
  input, textarea { font-size:16px !important; } /* prevent iOS zoom */
}

/* ── Tablet (769–1024px) ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 200px; --rp-w: 220px; }

  .left-sidebar  { width:200px !important; }
  .right-panel,[class*="right-panel"] { width:220px !important; }
}

/* ── Safe area insets (iPhone notch/home bar) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .mob-nav-bar {
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }
  .main-content {
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
  }
}