/* ============================================================
   DHURTA SYNC — style.css
   Premium Dark Design System · Inter · Ambient Light · Radar
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surface palette */
  --bg:         #09090b;
  --surface:    #18181b;
  --card:       #1c1c1f;
  --card-hover: #232327;
  --border:     rgba(255,255,255,.07);
  --border-hi:  rgba(255,255,255,.14);

  /* Brand accent — indigo */
  --accent:     #818cf8;
  --accent-dim: rgba(129,140,248,.12);
  --accent-glow:rgba(129,140,248,.22);

  /* Secondary — teal */
  --teal:       #2dd4bf;
  --teal-dim:   rgba(45,212,191,.12);

  /* Semantic */
  --success:    #34d399;
  --danger:     #fb7185;
  --warning:    #fbbf24;

  /* Text */
  --t1: #f4f4f5;
  --t2: #a1a1aa;
  --t3: #52525b;

  /* Dimensions */
  --nav-h:  52px;
  --tabs-h: 48px;
  --dock-h: 72px;
  --radius: 14px;
  --radius-sm: 8px;
}

/* ── Base ── */
html, body {
  height: 100%; overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--t1);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════
   AMBIENT POINT LIGHT
══════════════════════════════════════════════════ */
.ambient-light {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 30%),
    rgba(129,140,248,.06) 0%,
    transparent 60%
  );
  transition: background 0.1s linear;
}

/* ══════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse-soft {
  0%,100% { opacity:.6; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.04); }
}
@keyframes ripple {
  0%   { transform:scale(.9); opacity:.8; }
  100% { transform:scale(2.6); opacity:0; }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes bubbleIn {
  0%   { opacity:0; transform:scale(.88) translateY(4px); }
  70%  { transform:scale(1.02) translateY(-1px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes orb-enter {
  from { opacity:0; transform:translate(-50%,-50%) scale(.6); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes dot-bounce {
  0%,80%,100% { transform:scale(0); }
  40%          { transform:scale(1); }
}
@keyframes done-pop {
  0%  { transform:scale(1); }
  40% { transform:scale(1.07); }
  100%{ transform:scale(1); }
}

/* ══════════════════════════════════════════════════
   TOP NAVIGATION
══════════════════════════════════════════════════ */
.top-nav {
  position: relative; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(9,9,11,.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  flex-shrink: 0;
}

/* Brand */
.nav-brand { display:flex; align-items:center; gap:7px; text-decoration:none; }
.brand-icon { width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.brand-name { font-size:15px; font-weight:700; color:var(--t1); letter-spacing:-.3px; }
.brand-tag  { font-size:10px; font-weight:600; color:var(--t3); letter-spacing:.5px; text-transform:uppercase; margin-top:1px; }

/* Mode pill toggle */
.mode-pill {
  display:flex; gap:0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.mode-pill-btn {
  display:flex; align-items:center; gap:6px;
  border:none; background:none; cursor:pointer;
  color:var(--t3); font-size:12px; font-weight:500;
  padding:5px 12px; border-radius:7px;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.mode-pill-btn.active {
  background: rgba(129,140,248,.15);
  color: var(--accent);
}
.mode-pill-btn:hover:not(.active) { color:var(--t2); background:rgba(255,255,255,.04); }

/* Nav end */
.nav-end { display:flex; align-items:center; gap:8px; }

.status-chip {
  display:flex; align-items:center; gap:6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 11px;
  font-size:11px; font-weight:500; color:var(--t3);
  cursor:pointer; transition:border-color .2s, color .2s;
  white-space:nowrap;
}
.status-chip:hover { border-color:var(--border-hi); color:var(--t2); }
.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--t3); flex-shrink:0;
  transition:background .4s;
}
.status-dot.online  { background:var(--success); box-shadow:0 0 6px var(--success); }
.status-dot.warn    { background:var(--warning); }
.status-dot.error   { background:var(--danger); }

.room-chip {
  display:flex; align-items:center; gap:5px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  border-radius: 20px; padding: 5px 11px;
  font-size:11px; font-weight:700; color:var(--accent);
  cursor:pointer; letter-spacing:.5px;
  transition:background .2s;
}
.room-chip:hover { background:rgba(129,140,248,.18); }

.nav-avatar-btn {
  background:none; border:none; cursor:pointer; padding:0;
  border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .2s;
}
.nav-avatar-btn canvas { display:block; border-radius:50%; }
.nav-avatar-btn:hover { transform:scale(1.08); box-shadow:0 0 0 2px var(--accent-glow); }

/* ══════════════════════════════════════════════════
   MODE PANELS
══════════════════════════════════════════════════ */
.mode-panel {
  display:flex; flex-direction:column;
  height: calc(100dvh - var(--nav-h));
  position:relative; z-index:1;
  animation: fadeUp .22s ease-out;
}
.mode-panel.hidden { display:none !important; }

/* ══════════════════════════════════════════════════
   TRANSFER MODE — RADAR
══════════════════════════════════════════════════ */
.radar-stage {
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:0;
}

.radar-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

/* Self (center) device orb */
.device-orb {
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.self-orb {
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
}
.orb-glow {
  position:absolute; inset:-16px; border-radius:50%;
  background: radial-gradient(circle, rgba(129,140,248,.2) 0%, transparent 70%);
  pointer-events:none;
}
.orb-avatar {
  border-radius:50%;
  border: 2px solid rgba(129,140,248,.4);
  box-shadow: 0 0 24px rgba(129,140,248,.3), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: box-shadow .3s;
  position:relative; z-index:2;
}
.orb-label {
  font-size:11px; font-weight:600; color:var(--t2);
  white-space:nowrap; position:relative; z-index:2;
  background:rgba(9,9,11,.7); padding:2px 8px; border-radius:20px;
}

/* Peer orbs */
.peers-layer {
  position:absolute; inset:0; pointer-events:none;
}

.peer-orb {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; pointer-events:all;
  animation: orb-enter .35s cubic-bezier(.34,1.56,.64,1);
}
.peer-orb canvas {
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.peer-orb:hover canvas {
  border-color: rgba(129,140,248,.5);
  box-shadow: 0 0 20px rgba(129,140,248,.3);
  transform: scale(1.08);
}
.peer-orb.selected canvas {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(129,140,248,.45);
}
.peer-orb .orb-label { font-size:10px; color:var(--t2); }

/* DC connected indicator on peer orb */
.peer-orb.connected .orb-label { color:var(--success); }

/* Radar hint text */
.radar-hint {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--t3);
  background:rgba(9,9,11,.6); border: 1px solid var(--border);
  padding:6px 14px; border-radius:20px;
  pointer-events:none;
  animation: pulse-soft 2.4s ease-in-out infinite;
}

/* Incoming beam strip */
.beam-strip {
  display:flex; gap:10px; padding:0 20px;
  overflow-x:auto; flex-shrink:0;
  max-height:0; transition:max-height .3s;
  scrollbar-width:none;
}
.beam-strip:not(:empty) { max-height:120px; padding:10px 20px; }

.beam-card {
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px 14px;
  min-width:240px; flex-shrink:0;
  animation: bubbleIn .25s ease-out;
}
.beam-card-icon {
  width:38px; height:38px; border-radius:9px;
  background:var(--accent-dim); display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
}
.beam-card-meta { flex:1; min-width:0; }
.beam-card-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beam-card-size { font-size:10px; color:var(--t3); margin-top:2px; }
.beam-card-bar  { height:2px; background:rgba(255,255,255,.08); border-radius:1px; margin-top:6px; overflow:hidden; }
.beam-card-fill { height:100%; background:var(--accent); border-radius:1px; transition:width .1s; }
.beam-dl-btn {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent-glow); border-radius:7px;
  padding:5px 10px; font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:background .2s;
}
.beam-dl-btn:hover { background:rgba(129,140,248,.22); }
.beam-dl-btn:disabled { opacity:.4; cursor:default; }

/* Connection dock */
.connect-dock {
  flex-shrink:0; padding:0 20px 20px;
  /* Adds safe-area inset on notched phones */
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.dock-row {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:10px 14px;
  flex-wrap:wrap;
}

.dock-btn {
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--border);
  border-radius:9px; padding:8px 14px;
  color:var(--t2); font-size:12px; font-weight:500;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.dock-btn:hover { background:rgba(255,255,255,.06); border-color:var(--border-hi); color:var(--t1); }
.dock-btn:active { transform:scale(.96); }

.dock-divider { font-size:11px; color:var(--t3); padding:0 4px; }

.dock-pin-wrap { display:flex; align-items:center; gap:0; }
.dock-pin-input {
  background:var(--surface); border:1px solid var(--border);
  border-right:none; border-radius:9px 0 0 9px;
  padding:8px 12px; color:var(--t1);
  font-size:16px; font-weight:700; letter-spacing:5px; text-align:center;
  width:92px; outline:none;
  transition:border-color .2s;
}
.dock-pin-input::placeholder { font-size:11px; letter-spacing:0; color:var(--t3); font-weight:400; }
.dock-pin-input:focus { border-color:var(--accent); }
.dock-pin-go {
  background:var(--accent); color:#fff; border:none;
  border-radius:0 9px 9px 0; padding:8px 13px; cursor:pointer;
  display:flex; align-items:center;
  transition:opacity .2s;
}
.dock-pin-go:hover { opacity:.85; }

/* ══════════════════════════════════════════════════
   CHAT MODE
══════════════════════════════════════════════════ */
.mobile-tabs {
  display:none;
  height:var(--tabs-h); background:rgba(24,24,27,.96);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  backdrop-filter: blur(12px);
}
.mtab {
  flex:1; border:none; background:none; color:var(--t3);
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-size:10px; font-weight:600; letter-spacing:.4px;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.mtab.active { color:var(--accent); border-bottom-color:var(--accent); }
.mtab:hover:not(.active) { color:var(--t2); }

.chat-workspace {
  display:flex; flex:1; overflow:hidden; min-height:0;
}

/* ── Sidebar ── */
.chat-sidebar {
  width:280px; flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}
.sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sh-title { font-size:13px; font-weight:600; color:var(--t1); }
.sh-count {
  font-size:10px; font-weight:700; padding:2px 8px;
  background:var(--accent-dim); color:var(--accent);
  border-radius:20px;
}

.peer-list { flex:1; overflow-y:auto; padding:6px 0; }
.peer-list::-webkit-scrollbar { width:3px; }
.peer-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.peer-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; cursor:pointer;
  border-left:2px solid transparent;
  transition:background .15s, border-color .15s;
}
.peer-item:hover { background:var(--card-hover); }
.peer-item.selected { background:var(--card); border-left-color:var(--accent); }
.peer-item.you { border-left-color:rgba(45,212,191,.5); }

.pi-avatar { position:relative; flex-shrink:0; }
.pi-avatar canvas { border-radius:50%; display:block; }
.pi-dot {
  position:absolute; bottom:0; right:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--success); border:2px solid var(--surface);
  box-shadow:0 0 5px var(--success);
}
.pi-dot.away { background:var(--t3); box-shadow:none; }

.pi-info { flex:1; min-width:0; }
.pi-name {
  font-size:13px; font-weight:600; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pi-sub { font-size:10px; color:var(--t3); margin-top:2px; }
.pi-you { font-size:10px; color:var(--teal); font-weight:600; }

.sidebar-foot {
  padding:12px 14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
  flex-shrink:0;
}
.room-row { display:flex; gap:6px; }
.room-pin-mini {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; color:var(--t1);
  font-size:14px; font-weight:700; letter-spacing:4px; text-align:center; outline:none;
  transition:border-color .2s;
}
.room-pin-mini::placeholder { font-size:11px; letter-spacing:0; color:var(--t3); font-weight:400; }
.room-pin-mini:focus { border-color:var(--accent); }
.sf-join {
  background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:7px 14px; cursor:pointer;
  font-size:12px; font-weight:600;
  transition:opacity .2s;
}
.sf-join:hover { opacity:.85; }
.sf-profile {
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--border);
  border-radius:8px; padding:7px 12px; cursor:pointer;
  color:var(--t2); font-size:12px; font-weight:500;
  transition:background .15s, color .15s;
}
.sf-profile:hover { background:var(--card-hover); color:var(--t1); }

/* ── Chat Main ── */
.chat-main {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; background:var(--bg);
  position:relative;
}

/* Video dock */
.video-dock {
  display:none; flex-direction:column; background:#000;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.video-dock.active { display:flex; }
.video-wrap {
  position:relative; aspect-ratio:16/9; max-height:42vh;
  background:#080808; overflow:hidden;
}
#vid-remote { width:100%; height:100%; object-fit:cover; display:block; }
.vid-pip {
  position:absolute; bottom:10px; right:10px;
  width:22%; aspect-ratio:16/9; border-radius:8px;
  object-fit:cover; border:2px solid var(--accent);
  background:#080808; transition:transform .2s;
}
.vid-pip:hover { transform:scale(1.06); }
.cursor-ptr {
  position:absolute; width:18px; height:18px;
  background:rgba(129,140,248,.9); border-radius:50%;
  pointer-events:none; display:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(129,140,248,.6);
  transition:left .06s linear, top .06s linear;
}
.call-bar {
  display:flex; gap:10px; padding:10px 16px; justify-content:center;
  background:rgba(24,24,27,.9); backdrop-filter:blur(10px);
}
.call-ctrl {
  width:40px; height:40px; border-radius:50%;
  border:none; background:var(--card); color:var(--t1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, transform .15s;
}
.call-ctrl:hover { background:var(--card-hover); transform:scale(1.1); }
.call-ctrl.active { background:var(--accent-dim); color:var(--accent); }
.call-end { background:rgba(251,113,133,.15) !important; color:var(--danger) !important; }
.call-end:hover { background:rgba(251,113,133,.25) !important; }

/* Message stream */
.msg-stream {
  flex:1; overflow-y:auto; padding:16px 6%;
  display:flex; flex-direction:column; gap:2px;
  position:relative;
}
.msg-stream::-webkit-scrollbar { width:3px; }
.msg-stream::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Empty state */
.chat-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; text-align:center; padding:40px 24px; gap:12px;
}
.empty-icon { color:var(--t3); opacity:.6; }
.chat-empty h3 { font-size:17px; font-weight:600; color:var(--t2); }
.chat-empty p { font-size:13px; color:var(--t3); max-width:300px; line-height:1.6; }

/* Message rows */
.msg-row { display:flex; margin-bottom:1px; animation:bubbleIn .2s ease-out; }
.msg-row.out { justify-content:flex-end; }
.msg-row.in  { justify-content:flex-start; }

.bubble {
  max-width:66%; border-radius:12px;
  padding:8px 12px 5px; word-break:break-word; line-height:1.5;
  position:relative;
}
.msg-row.out .bubble {
  background:rgba(129,140,248,.18);
  border:1px solid rgba(129,140,248,.2);
  border-top-right-radius:3px;
}
.msg-row.in .bubble {
  background:var(--card);
  border:1px solid var(--border);
  border-top-left-radius:3px;
}
.bubble:hover { filter:brightness(1.04); }

.bubble-sender { font-size:11px; font-weight:700; margin-bottom:3px; }
.bubble-text   { font-size:13.5px; color:var(--t1); }
.bubble-meta   { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; }
.bubble-time   { font-size:10px; color:var(--t3); }
.bubble-ticks  { font-size:11px; color:var(--teal); }

/* Clipboard card in chat */
.clip-card {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:10px; padding:10px 12px;
  max-width:66%; animation:bubbleIn .2s ease-out;
}
.clip-preview {
  font-size:11px; color:var(--t3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
.clip-paste {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent-glow); border-radius:6px;
  padding:4px 10px; font-size:11px; font-weight:600; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:background .15s;
}
.clip-paste:hover { background:rgba(129,140,248,.22); }

/* Typing indicator */
.typing-indicator {
  display:flex; align-items:center; gap:4px;
  padding:10px 14px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; border-top-left-radius:3px;
  width:fit-content; animation:bubbleIn .2s ease-out;
}
.typing-dot {
  width:5px; height:5px; border-radius:50%; background:var(--t3);
  animation:dot-bounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }

/* File card in chat */
.file-card {
  background:rgba(0,0,0,.2); border:1px solid var(--border-hi);
  border-radius:10px; padding:10px 12px;
  min-width:230px; max-width:300px; position:relative; overflow:hidden;
}
.file-card.receiving::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(129,140,248,.06) 50%,transparent 100%);
  background-size:200% 100%; animation:shimmer 1.5s linear infinite;
}
.file-card-inner { display:flex; align-items:center; gap:10px; }
.file-icon-wrap { position:relative; flex-shrink:0; }
.file-icon {
  width:40px; height:40px; background:var(--accent-dim);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
  transition:transform .2s;
}
.file-card:hover .file-icon { transform:scale(1.06); }

/* SVG progress ring around file icon */
.file-ring { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); pointer-events:none; }
.file-ring circle.track { fill:none; stroke:rgba(255,255,255,.06); stroke-width:2.5; }
.file-ring circle.fill  {
  fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  transition:stroke-dashoffset .12s linear;
}

.file-meta { flex:1; min-width:0; }
.file-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-size { font-size:10px; color:var(--t3); margin-top:2px; }
.file-speed { font-size:10px; color:var(--accent); font-variant-numeric:tabular-nums; }

.file-progress { height:2px; background:rgba(255,255,255,.08); border-radius:1px; margin-top:7px; overflow:hidden; }
.file-progress-bar { height:100%; background:var(--accent); border-radius:1px; transition:width .1s; box-shadow:0 0 4px rgba(129,140,248,.5); }

.btn-dl {
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent-glow); border-radius:7px;
  padding:6px 12px; cursor:pointer;
  font-size:11px; font-weight:600; margin-top:8px; width:100%;
  transition:background .15s, transform .12s;
}
.btn-dl:hover:not(:disabled) { background:rgba(129,140,248,.22); transform:scale(1.02); }
.btn-dl:disabled { opacity:.4; cursor:default; }
.btn-dl.done { animation:done-pop .4s ease-out; }

/* Transfer tray */
.transfer-tray {
  display:none; position:absolute; bottom:68px; right:14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; width:280px; max-height:200px; overflow-y:auto;
  z-index:40; box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:fadeUp .2s ease-out;
}
.transfer-tray.visible { display:block; }
.tray-label {
  display:flex; align-items:center; gap:6px;
  padding:9px 14px; font-size:11px; font-weight:600; color:var(--t3);
  border-bottom:1px solid var(--border);
}
.transfer-item { padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.03); }
.ti-name { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ti-bar  { height:2px; background:rgba(255,255,255,.07); border-radius:1px; margin-top:5px; overflow:hidden; }
.ti-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--teal)); transition:width .1s; }
.ti-meta { display:flex; justify-content:space-between; margin-top:3px; font-size:10px; color:var(--t3); font-variant-numeric:tabular-nums; }

/* Input bar */
.input-bar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  background:rgba(24,24,27,.9);
  border-top:1px solid var(--border);
  backdrop-filter:blur(12px);
  flex-shrink:0;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.input-action {
  background:none; border:none; cursor:pointer; color:var(--t3);
  padding:8px; border-radius:9px; display:flex;
  transition:color .2s, background .2s;
}
.input-action:hover { color:var(--accent); background:var(--accent-dim); }
.msg-field {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:9px 14px; color:var(--t1);
  font-size:14px; outline:none; font-family:inherit;
  transition:border-color .2s;
  caret-color:var(--accent);
}
.msg-field:focus { border-color:var(--accent); }
.msg-field::placeholder { color:var(--t3); }
.send-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); border:none; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:opacity .2s, transform .15s;
}
.send-btn:hover { opacity:.87; transform:scale(1.07); }
.send-btn:active { transform:scale(.94); }

/* ── Calls panel ── */
.calls-panel {
  width:260px; flex-shrink:0;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
}
.call-panel-body { flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:16px; }

.call-peer-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px;
  display:flex; align-items:center; gap:12px;
}
.call-peer-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.call-peer-name { font-size:14px; font-weight:600; color:var(--t2); }
.call-peer-card.has-peer .call-peer-name { color:var(--t1); }

.call-type-grid { display:flex; flex-direction:column; gap:8px; }
.ctype-btn {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:11px; padding:13px 16px;
  cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s, border-color .15s, transform .12s;
  background:var(--card); color:var(--t1);
}
.ctype-btn:hover { transform:translateY(-2px); }
.ctype-btn:active { transform:scale(.97); }
.ctype-btn.voice  { background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.2); color:var(--success); }
.ctype-btn.voice:hover { background:rgba(52,211,153,.14); }
.ctype-btn.video  { background:rgba(129,140,248,.08); border-color:rgba(129,140,248,.2); color:var(--accent); }
.ctype-btn.video:hover { background:rgba(129,140,248,.14); }
.ctype-btn.screen { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.2); color:var(--warning); }
.ctype-btn.screen:hover { background:rgba(251,191,36,.14); }

/* ══════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════ */
.modal-back {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.65); align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.modal-back.open { display:flex; }
.modal-sheet {
  background:var(--surface); border:1px solid var(--border-hi);
  border-radius:18px; max-width:92vw; max-height:92vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  animation:bubbleIn .22s ease-out;
}
.sheet-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.sheet-head h3 { font-size:15px; font-weight:700; color:var(--t1); }
.sheet-x {
  background:none; border:none; cursor:pointer; color:var(--t3);
  display:flex; padding:4px; border-radius:7px;
  transition:color .2s, background .2s;
}
.sheet-x:hover { color:var(--t1); background:var(--card); }

/* QR sheet */
.qr-tabs { display:flex; gap:4px; padding:0 18px 14px; }
.qr-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border-radius:9px; border:1px solid var(--border);
  background:transparent; color:var(--t2); font-size:13px; font-weight:500;
  cursor:pointer; transition:all .18s;
}
.qr-tab:hover { background:var(--card-hover); color:var(--t1); }
.qr-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

.qr-frame {
  display:flex; align-items:center; justify-content:center;
  padding:22px; margin:0 16px 16px; border-radius:14px;
  background:#fff; box-shadow:0 4px 24px rgba(0,0,0,.2);
}
.qr-frame canvas { display:block; }
.qr-pin-row { display:flex; align-items:center; justify-content:space-between; padding:0 22px 8px; }
.qr-pin-label { font-size:11px; color:var(--t3); }
.qr-pin-val { font-size:26px; font-weight:800; color:var(--t1); letter-spacing:8px; font-variant-numeric:tabular-nums; }
.qr-url { padding:0 22px 22px; font-size:11px; color:var(--t3); word-break:break-all; }

/* QR Camera scanner */
.scan-viewport {
  position:relative; margin:0 16px 14px; border-radius:14px; overflow:hidden;
  background:#000; aspect-ratio:1; max-height:280px;
}
.scan-viewport video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame-box {
  position:absolute; inset:0; margin:auto;
  width:65%; height:65%; pointer-events:none;
}
.scan-corner {
  position:absolute; width:20px; height:20px;
  border-color:var(--accent); border-style:solid; border-width:0;
}
.scan-corner.tl { top:0; left:0; border-top-width:3px; border-left-width:3px; border-top-left-radius:4px; }
.scan-corner.tr { top:0; right:0; border-top-width:3px; border-right-width:3px; border-top-right-radius:4px; }
.scan-corner.bl { bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; border-bottom-left-radius:4px; }
.scan-corner.br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; border-bottom-right-radius:4px; }
.scan-line {
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scan-sweep 2s linear infinite;
  box-shadow:0 0 8px var(--accent);
}
@keyframes scan-sweep { 0%{top:0%} 50%{top:100%} 100%{top:0%} }
.scan-hint { font-size:12px; color:var(--t3); text-align:center; padding:0 22px 8px; }
.scan-status {
  margin:0 18px 18px; padding:8px 14px; border-radius:8px;
  background:var(--card); border:1px solid var(--border);
  font-size:12px; color:var(--t2); text-align:center;
}
.scan-status.found { border-color:var(--success); color:var(--success); }

/* ── Beam mode (ShareMe style) ── */
#panel-beam {
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(129,140,248,.08) 0%, transparent 60%), var(--bg);
}

/* Peers bar */
.beam-peers-bar {
  display:flex; align-items:center; gap:10px; padding:12px 20px 10px;
  overflow-x:auto; scrollbar-width:none; flex-shrink:0;
}
.beam-peers-bar::-webkit-scrollbar{display:none}
.bpb-hint { font-size:12px; color:var(--t3); white-space:nowrap; }
.beam-peer-chip {
  display:flex; align-items:center; gap:7px; padding:5px 12px 5px 6px;
  background:var(--card); border:1px solid var(--border); border-radius:99px;
  cursor:pointer; transition:.15s; flex-shrink:0; white-space:nowrap;
}
.beam-peer-chip:hover { border-color:var(--accent); background:var(--accent-dim); }
.beam-peer-chip.selected { border-color:var(--accent); background:var(--accent-dim); }
.beam-peer-chip canvas { border-radius:50%; }
.bpc-name { font-size:12px; font-weight:500; color:var(--t1); }
.bpc-dot { width:6px; height:6px; border-radius:50%; background:var(--success); margin-left:2px; }

/* Central send orb */
.beam-center {
  flex:1; display:flex; align-items:center; justify-content:center; position:relative;
}
.beam-send-orb {
  position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:180px; height:180px; border-radius:50%;
}
.bso-rings { position:absolute; inset:0; border-radius:50%; }
.bso-ring {
  position:absolute; border-radius:50%; border:1.5px solid var(--accent);
  animation: beam-pulse 2.4s ease-out infinite;
}
.r1 { inset:0;       animation-delay:0s;    opacity:.35; }
.r2 { inset:-18px;   animation-delay:.6s;   opacity:.2; }
.r3 { inset:-36px;   animation-delay:1.2s;  opacity:.1; }
@keyframes beam-pulse {
  0%   { transform:scale(1);   opacity:.35; }
  60%  { transform:scale(1.1); opacity:.1; }
  100% { transform:scale(1.2); opacity:0; }
}
.bso-core {
  position:relative; z-index:1;
  width:130px; height:130px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 0 40px rgba(129,140,248,.45), 0 0 80px rgba(129,140,248,.2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#fff; transition:transform .18s, box-shadow .18s;
}
.beam-send-orb:hover .bso-core { transform:scale(1.06); box-shadow:0 0 60px rgba(129,140,248,.6),0 0 100px rgba(129,140,248,.25); }
.beam-send-orb:active .bso-core { transform:scale(.97); }
.bso-label { font-size:14px; font-weight:600; letter-spacing:.04em; }

/* Progress ring overlay */
.beam-progress-ring {
  position:absolute; width:200px; height:200px;
  display:flex; align-items:center; justify-content:center;
}
.beam-progress-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.bpr-track { fill:none; stroke:rgba(129,140,248,.15); stroke-width:6; }
.bpr-fill  {
  fill:none; stroke:var(--accent); stroke-width:6;
  stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327;
  transition:stroke-dashoffset .3s;
}
.bpr-info { position:relative; text-align:center; }
.bpr-pct  { font-size:26px; font-weight:800; color:var(--t1); }
.bpr-spd  { font-size:11px; color:var(--t3); margin-top:2px; }

/* Received files section */
.beam-received {
  background:var(--surface); border-top:1px solid var(--border);
  max-height:220px; overflow-y:auto; flex-shrink:0;
}
.br-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 6px; position:sticky; top:0; background:var(--surface); z-index:1;
}
.br-title { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; }
.br-clear  { font-size:11px; color:var(--t3); background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:4px; }
.br-clear:hover { color:var(--danger); }
.beam-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:8px; padding:8px 14px 12px;
}
.br-empty { font-size:12px; color:var(--t3); text-align:center; padding:18px; }
.beam-grid-item {
  position:relative; border-radius:10px; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  aspect-ratio:1; cursor:pointer; transition:.15s;
}
.beam-grid-item:hover { border-color:var(--accent); transform:scale(1.04); }
.beam-grid-item img  { width:100%; height:100%; object-fit:cover; display:block; }
.beam-grid-item .bgi-icon {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--t3);
}
.beam-grid-item .bgi-name {
  position:absolute; bottom:0; left:0; right:0;
  font-size:9px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:10px 4px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
.bgi-dl {
  position:absolute; top:4px; right:4px;
  background:rgba(0,0,0,.6); border:none; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; opacity:0; transition:.15s;
}
.beam-grid-item:hover .bgi-dl { opacity:1; }

/* Beam footer */
.beam-footer {
  display:flex; align-items:center; gap:10px; padding:10px 16px 14px;
  background:var(--surface); border-top:1px solid var(--border); flex-shrink:0;
}
.beam-foot-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:8px 14px; color:var(--t2); font-size:11px; font-weight:500;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.beam-foot-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.beam-pin-row { flex:1; display:flex; gap:0; }
.beam-pin-input {
  flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px;
  color:var(--t1); font-size:22px; font-weight:800; text-align:center; padding:8px;
  letter-spacing:8px; font-variant-numeric:tabular-nums; outline:none;
}
.beam-pin-input:focus { border-color:var(--accent); }
.beam-pin-input::placeholder { letter-spacing:4px; font-size:16px; font-weight:400; color:var(--t3); }

/* Profile sheet */
.sheet-body { padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.profile-av-wrap { display:flex; justify-content:center; }
.profile-av-wrap canvas { border-radius:50%; border:2px solid var(--accent-glow); box-shadow:0 0 20px var(--accent-dim); }

.form-label { font-size:10px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; }
.form-input {
  background:var(--card); border:1px solid var(--border);
  border-radius:9px; padding:10px 14px; color:var(--t1);
  font-size:14px; outline:none; width:100%; font-family:inherit;
  transition:border-color .2s;
}
.form-input:focus { border-color:var(--accent); }

.color-grid { display:flex; flex-wrap:wrap; gap:8px; }
.av-color {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:border-color .2s, transform .15s;
}
.av-color:hover { transform:scale(1.12); }
.av-color.selected { border-color:#fff; }

.emoji-grid { display:flex; flex-wrap:wrap; gap:7px; }
.av-emoji {
  width:36px; height:36px; border-radius:9px; background:var(--card);
  border:2px solid transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; transition:border-color .2s, transform .15s;
}
.av-emoji:hover { transform:scale(1.1); }
.av-emoji.selected { border-color:var(--accent); }

.btn-primary {
  background:var(--accent); color:#fff; border:none;
  border-radius:10px; padding:12px; cursor:pointer;
  font-size:14px; font-weight:600; width:100%;
  font-family:inherit; transition:opacity .2s, transform .12s;
}
.btn-primary:hover { opacity:.87; transform:scale(1.02); }

/* ══════════════════════════════════════════════════
   INCOMING CALL BANNER
══════════════════════════════════════════════════ */
.call-banner {
  position:fixed; top:calc(var(--nav-h) + 10px); right:16px;
  background:var(--surface); border:1px solid var(--border-hi);
  border-radius:16px; padding:14px 16px;
  display:none; align-items:center; gap:12px;
  z-index:300; width:300px;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.call-banner.ringing { display:flex; animation:slideRight .3s cubic-bezier(.34,1.56,.64,1); }
.cb-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.cb-info { flex:1; }
.cb-name { font-size:14px; font-weight:700; }
.cb-type { font-size:11px; color:var(--t3); margin-top:2px; }
.cb-actions { display:flex; gap:8px; }
.cb-accept, .cb-reject {
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, opacity .2s;
}
.cb-accept { background:rgba(52,211,153,.15); color:var(--success); animation:pulse-soft 1s ease-in-out infinite; }
.cb-accept:hover { transform:scale(1.1); opacity:.85; }
.cb-reject { background:rgba(251,113,133,.15); color:var(--danger); }
.cb-reject:hover { transform:scale(1.1); opacity:.85; }

/* ══════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════ */
.lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.92); z-index:400;
  align-items:center; justify-content:center; cursor:zoom-out;
}
.lightbox.open { display:flex; }
.lightbox img { max-width:96vw; max-height:92vh; border-radius:8px; animation:bubbleIn .2s ease-out; box-shadow:0 24px 80px rgba(0,0,0,.6); }

/* ══════════════════════════════════════════════════
   DRAG OVERLAY
══════════════════════════════════════════════════ */
.drag-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(129,140,248,.06);
  border:2px dashed rgba(129,140,248,.4);
  align-items:center; justify-content:center;
}
.drag-overlay.active { display:flex; animation:fadeUp .15s ease-out; }
.drag-inner { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--accent); }
.drag-inner p { font-size:18px; font-weight:600; }

/* ══════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════ */
.toast-layer {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; align-items:center;
  z-index:600; pointer-events:none;
}
.toast-msg {
  background:var(--card); border:1px solid var(--border-hi);
  color:var(--t1); padding:9px 18px; border-radius:20px;
  font-size:12px; font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  animation:fadeUp .25s ease-out;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-tabs { display:flex; }
  .chat-sidebar, .calls-panel { display:none; width:100%; border:none; }
  .chat-sidebar.active, .calls-panel.active { display:flex; flex:1; }
  .chat-main { display:none; }
  .chat-main.active { display:flex; flex:1; }
  .bubble { max-width:84%; }
  .call-banner { top:auto; bottom:calc(var(--tabs-h) + 10px); left:16px; right:16px; width:auto; animation:fadeUp .3s ease-out; }
  .transfer-tray { width:calc(100vw - 28px); right:14px; }
  .dock-row { gap:6px; }
  .dock-btn span { display:none; }
}

@media (min-width: 769px) {
  .chat-sidebar, .chat-main, .calls-panel { display:flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}