:root{color-scheme:dark;font:16px/1.5 system-ui;background:#09121e;color:#f2f7ff}*{box-sizing:border-box}body{margin:0;padding:20px}main{max-width:760px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:24px}h2{font-size:18px}button,input,textarea{font:inherit;border-radius:8px;padding:12px}button{background:#6de4ff;color:#07131e;border:0;cursor:pointer;font-weight:650}button:disabled{opacity:.6;cursor:default}input,textarea{background:#152437;border:1px solid #7793ad;color:white;width:100%}textarea{min-height:85px;resize:vertical}label{display:block;margin:12px 0}a{color:#6de4ff}.muted{color:#b5c8dd;font-size:14px}.message{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;margin:12px 0;background:#142438;border-radius:8px}.visitor{margin-left:24px;background:#203a50}.human{border-left:3px solid #6de4ff}#messages{min-height:140px;max-height:48vh;overflow:auto}#status{min-height:48px}#error{color:#ffd18e;white-space:pre-wrap}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}#list button{display:block;width:100%;text-align:left;margin:8px 0;background:#172f44;color:white}small{display:block}[hidden]{display:none!important}@media(max-width:420px){body{padding:12px}header{align-items:flex-start;flex-direction:column}button{min-height:46px}}

header h1{font-size:30px;line-height:1.2;font-weight:750;letter-spacing:-.025em}

/* Keep the latest website chat response prominent above older messages. */
#messages{overflow-anchor:none}
#messages .newest-message{font-weight:700;border:1px solid #6de4ff}

/* Keep reply controls directly below the newest message, outside history scrolling. */
#latest-message{max-height:28vh;overflow:auto;overflow-anchor:none}
#latest-message:empty{display:none}
#latest-message .newest-message{font-weight:700;border:1px solid #6de4ff;margin-top:0}
#history{margin-top:16px;border-top:1px solid #41586e;padding-top:10px}
#history summary{cursor:pointer;color:#b5c8dd;min-height:44px;padding:8px 0}
#history #messages{min-height:0;max-height:32vh}

#human-note{text-align:center;margin:12px auto;max-width:100%}

/* Before chatting, align the send controls with the bottom of the embedded panel. */
#chat-shell.empty-chat{display:flex;flex-direction:column;min-height:calc(100dvh - 40px)}
#chat-shell.empty-chat #compose{margin-top:auto}
#chat-shell #send{display:block;width:100%;margin-top:10px;min-height:46px}
@media(max-width:420px){#chat-shell.empty-chat{min-height:calc(100dvh - 24px)}}

/* Center the idle notice vertically, and place the human-chat action at the bottom. */
#chat-shell.empty-chat #human-note{flex:1;display:flex;align-items:center;justify-content:center;min-height:140px;width:100%;margin:12px 0}
#chat-shell.empty-chat #compose{margin-top:0}
#chat-shell #handoff{display:block;width:100%;margin-top:12px;min-height:46px}
#chat-shell.closed-chat #latest-message,#chat-shell.closed-chat #history{display:none}

#human-note{font-size:17px;line-height:1.55}
#new-chat{width:100%;min-height:46px}
.chat-choice-or{text-align:center;font-size:14px;font-weight:700;color:#b5c8dd;margin:10px 0 0}

/* Match the adjacent email card heading size and inset. */
body:has(#chat-shell){padding:24px}
#chat-shell header h1{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px;font-weight:700}
#chat-shell.empty-chat{min-height:calc(100dvh - 48px)}
@media(max-width:700px){body:has(#chat-shell){padding:20px}#chat-shell.empty-chat{min-height:calc(100dvh - 40px)}}

#handoff .human-icon{display:inline-block;font-size:1.2em;line-height:1;vertical-align:-.08em}

/* Equal vertical spacing around the alternative-action divider. */
#chat-choice-or{margin:12px 0;text-align:center;line-height:20px}
#chat-choice-or:not([hidden]) ~ #handoff{margin-top:0}
#chat-shell #error:empty{display:none}

/* One balanced action group, unaffected by status/error paragraph margins. */
#chat-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:12px}
#chat-shell #chat-actions>button{margin:0;min-height:48px}
#chat-shell #chat-actions #chat-choice-or{margin:0;line-height:20px}

/* Slightly inset both chat-choice buttons without changing their contents. */
#chat-shell #chat-actions>button{width:calc(100% - 32px);align-self:center}

#handoff .phone-icon{font-size:1em;line-height:1;vertical-align:-.05em}

/* Large, high-contrast human and cellphone icons within the existing button. */
#chat-shell #handoff{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:4px;padding-bottom:4px;min-height:48px}
#handoff .human-icon{font-size:34px;line-height:1;vertical-align:baseline;flex-shrink:0}
#handoff .phone-icon{display:inline-block;width:21px;height:34px;flex-shrink:0;position:relative;box-sizing:border-box;border:3px solid #07131e;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px #fff;vertical-align:baseline}
#handoff .phone-icon::before{content:"";position:absolute;top:0;left:4px;right:4px;height:3px;background:#07131e;border-radius:0 0 2px 2px}
#handoff .phone-icon::after{content:"";position:absolute;bottom:1px;left:5px;right:5px;height:2px;background:#07131e;border-radius:2px}

/* Equal action button boxes even with larger human/phone icons. */
#chat-shell #chat-actions>button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:calc(100% - 32px);height:52px;min-height:52px;padding:4px 10px;line-height:1.2;flex-shrink:0}

/* Match the composer and human handoff buttons at every viewport width. */
#chat-shell #send,#chat-shell #chat-actions>button{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:52px;height:auto;padding:8px 10px;line-height:1.2}

/* Keep the reply area high and balance both possible button pairs. */
#chat-shell.empty-chat #human-note{flex:0 0 auto;min-height:clamp(80px,18vh,140px);margin:8px 0}
#chat-shell #compose label{margin:6px 0}
#chat-shell #compose textarea{display:block;min-height:76px}
#chat-shell #chat-actions{gap:10px;margin-top:0}
#chat-shell #chat-actions #chat-choice-or{display:flex;align-items:center;justify-content:center;height:20px;margin:0}
#chat-shell #reply-choice-or{display:flex;align-items:center;justify-content:center;height:20px;margin:10px 0;line-height:20px}
#chat-shell #chat-actions>button{height:52px;padding:4px 10px}

/* Give the response field a little breathing room below the preceding action. */
#chat-shell #compose{margin-top:14px}
#chat-shell.empty-chat #compose{margin-top:14px}

/* Separate the message field from the actions without changing the balanced OR gaps. */
#chat-shell:has(#compose:not([hidden])) #chat-actions{margin-top:20px}