.mx-ai-page { padding-bottom: clamp(3rem, 6vw, 6rem); }
.mx-ai-hero {
  padding: clamp(4rem, 7vw, 7.5rem) 0 clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 80% 10%, rgba(184,151,91,0.16), transparent 28rem),
    linear-gradient(180deg, rgba(219,232,213,0.45), transparent);
}
.mx-ai-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.mx-ai-hero h1 {
  margin: 0;
  max-width: 10ch;
  color: var(--estate-deep);
  font-family: var(--estate-serif);
  font-size: clamp(3.1rem, 6vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}
.mx-ai-hero p { max-width: 68ch; color: rgba(17,32,23,0.72); font-size: 1.13rem; }
.mx-ai-hero__panel {
  padding: 1.4rem;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--estate-deep), #174633);
  color: #fff9e8;
  box-shadow: var(--estate-shadow-soft);
}
.mx-ai-hero__panel span,
.mx-ai-topbar__badge { color: #d7c18b; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; }
.mx-ai-hero__panel strong { display: block; margin-top: 0.55rem; font-size: 1.25rem; line-height: 1.22; }
.mx-ai-topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--estate-line);
  border-radius: 28px;
  background: rgba(255,253,248,0.84);
  box-shadow: 0 18px 48px rgba(11,45,32,0.08);
}
.mx-ai-topbar__left { display: flex; align-items: center; gap: 1rem; }
.mx-ai-topbar__logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--estate-deep);
  color: #fff9e8;
  font-weight: 900;
}
.mx-ai-topbar__title { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.mx-ai-topbar__name { font-weight: 880; letter-spacing: -0.035em; }
.mx-ai-topbar__badge { color: var(--estate-green); }
.mx-ai-topbar__sub { color: var(--estate-muted); font-size: 0.92rem; }
.mx-ai-btn,
.mx-ai-send {
  border: 0;
  border-radius: 999px;
  padding: 0.78rem 1rem;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.mx-ai-btn--primary,
.mx-ai-send { background: var(--estate-deep); color: #fff9e8; }
.mx-ai-btn--danger { background: rgba(118,45,28,0.09); color: #76321f; }
.mx-ai-shell {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
}
.mx-ai-sessions,
.mx-ai-chat {
  border: 1px solid var(--estate-line);
  border-radius: 30px;
  background: rgba(255,253,248,0.86);
  box-shadow: 0 18px 48px rgba(11,45,32,0.08);
}
.mx-ai-sessions { padding: 1rem; min-height: 620px; }
.mx-ai-sessions__top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.mx-ai-sessions__title { font-weight: 880; color: var(--estate-deep); }
.mx-ai-sessions__list { display: grid; gap: 0.55rem; }
.mx-ai-chat { min-height: 620px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.mx-ai-chat__header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--estate-line); }
.mx-ai-chat__title { font-weight: 880; color: var(--estate-deep); }
.mx-ai-empty { padding: clamp(1.2rem, 3vw, 2rem); }
.mx-ai-empty__headline { font-family: var(--estate-serif); font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1; letter-spacing: -0.045em; color: var(--estate-deep); }
.mx-ai-empty__sub,
.mx-ai-empty__tips { color: var(--estate-muted); }
.mx-ai-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.mx-ai-chip {
  border: 1px solid var(--estate-line);
  border-radius: 999px;
  background: var(--estate-sage-soft);
  color: var(--estate-deep);
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-weight: 820;
  cursor: pointer;
}
.mx-ai-thread { padding: 1rem; overflow: auto; }
.mx-ai-composer { display: flex; gap: 0.75rem; padding: 1rem; border-top: 1px solid var(--estate-line); background: rgba(255,253,248,0.78); }
.mx-ai-input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--estate-line);
  border-radius: 999px;
  padding: 0.9rem 1rem;
  background: #fff;
  color: var(--estate-ink);
  font: inherit;
}
.mx-ai-input:focus { outline: 3px solid rgba(31,111,72,0.16); }

@media (max-width: 960px) {
  .mx-ai-hero__grid,
  .mx-ai-shell { grid-template-columns: 1fr; }
  .mx-ai-sessions { min-height: auto; }
  .mx-ai-chat { min-height: 560px; }
}
@media (max-width: 640px) {
  .mx-ai-topbar,
  .mx-ai-topbar__left,
  .mx-ai-composer { align-items: stretch; flex-direction: column; }
  .mx-ai-send { width: 100%; }
}