:root {
  --fj-ink: #1f1d1a;
  --fj-muted: rgba(31, 29, 26, .74);
  --fj-soft: rgba(31, 29, 26, .56);
  --fj-shell: #ece6db;
  --fj-shell-2: #f3eee5;
  --fj-white: rgba(255,255,255,.78);
  --fj-line: rgba(78, 66, 49, .13);
  --fj-glow-mint: #bdfcf1;
  --fj-glow-cyan: #bcecff;
  --fj-glow-lime: #d9ff8b;
  --fj-glow-coral: #ff9a83;
  --fj-thread-aqua: rgba(223, 247, 242, .78);
  --fj-shadow-outer: 0 42px 120px rgba(89, 74, 50, .18);
  --fj-shadow-soft: 0 18px 44px rgba(92, 79, 58, .10);
  --fj-shadow-inner: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -20px 40px rgba(130, 110, 82, .07);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  color: var(--fj-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(196,255,242,.55), transparent 24%),
    radial-gradient(circle at 89% 10%, rgba(212,255,153,.40), transparent 20%),
    radial-gradient(circle at 54% 83%, rgba(255,173,148,.18), transparent 22%),
    linear-gradient(135deg, #ebe6dc 0%, #ecf5ef 44%, #efe9df 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(55,50,40,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,50,40,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, black 0 42%, transparent 80%);
  opacity: .36;
}

body::after {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 28%, rgba(255,255,255,.94), transparent 38%),
    radial-gradient(ellipse at 82% 18%, rgba(157,255,230,.32), transparent 28%),
    radial-gradient(ellipse at 86% 84%, rgba(166,240,255,.22), transparent 34%);
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: .74;
}

.fj-stage {
  width: min(1360px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 30px;
  position: relative;
  z-index: 1;
}

.fj-boot {
  padding: 40px;
  font-weight: 900;
}

.fj-ceramic-shell {
  min-height: calc(100vh - 56px);
  position: relative;
  border-radius: 36px;
  padding: 26px 28px 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.48), rgba(241,235,224,.58)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(181,252,235,.28), transparent 34%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -30px 60px rgba(140,122,94,.05),
    var(--fj-shadow-outer);
  overflow: hidden;
}

.fj-ceramic-shell::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 32px;
  border: 1px solid rgba(88,74,53,.10);
  pointer-events: none;
}

.fj-ceramic-shell::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -12%;
  height: 24%;
  background: linear-gradient(180deg, rgba(142, 225, 223, .12), rgba(255,255,255,0));
  filter: blur(12px);
  pointer-events: none;
}

.fj-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.fj-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  letter-spacing: -.045em;
  font-weight: 850;
}

.fj-mark {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  position: relative;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.98) 0 10%, transparent 12%),
    linear-gradient(145deg, #90f8e7 0%, #bbfff5 42%, #93ebff 70%, #c9bfff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 18px rgba(144,248,231,.44);
}

.fj-mark::before,
.fj-mark::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.94);
  border-radius: 999px;
  transform: rotate(38deg);
}

.fj-mark::before {
  width: 18px;
  height: 5px;
  left: 8px;
  top: 10px;
}

.fj-mark::after {
  width: 24px;
  height: 5px;
  left: 10px;
  top: 19px;
}

.fj-time-live {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px 11px 18px;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(233,255,240,.56));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 28px rgba(159,255,220,.26),
    0 10px 28px rgba(72,183,156,.10);
  font-weight: 700;
  white-space: nowrap;
}

.fj-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #95f96e;
  box-shadow: 0 0 16px rgba(149,249,110,.86);
}

.fj-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.83fr) minmax(345px, .78fr);
  gap: 20px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.fj-main-worktop {
  padding: 6px 4px 0;
}

.fj-copy-block h1 {
  margin: 0;
  font-size: clamp(52px, 6vw, 82px);
  line-height: .94;
  letter-spacing: -.078em;
  font-weight: 900;
  max-width: 760px;
  color: #2c2a26;
}

.fj-copy-block p {
  margin: 18px 0 26px;
  max-width: 790px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--fj-muted);
  font-weight: 500;
}

.fj-command-plinth {
  position: relative;
  padding: 28px 28px 22px;
  border-radius: 32px;
  max-width: 880px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(239,232,220,.46)),
    radial-gradient(circle at 78% 36%, rgba(194,255,244,.16), transparent 24%);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -16px 28px rgba(130,110,82,.05),
    var(--fj-shadow-soft);
}

.fj-badge-left {
  position: absolute;
  left: -34px;
  top: 142px;
}

.fj-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(248,244,236,.92);
  border: 1px solid rgba(112,94,72,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 18px rgba(89,74,50,.08);
  font-size: 14px;
  font-weight: 700;
}

.fj-badge::before {
  content: "◌";
  font-size: 14px;
  color: rgba(39,33,27,.75);
}

.fj-recessed-composer {
  position: relative;
  min-height: 200px;
  border-radius: 999px;
  padding: 32px 176px 32px 42px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,251,243,.68)),
    radial-gradient(circle at 16% 50%, rgba(255,255,255,.9), transparent 30%),
    radial-gradient(circle at 74% 58%, rgba(193,253,240,.22), transparent 30%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    inset 0 8px 22px rgba(125,102,71,.14),
    inset 0 -3px 0 rgba(255,255,255,.9),
    0 18px 36px rgba(95,78,52,.08);
  overflow: hidden;
}

.fj-recessed-composer::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 13px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter: blur(3px);
}

.fj-recessed-composer::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(191,176,148,.14);
  pointer-events: none;
}

.fj-mic-label {
  position: absolute;
  right: 22px;
  top: -14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(246,241,233,.92);
  border: 1px solid rgba(114,96,74,.14);
  box-shadow: 0 10px 20px rgba(89,74,50,.06);
  font-size: 14px;
  font-weight: 650;
}

#fj-message {
  display: block;
  width: 100%;
  min-height: 120px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #26231f;
  font: inherit;
  font-size: clamp(25px, 2.65vw, 34px);
  line-height: 1.13;
  letter-spacing: -.04em;
  font-weight: 650;
  position: relative;
  z-index: 2;
}

#fj-message::placeholder {
  color: rgba(38,35,31,.38);
}

.fj-light-cursor {
  position: absolute;
  left: 405px;
  bottom: 47px;
  width: 5px;
  height: 46px;
  border-radius: 999px;
  background: #c8fff9;
  box-shadow:
    0 0 10px rgba(111,255,237,.95),
    0 0 26px rgba(111,255,237,.55);
  animation: fj-blink .82s steps(1) infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes fj-blink { 50% { opacity: 0; } }

.fj-mic-knob {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1px solid rgba(108,91,67,.16);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.96), transparent 22%),
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(223,210,186,.56));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -16px 28px rgba(103,85,61,.14),
    0 16px 26px rgba(88,72,48,.20),
    0 0 24px rgba(174,255,237,.30);
  cursor: pointer;
}

.fj-mic-knob::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px dashed rgba(80,70,56,.24);
}

.fj-mic-knob::after {
  content: "🎙";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 38px;
  filter: grayscale(1);
  opacity: .60;
}

.fj-mic-knob.listening {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.98),
    0 0 0 8px rgba(255,150,126,.16),
    0 0 44px rgba(255,150,126,.32);
}

.fj-form-rails {
  display: grid;
  grid-template-columns: 1fr 142px;
  gap: 12px 20px;
  align-items: center;
  margin-top: 18px;
}

.fj-rail {
  min-width: 0;
}

.fj-rail label {
  display: block;
  margin: 0 0 7px 12px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  color: var(--fj-soft);
}

.fj-segment {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(232,224,213,.76), rgba(249,246,238,.78));
  border: 1px solid rgba(122,104,82,.16);
  box-shadow:
    inset 0 2px 8px rgba(74,62,47,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.fj-segment button {
  border: 0;
  background: transparent;
  color: rgba(31,29,26,.78);
  padding: 10px 17px;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 560;
  cursor: pointer;
}

.fj-segment button.active {
  color: #171511;
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,245,239,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 6px 14px rgba(72,60,45,.10);
}

#fj-language-segment button[data-value="Thai and English"].active {
  background:
    linear-gradient(145deg, rgba(182,255,248,.92), rgba(255,205,188,.88));
  box-shadow:
    0 0 0 1px rgba(124,242,228,.34),
    0 0 20px rgba(124,242,228,.28);
}

#fj-urgency-segment button.hot.active {
  background:
    linear-gradient(145deg, rgba(255,157,130,.90), rgba(213,255,122,.92));
  box-shadow:
    0 0 0 1px rgba(255,136,108,.28),
    0 0 18px rgba(211,255,126,.54);
}

.fj-mini-toggle {
  align-self: end;
  justify-self: end;
  width: 142px;
  height: 28px;
  position: relative;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(232,224,213,.72), rgba(249,246,238,.84));
  border: 1px solid rgba(122,104,82,.16);
  box-shadow:
    inset 0 2px 8px rgba(74,62,47,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.fj-mini-toggle-knob {
  display: block;
  width: 72px;
  height: 20px;
  border-radius: 999px;
  margin: 3px;
  background:
    linear-gradient(145deg, rgba(185,253,247,.92), rgba(215,244,239,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 12px rgba(161,255,239,.26);
}

.fj-action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.fj-primary-action {
  min-width: 220px;
  padding: 20px 34px;
  border-radius: 999px;
  border: 1px solid rgba(114,96,73,.18);
  background:
    linear-gradient(145deg, rgba(255,251,245,.96), rgba(229,219,204,.92));
  color: #211e1a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -7px 18px rgba(104,84,58,.10),
    0 14px 24px rgba(79,65,46,.12);
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

.fj-status {
  font-size: 14px;
  color: var(--fj-soft);
  font-weight: 600;
}

.fj-thread-slab {
  position: relative;
  min-height: 650px;
  border-radius: 32px;
  padding: 16px 16px 18px;
  background:
    linear-gradient(145deg, rgba(229,247,243,.54), rgba(212,240,235,.44)),
    radial-gradient(circle at 45% 0%, rgba(255,255,255,.72), transparent 36%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -22px 56px rgba(103,156,147,.08),
    0 26px 64px rgba(85,128,121,.15);
  overflow: hidden;
}

.fj-thread-slab::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.46);
  pointer-events: none;
}

.fj-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  z-index: 2;
  padding: 4px 2px 12px;
}

.fj-thread-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.03em;
  font-weight: 800;
}

.fj-small-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(248,250,248,.78);
  border: 1px solid rgba(114,96,74,.12);
  font-size: 12px;
  font-weight: 650;
}

.fj-thread {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 195px;
  overflow: auto;
  padding-right: 2px;
}

.fj-bubble {
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.34;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 18px rgba(96,130,120,.06);
  white-space: pre-wrap;
}

.fj-bubble.system,
.fj-bubble.ai {
  background:
    linear-gradient(145deg, rgba(236,249,246,.88), rgba(225,244,240,.72));
}

.fj-bubble.user {
  background:
    linear-gradient(145deg, rgba(248,244,236,.92), rgba(242,238,230,.78));
}

.fj-question-area {
  display: none;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.fj-question-card {
  margin-bottom: 10px;
  padding: 12px 12px 12px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,248,240,.88), rgba(243,253,249,.72));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 18px rgba(92,126,118,.08);
}

.fj-question-card.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 1px rgba(255,170,146,.38),
    0 0 24px rgba(255,196,164,.22),
    0 10px 18px rgba(92,126,118,.08);
}

.fj-question-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.28;
  font-weight: 700;
}

.fj-question-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(151,174,168,.34);
  background:
    linear-gradient(145deg, rgba(248,250,248,.92), rgba(237,247,244,.88));
  color: var(--fj-ink);
  font: inherit;
  outline: none;
  box-shadow: inset 0 2px 8px rgba(90,116,110,.05);
}

.fj-question-card input::placeholder {
  color: rgba(50,58,54,.45);
}

.fj-question-card input:focus {
  border-color: rgba(133,238,222,.68);
  box-shadow:
    inset 0 2px 8px rgba(90,116,110,.05),
    0 0 0 3px rgba(157,255,230,.22),
    0 0 18px rgba(157,255,230,.20);
}

.fj-answer-button {
  display: block;
  width: calc(100% - 100px);
  margin: 12px auto 0;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(114,96,74,.16);
  background:
    linear-gradient(145deg, rgba(255,251,245,.96), rgba(229,219,204,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 12px 20px rgba(79,65,46,.10);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  color: #211e1a;
  cursor: pointer;
}

.fj-thread-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px) {
  .fj-product-grid {
    grid-template-columns: 1fr;
  }

  .fj-thread-slab {
    min-height: auto;
  }

  .fj-badge-left {
    position: static;
    margin-bottom: 12px;
  }

  .fj-form-rails {
    grid-template-columns: 1fr;
  }

  .fj-mini-toggle {
    justify-self: start;
  }

  .fj-light-cursor {
    left: 46px;
    bottom: 35px;
  }
}

@media (max-width: 760px) {
  .fj-stage {
    width: min(100% - 16px, 1360px);
    padding-top: 10px;
  }

  .fj-ceramic-shell {
    border-radius: 24px;
    padding: 16px;
  }

  .fj-ceramic-shell::before {
    inset: 4px;
    border-radius: 20px;
  }

  .fj-topbar {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .fj-brand {
    font-size: 20px;
  }

  .fj-time-live {
    font-size: 12px;
    padding: 8px 10px;
  }

  .fj-copy-block h1 {
    font-size: 42px;
  }

  .fj-copy-block p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .fj-command-plinth {
    padding: 16px;
    border-radius: 22px;
  }

  .fj-recessed-composer {
    border-radius: 28px;
    padding: 20px 88px 22px 20px;
    min-height: 170px;
  }

  .fj-mic-label {
    right: 12px;
    top: -12px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .fj-mic-knob {
    width: 72px;
    height: 72px;
    right: 12px;
  }

  .fj-mic-knob::after {
    font-size: 26px;
  }

  #fj-message {
    font-size: 22px;
  }

  .fj-light-cursor {
    left: 22px;
    bottom: 30px;
    height: 40px;
  }

  .fj-segment button {
    padding: 9px 12px;
    font-size: 14px;
  }

  .fj-mini-toggle {
    width: 100px;
    height: 24px;
  }

  .fj-mini-toggle-knob {
    width: 50px;
    height: 16px;
    margin: 3px;
  }

  .fj-action-row {
    flex-wrap: wrap;
  }

  .fj-primary-action {
    width: 100%;
    min-width: 0;
    font-size: 22px;
  }

  .fj-thread-slab {
    border-radius: 22px;
    padding: 14px;
  }

  .fj-thread-slab::before {
    inset: 6px;
    border-radius: 18px;
  }

  .fj-answer-button {
    width: 100%;
  }
}