:root {
  color-scheme: light;
  --ink: #152722;
  --muted: #66756f;
  --green: #135f4d;
  --green-dark: #0b4739;
  --mint: #d9eee7;
  --paper: #fbfaf6;
  --line: #dce4df;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #e8eee9; }
button, textarea { font: inherit; }
button { color: inherit; }

.shell {
  display: grid;
  grid-template-columns: minmax(310px, 38%) 1fr;
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 24px 80px rgb(21 39 34 / 12%);
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(28px, 4vw, 64px);
  color: #f7fbf8;
  background:
    radial-gradient(circle at 0 100%, rgb(97 175 144 / 35%), transparent 36%),
    linear-gradient(145deg, #174f42 0%, #0b362d 72%);
}
.sidebar::after {
  position: absolute; right: -120px; top: 14%; width: 270px; height: 270px;
  border: 1px solid rgb(255 255 255 / 11%); border-radius: 50%; content: "";
  box-shadow: 0 0 0 44px rgb(255 255 255 / 3%), 0 0 0 88px rgb(255 255 255 / 2%);
}
.brand { position: relative; z-index: 1; display: flex; gap: 13px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--green-dark); background: #bfe5d6; font: 700 20px Georgia, serif; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .02em; }
.brand small { margin-top: 2px; color: rgb(255 255 255 / 58%); font-size: 11px; letter-spacing: .16em; }
.sidebar-copy { position: relative; z-index: 1; margin: auto 0; padding: 70px 0; }
.eyebrow { color: #9dd6c1; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sidebar h1 { margin: 22px 0; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(38px, 4.1vw, 62px); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; }
.sidebar-copy p { max-width: 460px; margin: 0; color: rgb(255 255 255 / 67%); font-size: 15px; line-height: 1.9; }
.service-card { position: relative; z-index: 1; padding: 20px 22px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 18px; background: rgb(255 255 255 / 7%); backdrop-filter: blur(10px); }
.status-line { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.status-line i { width: 8px; height: 8px; border-radius: 50%; background: #e6ad65; box-shadow: 0 0 0 5px rgb(230 173 101 / 12%); }
.status-line i.online { background: #7ee0af; box-shadow: 0 0 0 5px rgb(126 224 175 / 12%); }
.status-line i.offline { background: #e58e82; box-shadow: 0 0 0 5px rgb(229 142 130 / 12%); }
.service-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 10%); }
.service-card dl div + div { padding-left: 24px; border-left: 1px solid rgb(255 255 255 / 10%); }
.service-card dt { color: rgb(255 255 255 / 47%); font-size: 11px; }
.service-card dd { margin: 6px 0 0; font-size: 14px; }

.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; height: 100vh; background: var(--paper); }
.chat-header { display: flex; align-items: center; gap: 14px; padding: 22px clamp(24px, 4vw, 54px); border-bottom: 1px solid var(--line); background: rgb(251 250 246 / 88%); backdrop-filter: blur(16px); }
.agent-avatar { position: relative; display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 15px; color: #fff; background: var(--green); font-size: 12px; font-weight: 800; box-shadow: 0 7px 18px rgb(19 95 77 / 22%); }
.agent-avatar i { position: absolute; right: -2px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--paper); border-radius: 50%; background: #5fd29f; }
.chat-header h2 { margin: 0; font-size: 15px; }
.chat-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ghost-button { margin-left: auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; font-size: 12px; }
.ghost-button:hover { border-color: #acc0b7; background: #f1f5f1; }
.ghost-button span { margin-right: 4px; color: var(--green); font-size: 16px; }

.messages { overflow-y: auto; padding: 34px clamp(24px, 5vw, 72px) 20px; scroll-behavior: smooth; }
.message { display: flex; margin: 0 0 22px; animation: arrive .28s ease-out; }
.message.user { justify-content: flex-end; }
.bubble { max-width: min(660px, 83%); padding: 15px 18px; border-radius: 4px 19px 19px; color: #293a35; background: #fff; box-shadow: 0 6px 24px rgb(25 57 46 / 7%); }
.user .bubble { border-radius: 19px 19px 4px 19px; color: #fff; background: var(--green); box-shadow: 0 8px 22px rgb(19 95 77 / 16%); }
.bubble p { margin: 0; white-space: pre-wrap; line-height: 1.75; }
.message-label { display: block; margin-bottom: 7px; color: #6c7b76; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.user .message-label { color: rgb(255 255 255 / 64%); text-align: right; }
.typing p::after { display: inline-block; width: 6px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--green); content: ""; animation: blink .8s infinite; }
.error .bubble { color: #8b342b; background: #fff0ed; }
.meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { padding: 4px 8px; border-radius: 999px; color: #587068; background: #edf3ef; font-size: 10px; }
.handoff { color: #8a5622; background: #fff2dd; }
.support-link { display: inline-flex; margin-top: 12px; padding: 9px 13px; border-radius: 10px; color: #fff; background: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.support-link:hover { background: var(--green-dark); }
.citations { display: grid; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0ed; }
.citation { padding: 10px 12px; border: 1px solid #e5ebe7; border-radius: 11px; background: #fafcf9; }
.citation strong { display: block; font-size: 12px; }
.citation p { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.actions { display: flex; gap: 5px; margin-top: 10px; }
.feedback { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.feedback:hover, .feedback.selected { border-color: #8eb2a4; background: var(--mint); }
.suggestions { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 26px; }
.suggestions button { padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; color: #425a52; background: transparent; cursor: pointer; font-size: 12px; transition: .18s ease; }
.suggestions button:hover { transform: translateY(-1px); border-color: #97b5aa; background: #f0f6f2; }

.composer-wrap { padding: 16px clamp(24px, 5vw, 72px) 22px; background: linear-gradient(0deg, var(--paper) 82%, transparent); }
.composer { display: flex; align-items: flex-end; gap: 12px; padding: 10px 11px 10px 19px; border: 1px solid #cad8d1; border-radius: 18px; background: #fff; box-shadow: 0 13px 34px rgb(29 60 50 / 9%); transition: .2s ease; }
.composer:focus-within { border-color: #6b9e8b; box-shadow: 0 13px 34px rgb(29 60 50 / 12%), 0 0 0 3px rgb(19 95 77 / 7%); }
.composer textarea { width: 100%; max-height: 130px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; line-height: 1.6; }
.composer textarea::placeholder { color: #9ba8a3; }
.send-button { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 13px; color: #fff; background: var(--green); cursor: pointer; box-shadow: 0 6px 14px rgb(19 95 77 / 23%); }
.send-button:hover { background: var(--green-dark); }
.send-button:disabled { cursor: wait; opacity: .5; }
.send-button svg { width: 20px; fill: currentColor; }
.notice { margin: 9px 0 0; color: #8b9893; font-size: 10px; text-align: center; }

@keyframes arrive { from { transform: translateY(6px); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { min-height: auto; padding: 18px 20px; }
  .sidebar-copy { display: none; }
  .service-card { position: absolute; right: 20px; top: 21px; padding: 10px 13px; border: 0; background: transparent; }
  .service-card dl { display: none; }
  .chat-panel { height: calc(100vh - 79px); }
  .chat-header { padding: 14px 18px; }
  .messages { padding: 24px 18px 12px; }
  .composer-wrap { padding: 12px 16px 16px; }
  .bubble { max-width: 91%; }
}