/* ===========================================================================
   E House Movers — AI assistant page

   Two columns on a full-bleed warm-dark ground: the pitch on the left, the
   conversation on the right. Both share one height, and the message list is
   the only thing that scrolls — so neither column ever ends in dead space.

   Scoped to .ehm-page / #ehm-app, plus a few body-class rules that release
   Astra's container on this template only.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Release Astra's wrappers, on this template only
   --------------------------------------------------------------------------- */
body.page-template-page-movers-gen-ai #content,
body.page-template-page-movers-gen-ai #content .ast-container,
body.page-template-page-movers-gen-ai #primary,
body.page-template-page-movers-gen-ai .site-content .ast-container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Astra switches .ast-container to display:flex above its desktop breakpoint.
   <main> then becomes a flex item with flex-grow:0, sizes to its content, and
   the page collapses into a narrow band on the left while the rest of the
   screen stays white. Put the container back to block, and make <main> fill
   the line anyway in case a flex context survives elsewhere. */
body.page-template-page-movers-gen-ai #content .ast-container,
body.page-template-page-movers-gen-ai .site-content .ast-container {
  display: block;
}

body.page-template-page-movers-gen-ai .ehm-page {
  width: 100%;
  flex: 1 1 100%;
  align-self: stretch;
}

/* The page owns the screen: no footer under it. */
body.page-template-page-movers-gen-ai .ast-custom-footer,
body.page-template-page-movers-gen-ai .site-footer,
body.page-template-page-movers-gen-ai footer.site-footer {
  display: none;
}

body.page-template-page-movers-gen-ai #content {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Ground
   --------------------------------------------------------------------------- */
.ehm-page {
  --ehm-ink:      #0B0807;
  --ehm-surface:  #16110F;
  --ehm-raise:    #1F1815;
  --ehm-raise-2:  #281F1B;
  --ehm-edge:     #2E2320;
  --ehm-edge-hi:  #3F302B;

  --ehm-brand:    #90191C;
  --ehm-brand-hi: #B8282E;

  --ehm-sand:     #EFE3DB;
  --ehm-sand-2:   #C6B4AB;
  --ehm-dust:     #948079;

  --ehm-live:     #5FBE85;
  --ehm-warn:     #E99A94;

  /* The site header is position:fixed and 72px tall, so content flows beneath
     it. This is that clearance plus breathing room. */
  --ehm-head: 72px;

  position: relative;
  isolation: isolate;
  padding: calc(var(--ehm-head) + 34px) 22px 42px;
  background:
    radial-gradient(1200px 680px at 50% -22%, rgba(144, 25, 28, .30), transparent 66%),
    radial-gradient(820px 520px at 90% 6%,    rgba(184, 40, 46, .08), transparent 62%),
    var(--ehm-ink);
  color: var(--ehm-sand);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* .ehm-page itself must be included: a universal selector only reaches
   descendants, so the page kept content-box and width:100% plus its own
   horizontal padding overflowed the viewport by exactly that padding. */
.ehm-page,
.ehm-page * { box-sizing: border-box; }

/* An author display value beats the UA stylesheet's [hidden]{display:none},
   so anything the script hides needs this or it stays on screen. */
.ehm-page [hidden] { display: none !important; }

/* Fine grain, so the ground reads as material rather than flat fill. */
.ehm-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27150%27 height=%27150%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}

.ehm-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

/* Both columns share one height, so neither ends in dead space. */
.ehm-shell {
  display: grid;
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  height: clamp(540px, calc(100vh - var(--ehm-head) - 100px), 780px);
}

/* ---------------------------------------------------------------------------
   Left column
   --------------------------------------------------------------------------- */
.ehm-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 28px;
  background: linear-gradient(168deg, rgba(184, 40, 46, .10), transparent 52%), var(--ehm-surface);
  border: 1px solid var(--ehm-edge);
  border-radius: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ehm-side::-webkit-scrollbar { width: 7px; }
.ehm-side::-webkit-scrollbar-thumb { background: var(--ehm-edge-hi); border-radius: 99px; }
.ehm-side::-webkit-scrollbar-track { background: transparent; }

.ehm-side-head { display: flex; flex-direction: column; gap: 12px; }

.ehm-page .ehm-title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #FFF7F2;
  text-wrap: balance;
}

.ehm-lede { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ehm-sand-2); }

.ehm-art { margin: -2px 0; }
.ehm-art svg { display: block; width: 100%; height: auto; }

.ehm-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ehm-points li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ehm-sand-2);
}
/* A hairline tick rather than a coloured dot: these are a checklist, so the
   marker should say so instead of decorating. */
.ehm-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--ehm-brand-hi);
  border-bottom: 1.5px solid var(--ehm-brand-hi);
  transform: rotate(-45deg);
}

.ehm-move { display: flex; flex-direction: column; gap: 10px; }
.ehm-move-label { font-size: 12.5px; color: var(--ehm-dust); }
.ehm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ehm-tag {
  font-size: 13px;
  color: var(--ehm-sand);
  background: var(--ehm-raise-2);
  border: 1px solid var(--ehm-edge-hi);
  border-radius: 8px;
  padding: 5px 10px;
  animation: ehmPop .26s cubic-bezier(.34, 1.4, .64, 1) both;
}
.ehm-tag b { font-weight: 400; color: var(--ehm-dust); margin-right: 5px; }
@keyframes ehmPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.ehm-side-acts { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }

.ehm-page .ehm-btn {
  appearance: none;
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .14s;
}
.ehm-page .ehm-btn:active { transform: translateY(1px); }
.ehm-page .ehm-btn-solid { background: var(--ehm-brand); color: #fff; }
.ehm-page .ehm-btn-solid:hover { background: var(--ehm-brand-hi); color: #fff; }
.ehm-page .ehm-btn-line { background: transparent; border-color: var(--ehm-edge-hi); color: var(--ehm-sand-2); }
.ehm-page .ehm-btn-line:hover { border-color: var(--ehm-brand-hi); color: var(--ehm-sand); }
.ehm-page .ehm-btn:focus-visible { outline: 2px solid var(--ehm-brand-hi); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Right column — the conversation
   --------------------------------------------------------------------------- */
.ehm-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;          /* lets the log scroll instead of the column growing */
  background: var(--ehm-surface);
  border: 1px solid var(--ehm-edge);
  border-radius: 20px;
  overflow: hidden;
}

.ehm-chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--ehm-edge);
}
.ehm-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(152deg, var(--ehm-brand-hi), var(--ehm-brand));
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.ehm-who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ehm-who-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ehm-who-state { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ehm-dust); }
.ehm-live { width: 6px; height: 6px; border-radius: 99px; background: var(--ehm-live); flex: 0 0 auto; }

.ehm-newchat {
  appearance: none;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--ehm-edge-hi);
  border-radius: 9px;
  padding: 7px 13px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ehm-sand-2);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.ehm-newchat:hover { border-color: var(--ehm-brand-hi); color: var(--ehm-sand); background: var(--ehm-raise); }
.ehm-newchat:focus-visible { outline: 2px solid var(--ehm-brand-hi); outline-offset: 2px; }

/* The log takes every remaining pixel, so there is never dead space under it
   and the page itself never scrolls. */
.ehm-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.ehm-log::-webkit-scrollbar { width: 9px; }
.ehm-log::-webkit-scrollbar-thumb { background: var(--ehm-edge-hi); border-radius: 99px; }
.ehm-log::-webkit-scrollbar-track { background: transparent; }

/* ---------- messages ---------- */
.ehm-msg {
  max-width: 82%;
  font-size: 15px;
  animation: ehmIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ehmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ehm-msg.is-me {
  align-self: flex-end;
  background: var(--ehm-brand);
  color: #fff;
  padding: 11px 16px;
  border-radius: 15px 15px 4px 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* The assistant reads as the page talking, not a bubble, so long answers do
   not look like a wall crammed into a box. */
.ehm-msg.is-bot {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 0 1px 15px;
  border-left: 2px solid var(--ehm-brand);
  color: var(--ehm-sand);
}

.ehm-msg.is-err {
  align-self: flex-start;
  max-width: 100%;
  padding: 11px 15px;
  border-radius: 12px;
  background: rgba(233, 154, 148, .08);
  border: 1px solid rgba(233, 154, 148, .28);
  color: var(--ehm-warn);
}

.ehm-msg.is-bot p { margin: 0 0 9px; color: inherit; }
.ehm-msg.is-bot > :last-child { margin-bottom: 0; }
.ehm-msg.is-bot ul,
.ehm-msg.is-bot ol { margin: 0 0 9px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ehm-msg.is-bot li { margin: 0; line-height: 1.5; color: inherit; }
.ehm-msg.is-bot li::marker { color: var(--ehm-dust); }
.ehm-msg.is-bot strong { font-weight: 600; color: #FFF7F2; }
.ehm-msg.is-bot em { color: var(--ehm-sand-2); font-style: italic; }
.ehm-msg.is-bot code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--ehm-raise-2);
  padding: .1em .38em;
  border-radius: 4px;
}
.ehm-msg.is-bot a { color: #FFF7F2; text-decoration: underline; text-underline-offset: 2px; }

.ehm-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ehm-cite {
  font-size: 11.5px;
  color: var(--ehm-dust);
  background: var(--ehm-raise);
  border: 1px solid var(--ehm-edge);
  border-radius: 7px;
  padding: 4px 9px;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s, border-color .18s;
}
.ehm-cite:hover { color: var(--ehm-sand); border-color: var(--ehm-edge-hi); text-decoration: none; }

.ehm-typing { align-self: flex-start; display: flex; gap: 5px; padding: 7px 0 7px 17px; }
.ehm-typing i {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--ehm-dust);
  animation: ehmBeat 1.25s infinite ease-in-out;
}
.ehm-typing i:nth-child(2) { animation-delay: .16s; }
.ehm-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes ehmBeat { 0%, 62%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- quick questions: light, not a wall of cards ---------- */
.ehm-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 22px 0; }
.ehm-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ehm-edge-hi);
  border-radius: 99px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ehm-sand-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, color .18s, background .18s, transform .14s;
}
.ehm-chip:hover { border-color: var(--ehm-brand-hi); color: var(--ehm-sand); background: var(--ehm-raise); transform: translateY(-1px); }
.ehm-chip:focus-visible { outline: 2px solid var(--ehm-brand-hi); outline-offset: 2px; }

/* ---------- composer ---------- */
.ehm-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 20px 18px;
  margin: 0;
}

.ehm-page .ehm-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  background: var(--ehm-raise);
  border: 1px solid var(--ehm-edge-hi);
  color: var(--ehm-sand);
  border-radius: 13px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  max-height: 120px;
  box-shadow: none;
  transition: border-color .18s, background .18s;
}
.ehm-page .ehm-composer textarea::placeholder { color: var(--ehm-dust); }
.ehm-page .ehm-composer textarea:focus {
  outline: none;
  border-color: var(--ehm-brand-hi);
  background: var(--ehm-raise-2);
  box-shadow: none;
}

/* Fixed square, grid-centred, svg as a block. The block display is what keeps
   the arrow optically centred instead of sitting on the text baseline. */
.ehm-send {
  appearance: none;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  padding: 0;
  border: none;
  border-radius: 13px;
  background: var(--ehm-brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 0;
  transition: background .18s, transform .14s;
}
.ehm-send svg { display: block; }
.ehm-send:hover { background: var(--ehm-brand-hi); }
.ehm-send:active { transform: scale(.94); }
.ehm-send:disabled { opacity: .45; cursor: not-allowed; }
.ehm-send:focus-visible { outline: 2px solid var(--ehm-sand); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ehm-page { padding: calc(var(--ehm-head) + 20px) 14px 26px; }
  .ehm-shell { grid-template-columns: 1fr; height: auto; gap: 14px; }
  .ehm-side { order: 2; overflow: visible; padding: 24px 20px; gap: 18px; }
  .ehm-chat { order: 1; height: 68vh; min-height: 460px; }
  .ehm-side-acts { margin-top: 4px; }
  .ehm-art { max-width: 300px; }
  .ehm-msg { max-width: 90%; }
  .ehm-msg.is-bot { max-width: 100%; }
  .ehm-log { padding: 18px 16px 6px; }
  .ehm-chips { padding: 10px 16px 0; }
  .ehm-composer { padding: 13px 15px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ehm-page *,
  .ehm-page *::before { animation: none !important; transition: none !important; }
  .ehm-log { scroll-behavior: auto; }
}