/* =========================================================================
   SK57 P2P — style.css
   Glass + neumorphic depth on a deep gradient base. Fully responsive,
   fixed-viewport layout — no scroll on the shell, no cut-off content,
   no layout shift. Only .log (message list) scrolls internally.
   ========================================================================= */

:root{
  --bg-0:#0a0e17;
  --bg-1:#0d1220;
  --panel:#121a2c;
  --panel-rgb:18,26,44;
  --glass-rgb:22,31,50;
  --stroke:rgba(255,255,255,0.07);
  --stroke-soft:rgba(255,255,255,0.045);

  --text-0:#e9edf7;
  --text-1:#aab2c8;
  --text-2:#727c95;

  --accent:#5b8cff;
  --accent-rgb:91,140,255;
  --accent-2:#8b6cff;
  --accent-soft:rgba(91,140,255,0.14);

  --live:#3ee08a;
  --live-rgb:62,224,138;
  --warn:#ffb84d;
  --danger:#ff5d7a;
  --danger-rgb:255,93,122;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  --sh-out: 8px 8px 20px rgba(0,0,0,0.35), -6px -6px 16px rgba(255,255,255,0.015);
  --sh-out-sm: 4px 4px 10px rgba(0,0,0,0.32), -3px -3px 8px rgba(255,255,255,0.012);
  --sh-in: inset 3px 3px 8px rgba(0,0,0,0.4), inset -2px -2px 6px rgba(255,255,255,0.02);
  --sh-glow: 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 6px 22px -4px rgba(var(--accent-rgb),0.4);

  --vh: 1vh;
  --topbar-h: 60px;
  --composer-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  overscroll-behavior:none;
}

body{
  margin:0;
  font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background:var(--bg-0);
  color:var(--text-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;              /* shell never scrolls */
  height:calc(var(--vh, 1vh) * 100);
  width:100vw;
  position:fixed;
  inset:0;
}

::selection{ background:rgba(var(--accent-rgb),0.35); color:#fff; }

/* scrollbar (log only) */
.log{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.14) transparent; }
.log::-webkit-scrollbar{ width:7px; }
.log::-webkit-scrollbar-track{ background:transparent; }
.log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.14); border-radius:10px; }
.log::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.22); }

button{ font-family:inherit; }
input,textarea{ font-family:inherit; }

.hidden{ display:none !important; }

/* ---------------------------------------------------------------------
   Ambient background
   --------------------------------------------------------------------- */
.bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(ellipse 140% 90% at 15% -10%, #10182c 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 100% 110%, #0e1526 0%, transparent 55%),
    var(--bg-0);
}
.bg__glow{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:0.16; will-change:transform;
}
.bg__glow--a{
  width:46vw; height:46vw; max-width:640px; max-height:640px;
  background:var(--accent); top:-14%; left:-10%;
  animation:drift1 26s ease-in-out infinite;
}
.bg__glow--b{
  width:38vw; height:38vw; max-width:520px; max-height:520px;
  background:var(--accent-2); bottom:-16%; right:-8%;
  animation:drift2 30s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4%,5%) scale(1.08); }
}
@keyframes drift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5%,-4%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .bg__glow--a,.bg__glow--b{ animation:none; }
}

/* ---------------------------------------------------------------------
   App shell — fixed height, no shift
   --------------------------------------------------------------------- */
.app{
  position:relative; z-index:1;
  height:calc(var(--vh, 1vh) * 100);
  width:100%;
  display:flex;
  flex-direction:column;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  gap:10px;
}

/* ---------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------- */
.topbar{
  flex:0 0 auto;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:0 18px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(var(--glass-rgb),0.65), rgba(var(--glass-rgb),0.42));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:var(--sh-out-sm), inset 0 1px 0 rgba(255,255,255,0.04);
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__mark{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(145deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-2-rgb, 139,108,255),0.10));
  border:1px solid rgba(var(--accent-rgb),0.3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-out-sm);
}
.brand__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--text-2);
  transition:background .25s ease, box-shadow .25s ease;
}
.brand__dot--live{
  background:var(--live);
  box-shadow:0 0 10px rgba(var(--live-rgb),0.9);
}
.brand__name{
  font-weight:800; letter-spacing:0.5px; font-size:16px; color:var(--text-0);
  white-space:nowrap;
}
.brand__accent{ color:var(--accent); margin-left:3px; font-weight:700; }

.statusline{
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:12px; color:var(--text-2); letter-spacing:0.3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.iconbtn{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:11px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  color:var(--text-1);
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--sh-out-sm);
  transition:color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.iconbtn:hover{ color:var(--text-0); }
.iconbtn:active{ transform:scale(0.94); box-shadow:var(--sh-in); }

/* ---------------------------------------------------------------------
   Body / layout
   --------------------------------------------------------------------- */
.body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  gap:10px;
}

/* ---------------------------------------------------------------------
   Rail (left panel)
   --------------------------------------------------------------------- */
.rail{
  flex:0 0 268px;
  min-height:0;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(var(--glass-rgb),0.55), rgba(var(--glass-rgb),0.32));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:var(--sh-out-sm), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
  display:flex;
}
.rail__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.rail__scroll::-webkit-scrollbar{ width:0; }

.panel{
  border-radius:var(--r-md);
  background:rgba(255,255,255,0.025);
  border:1px solid var(--stroke-soft);
  padding:12px 13px;
  flex:0 0 auto;
}
.panel--actions{ display:flex; flex-direction:column; gap:9px; }

.panel__label{
  font-size:10px; letter-spacing:1.2px; text-transform:lowercase;
  color:var(--text-2); margin-bottom:8px; font-weight:600;
}

.idrow{ display:flex; align-items:center; gap:8px; }
.idrow__id{
  flex:1 1 auto; min-width:0;
  font-size:15px; font-weight:700; letter-spacing:2px;
  color:var(--text-0);
  padding:9px 10px;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,0.22);
  box-shadow:var(--sh-in);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.chip{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:var(--r-sm);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.03);
  color:var(--text-1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--sh-out-sm);
  transition:color .15s ease, transform .12s ease, box-shadow .12s ease;
}
.chip:hover{ color:var(--accent); }
.chip:active{ transform:scale(0.92); box-shadow:var(--sh-in); }

.connstate{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--text-1);
}
.dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--text-2);
}
.dot--idle{ background:var(--text-2); }
.dot--searching{
  background:var(--warn);
  box-shadow:0 0 0 rgba(255,184,77,0.5);
  animation:pulse 1.4s ease-in-out infinite;
}
.dot--connecting{
  background:var(--accent);
  animation:pulse 1s ease-in-out infinite;
}
.dot--live{
  background:var(--live);
  box-shadow:0 0 9px rgba(var(--live-rgb),0.85);
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.55; transform:scale(0.8); }
}

.btn{
  width:100%;
  border:none; cursor:pointer;
  border-radius:var(--r-sm);
  padding:11px 14px;
  font-size:12.5px; font-weight:700; letter-spacing:0.3px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--text-0);
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow:var(--sh-out-sm);
}
.btn:active{ transform:translateY(1px) scale(0.99); }
.btn svg{ flex:0 0 auto; }

.btn--primary{
  background:linear-gradient(150deg, var(--accent), #4a72e0);
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(var(--accent-rgb),0.55), var(--sh-out-sm);
}
.btn--primary:hover{ filter:brightness(1.08); }

.btn--secondary{
  background:rgba(var(--accent-rgb),0.16);
  border:1px solid rgba(var(--accent-rgb),0.35);
  color:var(--accent);
  flex:0 0 auto;
  width:auto;
  padding:11px 16px;
}
.btn--secondary:hover{ background:rgba(var(--accent-rgb),0.24); }

.btn--danger{
  background:rgba(var(--danger-rgb),0.14);
  border:1px solid rgba(var(--danger-rgb),0.32);
  color:var(--danger);
}
.btn--danger:hover{ background:rgba(var(--danger-rgb),0.22); }

.btn--ghost{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--stroke);
  color:var(--text-1);
}
.btn--ghost:hover{ color:var(--text-0); background:rgba(255,255,255,0.07); }

.divider{
  display:flex; align-items:center; gap:8px;
  font-size:10px; color:var(--text-2); letter-spacing:0.3px;
  margin:2px 0;
}
.divider::before,.divider::after{
  content:""; flex:1 1 auto; height:1px;
  background:var(--stroke);
}

.manualconnect{ display:flex; gap:8px; }
.input{
  flex:1 1 auto; min-width:0;
  border:none; outline:none;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,0.22);
  box-shadow:var(--sh-in);
  color:var(--text-0);
  padding:11px 12px;
  font-size:13px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase;
}
.input::placeholder{ color:var(--text-2); letter-spacing:1px; text-transform:none; font-weight:400; }
.input:focus{ box-shadow:var(--sh-in), 0 0 0 2px rgba(var(--accent-rgb),0.4); }

.statrow{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text-1);
  padding:6px 0;
}
.statrow span:last-child{ color:var(--text-0); font-weight:700; }

/* ---------------------------------------------------------------------
   Chat pane
   --------------------------------------------------------------------- */
.chatpane{
  flex:1 1 auto;
  min-width:0; min-height:0;
  display:flex; flex-direction:column;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(var(--glass-rgb),0.5), rgba(var(--glass-rgb),0.28));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:var(--sh-out-sm), inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
}

.log{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:18px 18px 8px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}

.log__empty{
  margin:auto;
  text-align:center;
  color:var(--text-2);
  padding:20px;
  max-width:280px;
}
.log__empty-icon{
  color:var(--text-2);
  display:flex; justify-content:center; margin-bottom:10px;
}
.log__empty-title{
  color:var(--text-1); font-size:14px; font-weight:700; margin-bottom:5px;
}
.log__empty-sub{ font-size:12px; line-height:1.55; color:var(--text-2); }

.sysline{
  align-self:center;
  font-size:10.5px; color:var(--text-2);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--stroke-soft);
  padding:5px 12px; border-radius:20px;
  letter-spacing:0.3px;
  animation:fadeIn .3s ease;
}

.msgrow{ display:flex; max-width:100%; animation:msgIn .22s cubic-bezier(.2,.8,.2,1); }
.msgrow--mine{ justify-content:flex-end; }
@keyframes msgIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.bubble{
  max-width:min(76%, 480px);
  min-width:0;
  padding:10px 13px;
  border-radius:16px 16px 16px 5px;
  background:rgba(255,255,255,0.045);
  border:1px solid var(--stroke-soft);
  box-shadow:var(--sh-out-sm);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.msgrow--mine .bubble{
  border-radius:16px 16px 5px 16px;
  background:linear-gradient(150deg, rgba(var(--accent-rgb),0.32), rgba(var(--accent-rgb),0.16));
  border:1px solid rgba(var(--accent-rgb),0.3);
}
.bubble__text{
  font-size:13.5px; line-height:1.5; color:var(--text-0);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.bubble__meta{
  font-size:9.5px; color:var(--text-2);
  margin-top:4px; text-align:right;
}

.bubble--file{ min-width:220px; max-width:min(80%, 340px); }
.filecard__head{ display:flex; align-items:center; gap:10px; }
.filecard__icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:9px;
  background:rgba(var(--accent-rgb),0.18);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.filecard__info{ min-width:0; flex:1 1 auto; }
.filecard__name{
  font-size:12.5px; font-weight:700; color:var(--text-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filecard__size{ font-size:10.5px; color:var(--text-2); margin-top:2px; }
.filecard__track{
  margin-top:9px; height:5px; border-radius:6px;
  background:rgba(0,0,0,0.3);
  box-shadow:var(--sh-in);
  overflow:hidden;
}
.filecard__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:6px;
  transition:width .15s ease;
}
.filecard--done .filecard__bar{ background:linear-gradient(90deg, var(--live), #2fc478); }
.filecard__actions{
  margin-top:8px; font-size:11px; color:var(--text-2);
}
.filecard__download{
  color:var(--live);
  text-decoration:none;
  font-weight:700;
  display:inline-flex; align-items:center; gap:5px;
}
.filecard__download:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------------
   Dropzone overlay
   --------------------------------------------------------------------- */
.dropzone{
  position:absolute; inset:0; z-index:5;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,14,23,0.7);
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.dropzone--active{ display:flex; }
.dropzone__inner{
  border:2px dashed rgba(var(--accent-rgb),0.6);
  border-radius:var(--r-lg);
  padding:30px 50px;
  color:var(--accent);
  font-weight:700; font-size:14px;
  background:rgba(var(--accent-rgb),0.08);
}

/* ---------------------------------------------------------------------
   Composer
   --------------------------------------------------------------------- */
.composer{
  flex:0 0 auto;
  min-height:var(--composer-h);
  display:flex; align-items:flex-end; gap:9px;
  padding:12px 14px;
  border-top:1px solid var(--stroke-soft);
}

.composer__attach,.composer__send{
  flex:0 0 auto;
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.035);
  color:var(--text-1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:var(--sh-out-sm);
  transition:color .15s ease, transform .12s ease, background .15s ease;
}
.composer__attach:hover{ color:var(--accent); }
.composer__attach:active{ transform:scale(0.92); }
.composer__attach:disabled{ opacity:0.4; cursor:not-allowed; }

.composer__send{
  background:linear-gradient(150deg, var(--accent), #4a72e0);
  color:#fff; border:none;
  box-shadow:0 5px 14px -4px rgba(var(--accent-rgb),0.55);
}
.composer__send:disabled{
  background:rgba(255,255,255,0.05); color:var(--text-2);
  box-shadow:none; cursor:not-allowed;
}
.composer__send:not(:disabled):active{ transform:scale(0.92); }

.composer__input{
  flex:1 1 auto; min-width:0;
  resize:none;
  border:none; outline:none;
  background:rgba(0,0,0,0.22);
  box-shadow:var(--sh-in);
  border-radius:var(--r-md);
  color:var(--text-0);
  padding:10px 14px;
  font-size:13.5px; line-height:1.4;
  max-height:120px;
  transition:box-shadow .15s ease;
}
.composer__input::placeholder{ color:var(--text-2); }
.composer__input:focus{ box-shadow:var(--sh-in), 0 0 0 2px rgba(var(--accent-rgb),0.4); }
.composer__input:disabled{ opacity:0.5; }

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%; bottom:22px;
  transform:translate(-50%, 14px);
  z-index:50;
  background:rgba(18,26,44,0.9);
  backdrop-filter:blur(14px);
  border:1px solid var(--stroke);
  color:var(--text-0);
  font-size:12.5px; font-weight:600;
  padding:11px 20px;
  border-radius:30px;
  box-shadow:var(--sh-out);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  max-width:min(90vw, 360px);
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toast--show{ opacity:1; transform:translate(-50%, 0); }

/* =========================================================================
   Responsive breakpoints
   ========================================================================= */

/* Tablet */
@media (max-width: 980px){
  .rail{ flex-basis:236px; }
  .bubble{ max-width:82%; }
}

/* Mobile: rail becomes a slide-over panel */
@media (max-width: 860px){
  :root{ --topbar-h:56px; --composer-h:62px; }

  .app{ padding:8px; gap:8px; }

  .iconbtn{ display:flex; }

  .brand__name{ font-size:14.5px; }
  .statusline{ font-size:11px; }

  .body{ position:relative; }

  .rail{
    position:absolute;
    top:0; left:0; bottom:0;
    width:min(78vw, 300px);
    flex-basis:auto;
    z-index:20;
    transform:translateX(calc(-100% - 14px));
    transition:transform .26s cubic-bezier(.2,.8,.2,1);
    box-shadow:14px 0 40px -10px rgba(0,0,0,0.55);
  }
  .rail--open{ transform:translateX(0); }

  .rail--open::after{
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,0.35);
    z-index:-1;
  }

  .chatpane{ width:100%; }

  .bubble{ max-width:86%; }
  .bubble--file{ max-width:88%; min-width:0; width:100%; }

  .log{ padding:14px 12px 6px; }
  .composer{ padding:10px; }

  .idrow__id{ font-size:14px; letter-spacing:1.6px; }
}

/* Small phones */
@media (max-width: 400px){
  .brand__name{ font-size:13px; }
  .brand__accent{ margin-left:2px; }
  .statusline{ display:none; }
  .panel{ padding:11px; }
  .bubble{ max-width:90%; }
  .composer__attach,.composer__send{ width:37px; height:37px; }
}

/* Short viewports (landscape phones) */
@media (max-height: 480px){
  :root{ --topbar-h:48px; --composer-h:54px; }
  .log{ padding:10px 14px 4px; }
  .panel{ padding:9px 11px; }
  .rail__scroll{ padding:10px; gap:8px; }
}

/* Large desktop: cap width for readability, keep centered */
@media (min-width: 1440px){
  .body{ max-width:1280px; margin:0 auto; width:100%; }
  .topbar{ max-width:1280px; margin:0 auto; width:100%; }
}

/* Focus visibility (accessibility, not decorative) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),0.7);
  outline-offset:2px;
}