/* SwiftShare PRO v41 dynamic mobile scaling overrides */

:root{
  --m-gap:clamp(8px,2.2vw,14px);
  --m-pad:clamp(10px,2.8vw,18px);
  --m-radius:clamp(16px,4vw,26px);
  --m-btn-h:clamp(48px,12vw,62px);
  --m-btn-font:clamp(14px,3.9vw,18px);
  --m-small-font:clamp(11px,3vw,14px);
  --m-title-font:clamp(18px,5.4vw,24px);
  --call-controls-height:clamp(74px,18vw,102px);
}

html,
body{
  min-width:0;
  overscroll-behavior:none;
}

.peer-status-pill,
.turn-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  transition:background .22s ease, box-shadow .22s ease, transform .14s ease, color .18s ease;
}

.peer-status-pill{
  margin-left:auto;
}

.turn-status-pill{
  margin-left:8px;
}

.peer-status-pill.idle,
.turn-status-pill.unknown{
  background:rgba(148,163,184,.14);
  color:#cbd5e1;
  box-shadow:0 0 10px rgba(148,163,184,.12);
}

.peer-status-pill.selected{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  box-shadow:0 0 18px rgba(37,99,235,.28);
}

.peer-status-pill.connecting,
.turn-status-pill.warning{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
  box-shadow:0 0 18px rgba(245,158,11,.34);
  animation:swiftsharePulse 1.2s infinite ease-in-out;
}

.peer-status-pill.ready,
.turn-status-pill.ready{
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  box-shadow:0 0 18px rgba(22,163,74,.30);
}

.peer-status-pill.danger,
.turn-status-pill.danger{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
  box-shadow:0 0 18px rgba(239,68,68,.34);
}

@keyframes swiftsharePulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.03); opacity:.88; }
  100%{ transform:scale(1); opacity:1; }
}

#swiftshareTransferOverlay{
  max-width:min(720px,calc(100vw - 16px));
  margin:0 auto;
}

.swiftshare-transfer-card{
  box-sizing:border-box;
  touch-action:manipulation;
}

#callBtn{
  background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(37,99,235,.28);
  transition:transform .16s ease, box-shadow .22s ease, filter .22s ease;
}

#callBtn:hover,
#callBtn:active{
  filter:brightness(1.08);
  box-shadow:0 0 24px rgba(37,99,235,.44);
}

#audioCallBtn{
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(22,163,74,.28);
  transition:transform .16s ease, box-shadow .22s ease, filter .22s ease;
}

#audioCallBtn:hover,
#audioCallBtn:active{
  filter:brightness(1.08);
  box-shadow:0 0 24px rgba(22,163,74,.44);
}

#endCallBtn,
.call-btn.end,
.end-chat-call-btn{
  background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
  color:#fff !important;
  box-shadow:0 0 22px rgba(239,68,68,.34), 0 10px 24px rgba(0,0,0,.28);
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

#endCallBtn:hover,
#endCallBtn:active,
.call-btn.end:hover,
.call-btn.end:active,
.end-chat-call-btn:hover,
.end-chat-call-btn:active{
  filter:brightness(1.08);
  box-shadow:0 0 30px rgba(239,68,68,.48), 0 14px 28px rgba(0,0,0,.34);
}

#callBtn:active,
#audioCallBtn:active,
#endCallBtn:active,
.call-btn.end:active,
.end-chat-call-btn:active{
  transform:scale(.96);
}

#callScreen{
  position:fixed;
  inset:0;
  z-index:999990;
  background:#020617;
  display:block;
  padding:calc(clamp(8px,2.5vw,14px) + env(safe-area-inset-top)) clamp(8px,2.5vw,14px) calc(var(--call-controls-height) + env(safe-area-inset-bottom) + 18px);
  overflow:hidden;
  min-height:100svh;
  min-height:100dvh;
}

#callScreen.hidden{
  display:none !important;
}

#remoteVideo{
  width:100%;
  height:calc(100dvh - var(--call-controls-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 28px);
  min-height:0;
  object-fit:contain;
  border-radius:clamp(18px,5vw,30px);
  background:#000;
  display:block;
}

#localVideo.pip-local-video,
#localVideo{
  position:fixed;
  right:clamp(10px,3vw,18px);
  bottom:calc(var(--call-controls-height) + env(safe-area-inset-bottom) + 14px);
  width:clamp(108px,31vw,190px);
  height:clamp(82px,23vw,136px);
  object-fit:cover;
  border-radius:clamp(14px,4vw,22px);
  z-index:999995;
  background:#000;
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 14px 42px rgba(0,0,0,.55);
}

.call-controls{
  position:fixed;
  left:clamp(8px,2.4vw,18px);
  right:clamp(8px,2.4vw,18px);
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:999998;
  min-height:var(--call-controls-height);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,2vw,12px);
  align-items:stretch;
  justify-content:center;
  padding:clamp(8px,2vw,12px);
  border-radius:clamp(20px,5vw,30px);
  background:linear-gradient(180deg,rgba(15,23,42,.18),rgba(15,23,42,.86));
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 -12px 40px rgba(0,0,0,.42);
}

.call-btn{
  width:100%;
  min-width:0;
  min-height:clamp(50px,12vw,64px);
  padding:0 clamp(8px,2vw,14px);
  border-radius:clamp(16px,4vw,24px);
  font-size:clamp(17px,4.8vw,22px);
  display:grid;
  place-items:center;
  touch-action:manipulation;
}

@media (max-width:920px){
  html,
  body{
    overflow:auto !important;
    height:auto;
    min-height:100dvh;
  }

  body:has(#callScreen:not(.hidden)){
    overflow:hidden !important;
    height:100dvh;
  }

  .app-shell{
    min-height:100dvh;
    height:auto;
  }

  .layout{
    min-height:0;
    height:auto;
    flex-direction:column;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:20;
    padding:var(--m-pad);
    gap:var(--m-gap);
  }

  .brand-row{
    gap:clamp(8px,2.2vw,12px);
  }

  .brand-icon{
    font-size:clamp(26px,7vw,34px);
  }

  .brand-title{
    font-size:var(--m-title-font);
    line-height:1.05;
  }

  .brand-subtitle{
    padding-left:clamp(34px,9vw,46px);
    font-size:var(--m-small-font);
  }

  .topbar-center{
    order:3;
    width:100%;
    flex:none;
    justify-content:flex-start;
  }

  .online-indicator{
    font-size:var(--m-small-font);
    padding:clamp(7px,2vw,10px) clamp(10px,3vw,16px);
  }

  .topbar-btn{
    width:clamp(46px,12vw,58px);
    height:clamp(46px,12vw,58px);
    border-radius:clamp(16px,4vw,22px);
    font-size:clamp(22px,6vw,28px);
  }

  .sidebar{
    width:100%;
    max-height:clamp(120px,26dvh,210px) !important;
    min-height:0 !important;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .sidebar-title{
    padding:clamp(10px,2.5vw,14px) var(--m-pad) clamp(6px,1.8vw,10px);
    font-size:clamp(11px,3vw,13px);
  }

  .devices-grid{
    padding:0 var(--m-pad) var(--m-pad);
    min-height:0 !important;
  }

  .empty-devices{
    margin-top:8px !important;
    padding:14px 16px !important;
    min-height:0 !important;
    border-radius:22px !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:2px !important;
    text-align:left !important;
    align-items:center !important;
  }

  .empty-devices-icon{
    grid-row:1 / 3 !important;
    font-size:34px !important;
    margin:0 !important;
    line-height:1 !important;
  }

  .empty-devices-title{
    font-size:16px !important;
    line-height:1.12 !important;
    margin:0 !important;
    font-weight:950 !important;
  }

  .empty-devices-subtitle{
    font-size:12px !important;
    line-height:1.25 !important;
    margin:0 !important;
    opacity:.76 !important;
  }

  .device-card{
    padding:clamp(10px,2.6vw,14px);
    gap:clamp(8px,2.2vw,12px);
    border-radius:clamp(16px,4vw,22px);
  }

  .device-avatar{
    width:clamp(42px,11vw,54px);
    height:clamp(42px,11vw,54px);
    font-size:clamp(21px,5.6vw,28px);
    border-radius:clamp(14px,3.8vw,18px);
  }

  .device-title{
    font-size:clamp(14px,3.9vw,18px);
  }

  .device-meta{
    font-size:clamp(10px,2.8vw,13px);
  }

  .device-actions{
    display:flex;
    gap:clamp(6px,1.8vw,10px);
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .device-actions button,
  .device-connect-btn,
  .invite-btn{
    min-height:clamp(38px,10vw,48px);
    padding:0 clamp(9px,2.5vw,14px);
    border-radius:clamp(13px,3.5vw,17px);
    font-size:clamp(12px,3.3vw,15px);
  }

  .main-content{
    padding:var(--m-pad);
    overflow:visible;
  }

  .screen{
    height:auto;
    min-height:0;
    gap:var(--m-gap);
  }

  .chat-header{
    min-height:clamp(48px,12vw,64px);
    padding:0 clamp(14px,4vw,22px);
    border-radius:var(--m-radius);
    font-size:clamp(15px,4.3vw,20px);
    gap:10px;
  }

  .peer-status-pill,
  .turn-status-pill{
    min-height:30px;
    padding:0 10px;
    font-size:clamp(10px,2.8vw,12px);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .peer-status-pill{
    max-width:42vw;
  }

  .turn-status-pill{
    max-width:31vw;
    margin-left:4px;
  }

  .chat-messages{
    min-height:clamp(190px,34dvh,330px);
    max-height:clamp(230px,42dvh,420px);
    border-radius:var(--m-radius);
    padding:clamp(10px,2.8vw,16px);
  }

  .msg{
    max-width:88%;
    padding:clamp(10px,2.8vw,14px) clamp(12px,3.3vw,18px);
    border-radius:clamp(16px,4vw,22px);
    font-size:clamp(14px,3.7vw,17px);
  }

  .transfer-progress{
    max-height:clamp(110px,24dvh,240px);
    min-height:0;
    overflow:auto;
  }

  .chat-input-row{
    gap:clamp(7px,2vw,12px);
  }

  .chat-input{
    height:var(--m-btn-h);
    font-size:clamp(15px,4vw,18px);
    padding:0 clamp(12px,3vw,18px);
    border-radius:var(--m-radius);
    min-width:0;
  }

  .send-btn{
    width:clamp(78px,21vw,118px);
    min-width:clamp(78px,21vw,118px);
    font-size:clamp(17px,4.5vw,22px);
    border-radius:var(--m-radius);
  }

  .chat-actions-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(8px,2.2vw,12px);
    align-items:stretch;
  }

  .action-btn{
    width:100%;
    min-width:0;
    min-height:var(--m-btn-h);
    padding:0 clamp(10px,2.8vw,16px);
    border-radius:var(--m-radius);
    font-size:var(--m-btn-font);
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .encrypt-toggle{
    grid-column:1 / -1;
    width:100%;
    margin-left:0;
    min-height:clamp(42px,10vw,54px);
    font-size:clamp(13px,3.5vw,16px);
  }

  #swiftshareTransferOverlay{
    left:clamp(8px,2vw,14px) !important;
    right:clamp(8px,2vw,14px) !important;
    bottom:calc(clamp(8px,2vw,14px) + env(safe-area-inset-bottom)) !important;
    max-height:clamp(190px,44dvh,420px) !important;
  }

  .swiftshare-transfer-card{
    border-radius:clamp(16px,4vw,22px) !important;
    padding:clamp(12px,3.2vw,18px) !important;
    font-size:clamp(13px,3.5vw,16px) !important;
  }

  .incoming-call-card{
    min-height:calc(100dvh - 28px);
  }
}

@media (max-width:420px){
  .empty-devices{
    padding:12px 14px !important;
    border-radius:20px !important;
  }

  .empty-devices-icon{
    font-size:30px !important;
  }

  .empty-devices-title{
    font-size:15px !important;
  }

  .empty-devices-subtitle{
    font-size:11px !important;
  }

  .chat-actions-row{
    grid-template-columns:1fr 1fr;
  }

  .action-btn{
    min-height:clamp(50px,13vw,58px);
    font-size:clamp(14px,4.2vw,17px);
  }

  .call-controls{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .call-btn{
    min-height:clamp(48px,13vw,58px);
    font-size:clamp(16px,5vw,20px);
  }

  #localVideo.pip-local-video,
  #localVideo{
    width:clamp(102px,32vw,130px);
    height:clamp(76px,24vw,98px);
  }
}

@media (max-width:360px){
  .chat-actions-row{
    grid-template-columns:1fr;
  }

  .action-btn,
  .send-btn,
  .chat-input{
    min-height:48px;
  }

  .call-controls{
    gap:6px;
  }
}