:root {
  color: #243431;
  background: #edf2ef;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at top right, #dcebe5 0, #edf2ef 42%, #e8efeb 100%);
}

.vespa-card {
  width: min(100%, 1180px);
  height: min(900px, calc(100vh - 32px));
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d5e0db;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgb(35 67 58 / 12%);
}

.brand-header { display: flex; align-items: center; gap: 13px; padding: 20px 30px 16px; border-bottom: 1px solid #edf1ef; }
.avatar { display: block; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; object-fit: cover; }
.eyebrow { margin: 0 0 2px; color: #6b7e78; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; color: #173c38; font-size: 23px; letter-spacing: -.02em; }
.new-conversation { margin-left: auto; border: 1px solid #d5e0db; border-radius: 10px; padding: 9px 12px; background: #fff; color: #28534b; font: inherit; font-size: 13px; cursor: pointer; }
.new-conversation:hover, .new-conversation:focus-visible { background: #f3f8f5; }
.welcome { padding: 24px 34px 8px; }
.welcome-title { margin: 0; color: #173c38; font-size: 21px; font-weight: 650; }
.chat-frame { flex: 1; min-height: 0; padding: 0 24px 22px; }
.chat-frame { position: relative; }
.activity-status {
  position: absolute;
  inset: auto 1rem 4.6rem 1rem;
  z-index: 2;
  border: 1px solid #d5e4df;
  border-radius: 12px;
  padding: .65rem .8rem;
  background: #f7fbf9;
  color: #28534b;
  font-size: .86rem;
  line-height: 1.35;
  pointer-events: none;
}
.activity-tool { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.chat-frame > deep-chat {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}
.chat-disclaimer { flex: 0 0 auto; margin: 0; padding: 0 24px 12px; color: #75857f; font-size: 11px; line-height: 1.3; text-align: center; }
.inactive-chat { display: flex; align-items: flex-end; height: 100%; padding: 0 10px 22px; }
.inactive-chat input { width: 100%; padding: 14px 16px; border: 1px solid #d5e0db; border-radius: 14px; background: #f7faf8; color: #71827d; font: inherit; }
.inactive-chat input::placeholder { color: #71827d; opacity: 1; }
.inactive-chat input:disabled { cursor: not-allowed; }
.offline-note { margin: 0; padding: 13px 25px 15px; color: #75857f; font-size: 12px; text-align: center; }
.offline-note span { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 3px; border: 1px solid #a9bbb4; border-radius: 50%; font-size: 10px; }

@media (max-width: 600px) {
  html,
  body { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  .page-shell { width: 100%; height: 100vh; min-height: 100vh; padding: 0; overflow: hidden; overscroll-behavior: none; }
  .vespa-card { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .brand-header { padding: 18px 20px 14px; }
  .new-conversation { padding: 8px 9px; font-size: 12px; }
  .welcome { padding: 20px 22px 6px; }
  .chat-frame { min-height: 0; padding: 0 8px max(14px, env(safe-area-inset-bottom)); overflow: hidden; overscroll-behavior: contain; }
  .chat-disclaimer { padding: 0 16px max(12px, env(safe-area-inset-bottom)); font-size: 10px; }
  .offline-note { padding: 11px 16px 14px; }
}

@supports (height: 100svh) {
  @media (max-width: 600px) {
    .page-shell { height: 100svh; min-height: 100svh; }
  }
}

@supports (height: 100dvh) {
  @media (max-width: 600px) {
    .page-shell { height: 100dvh; min-height: 100dvh; }
  }
}