/* filester — web client
 *
 * Same design language as the Flutter app: warm cream paper, deep
 * indigo accent (used sparingly), hairline borders, no shadows. The
 * four-digit code is rendered in tabular monospace and acts as the
 * brand.
 */

:root {
  --paper:        #FAF8F4;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #F1ECE3;
  --ink:          #1A1814;
  --ink-soft:     #76716A;
  --hairline:     #E5DFD3;

  --accent:       #3730A3;
  --accent-soft:  #E6E4F5;
  --accent-ink:   #1E1B6E;

  --ok:           #2F8F6F;
  --warn:         #C78A1F;
  --danger:       #B23B2C;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
          system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #13110E;
    --paper-raised: #1B1916;
    --paper-sunk:   #23201C;
    --ink:          #F2EDE0;
    --ink-soft:     #8C857A;
    --hairline:     #2E2A23;
    --accent:       #A89FFF;
    --accent-soft:  #2A2658;
    --accent-ink:   #D9D4FF;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Top bar ─────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 5;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 6px;
}
.brand-word { line-height: 1; }

/* Connection state lives as a tiny coloured dot. Text is preserved
   for screen readers but hidden visually. */
.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  flex: 0 0 8px;
}
.conn-dot[data-state="connected"]    { background: var(--ok); }
.conn-dot[data-state="connecting"]   { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.conn-dot[data-state="disconnected"] { background: var(--danger); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── Layout ──────────────────────────────────────────────────────── */

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.caption {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.caption-title {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

/* ── Segmented (Receive / Send) ──────────────────────────────────── */

.segmented {
  display: flex;
  gap: 28px;
  padding: 0 0 20px 0;
}
.tab {
  background: transparent;
  border: 0;
  padding: 6px 0 0 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tab .tab-label {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink-soft);
  transition: color 160ms ease;
}
.tab .tab-rule {
  display: block;
  height: 2px;
  width: 0;
  background: var(--ink);
  border-radius: 2px;
  transition: width 180ms ease;
}
.tab.active .tab-label { color: var(--ink); }
.tab.active .tab-rule  { width: 28px; }

.panel { display: none; }
.panel.active { display: block; }

.section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin: 36px 0 12px;
  font-weight: 600;
}

/* ── Hero code (receive) ─────────────────────────────────────────── */

.code-display {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 12px;
  flex-wrap: nowrap;
}
.code-tile {
  font-family: var(--mono);
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (max-width: 420px) {
  .code-display { gap: 4px; }
  .code-tile { font-size: 48px; }
}

.code-ttl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-soft, #6B6357);
}
.code-ttl.ttl-soon { color: #C78A1F; }
.code-ttl.ttl-expired { color: #B23B2C; }

.qr-wrap {
  margin: 24px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.qr-image {
  width: 200px;
  height: 200px;
  max-width: 200px;
  max-height: 200px;
  border-radius: 14px;
  border: 1px solid var(--line, #E8E1D2);
  background: #FFF;
  padding: 12px;
  box-sizing: content-box;
  image-rendering: pixelated; /* keep QR modules crisp on retina */
  object-fit: cover;
  transition: opacity 240ms ease;
}
/* Mascot placeholder: dim + soft so it reads as a loading slot, not a
   finished QR. Removed once the real PNG is decoded and swapped in. */
.qr-image.qr-placeholder {
  opacity: 0.55;
  filter: saturate(0.85);
  image-rendering: auto;
}
@media (max-width: 420px) {
  .qr-image { width: 168px; height: 168px; max-width: 168px; max-height: 168px; padding: 10px; }
}
.qr-caption {
  font-size: 12px;
  color: var(--ink-soft, #6B6357);
  margin: 0;
}

.code-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 24px;
}
.divider-y {
  width: 1px;
  height: 14px;
  background: var(--hairline);
}
.link-btn {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.link-btn:hover { background: var(--paper-sunk); }

/* ── Code entry (send) ───────────────────────────────────────────── */

.code-entry {
  display: flex;
  justify-content: center;
  margin: 12px 0 8px;
}
#recipient-input {
  font-family: var(--mono);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 16px;          /* feels like four dialled slots */
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px dashed var(--hairline);
  outline: none;
  text-align: center;
  width: 320px;
  max-width: 100%;
  /* Padding-left compensates the trailing letter-spacing after the
     last character so the visible digits sit on the true centre. */
  padding: 6px 0 10px 16px;
  caret-color: var(--ink);
}
#recipient-input::placeholder { color: var(--hairline); }
#recipient-input:focus { border-bottom-color: var(--ink); }
@media (max-width: 420px) {
  #recipient-input {
    font-size: 48px;
    letter-spacing: 12px;
    padding-left: 12px;
    width: 240px;
  }
}

/* ── Chips (added recipients) ────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.2px;
  font-variant-numeric: tabular-nums;
}
.chip .chip-code { padding: 2px 0; }
.chip .chip-x {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.7;
  font-family: inherit;
}
.chip .chip-x:hover {
  opacity: 1;
  background: rgba(255,255,255,0.15);
}

/* ── Picker / file list ──────────────────────────────────────────── */

.picker {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.picker:hover {
  background: var(--paper-sunk);
  border-color: var(--ink-soft);
}
.picker-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.picker-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-sunk);
  color: var(--ink);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.picker-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.picker-sub   { font-size: 12px; color: var(--ink-soft); }

.file-list, .transfer-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
/* Plain file rows — hairline-divided. The :not(.slot) carve-out lets
   the inbox host slot-cards while still using the .file-list shell. */
.file-list li:not(.slot) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hairline);
}
.file-list li:not(.slot):last-child { border-bottom: 0; }
.file-list.empty .empty-row {
  border: 0;
  padding: 28px 0;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 14px;
}
.file-list li .file-icon {
  width: 36px; height: 36px;
  background: var(--paper-sunk);
  color: var(--ink);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.file-list li .file-meta { flex: 1; min-width: 0; }
.file-list li .file-meta .file-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-list li .file-meta .file-sub {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
}
.file-list li button {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.file-list li button:hover {
  background: var(--paper-sunk);
  color: var(--ink);
}

/* ── Primary button ──────────────────────────────────────────────── */

.btn-primary {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.1px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  width: 100%;
  margin-top: 20px;
  cursor: pointer;
  transition: opacity 120ms ease, transform 80ms ease;
}
.btn-primary:hover:not(:disabled) { opacity: 0.9; }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }
.btn-primary:disabled {
  background: var(--paper-sunk);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.btn-ghost {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--paper-sunk); }
.btn-icon {
  background: var(--paper-sunk);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

/* ── Transfer slot ───────────────────────────────────────────────── */

.transfer-list { margin-top: 12px; }
.transfer-list li,
.file-list li.slot {
  background: var(--paper-sunk);
  border: 0;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: stretch;
}
.slot { display: block; width: 100%; }
	slot .slot-head {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 10px;
	}
	slot .slot-to {
		font-family: var(--mono);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 1.2px;
		font-variant-numeric: tabular-nums;
		color: var(--ink);
		/* Replace the original pill background with a tiny prefix label. */
		background: transparent;
		padding: 0;
	}
	slot .slot-to::before {
		content: "TO ";
		font-family: var(--sans);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.6px;
		color: var(--ink-soft);
		margin-right: 4px;
	}
	slot .slot-status {
		margin-left: auto;
		color: var(--ink-soft);
		font-size: 12px;
		font-weight: 600;
	}
	slot .bar {
		height: 3px;
		border-radius: 999px;
		background: var(--hairline);
		overflow: hidden;
	}
	slot .bar > div {
		height: 100%;
		background: var(--ink);
		width: 0%;
		transition: width .15s linear;
	}
	slot .slot-sub {
		color: var(--ink-soft);
		font-size: 12px;
		margin-top: 8px;
		font-variant-numeric: tabular-nums;
	}

/* Incoming offer — flipped to accent so it visibly asks for attention. */
	slot.pending {
		/* The host <li> handles the background; we override here. */
	}
	.transfer-list li.slot.pending {
		background: var(--accent-soft);
	}
	slot.pending .slot-to        { color: var(--accent-ink); }
	slot.pending .slot-to::before { color: var(--accent-ink); opacity: 0.7; content: "FROM "; }
	slot.pending .slot-status    { color: var(--accent-ink); }
	slot.pending .slot-sub       { color: var(--accent-ink); opacity: 0.8; }
	slot.pending .bar            { background: rgba(0,0,0,0.1); }
	slot.pending .bar > div      { background: var(--accent-ink); }

/* Inbox slot — flipped status colour so receives stand apart slightly. */
.transfer-list#inbox li, #inbox li.slot {
  background: var(--paper-sunk);
}

.pending-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pending-actions .btn-primary {
  flex: 1;
  margin: 0;
  padding: 12px;
  background: var(--accent-ink);
}
.pending-actions .btn-ghost {
  padding: 12px 18px;
  background: transparent;
  border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent);
  color: var(--accent-ink);
}

/* ── Footer (about copy) ─────────────────────────────────────────── */

.footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
.footer p { margin: 0 0 10px; }
.footer-fine { font-size: 12px; opacity: 0.85; }
.footer-legal { display: flex; gap: 10px; align-items: center; }
.footer-legal a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.footer-legal a:hover { text-decoration: underline; }
.footer-legal span { color: var(--ink-soft); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--accent-ink); }