/* One-screen workspace: keep the transfer controls and nearby devices together. */
html,body{height:100%;overflow:hidden}
body{min-height:0}
.app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0 clamp(18px,3.6vw,64px)}
.topbar{height:62px;flex:none}
main{width:min(1360px,100%);margin:0 auto;flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.hero{padding:19px 0 16px}
.hero .eyebrow{font-size:8px}
.hero h1{margin:8px 0 4px;font-size:clamp(25px,3vw,37px);line-height:1.15;letter-spacing:-1.7px}
.hero-copy{font-size:11px;line-height:1.5}
.workspace-grid{min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:clamp(14px,2vw,26px);padding-bottom:8px}
.send-card{max-width:none;min-height:0;display:flex;flex-direction:column;padding:0 17px}
.send-card-top{height:auto;min-height:43px;flex:none;gap:10px;flex-wrap:wrap;padding:7px 0}
.send-card-top .section-label{min-width:0;white-space:nowrap}
.send-card-top .limit-label{white-space:nowrap;flex:none}
.drop-area{height:auto;min-height:150px;flex:1;margin:12px 0 0}
.drop-area h2{margin:9px 0 4px;font-size:15px}
.drop-hint{margin-top:10px}
.send-footer{height:57px;flex:none}
.secure-note{font-size:8px}
.receivers-section{max-width:none;margin:0;padding:clamp(15px,2vw,24px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 9px 35px #26352909}
.receivers-section{flex:1;min-height:0;display:flex;flex-direction:column}
.receiver-heading h2{font-size:15px}
.empty-state{margin-top:11px;padding:11px 12px}
.radar{width:36px;height:36px}
.peer-grid{margin-top:10px;grid-template-columns:1fr;gap:7px;max-height:180px;overflow:auto}
.receivers-section .peer-grid{flex:1;max-height:none;align-content:start}
.receivers-section .peer-grid:has(.empty-state){display:flex;align-items:center;justify-content:center}
.peer-card{padding:8px;gap:8px}
.peer-avatar{width:31px;height:31px}
.network-foot{margin-top:auto;padding-top:10px;font-size:7px}
.side-panel{min-height:0;display:flex;flex-direction:column;gap:12px}
.activity-section{max-width:none;min-height:0;flex:0 0 min(42%,280px);margin:0;padding:clamp(15px,2vw,24px);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.activity-section .receiver-heading h2{font-size:14px}
.activity-list{flex:1;min-height:0;max-height:none;overflow:auto;margin-top:6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#54704f transparent}
.activity-row{flex:none;padding:8px 3px}
.activity-details{min-width:0}
footer{width:min(1120px,100%);flex:none;margin:0 auto;padding:9px 0 11px}
.footer-brand+span,.footer-version{font-size:7px}
.queue.has-files{max-height:105px}
.send-card:has(.queue.has-files) .drop-area{min-height:110px;flex:0 0 110px}
.send-card:has(.queue.has-files) .drop-area .upload-icon{width:32px;height:32px}
.send-card:has(.queue.has-files) .drop-area p{font-size:10px}
@media(min-width:761px) and (max-width:980px){
  .app-shell{padding-inline:20px}
  .topbar{height:58px}
  .hero{padding:16px 0 14px}
  .hero h1{font-size:clamp(28px,4vw,36px)}
  .send-card{padding-inline:14px}
  .drop-area h2{font-size:14px}
  .drop-area p{font-size:10px}
  .network-foot{font-size:7px;gap:4px}
  .activity-row{gap:8px;padding-inline:2px}
  .activity-state{min-width:52px}
}
@media(max-width:760px){
  .app-shell{padding:0 16px}
  .topbar{height:55px}
  .hero{padding:12px 0 10px}
  .hero h1{font-size:clamp(22px,6vw,30px);letter-spacing:-1.2px}
  .hero-copy{font-size:10px}
  .workspace-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,1fr) minmax(0,1fr);gap:10px;padding-bottom:5px}
  .send-card{padding:0 11px;border-radius:11px}
  .send-card-top{height:36px}
  .drop-area{min-height:92px;margin-top:8px}
  .upload-icon{width:32px;height:32px}
  .upload-icon svg{width:20px;height:20px}
  .drop-area h2{font-size:13px;margin:6px 0 3px}
  .drop-area p{font-size:9px}
  .drop-hint{display:none}
  .send-footer{height:48px}
  .secure-note{max-width:58%;font-size:7px}
  .send-footer:has(.cancel-all:not(.hidden)) .secure-note{max-width:34%}
  .send-button{height:33px}
  .side-panel{gap:7px}
  .receivers-section{padding:10px 11px}
  .empty-state{padding:8px 9px;margin-top:7px}
  .empty-state p{font-size:9px}
  .radar{width:30px;height:30px}
  .peer-grid{margin-top:6px;max-height:100px}
  .peer-card{padding:6px}
  .network-foot{margin-top:6px;font-size:6px}
  .activity-section{padding:9px 11px}
  .activity-section{flex-basis:42%;padding:9px 11px}
  .activity-list{max-height:none}
  footer{padding:6px 0 8px}
  .footer-version{display:none}
}
@media(max-height:680px){
  .topbar{height:48px}
  .hero{padding:7px 0 6px}
  .hero h1{font-size:25px;margin:4px 0 2px}
  .hero-copy{font-size:9px}
  .workspace-grid{gap:10px}
  .drop-area{min-height:95px}
  .receivers-section{padding-top:9px;padding-bottom:8px}
  .empty-state{padding:7px 9px}
  .network-foot{margin-top:6px}
  footer{padding:5px 0}
}

@media(max-width:760px){
  main{grid-template-rows:auto auto minmax(0,1fr)}
  .hero{padding:10px 0 8px}
  .hero .eyebrow{font-size:7px}
  .hero h1{font-size:clamp(21px,6vw,28px);margin:5px 0 3px}
  .hero-copy{font-size:9px}
  .app-shell .mobile-nav{height:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-items:center;margin:0 0 9px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#100c16}
  .mobile-nav button{height:38px;border:0;border-radius:8px;background:transparent;color:#a89bb3;font:600 10px var(--sans);cursor:pointer;transition:background .2s,color .2s,transform .2s}
  .mobile-nav button span{margin-right:5px;color:#c49bff;font-size:13px}
  .mobile-nav button.active{background:#2a1c38;color:#f2eaff;box-shadow:inset 0 0 0 1px #594070}
  .mobile-nav button:active{transform:scale(.97)}
  .workspace-grid{display:block;min-height:0;padding-bottom:5px}
  .workspace-grid[data-mobile-view="send"] .send-card{height:100%;display:flex;padding:0 13px}
  .workspace-grid[data-mobile-view="send"] .side-panel{display:none}
  .workspace-grid[data-mobile-view="devices"] .send-card,.workspace-grid[data-mobile-view="activity"] .send-card{display:none}
  .workspace-grid[data-mobile-view="devices"] .side-panel,.workspace-grid[data-mobile-view="activity"] .side-panel{height:100%;display:flex;min-height:0;gap:0}
  .workspace-grid[data-mobile-view="devices"] .receivers-section{display:flex;flex:1;min-height:0;padding:14px}
  .workspace-grid[data-mobile-view="devices"] .activity-section{display:none!important}
  .workspace-grid[data-mobile-view="activity"] .receivers-section{display:none!important}
  .workspace-grid[data-mobile-view="activity"] .activity-section{display:flex!important;flex:1;min-height:0;padding:13px}
  .workspace-grid[data-mobile-view="activity"] .activity-list{max-height:none}
  .workspace-grid[data-mobile-view="activity"] #activity-list:empty::before{content:"Files you send or receive will appear here.";display:grid;place-items:center;min-height:100px;color:#a99bb9;font:10px var(--sans)}
  .send-card-top{height:40px}
  .limit-label{font-size:7px}
  .drop-area{flex:1;min-height:170px;margin:10px 0}
  .send-card:has(.queue.has-files) .drop-area{flex:0 0 130px;min-height:130px}
  .queue.has-files{max-height:24%;overflow:auto}
  .send-footer{height:48px;min-height:48px;flex:none;gap:8px}
  .send-footer .send-button{margin-left:auto}
  .send-footer .cancel-all{height:34px}
  .send-footer:has(.cancel-all:not(.hidden)) .secure-note{max-width:34%}
  .network-foot{margin-top:auto;padding-top:12px;font-size:7px}
  .peer-grid{max-height:none;overflow:auto}
  .receivers-section .peer-grid{flex:1}
  .activity-row{gap:8px}
  .activity-details strong{max-width:100%;overflow-wrap:anywhere}
  .activity-state{min-width:56px}
  footer{height:28px;padding:5px 0 3px}
  .footer-brand{font-size:9px}
}