/* ============================================================
   Reusable components: status pill, device nodes, radar, modals,
   buttons, forms, file rows, toasts, credits button.
   ============================================================ */

/* ---------- Status pill ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.84rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
}

.status-dot[data-state='connected'],
.status-dot[data-state='hosting'] {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

.status-dot[data-state='offline'] {
  background: var(--danger);
}

/* ---------- Icon buttons ---------- */

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition: transform var(--speed-fast) var(--ease-out),
              background var(--speed-fast) ease,
              color var(--speed-fast) ease;
}

.icon-btn:hover {
  background: var(--surface-strong);
  color: var(--text-1);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

/* ---------- Device nodes ---------- */

/*
  IMPORTANT alignment rule:
  The node is translated up by HALF the avatar height so that the
  AVATAR centre (not the centre of the whole text block) lands exactly
  on the orbit coordinate. This keeps the radar rings and connection
  beams pointing at the avatar itself.
*/
.node {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, calc(var(--node-avatar) / -2));
  width: var(--node-size);
  text-align: center;
  /* Names and badges may extend past the box; never clip them. */
  overflow: visible;
}

.node-avatar-wrap {
  position: relative;
  width: max-content;
  margin: 0 auto;
}

.node-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node-avatar);
  height: var(--node-avatar);
  margin: 0 auto;
  border-radius: 50%;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  box-shadow: var(--shadow-1);
  transition: transform var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) ease,
              box-shadow var(--speed-fast) ease;
}

.node-avatar svg {
  width: 46%;
  height: 46%;
}

.node:hover .node-avatar {
  transform: scale(1.07);
  border-color: var(--accent-a);
  box-shadow: var(--shadow-1), var(--glow);
}

.node:active .node-avatar {
  transform: scale(0.96);
}

/* Progress ring wrapping the avatar */
.node-ring {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  pointer-events: none;
}

.ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 4;
  opacity: 0;
  transition: opacity var(--speed-med) ease;
}

.ring-fill {
  fill: none;
  stroke: var(--accent-a);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 120ms linear;
}

.node.transferring .ring-track,
.node.waiting .ring-track {
  opacity: 1;
}

.node.waiting .ring-fill {
  stroke-dashoffset: 70;
}

/*
  The label stays in normal flow (so the whole node remains one big
  click target) and is centered by the parent's text-align.
*/
.node-name {
  display: inline-block;
  margin-top: 10px;
  max-width: 130px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-strong);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.node-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The local device gets a stronger presence */
.node.self {
  z-index: 2;
}

.node.self .node-avatar {
  border: 2px solid var(--accent-b);
  border-radius: 50%;
  box-shadow: var(--shadow-1), var(--glow);
}

/* ---------- Beams ---------- */

/* Beams render above the radar dial but below the device nodes. */
.beams {
  z-index: 2;
}

.beams line {
  stroke: var(--accent-b);
  stroke-width: 1.4;
  opacity: 0.28;
  vector-effect: non-scaling-stroke;
  transition: opacity var(--speed-med) ease;
}

.beams line.active {
  opacity: 0.95;
  stroke: var(--accent-a);
  stroke-dasharray: 6 6;
}

/* ============================================================
   Radar backdrop.

   A layered, always-visible instrument: soft glow, concentric
   rings, crosshair, bezel tick marks, an expanding ping, a
   rotating sweep, synced blips and a glowing core. Every animated
   property is transform/opacity only, keeping it GPU-cheap.

   All accent colors route through --radar-rgb so the dial stays
   legible in both dark and light themes.
   ============================================================ */

.radar {
  position: absolute;
  /* Tight inset so the outer range ring encloses the device orbit. */
  top: 4%;
  right: 4%;
  bottom: 4%;
  left: 4%;
  pointer-events: none;
  transition: opacity var(--speed-slow) ease;
  z-index: 1;
}

/* Keep the radar on screen once devices appear; just soften it a bit. */
.stage-wrap.has-peers .radar {
  opacity: 0.55;
}

/* Faint colored wash behind everything else. */
.radar-glow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--radar-rgb), 0.08) 0%, transparent 62%);
}

/* Concentric range rings; the outermost is slightly stronger. */
.radar-rings i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.radar-rings i:nth-child(1) { top: 0; right: 0; bottom: 0; left: 0; border-color: var(--border-strong); }
.radar-rings i:nth-child(2) { top: 12.5%; right: 12.5%; bottom: 12.5%; left: 12.5%; }
.radar-rings i:nth-child(3) { top: 25%; right: 25%; bottom: 25%; left: 25%; }
.radar-rings i:nth-child(4) { top: 37.5%; right: 37.5%; bottom: 37.5%; left: 37.5%; }

/* Horizontal + vertical reference lines through the center. */
.radar-crosshair {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.radar-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
  opacity: 0.7;
}

.radar-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
  opacity: 0.7;
}

/*
  Bezel tick marks around the rim (masked to the outer band). Opacity is
  kept low so that engines lacking CSS mask support degrade to a faint
  texture instead of a harsh full-circle web.
*/
.radar-ticks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(var(--radar-rgb), 0.5) 0deg 0.5deg,
    transparent 0.5deg 6deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 90%, #000 91%);
  mask: radial-gradient(farthest-side, transparent 90%, #000 91%);
  opacity: 0.35;
}

/* A ring that periodically expands outward. */
.radar-ping {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--radar-rgb), 0.5);
  opacity: 0;
}

/* Rotating sweep wedge. */
.radar-sweep {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--radar-rgb), 0) 0deg,
    rgba(var(--radar-rgb), 0) 280deg,
    rgba(var(--radar-rgb), 0.10) 320deg,
    rgba(var(--radar-rgb), 0.38) 356deg,
    rgba(var(--radar-rgb), 0.6) 360deg
  );
  will-change: transform;
}

/* Small contact blips that flash as the sweep passes. */
.radar-blips i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--radar-rgb));
  opacity: 0;
}

.radar-blips i:nth-child(1) { top: 28%; left: 62%; }
.radar-blips i:nth-child(2) { top: 60%; left: 30%; }
.radar-blips i:nth-child(3) { top: 44%; left: 74%; }

/* Glowing center point. */
.radar-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgb(var(--radar-rgb));
  box-shadow: 0 0 16px rgba(var(--radar-rgb), 0.7);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform var(--speed-fast) var(--ease-out),
              filter var(--speed-fast) ease,
              background var(--speed-fast) ease,
              border-color var(--speed-fast) ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn.primary {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: var(--glow);
}

.btn.primary:hover {
  filter: brightness(1.08);
}

.btn.ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}

.btn.ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface-strong);
}

.btn.block {
  width: 100%;
}

.btn.danger-text {
  color: var(--danger);
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--speed-med) ease;
  pointer-events: auto;
}

.modal-overlay.open {
  opacity: 1;
}

.modal-card {
  width: min(94vw, 440px);
  max-height: 84vh;
  max-height: min(84dvh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-strong);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--shadow-2);
  transform: translateY(24px) scale(0.96);
  transition: transform var(--speed-med) var(--ease-spring);
  overflow: hidden;
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  color: var(--text-3);
}

.modal-close:hover {
  background: var(--surface);
  color: var(--text-1);
}

.modal-close svg {
  width: 17px;
  height: 17px;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions .btn {
  flex: 1;
}

/* ---------- File rows ---------- */

.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.file-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(var(--accent-b-rgb), 0.16);
  border: 1px solid rgba(var(--accent-b-rgb), 0.35);
  color: var(--accent-a);
}

.file-badge svg {
  width: 25px;
  height: 25px;
}

.file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.file-meta strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.file-sub {
  font-size: 0.85rem;
  color: var(--text-2);
}

/* ---------- Big progress ring (transfer modal) ---------- */

.big-ring {
  position: relative;
  width: 164px;
  margin: 8px auto 0;
}

.big-ring svg {
  width: 100%;
  transform: rotate(-90deg);
}

.big-ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 8;
}

.big-ring-fill {
  fill: none;
  stroke: var(--accent-a);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 140ms linear;
}

.big-ring-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
}

.transfer-stats {
  margin-top: 14px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sheets & pickers ---------- */

.sheet-stack {
  display: grid;
  gap: 10px;
}

.peer-pick {
  justify-content: flex-start;
  text-align: left;
}

.pick-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(var(--accent-b-rgb), 0.16);
  color: var(--accent-a);
}

.pick-icon svg {
  width: 18px;
  height: 18px;
}

/* ---------- Forms ---------- */

.form-row {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-2);
}

.text-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  transition: border-color var(--speed-fast) ease, box-shadow var(--speed-fast) ease;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(var(--accent-b-rgb), 0.25);
}

textarea.text-input {
  min-height: 120px;
  resize: vertical;
}

.input-row {
  display: flex;
  gap: 8px;
}

.input-row .text-input {
  flex: 1;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.setting-row:last-of-type {
  border-bottom: none;
}

.pill-toggle {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--speed-fast) ease;
}

.pill-toggle.active {
  background: rgba(var(--accent-b-rgb), 0.22);
  border-color: var(--accent-b);
  color: var(--text-1);
}

.pill-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

.about-block {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.about-block h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.about-block p {
  font-size: 0.88rem;
  color: var(--text-2);
}

/* ---------- Message bubble ---------- */

.message-bubble {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 42vh;
  overflow-y: auto;
}

/* ---------- Toasts ---------- */

.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-1);
  pointer-events: auto;
}

.toast.info { border-left-color: var(--accent-b); }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }

.toast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
}

.toast-icon svg {
  width: 18px;
  height: 18px;
}

.toast.info .toast-icon { color: var(--accent-a); }
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }

.toast-msg {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ============================================================
   Credits button and modal.

   A subtle pill-shaped button in the footer right-hand cluster,
   visually tied to the version label next to it. Clicking it
   opens a dedicated modal with author info, project links and
   attribution for the open-source libraries QuickDrop relies on.
   ============================================================ */

.credits-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--speed-fast) ease,
              border-color var(--speed-fast) ease,
              background var(--speed-fast) ease,
              transform var(--speed-fast) var(--ease-out);
}

.credits-link:hover {
  color: var(--text-1);
  border-color: var(--border-strong);
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.credits-link:active {
  transform: scale(0.96);
}

/* Mini brand mark inside the credits button, sharing the gradient. */
.credits-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--gradient-accent);
  color: #fff;
}

.credits-mark svg {
  width: 9px;
  height: 9px;
}

/* Hero at the top of the credits modal. */
.credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 0 22px;
  text-align: center;
}

.credits-hero-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: var(--glow);
}

.credits-hero-mark svg {
  width: 28px;
  height: 28px;
}

.credits-hero-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.credits-hero-subtitle {
  font-size: 0.88rem;
  color: var(--text-2);
  max-width: 320px;
}

/* Links section of the credits modal. */
.credits-links {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.credits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  text-decoration: none;
  transition: border-color var(--speed-fast) ease,
              background var(--speed-fast) ease,
              transform var(--speed-fast) var(--ease-out);
}

.credits-row:hover {
  border-color: var(--border-strong);
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.credits-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 0;
}

.credits-row-label svg {
  width: 18px;
  height: 18px;
  color: var(--accent-a);
  flex: none;
}

.credits-row-url {
  font-size: 0.78rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* "Built on" attribution section. */
.credits-section-title {
  margin: 22px 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.credits-list {
  display: grid;
  gap: 6px;
}

.credits-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--speed-fast) ease, background var(--speed-fast) ease;
}

.credits-item:hover {
  color: var(--text-1);
  background: var(--surface-strong);
}

.credits-item-name {
  font-weight: 600;
  color: var(--text-1);
}

.credits-item-role {
  color: var(--text-3);
}

/* Copyright / license line at the bottom of the modal. */
.credits-legal {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.55;
}