/* ============================================================
   WORMHOLE — Peer-to-peer encrypted file transfer
   Aesthetic: Deep-space observatory. Cosmic void + precision.
   ============================================================ */

:root {
  /* Void palette */
  --void:        #06060c;
  --void-up:     #0c0c18;
  --void-card:   rgba(14, 14, 26, 0.75);
  --void-glass:  rgba(255, 255, 255, 0.02);

  /* Surface */
  --surface:     rgba(255, 255, 255, 0.04);
  --surface-up:  rgba(255, 255, 255, 0.07);
  --border:      rgba(255, 255, 255, 0.06);
  --border-glow: rgba(167, 139, 250, 0.25);

  /* Text — bumped contrast for readability */
  --text:        #e4e4e8;
  --text-bright: #ffffff;
  --text-muted:  #a1a1aa;
  --text-dim:    #63636e;

  /* Accent — violet to emerald gradient  */
  --violet:      #a78bfa;
  --violet-dim:  rgba(167, 139, 250, 0.12);
  --emerald:     #6ee7b7;
  --emerald-dim: rgba(110, 231, 183, 0.10);
  --amber:       #fbbf24;
  --amber-dim:   rgba(251, 191, 36, 0.08);
  --red:         #fb7185;
  --red-dim:     rgba(251, 113, 133, 0.08);

  /* Radii */
  --r:    14px;
  --r-sm: 10px;
  --r-xs: 6px;

  /* Type */
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Transfer palette (used by JS to tint body bg on connect) — dark muted variants */
  --palette-0: #0d1a14;  /* dark emerald */
  --palette-1: #14120e;  /* dark warm */
  --palette-2: #131210;  /* dark gold */
  --palette-3: #0d1517;  /* dark teal */
  --palette-4: #101012;  /* dark neutral */
  --palette-5: #0c1019;  /* dark blue */
  --palette-6: #10130c;  /* dark olive */
  --palette-7: #150e18;  /* dark purple */
}


/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* ==========================================================
   STARFIELD
   Three layers of pseudo-randomly placed dots, drifting.
   ========================================================== */

.stars {
  position: fixed; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.star-layer {
  position: absolute; inset: -50%;
  background-repeat: repeat;
  will-change: transform;
}

.star-layer--1 {
  background-image:
    radial-gradient(1px 1px at  10%  15%, rgba(255,255,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at  30%  65%, rgba(255,255,255,.3)  50%, transparent 100%),
    radial-gradient(1px 1px at  55%  25%, rgba(255,255,255,.5)  50%, transparent 100%),
    radial-gradient(1px 1px at  78%  80%, rgba(255,255,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at  92%  42%, rgba(255,255,255,.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 85%, rgba(167,139,250,.6)  50%, transparent 100%),
    radial-gradient(1px 1px at  43%  50%, rgba(255,255,255,.3)  50%, transparent 100%);
  background-size: 400px 400px;
  animation: drift 90s linear infinite;
}

.star-layer--2 {
  background-image:
    radial-gradient(1px 1px at  22%  38%, rgba(255,255,255,.25) 50%, transparent 100%),
    radial-gradient(1px 1px at  60%  72%, rgba(255,255,255,.2)  50%, transparent 100%),
    radial-gradient(1px 1px at  85%  18%, rgba(255,255,255,.35) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 90%, rgba(110,231,183,.4) 50%, transparent 100%),
    radial-gradient(1px 1px at  5%   55%, rgba(255,255,255,.2)  50%, transparent 100%);
  background-size: 600px 600px;
  animation: drift 150s linear infinite reverse;
  opacity: 0.6;
}

.star-layer--3 {
  background-image:
    radial-gradient(1px 1px at  35%  28%, rgba(255,255,255,.15) 50%, transparent 100%),
    radial-gradient(1px 1px at  70%  60%, rgba(255,255,255,.1)  50%, transparent 100%),
    radial-gradient(1px 1px at  18%  75%, rgba(255,255,255,.2)  50%, transparent 100%);
  background-size: 800px 800px;
  animation: drift 200s linear infinite;
  opacity: 0.35;
}

@keyframes drift {
  to { transform: translate(400px, 200px); }
}


/* ==========================================================
   PORTAL — Animated concentric rings
   ========================================================== */

.portal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  width: 700px; height: 700px;
}

.portal__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid;
}

.portal__ring--1 {
  border-color: rgba(167, 139, 250, 0.06);
  animation: orbit 30s linear infinite;
}
.portal__ring--2 {
  inset: 12%;
  border-color: rgba(167, 139, 250, 0.08);
  animation: orbit 24s linear infinite reverse;
  border-style: dashed;
}
.portal__ring--3 {
  inset: 26%;
  border-color: rgba(110, 231, 183, 0.07);
  animation: orbit 18s linear infinite;
}
.portal__ring--4 {
  inset: 38%;
  border-color: rgba(167, 139, 250, 0.05);
  animation: orbit 14s linear infinite reverse;
  border-style: dashed;
}
.portal__ring--5 {
  inset: 46%;
  border-color: rgba(110, 231, 183, 0.09);
  animation: orbit 10s linear infinite;
}

.portal__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 30px 8px var(--violet-dim), 0 0 80px 20px rgba(167,139,250,0.06);
  animation: pulse-core 4s ease-in-out infinite;
}

@keyframes orbit  { to { transform: rotate(360deg); } }
@keyframes pulse-core {
  0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.6); }
}

/* --- Portal state changes --- */
body.dialling .portal__ring { border-color: rgba(251,191,36,0.12); }
body.dialling .portal__core {
  background: var(--amber);
  box-shadow: 0 0 40px 10px var(--amber-dim), 0 0 100px 30px rgba(251,191,36,0.06);
  animation: pulse-core 1.2s ease-in-out infinite;
}
body.dialling .portal__ring--1 { animation-duration: 6s; }
body.dialling .portal__ring--2 { animation-duration: 5s; }
body.dialling .portal__ring--3 { animation-duration: 4s; }
body.dialling .portal__ring--4 { animation-duration: 3s; }
body.dialling .portal__ring--5 { animation-duration: 2s; }

body.connected .portal__ring { border-color: rgba(110,231,183,0.12); }
body.connected .portal__core {
  background: var(--emerald);
  box-shadow: 0 0 50px 15px var(--emerald-dim), 0 0 120px 40px rgba(110,231,183,0.06);
  animation: pulse-core 3s ease-in-out infinite;
}

body.error .portal__ring { border-color: rgba(251,113,133,0.1); }
body.error .portal__core {
  background: var(--red);
  box-shadow: 0 0 30px 8px var(--red-dim);
  animation: none;
}


/* ==========================================================
   LAYOUT SHELL
   ========================================================== */

.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ---- Masthead ---- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.masthead__icon { width: 28px; height: 28px; }

.masthead__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

.masthead__tagline {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}


/* ---- Stage ---- */

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 48px;
}


/* ==========================================================
   CARD  (#main form)
   ========================================================== */

#main {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 28px 28px;

  background: var(--void-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(40px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 20px 80px -20px rgba(0,0,0,0.7),
    0 0 120px -40px var(--violet-dim);

  animation: card-in 0.6s cubic-bezier(0.16,1,0.3,1) both;
  transition: border-color 0.5s, box-shadow 0.5s;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
}

/* Drag-and-drop highlight */
.highlight #main {
  border-color: var(--violet);
  box-shadow:
    0 0 0 1px var(--violet) inset,
    0 0 60px -10px var(--violet-dim);
}

/* State glows */
body.dialling #main {
  border-color: rgba(251,191,36,0.2);
  box-shadow: 0 0 80px -30px var(--amber-dim), 0 20px 80px -20px rgba(0,0,0,0.7);
}
body.connected #main {
  border-color: rgba(110,231,183,0.15);
  box-shadow: 0 0 80px -30px var(--emerald-dim), 0 20px 80px -20px rgba(0,0,0,0.7);
}
body.error #main {
  border-color: rgba(251,113,133,0.15);
}


/* ---- Status message ---- */

#info {
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 340px;
}

.connected #info { display: none; }


/* ---- File controls (visible when connected) ---- */

#top { display: none; width: 100%; }

.connected #top { display: block; }

.file-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.file-controls__hint {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

#filepicker { display: none; }

#filepicker-wrap {
  display: inline-flex;
  cursor: pointer;
}


/* ---- Transfer list ---- */

#transfers {
  display: none;
  list-style: none;
  width: 100%;
}

.connected #transfers,
.dialling #transfers { display: block; }

#transfers li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 12px 16px;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  animation: li-in 0.3s ease both;
}

@keyframes li-in {
  from { opacity: 0; transform: translateX(-8px); }
}

#transfers li.upload  { border-left: 2.5px solid var(--violet); }
#transfers li.download { border-left: 2.5px solid var(--emerald); }
#transfers li.pending  { border-left: 2.5px solid var(--text-dim); opacity: 0.65; }


/* ---- Prompt / connect section ---- */

#prompt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.prompt__label {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.55;
}

.connected #prompt p,
.dialling #prompt p { display: none; }

.prompt__row {
  display: flex;
  width: 100%;
  gap: 8px;
}


/* ---- Magic code input ---- */

#magiccode {
  flex: 1;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

#magiccode::placeholder {
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.02em;
}

#magiccode:focus {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 3px var(--violet-dim);
}

.connected #magiccode {
  opacity: 0.25;
  font-size: 12px;
  padding: 8px 12px;
}

.error #magiccode { display: none; }


/* ---- Autocomplete ---- */

#autocomplete {
  height: 1em;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.connected #autocomplete,
.dialling #autocomplete { display: none; }


/* ---- QR code ---- */

#qr {
  display: none;
  width: 180px; height: 180px;
  border-radius: var(--r-sm);
  background: #fff;
  padding: 6px;
  margin-top: 4px;
}

.dialling #qr[src] { display: block; }


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn--primary {
  background: linear-gradient(135deg, var(--violet) 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 2px 12px -2px var(--violet-dim);
}
.btn--primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 20px -2px var(--violet-dim);
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: var(--surface-up);
  border-color: rgba(255,255,255,0.1);
}

.btn--accent {
  background: linear-gradient(135deg, var(--violet) 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 2px 12px -2px var(--violet-dim);
}
.btn--accent:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn:disabled,
.btn:disabled:hover {
  background: var(--surface);
  color: var(--text-dim);
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.connected #dial,
.error #dial { display: none; }

/* Legacy class the JS adds */
.button {}


/* ---- Footer ---- */

#footer {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.connected #footer { display: none; }


/* ==========================================================
   COPY LINK
   ========================================================== */

.copy-link {
  display: none;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  animation: li-in 0.3s ease both;
}

.copy-link.visible {
  display: flex;
  align-items: stretch;
}

.copy-link__url {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  user-select: all;
  -webkit-user-select: all;
}

.copy-link__btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-up);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.copy-link__btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.copy-link__btn.copied {
  color: var(--emerald);
}

.copy-link__icon {
  flex-shrink: 0;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 480px) {
  .masthead__tagline { display: none; }

  #main {
    padding: 28px 20px 22px;
    border-radius: 12px;
  }

  .prompt__row {
    flex-direction: column;
  }

  #qr { width: 150px; height: 150px; }

  .portal { width: 500px; height: 500px; }
}

@media (min-width: 768px) {
  .masthead { padding: 28px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .star-layer,
  .portal__ring,
  .portal__core { animation: none !important; }
  #main { animation: none !important; }
}