.intro-page { position: absolute; inset: 0; z-index: 2; isolation: isolate; background: #101412; }
.intro-page[hidden] { display: block; visibility: hidden; }
.scroll-mark[hidden] { display: none; }
.intro-page.turning::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(var(--fold-edge) - var(--fold-width)),
    #10151445 calc(var(--fold-edge) - var(--fold-width) * .66),
    #6e7068 calc(var(--fold-edge) - var(--fold-width) * .34),
    #c2c2b3 var(--fold-edge));
}
.skip-intro { position: absolute; z-index: 6; left: 1rem; top: 1rem; transform: translateY(-220%); }
.skip-intro:focus-visible { transform: none; background: #17221e; color: #fff; padding: .65em .9em; }
.meadow {
  position: fixed; inset: 0; height: 100svh; z-index: 1; overflow: hidden;
  background: #23352d url('grass-poster.jpg') center center / cover no-repeat;
  color: #f7f6ef; font-family: Onest, Arial, sans-serif;
}
.meadow::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,#101b1b1a,transparent 25%,#0f191518 62%,#121c1610);
}
.meadow-ui {
  position: absolute; z-index: 3; inset: var(--chat-view-top, 0px) 0 auto; height: 100%;
  height: min(100%, var(--chat-view-height, 100%)); display: grid; align-items: center; justify-items: center;
  padding: max(68px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(56px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.chat-room {
  width: min(100%, 590px); min-width: 0; max-height: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.chat-intro { flex: none; color: #fcfbf4; text-shadow: 0 2px 18px #14251db3; }
.chat-intro h2 { margin: 0 0 clamp(20px, 3.5svh, 32px); font: 300 clamp(37px, 4.4vw, 54px)/1.09 Manrope, sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.meadow :is(button,a,textarea):focus-visible { outline: 2px solid #f3edd9; outline-offset: 3px; }
.composer {
  position: relative; color-scheme: light; flex: none; width: min(100%, 355px);
  margin: 0; padding: 5px 51px 5px 18px; border-radius: 28px; text-align: left;
  color: #202822; background: #fffefb; border: 1px solid #efeee9;
  box-shadow: 0 3px 9px #0d1b181a, 0 12px 38px #0b191a26;
  transition: width .32s cubic-bezier(.2,.8,.2,1), border-radius .25s, padding .25s;
}
.composer.is-open { width: 100%; border-radius: 24px; padding: 12px 12px 6px; }
.composer textarea {
  display: block; width: 100%; min-width: 0; min-height: 40px; height: 40px; margin: 0;
  padding: 10px 0 8px; border: 0; resize: none; background: transparent; color: #202822;
  font: 400 16px/1.4 Onest, sans-serif; letter-spacing: -.012em; overflow-y: auto;
  transition: height .22s cubic-bezier(.2,.8,.2,1);
}
.composer textarea:focus-visible { outline: none; }
.composer:focus-within { box-shadow: 0 0 0 2px #acbbb1a8, 0 8px 32px #101a1729; }
.composer textarea::placeholder { color: #666d68; opacity: 1; }
.composer.is-open textarea { padding: 4px 6px; min-height: 51px; max-height: min(138px,22svh); }
.compose-circle {
  display: grid; place-items: center; border: 0; margin: 0; padding: 0;
  width: 44px; height: 44px; flex: none; color: #fffefa; background: transparent; cursor: pointer;
  position: relative; isolation: isolate;
}
.compose-circle::before { content: ''; position: absolute; z-index: -1; inset: 4px; border-radius: 50%; background: #223129; }
.compose-circle svg, .contact-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.compose-open { position: absolute; right: 3px; top: 3px; }
.composer.is-open .compose-open { display: none; }
.compose-toolbar {
  display: flex; align-items: end; justify-content: space-between; gap: 6px; height: 0;
  opacity: 0; overflow: hidden; transition: opacity .2s, height .28s cubic-bezier(.22,.8,.2,1);
}
.composer.is-open .compose-toolbar {
  flex:0 0 auto; align-items:center; min-width:0; min-height:48px; height:auto;
  padding:2px 0; overflow:visible; opacity:1;
}
.compose-send:disabled { opacity: .48; cursor: default; }
.chat-contact { min-width: 0; }
.contact-trigger, #chat-channels a {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; color: #3a493e; border: 0; border-radius: 12px; background: transparent;
  cursor: pointer; font: 450 13px/1.2 Onest, sans-serif; text-decoration: none;
}
.contact-trigger { padding: 0 8px; }
.contact-trigger svg { width: 17px; height: 17px; }
#chat-channels { display: inline-flex; align-items: center; }
#chat-channels a { width: 44px; height: 44px; }
#chat-channels svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.contact-trigger:hover, #chat-channels a:hover { background: #eaf0e8; }
.composer :is(button,a):focus-visible { outline: 2px solid #536d58; outline-offset: -3px; }
.meadow [hidden] { display: none !important; }
.chat-note { max-width:100%; flex:none; margin:4px 6px 7px; color:#455047; font:400 13px/1.45 Onest,sans-serif; }
.chat-note:empty { display: none; }
.composer:not(.is-open) .chat-consent { display:none; }
.chat-consent { margin:3px 5px 5px; padding-top:7px; border-top:1px solid #26392c20; font:400 12px/1.4 Onest,sans-serif; color:#465147; }
.chat-consent label { display:flex; align-items:flex-start; gap:7px; cursor:pointer; }
.chat-consent input { flex:none; width:16px; height:16px; margin:1px 0; accent-color:#344c3b; }
.chat-consent details { margin:3px 0 0 23px; }
.chat-consent summary { cursor:pointer; }
.chat-consent p { max-height:76px; overflow:auto; margin:5px 0; }
.chat-short .chat-consent { max-height:76px; overflow:auto; }
.composer.has-thread {
  display:flex; flex-direction:column; flex:0 1 auto; width:100%; min-height:0;
  max-height:min(63svh, 630px, calc(var(--chat-view-height, 100svh) - 44px));
  padding:0; overflow:hidden; border-radius:24px;
}
.composer.has-thread .chat-intro {
  flex:none; padding:15px 18px 12px; border-bottom:1px solid #dfe5dc;
  text-shadow:none; color:#3a483e; text-align:left;
}
.composer.has-thread .chat-intro h2 { margin:0; font:500 15px/1.3 Onest,sans-serif; letter-spacing:-.01em; }
.composer.has-thread textarea {
  flex:none; width:calc(100% - 24px); margin:0 12px; padding:9px 4px 4px;
  min-height:38px; max-height:min(92px,16svh); border-top:1px solid #dfe5dc;
}
.composer.has-thread .compose-toolbar {
  flex:0 0 auto; width:100%; min-height:58px; margin:0;
  padding:4px 12px max(10px, min(env(safe-area-inset-bottom), 16px));
}
.composer.has-thread .contact-trigger { flex:none; min-height:44px; white-space:nowrap; }
.composer.has-thread .compose-send { flex:0 0 44px; align-self:center; margin-left:auto; }
.composer.has-thread .compose-send::before { inset:3px; }
.composer.has-thread .chat-note { margin:0 16px 10px; }
.chat-thread {
  width:100%; flex:0 1 auto; min-height:0; margin:0; padding:14px 16px 10px;
  overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b7c3b7 transparent; text-align:left;
}
.chat-message {
  width:fit-content; max-width:100%; margin:0 0 12px; padding:0; border-radius:15px;
  white-space:pre-wrap; overflow-wrap:anywhere; font:400 15px/1.48 Onest,sans-serif;
}
.chat-message:last-child { margin-bottom:0; }
.chat-message.from-user {
  max-width:91%; margin-left:auto; padding:10px 13px; color:#203e30;
  background:#dceee0; border:1px solid #c2d9c8; border-bottom-right-radius:5px;
}
.chat-message.from-assistant {
  max-width:96%; margin-right:auto; padding:10px 13px; color:#253f50;
  background:#e7eff5; border:1px solid #cfdee9; border-bottom-left-radius:5px;
}
@media (max-width: 600px) {
  .meadow-ui { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .composer:not(.is-open) { width: min(100% - 12px, 345px); }
}
@media (max-width:420px) {
  .meadow.in-conversation .meadow-ui { padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); }
  .composer.has-thread .chat-thread { padding-inline:11px; }
}
.chat-short .meadow-ui { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); }
.chat-short .chat-intro h2 { font-size: 27px; margin-bottom: 12px; }
.chat-short .composer.has-thread { max-height:calc(var(--chat-view-height,100svh) - 24px); }
.chat-short .composer.has-thread .chat-intro { padding-block:7px; }
.chat-short .composer.has-thread textarea { min-height:36px; max-height:52px; }
.chat-short .chat-intro:has(~ .composer.is-open) { display: none; }