/* =========================================
   TOSS — style.css
   Dark Swiss. Warm accent. Bold mono codes.
   ========================================= */

/* --- Tokens --- */
:root {
  --bg:            #0A0A0E;
  --bg-elevated:   #131318;
  --bg-hover:      #1A1A22;
  --text:          #F1F0EE;
  --text-dim:      #65656E;
  --accent:        #F25C30;
  --accent-hover:  #FF7A54;
  --accent-glow:   rgba(242, 92, 48, 0.12);
  --success:       #22C583;
  --success-glow:  rgba(34, 197, 131, 0.10);
  --error:         #F4425F;
  --border:        #222230;
  --border-focus:  #38384A;
  --radius:        10px;
  --radius-lg:     14px;
  --font:          'Outfit', system-ui, sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, monospace;
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --container:     460px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, #17171F 0%, transparent 100%);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input, button { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }

/* --- Layout --- */
#app {
  width: 100%;
  max-width: var(--container);
  padding: 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.send-section,
.receive-section {
  width: 100%;
}

/* =========================================
   BRAND
   ========================================= */
.brand {
  text-align: center;
  padding-top: 72px;
  padding-bottom: 48px;
  transition: padding 0.5s var(--ease);
}

.brand-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.22em;
  color: var(--text);
  transition: font-size 0.5s var(--ease);
}

.brand-tagline {
  margin-top: 10px;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease);
  max-height: 40px;
  overflow: hidden;
}

/* Shrink brand in non-home states */
:not(.state-home) .brand          { padding-top: 40px; padding-bottom: 32px; }
:not(.state-home) .brand-name     { font-size: 1.6rem; letter-spacing: 0.18em; }
:not(.state-home) .brand-tagline  { opacity: 0; max-height: 0; margin-top: 0; }

/* =========================================
   DROP ZONE
   ========================================= */
.drop-zone {
  width: 100%;
  min-height: 200px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  outline: none;
  position: relative;
}

.drop-zone:hover,
.drop-zone:focus-visible {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 40px var(--accent-glow);
}

.drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.drop-icon {
  color: var(--text-dim);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.drop-zone:hover .drop-icon,
.drop-zone.drag-over .drop-icon {
  color: var(--accent);
  transform: translateY(-3px);
}

.drop-text {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
}

.drop-hint {
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* =========================================
   UPLOAD PROGRESS
   ========================================= */
.upload-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 18px;
  max-width: 100%;
}

.file-pill-name {
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.file-pill-size {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* =========================================
   PROGRESS BAR  (shared by upload & download)
   ========================================= */
.progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.35s var(--ease);
  box-shadow: 0 0 14px var(--accent-glow);
}

.progress-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-family: var(--mono);
}

/* =========================================
   CODE DISPLAY  (after upload completes)
   ========================================= */
.code-display {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.code-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.code-digits {
  display: flex;
  gap: 8px;
}

.code-digit {
  width: 58px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  animation: digitReveal 0.4s var(--ease) forwards;
}

.code-digit:nth-child(1) { animation-delay: 0.06s; }
.code-digit:nth-child(2) { animation-delay: 0.12s; }
.code-digit:nth-child(3) { animation-delay: 0.18s; }
.code-digit:nth-child(4) { animation-delay: 0.24s; }
.code-digit:nth-child(5) { animation-delay: 0.30s; }
.code-digit:nth-child(6) { animation-delay: 0.36s; }

@keyframes digitReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.code-actions {
  display: flex;
  gap: 10px;
}

.code-expiry {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* =========================================
   DIVIDER
   ========================================= */
.divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 36px 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* =========================================
   CODE INPUT  (receive)
   ========================================= */
.code-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.code-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-box {
  width: 50px;
  height: 64px;
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  caret-color: var(--accent);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.code-box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--bg-hover);
}

.code-box.filled {
  border-color: var(--border-focus);
}

.code-dash {
  width: 12px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  flex-shrink: 0;
}

.code-input-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  min-height: 1.2em;
}

.code-input-hint.error {
  color: var(--error);
}

/* =========================================
   FILE CARD  (receive — file info)
   ========================================= */
.file-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-top: 20px;
  animation: slideUp 0.35s var(--ease) forwards;
}

.file-card-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}

.file-card-meta {
  flex: 1;
  min-width: 0;
}

.file-card-name {
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-size {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   DOWNLOAD PROGRESS
   ========================================= */
.download-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* =========================================
   DOWNLOAD DONE
   ========================================= */
.download-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.success-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--success-glow);
  border: 2px solid var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.4s var(--ease) forwards;
}

.success-check {
  font-size: 1.6rem;
  color: var(--success);
  line-height: 1;
}

.success-text {
  font-weight: 500;
  color: var(--success);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* =========================================
   REPORT LINK
   ========================================= */
.report-link {
  display: block;
  margin-top: 24px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s var(--ease);
  text-align: center;
  width: 100%;
}

.report-link:hover { text-decoration-color: var(--text-dim); }

/* =========================================
   COLLECT — Create, Submit, Manage
   ========================================= */
.collect-form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  width: 100%;
}

.input-field {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s var(--ease);
}
.input-field:focus { border-color: var(--accent); }
.input-field::placeholder { color: var(--text-dim); }

.collect-header {
  text-align: center;
  margin-bottom: 16px;
}

.collect-title {
  font-weight: 600;
  font-size: 1.1rem;
}

.collect-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.drop-zone--sm { min-height: 140px; }

.collect-created {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.manage-link-box {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 4px;
}

.manage-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.manage-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manage-url {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  word-break: break-all;
  flex: 1;
}

.submit-progress, .submit-done {
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

/* Manage view */
.manage-header {
  text-align: center;
  margin-bottom: 20px;
}

.manage-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.manage-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.submissions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.submission-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  animation: slideUp 0.3s var(--ease) forwards;
}

.submission-info { flex: 1; min-width: 0; }

.submission-name {
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-size {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.manage-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 24px 0;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.88rem;
  padding: 10px 22px;
  border-radius: 100px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.btn-sm {
  font-size: 0.78rem;
  padding: 7px 16px;
}

/* Copy button text swap */
.btn .btn-done { display: none; }
.btn.copied .btn-text { display: none; }
.btn.copied .btn-done { display: inline; }

/* =========================================
   TOAST
   ========================================= */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.error { border-color: var(--error); }

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  width: 100%;
  text-align: center;
  padding: 40px 24px 28px;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* =========================================
   STATE VISIBILITY
   ========================================= */

/* Default: hide all dynamic elements */
.upload-progress, .code-display,
.file-card, .download-progress, .download-done, .report-link,
.collect-submit, .submit-progress, .submit-done,
.collect-created, .manage-view { display: none; }

.collect-section { width: 100%; }

/* Home */
.state-home .drop-zone         { display: flex; }
.state-home .divider           { display: flex; }
.state-home .code-input-wrap   { display: flex; }
.state-home .collect-create    { display: block; }

/* Uploading */
.state-uploading .drop-zone         { display: none; }
.state-uploading .upload-progress   { display: flex; }
.state-uploading .divider           { display: none; }
.state-uploading .code-input-wrap   { display: none; }
.state-uploading .collect-create    { display: none; }

/* Sent */
.state-sent .drop-zone         { display: none; }
.state-sent .code-display      { display: flex; }
.state-sent .divider           { display: none; }
.state-sent .code-input-wrap   { display: none; }
.state-sent .collect-create    { display: none; }

/* File found (toss) */
.state-file-found .drop-zone         { display: none; }
.state-file-found .divider           { display: none; }
.state-file-found .code-input-wrap   { display: flex; }
.state-file-found .file-card         { display: flex; }
.state-file-found .report-link       { display: block; }
.state-file-found .collect-create    { display: none; }

/* Collection found — show submit UI */
.state-collect-found .send-section > .drop-zone { display: none; }
.state-collect-found .divider           { display: none; }
.state-collect-found .code-input-wrap   { display: flex; }
.state-collect-found .collect-submit    { display: block; }
.state-collect-found .collect-submit .drop-zone { display: flex; }
.state-collect-found .collect-create    { display: none; }

/* Submitting to collection */
.state-submitting .drop-zone         { display: none; }
.state-submitting .divider           { display: none; }
.state-submitting .code-input-wrap   { display: none; }
.state-submitting .submit-progress   { display: flex; }
.state-submitting .collect-create    { display: none; }

/* Submitted */
.state-submitted .drop-zone         { display: none; }
.state-submitted .divider           { display: none; }
.state-submitted .code-input-wrap   { display: none; }
.state-submitted .submit-done       { display: flex; }
.state-submitted .collect-create    { display: none; }

/* Downloading */
.state-downloading .drop-zone           { display: none; }
.state-downloading .divider             { display: none; }
.state-downloading .code-input-wrap     { display: none; }
.state-downloading .download-progress   { display: flex; }
.state-downloading .collect-create      { display: none; }

/* Downloaded */
.state-downloaded .drop-zone           { display: none; }
.state-downloaded .divider             { display: none; }
.state-downloaded .code-input-wrap     { display: none; }
.state-downloaded .download-done       { display: flex; }
.state-downloaded .collect-create      { display: none; }

/* Collection created */
.state-collect-created .drop-zone       { display: none; }
.state-collect-created .divider         { display: none; }
.state-collect-created .code-input-wrap { display: none; }
.state-collect-created .collect-create  { display: none; }
.state-collect-created .collect-created { display: flex; }

/* Manage view */
.state-manage .drop-zone       { display: none; }
.state-manage .divider         { display: none; }
.state-manage .code-input-wrap { display: none; }
.state-manage .collect-create  { display: none; }
.state-manage .manage-view     { display: block; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 520px) {
  .brand-name { font-size: 2.6rem; }
  :not(.state-home) .brand-name { font-size: 1.3rem; }
  .brand { padding-top: 48px; padding-bottom: 32px; }
  :not(.state-home) .brand { padding-top: 28px; padding-bottom: 20px; }
  .brand-tagline { font-size: 0.92rem; }

  .code-digit {
    width: 44px;
    height: 58px;
    font-size: 1.6rem;
  }

  .code-box {
    width: 42px;
    height: 54px;
    font-size: 1.3rem;
  }

  .code-digits { gap: 5px; }
  .code-input-group { gap: 5px; }
  .drop-zone { min-height: 170px; }
  .divider { margin: 28px 0; }
}