:root{
  --sb-black:#0b0d10;
  --sb-black-2:#0f1217;
  --sb-silver:#c7cbd1;
  --sb-silver-2:#9aa3ad;
  --sb-white:#ffffff;
  --sb-green:#a6ff00;
  --sb-green-2:#7dff00;
  --sb-border:rgba(255,255,255,.10);
  --sb-border-2:rgba(255,255,255,.14);
  --sb-shadow: 0 10px 40px rgba(0,0,0,.35);
  --sb-radius:18px;
  --sb-radius-sm:14px;
  --sb-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sb-font);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(166,255,0,.10), transparent 55%),
              radial-gradient(1000px 500px at 90% 30%, rgba(166,255,0,.08), transparent 60%),
              linear-gradient(180deg, var(--sb-black), var(--sb-black-2));
  color:var(--sb-white);
}

/* Top bar */
.sb-topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--sb-border);
  background: rgba(10,12,15,.78);
  backdrop-filter: blur(12px);
}

.sb-brand{display:flex; align-items:center; gap:14px;}
.sb-logo{
  height:56px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  border-radius:12px;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}
.sb-brand-title{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.05;
  font-size:18px;
}

.sb-topbar-right{display:flex; align-items:center; gap:10px;}
.sb-pill{
  font-size:12px;
  padding:8px 10px;
  border:1px solid var(--sb-border);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  color:var(--sb-silver);
}

/* Buttons */
.sb-btn{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.sb-btn:active{transform: translateY(1px)}
.sb-btn-primary{
  background: linear-gradient(180deg, var(--sb-green), var(--sb-green-2));
  color:#0b0d10;
}
.sb-btn-primary:hover{filter: brightness(1.03)}

.sb-btn-ghost{
  background: rgba(255,255,255,.04);
  border:1px solid var(--sb-border);
  color: var(--sb-white);
}
.sb-btn-ghost:hover{background: rgba(255,255,255,.06); border-color: var(--sb-border-2)}

.sb-icon-btn{
  border:1px solid var(--sb-border);
  background: rgba(255,255,255,.03);
  width:38px;
  height:38px;
  border-radius:12px;
  color:var(--sb-white);
  cursor:pointer;
}
.sb-icon-btn:hover{background: rgba(255,255,255,.05)}

/* Layout */
.sb-shell{
  height: calc(100% - 73px);
  display:grid;
  grid-template-columns: 1fr 360px;
}

.sb-main{padding:16px; min-width:0;}

.sb-video-card{
  border:1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: rgba(255,255,255,.03);
  box-shadow: var(--sb-shadow);
  overflow:hidden;
}

.sb-video-frame{position:relative; width:100%;}
.sb-video{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
  display:block;
}

.sb-video-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background: rgba(0,0,0,.65);
}
.sb-overlay-card{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding:18px;
  max-width: 520px;
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}
.sb-overlay-title{font-weight:900; font-size:18px}
.sb-overlay-text{color: var(--sb-silver); margin-top:6px; line-height:1.4}
.sb-overlay-text code{color: var(--sb-green); font-weight:700}

.sb-video-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-top:1px solid var(--sb-border);
  background: rgba(255,255,255,.02);
}
.sb-meta-title{font-weight:900}
.sb-meta-sub{color: var(--sb-silver); font-size:13px; margin-top:2px}
.sb-meta-badges{display:flex; gap:8px; align-items:center}

.sb-badge{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(166,255,0,.12);
  border:1px solid rgba(166,255,0,.25);
  color: var(--sb-white);
}
.sb-badge-outline{
  background: rgba(255,255,255,.04);
  border:1px solid var(--sb-border);
  color: var(--sb-silver);
}

.sb-mobile-chat-trigger{display:none; margin-top:14px}

/* Chat panel */
.sb-chat{
  border-left:1px solid var(--sb-border);
  background: rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  min-width:0;
}

.sb-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--sb-border);
  background: rgba(0,0,0,.18);
}
.sb-chat-name{font-weight:900}
.sb-chat-sub{font-size:12px; color: var(--sb-silver); margin-top:2px}

.sb-chat-body{
  padding:14px;
  overflow:auto;
  flex:1;
}

.sb-chat-footer{
  border-top:1px solid var(--sb-border);
  padding:12px 14px;
  background: rgba(0,0,0,.12);
}
.sb-chat-hint{
  font-size:12px;
  color: var(--sb-silver);
  margin-bottom:10px;
  line-height:1.35;
}
.sb-chat-compose{display:flex; gap:10px; align-items:center}
.sb-chat-input{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:12px 12px;
  color: var(--sb-white);
  outline:none;
}
.sb-chat-input::placeholder{color: rgba(199,203,209,.65)}
.sb-chat-mini{margin-top:10px}
.sb-mini{font-size:11px; color: rgba(154,163,173,.9)}

/* =========================================================
   ✅ FIXED MESSAGE STYLES (timestamp ABOVE bubble)
   ========================================================= */

.sb-msg{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
}

/* Align sides */
.sb-msg.sb-me{ align-items:flex-end; }
.sb-msg.sb-alex{ align-items:flex-start; }

.sb-msg-meta{
  width:100%;
  max-width:86%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color: rgba(154,163,173,.90);
  padding:0 2px;
}

.sb-msg-text{
  width:100%;
  max-width:86%;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--sb-white);
  line-height:1.35;
  white-space:pre-wrap;
}

/* Bubble color differences */
.sb-msg.sb-me .sb-msg-text{
  background: rgba(166,255,0,.12);
  border-color: rgba(166,255,0,.25);
}

/* Collapsible chat */
.sb-shell.sb-chat-collapsed{
  grid-template-columns: 1fr 56px;
}
.sb-shell.sb-chat-collapsed .sb-chat{
  overflow:hidden;
}
.sb-shell.sb-chat-collapsed .sb-chat-header,
.sb-shell.sb-chat-collapsed .sb-chat-body,
.sb-shell.sb-chat-collapsed .sb-chat-footer{
  display:none;
}
.sb-shell.sb-chat-collapsed .sb-chat::before{
  content:"Chat";
  display:flex;
  height:100%;
  align-items:center;
  justify-content:center;
  color: var(--sb-silver);
  font-weight:900;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing:.3px;
}

/* Mobile */
@media (max-width: 980px){
  .sb-shell{
    height:auto;
    grid-template-columns: 1fr;
  }
  .sb-chat{
    position:fixed;
    right:16px;
    left:16px;
    top:78px;
    bottom:16px;
    border:1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    display:none;
  }
  .sb-chat.sb-chat-open{display:flex}
  .sb-mobile-chat-trigger{display:block}
  .sb-pill{display:none}
}