:root{--green:#22c55e;--green-dark:#16a34a;--bg:#0a0a0e;--surface:rgba(22,22,28,0.8);--border:rgba(255,255,255,0.05);--text:#e2e8f0;--dim:#64748b}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0a0a0e;color:var(--text);display:flex;justify-content:center;align-items:center;
  min-height:100vh;overscroll-behavior-x:none
}
body.dark-mode{background:#0a0a0e;color:var(--text)}
body:not(.dark-mode){background:#f0f2f5;color:#1e293b}

#main{
  width:100%;max-width:500px;height:100vh;display:flex;flex-direction:column;
  background:#0a0a0e;overflow:hidden;position:relative
}
body:not(.dark-mode) #main{background:#f0f2f5}

/* Header */
#top-bar{background:rgba(10,10,14,0.85)}
body:not(.dark-mode) #top-bar{background:rgba(255,255,255,0.8)}
#logo{height:36px;cursor:pointer;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
#logo:hover{transform:scale(1.04)}
#logo img{height:100%;width:auto}

/* Video area */
#video-area{
  flex:1;position:relative;display:flex;flex-direction:column;gap:3px;
  padding:0 10px 0;overflow:hidden
}
.vid-wrap{
  flex:1;position:relative;overflow:hidden;background:#000;border-radius:10px;
  display:flex;align-items:center;justify-content:center
}
.vplayer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#vid-self{transform:scaleX(-1)}
#vid-remote{opacity:0;transition:opacity .4s}
#vid-remote.active{opacity:1;animation:videoReveal 0.5s ease forwards}
#vid-remote.disconnecting{animation:videoDisconnect 0.5s ease-out forwards}
.wm{position:absolute;bottom:6px;left:6px;z-index:2;pointer-events:none;opacity:0.3}
.wm img{width:60px;height:auto}

/* Searching overlay */
#searching-state{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  pointer-events:none;transition:opacity .4s
}
#searching-state.hidden{opacity:0}
.spinner{position:relative;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.spinner::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),var(--accent));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 1s linear infinite}
.spinner::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));animation:spin 1.5s linear infinite reverse;opacity:.3}
.spinner .spinner-glow{position:absolute;width:100%;height:100%;border-radius:50%;box-shadow:0 0 20px var(--accent-shadow);animation:breathe 2.5s ease-in-out infinite}

/* Chat messages overlay on video */
#msg-list{
  position:absolute;bottom:8px;left:10px;right:10px;z-index:15;
  display:flex;flex-direction:column;gap:4px;pointer-events:none;
  max-height:35%;overflow-y:auto
}
#msg-list > div{pointer-events:auto}

/* Video message bubbles — capsule with top band */
.vid-message{
  position:relative;min-width:0;max-width:75%;
  padding:8px 18px 14px;border-radius:25px/50px;
  word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;
  backdrop-filter:blur(6px)
}
.vid-message::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:10px;border-radius:22px 22px 0 0;pointer-events:none
}
.vid-message.you{
  align-self:flex-end;background:white;color:#000;
  border:2px solid var(--accent)
}
.vid-message.you::before{
  background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 30%,white) 0%,var(--accent) 100%)
}
.vid-message.strange{
  align-self:flex-start;background:white;color:#000;
  border:2px solid #c25762
}
.vid-message.strange::before{
  background:linear-gradient(to bottom,color-mix(in srgb,#c25762 30%,white) 0%,#c25762 100%)
}
.vid-msg-author{
  font-weight:600;font-size:.68rem;color:#666
}

/* Input area */
#input-area{padding:8px 10px 10px;position:relative;z-index:5}
#file-preview{
  position:absolute;bottom:100%;right:12px;display:flex;align-items:center;gap:6px;
  background:rgba(16,16,20,0.85);border-radius:10px;
  padding:5px 8px;margin-bottom:6px;border:1px solid rgba(255,255,255,0.04)
}
#file-preview img{max-height:44px;border-radius:6px}
#file-preview button{position:absolute;top:-6px;right:-6px;background:rgba(0,0,0,0.7);color:#fff;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:11px}
#chat-pill{
  display:flex;align-items:center;gap:6px;
  background:rgba(18,18,22,0.85);
  border:1px solid rgba(255,255,255,0.04);border-radius:24px;
  padding:6px 8px;box-shadow:0 4px 20px rgba(0,0,0,0.3)
}
#skip-btn{
  padding:6px 14px;border-radius:20px;border:none;background:var(--accent);color:#fff;
  font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:all .25s cubic-bezier(0.34,1.56,0.64,1)
}
#skip-btn:hover{background:var(--accent-hover);transform:scale(1.04);box-shadow:0 4px 12px var(--accent-shadow)}
#skip-btn:active{transform:scale(0.95)}
#msg-input{
  flex:1;height:36px;padding:0 12px;border:none;border-radius:12px;
  background:rgba(255,255,255,0.04);color:var(--text);font-size:.85rem;
  outline:none;font-family:inherit;min-width:0;transition:background .2s,box-shadow .3s
}
#msg-input:focus{background:rgba(255,255,255,0.08);box-shadow:0 0 0 2px var(--accent-light),0 0 12px var(--accent-light)}
#msg-input::placeholder{color:var(--dim)}
.circle-btn{
  width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);
  color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s cubic-bezier(0.34,1.56,0.64,1);
  font-family:inherit
}
.circle-btn:hover{background:var(--accent-hover);transform:scale(1.08);box-shadow:0 4px 12px var(--accent-shadow)}
.circle-btn:active{transform:scale(0.9)}
body:not(.dark-mode) #chat-pill{background:rgba(255,255,255,0.75);border-color:rgba(0,0,0,0.04)}
body:not(.dark-mode) #msg-input{background:rgba(0,0,0,0.04);color:#1e293b}

/* GIF modal */
#gif-modal{
  display:none;position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  width:300px;max-height:320px;background:rgba(16,16,20,0.95);
  border-radius:14px;border:1px solid rgba(255,255,255,0.04);z-index:50;
  padding:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.5);
  animation:fadeScale 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards
}
#gif-search{width:100%;padding:8px 10px;font-size:16px;border:1px solid rgba(255,255,255,0.06);border-radius:10px;background:rgba(255,255,255,0.04);color:var(--text);outline:none;font-family:inherit;margin-bottom:8px;transition:border-color .2s,box-shadow .3s}
#gif-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
#gif-results{display:grid;grid-template-columns:1fr 1fr;gap:5px;overflow-y:auto;max-height:260px}
#gif-results img{width:100%;border-radius:6px;cursor:pointer;display:block;transition:transform .15s}
#gif-results img:hover{transform:scale(1.05)}
body:not(.dark-mode) #gif-modal{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.06)}
body:not(.dark-mode) #gif-search{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#1e293b}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeScale{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes videoReveal{0%{clip-path:circle(10% at 50% 50%)}100%{clip-path:circle(100% at 50% 50%)}}
@keyframes videoDisconnect{0%{filter:grayscale(0);opacity:1}100%{filter:grayscale(0.6);opacity:0.4}}

/* Responsive */
@media(max-width:500px){
  #main{max-width:100%}
  #top-bar{padding:8px 10px;min-height:44px}
  #logo{height:28px}
  #video-area{padding:0 6px 0}
  .vid-wrap{border-radius:8px}
  .wm img{width:50px}
  .spinner{width:40px;height:40px}
  #input-area{padding:6px 6px 8px}
  #chat-pill{padding:5px 6px;gap:4px}
  #skip-btn{padding:5px 10px;font-size:.75rem}
  #msg-input{height:32px;font-size:.78rem}
  .circle-btn{width:32px;height:32px;font-size:.7rem}
  #gif-modal{width:280px;bottom:68px}
  #msg-list{bottom:6px;left:6px;right:6px}
}