/* A full-page conversation with a fixed header and composer. */
:root { color-scheme: light; font: 100%/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17250c; background: #f7f9f4; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, textarea { font: inherit; }
a { color: #23530a; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; padding: 10px; background: white; }
.skip-link:focus { top: 8px; }
.ethan-chat {
  position: fixed; top: var(--chat-viewport-top, 0px); left: 0; width: 100%; height: var(--chat-viewport-height, 100dvh);
  display: flex; flex-direction: column; overflow: hidden;
}
#messenger button { cursor: pointer; }
#messenger button:disabled { cursor: default; opacity: .55; }
#messenger :is(button, textarea, summary, a):focus-visible { outline: 3px solid #bd7a0c; outline-offset: 3px; }
.ec-header {
  display: flex; align-items: center; gap: 12px; flex: none; background: #1a2c07; color: #fff;
  padding: calc(16px + env(safe-area-inset-top)) max(20px, calc((100% - 960px) / 2)) 16px;
}
.ec-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; margin-left: -8px; border-radius: 8px; color: #fff; font-size: .875rem; text-decoration: none; }
.ec-header img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.ec-person { flex: 1; min-width: 0; }
.ec-person h1 { margin: 0; font-size: 1.125rem; line-height: 1.25; font-weight: 650; }
.ec-person p { margin: 3px 0 0; color: #e0edcf; font-size: .875rem; line-height: 1.35; }
.ec-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.ec-icon-button:hover, .ec-back:hover { background: #809e6540; }
.ec-icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ec-options { position: relative; flex: none; }
.ec-options>summary { list-style: none; cursor: pointer; }
.ec-options>summary::-webkit-details-marker { display: none; }
.ec-info-card { position: absolute; top: calc(100% + 14px); right: 0; z-index: 5; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, calc(var(--chat-viewport-height, 100dvh) - 130px)); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid #cad5c1; border-radius: 14px; background: #fff; color: #17250c; box-shadow: 0 8px 30px #13260926; font-size: .875rem; }
.ec-info-card h2 { margin: 0 0 12px; font-size: 1rem; }
.ec-info-card p { margin: 0 0 14px; }
.ec-info-card button { padding: 10px 12px; min-height: 44px; border: 1px solid #a9b59e; border-radius: 8px; color: #17250c; background: #fff; font-size: .875rem; margin: 4px 0; }
.ec-privacy { margin: 0 0 12px; }
.ec-privacy summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; }
.ec-scroll { flex: 1 1 0; min-height: 0; width: min(100%, 960px); margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px; }
.ec-loading { text-align: center; font-size: .875rem; color: #526147; }
.ec-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ec-empty p { font-size: 1.375rem; font-weight: 650; margin: 0 0 8px; }
.ec-empty span { font-size: 1rem; color: #526147; }
.ec-log { display: flex; flex-direction: column; gap: 14px; }
.ec-message { align-self: flex-start; max-width: min(82%, 640px); border: 1px solid #d3dcc9; border-radius: 18px 18px 18px 4px; padding: 12px 16px; background: #fff; overflow-wrap: anywhere; }
.ec-message.ec-mine { align-self: flex-end; background: #e3f6cf; border-color: #bed7a3; border-radius: 18px 18px 4px 18px; }
.ec-message p { white-space: pre-wrap; margin: 0; font-size: 1rem; line-height: 1.5; }
.ec-meta { margin-top: 5px; color: #516044; font-size: .75rem; line-height: 1.4; }
.ec-message[data-status=failed] { border-color: #a83e27; }
.ec-new { flex: none; align-self: center; border: 1px solid #afc49d; border-radius: 24px; background: #e3f6cf; color: #17250c; min-height: 44px; padding: 8px 16px; margin: 0 0 10px; font-size: .875rem; }
.ec-compose { flex: none; padding: 14px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); margin: 0; border-top: 1px solid #dbe2d4; background: #fff; }
.ec-compose-inner { max-width: 920px; margin-inline: auto; }
.ec-compose-row { display: flex; align-items: flex-end; gap: 8px; }
#messenger-draft { flex: 1 1 0; width: 0; min-width: 0; min-height: 46px; max-height: 140px; padding: 11px 14px; margin: 0; border: 1px solid #a8b59c; border-radius: 22px; resize: none; background: #f7f9f4; color: #17250c; font-size: 1rem; line-height: 1.4; }
#messenger-draft::placeholder { color: #626d59; opacity: 1; }
#messenger-send { flex: none; height: 46px; padding: 0 20px; margin: 0; border: 0; border-radius: 24px; background: #8fe13d; color: #17250c; font-size: 1rem; font-weight: 650; }
.ec-reply-note { text-align: center; font-size: .875rem; line-height: 1.4; color: #536047; margin: 8px 0 0; }
.ec-feedback, .ec-unavailable { margin: 0 0 10px; color: #584116; font-size: .875rem; line-height: 1.4; }
.ec-unavailable { margin: 10px 0 0; }
.ec-files { list-style: none; padding: 0; margin: 0 0 8px; max-height: 120px; overflow-y: auto; }
.ec-files li { display: flex; align-items: center; gap: 8px; border: 1px solid #d3dcc9; border-radius: 8px; padding: 4px 8px; margin: 5px 0; font-size: .875rem; }
.ec-files li>span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ec-files small { display: block; color: #536047; font-size: .75rem; }
.ec-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media(max-width:480px) {
  .ec-header { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; gap: 8px; }
  .ec-header img { width: 36px; height: 36px; }
  .ec-person h1 { font-size: 1rem; }
  .ec-scroll { padding: 18px 12px; }
  .ec-message { max-width: 90%; padding: 10px 12px; }
  .ec-compose-row { gap: 4px; }
  #messenger-send { padding: 0 14px; }
  .ec-info-card { right: 0; }
}
@media(max-height:500px) { .ec-reply-note { display: none; } .ec-header { padding-block: 8px; } }
.ec-short .ec-reply-note { display: none; }
.ec-short .ec-header { padding-block: 8px; }