/* Fyla uses a calm blue-green palette to keep the transfer flow simple and quiet. */
.fyla-page {
  --fyla-page: #f4f8f8;
  --fyla-surface: #e6f0ef;
  --fyla-field: #ffffff;
  --fyla-field-soft: #e5f0ef;
  --fyla-ink: #203238;
  --fyla-muted: #5f7075;
  --fyla-primary: #2f6f73;
  --fyla-primary-hover: #245b5f;
  --fyla-share-ink: #f5fffe;
  --fyla-share-muted: #d9eeec;
  --fyla-primary-soft: #d8ebe9;
  --fyla-line: rgba(47, 111, 115, 0.16);
  color: var(--fyla-ink);
  background: var(--fyla-page);
  font-family: "Sora", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html.darkmode .fyla-page {
  --fyla-page: #151f22;
  --fyla-surface: #24383a;
  --fyla-field: #26383c;
  --fyla-field-soft: #243b3d;
  --fyla-ink: #edf7f5;
  --fyla-muted: #b7c8c8;
  --fyla-primary: #7bc4bf;
  --fyla-primary-hover: #9bd8d2;
  --fyla-share-ink: #173638;
  --fyla-share-muted: #2d5758;
  --fyla-primary-soft: #294c4d;
  --fyla-line: rgba(123, 196, 191, 0.2);
}

.fyla-main {
  padding: 0;
  background: var(--fyla-page);
}

body.fyla-page > footer[data-global-footer] {
  box-shadow: none !important;
}

.fyla-shell {
  width: min(100% - 2rem, 80rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.25rem) 0 5rem;
}

.fyla-content {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.fyla-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.fyla-title,
.fyla-section-title {
  margin: 0;
  color: var(--fyla-ink);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.06em;
}

.fyla-title {
  max-width: 42rem;
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 1;
}

.fyla-hero-description {
  display: grid;
  gap: 0.45rem;
  max-width: 42rem;
  margin: 1.35rem 0 0;
  color: var(--fyla-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.fyla-hero-lead {
  color: var(--fyla-ink);
  font-weight: 700;
}

.fyla-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.35rem;
  margin: 1.35rem 0 0;
  padding: 0;
  color: var(--fyla-muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.fyla-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.fyla-benefits .material-symbols-outlined {
  color: var(--fyla-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.fyla-device-panel,
.fyla-network-section {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  border-radius: 1.6rem;
  background: var(--fyla-surface);
}

.fyla-section-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.1;
}

.fyla-device-field {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.3rem;
}

.fyla-device-field label {
  color: var(--fyla-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fyla-device-field input,
.fyla-page .fyla-chat-panel textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 0 !important;
  border-radius: 0.8rem;
  outline: none;
  padding: 0.75rem 0.85rem;
  color: var(--fyla-ink);
  background: var(--fyla-field);
  font: inherit;
  font-size: 0.78rem;
  box-shadow: none !important;
  transition: background 180ms ease;
}

.fyla-device-field input:focus,
.fyla-page .fyla-chat-panel textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--fyla-primary) 24%, transparent);
  outline-offset: 0;
}

.fyla-device-panel > p {
  margin: 0.7rem 0 0;
  color: var(--fyla-muted);
  font-size: 0.68rem;
  line-height: 1.55;
}

.fyla-network-section {
  display: grid;
  gap: 1rem;
}

.fyla-network-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fyla-network-heading > span {
  color: var(--fyla-primary);
  font-size: 0.68rem;
  font-weight: 700;
}

#global-status {
  margin: 0;
  color: var(--fyla-muted);
  font-size: 0.75rem;
  transition: color 220ms ease;
}

#global-status.fyla-global-status--success {
  color: #087443;
}

#global-status.fyla-global-status--warn {
  color: #9a4c00;
}

#global-status.fyla-global-status--error {
  color: #a32942;
}

#global-status.fyla-global-status--default {
  color: var(--fyla-muted);
}

html.darkmode #global-status.fyla-global-status--success {
  color: #8ce0b9;
}

html.darkmode #global-status.fyla-global-status--warn {
  color: #ffd18a;
}

html.darkmode #global-status.fyla-global-status--error {
  color: #ff9fb1;
}

#device-list .fyla-peer-status {
  border: 0;
  transition: color 380ms ease, background-color 380ms ease;
  will-change: color, background-color;
}

#device-list .fyla-peer-status--connected {
  color: #087443;
  background: #c7f1dc;
}

#device-list .fyla-peer-status--offline {
  color: #7b2940;
  background: #f6d9df;
}

#device-list .fyla-peer-status--connecting {
  color: #9a4c00;
  background: #ffedc9;
}

#device-list .fyla-peer-status--visible {
  color: #1f4f91;
  background: #dce9ff;
}

html.darkmode #device-list .fyla-peer-status--connected {
  color: #9af0c5;
  background: #174b39;
}

html.darkmode #device-list .fyla-peer-status--offline {
  color: #ffb1c1;
  background: #542632;
}

html.darkmode #device-list .fyla-peer-status--connecting {
  color: #ffd795;
  background: #5c401c;
}

html.darkmode #device-list .fyla-peer-status--visible {
  color: #b6d1ff;
  background: #203d69;
}

#device-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#device-list > article {
  padding: 1.25rem !important;
  border: 0 !important;
  border-radius: 1.2rem !important;
  background: var(--fyla-field) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#device-list h3,
#device-list h4 {
  color: var(--fyla-ink) !important;
  font-family: "Sora", system-ui, sans-serif;
}

#device-list [data-chat-peer] {
  border: 0 !important;
  color: var(--fyla-primary) !important;
  background: var(--fyla-field-soft) !important;
  box-shadow: none !important;
}

#device-list [data-share-dropzone] {
  border: 0 !important;
  border-radius: 0.9rem !important;
  background: var(--fyla-field-soft) !important;
}

#device-list [data-share-dropzone] p.text-sm {
  color: var(--fyla-share-ink) !important;
}

#device-list [data-share-dropzone] p.text-xs {
  color: var(--fyla-share-muted) !important;
}

#device-list [data-share-peer] {
  border: 0 !important;
  color: #fff !important;
  background: var(--fyla-primary) !important;
  box-shadow: none !important;
}

#device-list [data-share-peer]:hover:not(:disabled) {
  background: var(--fyla-primary-hover) !important;
}

#device-list .bg-green-100,
#device-list .bg-blue-100,
#device-list .bg-orange-100,
#device-list .bg-gray-200 {
  color: var(--fyla-primary) !important;
  background: var(--fyla-primary-soft) !important;
}

#empty-state {
  padding: 2rem;
  border: 1px dashed var(--fyla-line);
  border-radius: 1.2rem;
  color: var(--fyla-muted);
  background: transparent;
  text-align: center;
}

#empty-state p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
}

#empty-state p:first-child {
  color: var(--fyla-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

#empty-state p + p {
  margin-top: 0.45rem;
}

/* The modal follows the same flat, single-color language as the page. */
.fyla-page .fyla-chat-panel {
  border: 0 !important;
  background: var(--fyla-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.fyla-page .fyla-chat-panel::before {
  display: none !important;
}

.fyla-page .fyla-chat-send-button {
  background: var(--fyla-primary) !important;
  box-shadow: none !important;
}

.fyla-page .fyla-chat-close {
  border: 0 !important;
  background: var(--fyla-field) !important;
  color: var(--fyla-ink) !important;
}

.fyla-page #fyla-chat-form {
  border-top: 0 !important;
}

@media (max-width: 900px) {
  .fyla-hero-layout {
    grid-template-columns: 1fr;
  }

  #device-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fyla-shell {
    width: min(100% - 1.1rem, 40rem);
    padding-top: 2.5rem;
  }

  .fyla-benefits {
    display: grid;
    gap: 0.55rem;
  }

  .fyla-benefits li {
    white-space: normal;
  }

  .fyla-device-panel,
  .fyla-network-section {
    padding: 1rem;
    border-radius: 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fyla-page *,
  .fyla-page *::before,
  .fyla-page *::after {
    transition-duration: 0.01ms !important;
  }
}