/* GladeNest sync-video / Package E frontend minimal entry */

:root {
  --sky-1: #edf7ff;
  --sky-2: #dbeeff;
  --sky-3: #cfe5fb;

  --floral-1: #f3ecfb;
  --floral-2: #eadff6;
  --floral-3: #e6dbf1;

  --wood-1: #f2e8dc;
  --wood-2: #eadbc8;
  --wood-3: #dcc7ae;

  --grass-1: #e6f2e4;
  --grass-2: #d8ead2;
  --grass-3: #c6debf;

  --panel: rgba(255, 252, 248, 0.74);
  --panel-strong: rgba(255, 250, 245, 0.88);
  --panel-soft: rgba(255, 255, 255, 0.48);

  --line: rgba(143, 126, 108, 0.18);
  --line-soft: rgba(162, 144, 126, 0.12);

  --text: #4a433d;
  --text-soft: #756b63;
  --heading: #3f3832;

  --accent: #8d6f53;
  --accent-hover: #775c44;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow: 0 10px 32px rgba(88, 69, 51, 0.08);
  --container: 1080px;
  --control-h: 46px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,0.72), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.44), transparent 18%),
    radial-gradient(circle at 22% 42%, rgba(243, 229, 251, 0.34), transparent 20%),
    radial-gradient(circle at 78% 58%, rgba(237, 224, 245, 0.24), transparent 18%),
    radial-gradient(circle at 36% 76%, rgba(232, 220, 200, 0.30), transparent 20%),
    radial-gradient(circle at 74% 92%, rgba(213, 234, 207, 0.34), transparent 18%),
    linear-gradient(
      180deg,
      var(--sky-1) 0%,
      var(--sky-2) 14%,
      #e2effd 24%,
      var(--floral-1) 42%,
      var(--floral-2) 56%,
      #eee5f4 63%,
      var(--wood-1) 76%,
      var(--wood-2) 86%,
      var(--grass-1) 94%,
      var(--grass-2) 100%
    );
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.14) 100%);
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 44px;
}

.hero {
  margin-bottom: 22px;
  padding: 30px 28px 26px;
  border: 1px solid rgba(170, 199, 223, 0.34);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(245, 251, 255, 0.78), rgba(231, 243, 255, 0.64));
  box-shadow: 0 12px 34px rgba(83, 122, 156, 0.08);
  backdrop-filter: blur(8px);
}

.hero__title {
  margin: 0;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #34404a;
}

.hero__subtitle {
  margin: 10px 0 0;
  color: #5d7488;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.25px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.prejoin-stage {
  margin-top: 28px;
}

body.prejoin .after-join {
  display: none;
}

body.prejoin .footnote {
  display: none;
}

body.joined .prejoin-stage {
  margin-top: 0;
}

body.joined .after-join,
body.joined .footnote {
  display: block;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--panel), rgba(255, 249, 244, 0.62));
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.panel--floral {
  background:
    linear-gradient(180deg, rgba(251, 248, 255, 0.72), rgba(247, 241, 252, 0.62));
  border-color: rgba(164, 148, 187, 0.20);
}

.panel--wood {
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.76), rgba(245, 236, 224, 0.66));
  border-color: rgba(166, 143, 112, 0.20);
}

.panel__head {
  padding: 18px 22px 0;
}

.panel__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--heading);
  font-weight: 700;
}

.panel__body {
  padding: 18px 22px 22px;
}

.panel--status .panel__body {
  padding-top: 14px;
}

.join-form,
.media-row,
.quick-row {
  display: grid;
  grid-template-columns: 1fr 144px;
  gap: 12px;
  align-items: center;
}

.control,
.button,
.select {
  height: var(--control-h);
  border-radius: 14px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.control,
.select {
  width: 100%;
  padding: 0 14px;
  border: 1px solid rgba(150, 134, 118, 0.22);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
}

.control::placeholder {
  color: #9b8f86;
}

.control:focus,
.select:focus {
  border-color: rgba(127, 155, 185, 0.52);
  box-shadow: 0 0 0 4px rgba(160, 191, 220, 0.18);
  background: rgba(255, 255, 255, 0.92);
}

.button {
  min-width: 120px;
  padding: 0 18px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.2px;
  transform: translateY(0);
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.button--primary {
  background: linear-gradient(180deg, #a2c5fa, #87aaf5);
  box-shadow: 0 9px 18px rgba(76, 134, 255, 0.18);
}

.button--primary:hover {
  background: linear-gradient(180deg, #5d9cff, #3f78f2);
}

.button--secondary {
  background: linear-gradient(180deg, #cbbffd, #a69ae7);
  box-shadow: 0 9px 18px rgba(124, 108, 217, 0.18);
}

.button--secondary:hover {
  background: linear-gradient(180deg, #8b78e0, #6c5ed0);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(166, 151, 182, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(247, 241, 252, 0.48));
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(156, 137, 179, 0.14);
  color: #5b4e67;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.status-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a26767;
  box-shadow: 0 0 0 4px rgba(162, 103, 103, 0.12);
}

.status-badge.is-online {
  background: rgba(117, 143, 110, 0.16);
  color: #456143;
}

.status-badge.is-online::before {
  background: #6f8a61;
  box-shadow: 0 0 0 4px rgba(111, 138, 97, 0.14);
}

.status-meta {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(169, 154, 186, 0.14);
  background: rgba(255,255,255,0.44);
  color: #5f5550;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
}

.status-chip__label {
  color: #8f7f74;
  font-weight: 600;
}

.status-chip__value {
  color: #453e39;
  font-weight: 700;
}

.status-note-inline {
  width: 100%;
  margin-top: 2px;
  color: #6f665f;
  font-size: 13px;
  line-height: 1.5;
}

.player-shell {
  display: grid;
  gap: 12px;
}

.player-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.player-title {
  margin: 0;
  font-size: 18px;
  color: #443c36;
}

.mode-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(156, 137, 179, 0.16);
  color: #5a4d64;
  font-size: 13px;
  font-weight: 700;
}

.player-subline,
.player-token {
  color: #72675e;
  font-size: 13px;
  line-height: 1.5;
}

.player-stage {
  padding: 12px;
  border: 1px solid rgba(166, 151, 182, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
}

.player-stage video {
  width: 100%;
  display: block;
  border-radius: 16px;
  background: #000;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 280px;
  text-align: center;
  padding: 24px;
}

.empty-state__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #443d37;
}

.empty-state__desc {
  margin: 0;
  color: #756c64;
  line-height: 1.7;
}

.reference-card {
  display: grid;
  gap: 14px;
}

.reference-card__desc {
  margin: 0;
  color: #665d56;
  line-height: 1.7;
}

.reference-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reference-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(142, 126, 110, 0.18);
  color: #4b433d;
  text-decoration: none;
  font-weight: 600;
}

.reference-link:hover {
  background: rgba(255,255,255,0.92);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 13px;
  color: #756d66;
  font-weight: 700;
}

.action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.info-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(163, 146, 180, 0.14);
  background: rgba(255, 255, 255, 0.48);
}

.info-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #463f39;
  margin-bottom: 8px;
}

.info-card__desc {
  color: #70655d;
  line-height: 1.7;
  font-size: 14px;
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.state-chip {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(162, 145, 178, 0.12);
}

.state-chip span {
  color: #8c7c72;
  font-size: 12px;
  font-weight: 700;
}

.state-chip strong {
  color: #473f39;
  font-size: 14px;
  line-height: 1.5;
}

.reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.pill-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(162, 145, 178, 0.18);
  background: rgba(255,255,255,0.70);
  color: #534941;
  font-weight: 700;
  cursor: pointer;
}

.pill-button:hover {
  background: rgba(255,255,255,0.92);
}

.typing-banner {
  min-height: 24px;
  margin-top: 12px;
  color: #7d6151;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.typing-banner.is-visible {
  opacity: 1;
}

.feed-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.feed-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.42);
  border: 1px dashed rgba(160, 144, 177, 0.18);
  color: #7b7068;
  line-height: 1.7;
}

.feed-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(163, 146, 180, 0.14);
}

.feed-item__time {
  color: #8b7c73;
  font-size: 12px;
  font-weight: 700;
}

.feed-item__text {
  color: #49423d;
  line-height: 1.6;
  word-break: break-word;
}

.feed-item--reaction {
  background: rgba(255, 250, 244, 0.72);
}

.feed-item--message {
  background: rgba(248, 246, 255, 0.72);
}

.feed-item--referenced {
  background: rgba(245, 251, 255, 0.72);
}

.footnote {
  margin-top: 18px;
  text-align: center;
  color: #7f746b;
  font-size: 13px;
  letter-spacing: 0.15px;
}

.after-join {
  margin-top: 18px;
}

@media (max-width: 860px) {
  .form-grid,
  .state-grid {
    grid-template-columns: 1fr;
  }

  .join-form,
  .media-row,
  .quick-row {
    grid-template-columns: 1fr;
  }

  .action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .page {
    width: min(var(--container), calc(100% - 20px));
    padding-top: 20px;
  }

  .hero {
    padding: 22px 18px 20px;
  }

  .panel__head {
    padding: 16px 16px 0;
  }

  .panel__body {
    padding: 16px;
  }

  .action-row {
    grid-template-columns: 1fr;
  }

  .reaction-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .status-line {
    padding: 10px;
  }
}