: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%);
}

.faro-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; }
.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 > deep-chat {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}
.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; }
  .faro-card { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .brand-header { padding: 18px 20px 14px; }
  .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; }
  .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; }
  }
}