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

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body { margin: 0; }

button, textarea { font: inherit; }

button { cursor: pointer; }

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: clamp(330px, 30vw, 480px) minmax(0, 1fr);
}

.presence {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #b6c8bf;
}

.presence video, .presence .domain-coach-image {
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: center;
}

.presence-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 26, 22, .06) 34%, rgba(7, 29, 24, .86) 100%);
}

.identity {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 52px);
  right: 24px;
  bottom: 44px;
  color: white;
  display: flex;
  align-items: center;
  gap: 14px;
}

.identity h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1;
  letter-spacing: -.025em;
}

.identity p {
  margin: 9px 0 0;
  max-width: 520px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.45;
}

.status {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #67e9a4;
  box-shadow: 0 0 0 6px rgba(103, 233, 164, .18);
}

.progress-dock {
  position: absolute;
  z-index: 4;
  top: 24px;
  right: 24px;
}

.progress-backdrop { display: none; }

.voice-toggle {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  color: white;
  background: rgba(11, 43, 36, .62);
  box-shadow: 0 8px 28px rgba(8, 30, 25, .22);
  backdrop-filter: blur(14px);
}

.voice-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-toggle .sound-on-icon { display: none; }
.voice-toggle[aria-pressed="true"] { color: #17352f; background: rgba(255,253,249,.92); }
.voice-toggle[aria-pressed="true"] .sound-off-icon { display: none; }
.voice-toggle[aria-pressed="true"] .sound-on-icon { display: block; }
.voice-toggle.speaking { box-shadow: 0 0 0 7px rgba(103, 233, 164, .28); }

.progress-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: white;
  background: rgba(11, 43, 36, .52);
  box-shadow: 0 8px 28px rgba(8, 30, 25, .16);
  backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 700;
}

.progress-chevron { font-size: 17px; line-height: .8; }

#progress {
  width: min(350px, calc(100vw - 48px));
  margin-top: 10px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  color: #17352f;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 20px 55px rgba(9, 34, 28, .25);
  backdrop-filter: blur(18px);
}

.progress-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.eyebrow {
  color: #568076;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#progress h2 {
  margin: 3px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  letter-spacing: -.02em;
}

#progress-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #55736c;
  background: #e9f0ec;
  font-size: 22px;
  line-height: 1;
}

#progress-content {
  display: grid;
  gap: 15px;
  font-size: 14px;
  line-height: 1.5;
}

.progress-item strong {
  display: block;
  margin-bottom: 2px;
  color: #416b61;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.conversation {
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fffdfa;
}

.topbar {
  min-height: 72px;
  padding: 0 clamp(22px, 4vw, 54px);
  border-bottom: 1px solid #e5ebe7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; flex-direction: column; gap: 2px; }

.back-home {
  width: max-content;
  margin-bottom: 4px;
  padding: 5px 9px;
  border: 1px solid #cfddd7;
  border-radius: 999px;
  color: #456c62;
  background: #f1f6f3;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.back-home:hover { color: var(--agent-accent, #1d7565); }

.brand span {
  color: #17352f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
}

.brand small { color: #81928d; font-size: 11px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }

#reset {
  padding: 8px 0;
  border: 0;
  color: #648078;
  background: transparent;
  font-size: 13px;
}

#reset:hover { color: #1d6f60; }

#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 36px max(28px, calc((100% - 880px) / 2));
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bubble {
  max-width: min(76%, 680px);
  padding: 15px 18px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant {
  align-self: flex-start;
  border: 1px solid #e1ece6;
  border-bottom-left-radius: 6px;
  background: #edf5f1;
}

.user {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  color: white;
  background: var(--agent-accent, #1d7565);
  box-shadow: 0 7px 18px rgba(29, 117, 101, .12);
}

.thinking { opacity: .58; }

.message-feedback {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid rgba(23, 53, 47, .09);
  display: flex;
  gap: 6px;
  white-space: normal;
}

.message-feedback button {
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  color: #738680;
  background: rgba(255,255,255,.55);
  font-size: 10px;
  font-weight: 700;
}

.message-feedback button:hover,
.message-feedback button.selected {
  color: #185f52;
  background: #dcebe5;
}

.message-feedback .listen-response {
  width: 36px;
  min-width: 36px;
  padding: 8px;
}
.listen-response svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-wrapper { white-space: normal; }
.feedback-reason { margin-top: 8px; display: grid; gap: 6px; }
.feedback-reason textarea {
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid #c7d7d1;
  border-radius: 8px;
  font-size: 10px;
}
.feedback-reason button {
  width: max-content;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: #1d7565;
  font-size: 9px;
  font-weight: 750;
}

.agent-action-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #bed6ce;
  border-radius: 14px;
  color: #17352f;
  background: rgba(255,255,255,.76);
  white-space: normal;
}

.action-eyebrow {
  display: block;
  color: #1d7565;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.action-title { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; }
.action-meta { margin: 6px 0 0; color: #6d8079; font-size: 9px; line-height: 1.5; }
.action-status { margin: 9px 0 0; color: #1d7565; font-size: 9px; font-weight: 750; }
.action-edit-form { margin-top: 12px; display: grid; gap: 8px; }
.action-edit-form label {
  color: #5b716a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.action-edit-form input {
  width: 100%;
  margin-top: 4px;
  padding: 8px 9px;
  border: 1px solid #c7d7d1;
  border-radius: 8px;
  outline: none;
  color: #17352f;
  background: white;
  font-size: 10px;
}
.action-edit-form input:focus { border-color: #58a291; }
.action-controls { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.action-controls button {
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid #c8d8d2;
  border-radius: 8px;
  color: #506b63;
  background: white;
  font-size: 9px;
  font-weight: 800;
}
.action-controls .action-confirm { border-color: #1d7565; color: white; background: #1d7565; }
.action-controls button:disabled { cursor: wait; opacity: .55; }
.agent-action-card.confirmed { border-color: #a8cebf; background: #eaf5ef; }
.agent-action-card.dismissed { opacity: .6; }
.agent-action-card.failed { border-color: #d9b4ae; background: #fbefed; }

.composer-area {
  padding: 18px max(28px, calc((100% - 940px) / 2)) 14px;
  border-top: 1px solid #e5ebe7;
  background: rgba(255, 253, 250, .96);
}

.quick-prompts {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.quick-prompts button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #cfddd7;
  border-radius: 999px;
  color: #456c62;
  background: #f4f8f5;
  font-size: 10px;
  font-weight: 700;
}
.quick-prompts button:hover { border-color: #8cbbae; color: #1d6f60; }
.quick-prompts button.selected {
  border-color: var(--agent-accent);
  background: color-mix(in srgb, var(--agent-accent) 12%, white);
  color: var(--agent-accent);
}

#composer { display: flex; align-items: stretch; gap: 12px; }

textarea {
  flex: 1;
  min-height: 62px;
  max-height: 150px;
  resize: none;
  padding: 17px 18px;
  border: 1px solid #cbdad4;
  border-radius: 17px;
  outline: none;
  color: #17352f;
  background: white;
  line-height: 1.45;
}

textarea::placeholder { color: #86958f; }

textarea:focus {
  border-color: #58a291;
  box-shadow: 0 0 0 4px rgba(75, 158, 140, .12);
}

#send, #microphone {
  min-width: 112px;
  padding: 0 22px;
  border: 0;
  border-radius: 17px;
  color: white;
  background: var(--agent-accent, #1d7565);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}

#send:hover { filter: brightness(.88); transform: translateY(-1px); }
#send:disabled { cursor: wait; opacity: .58; transform: none; }
#microphone {
  min-width: 76px;
  padding: 0 14px;
  border: 1px solid #b9cec6;
  color: #426b61;
  background: #edf5f1;
  font-family: inherit;
}
#microphone.listening { color: white; background: #a34f45; }

.microphone-status {
  min-height: 0;
  margin: 5px 3px 0;
  color: #6d8079;
  font-size: 10px;
}
.microphone-status:empty { display: none; }
.microphone-status.error { color: #9a5148; }

.permission-modal { position: fixed; z-index: 50; inset: 0; }
.permission-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: rgba(9, 27, 23, .58); backdrop-filter: blur(3px);
}
.permission-modal section {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 25px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  color: #17352f;
  background: #fffdfa;
  box-shadow: 0 24px 70px rgba(5, 23, 19, .34);
}
.permission-modal h2 {
  margin: 4px 42px 10px 0;
  font: 700 28px/1.05 Georgia, "Times New Roman", serif;
}
.permission-modal p, .permission-modal li { font-size: 13px; line-height: 1.5; }
.permission-modal ol { margin: 12px 0 16px; padding-left: 22px; }
.permission-modal li + li { margin-top: 7px; }
.permission-modal details { margin: 12px 0 18px; color: #56726a; }
.permission-modal summary { cursor: pointer; font-size: 12px; font-weight: 750; }
.permission-close {
  position: absolute; top: 15px; right: 15px; width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 50%; color: #55736c;
  background: #e9f0ec; font-size: 24px;
}
.permission-primary, .permission-secondary {
  width: 100%; min-height: 48px; padding: 11px 16px; border-radius: 13px;
  font-weight: 800;
}
.permission-primary { border: 0; color: white; background: var(--agent-accent, #1d7565); }
.permission-secondary { margin-top: 8px; border: 1px solid #cfddd7; color: #527068; background: white; }

.composer-meta {
  margin-top: 9px;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #98a49f;
  font-size: 10px;
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 330px minmax(0, 1fr); }
  .bubble { max-width: 86%; }
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .shell { height: 100dvh; display: flex; flex-direction: column; }
  .presence { min-height: 176px; height: 176px; flex: 0 0 176px; }
  .presence video, .presence .domain-coach-image { height: 176px; object-position: center 30%; }
  .presence-shade {
    background: linear-gradient(90deg, rgba(7,29,24,.74), rgba(7,26,22,.03) 74%);
  }
  .identity { left: 18px; right: 105px; bottom: 17px; gap: 10px; }
  .voice-toggle { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .identity h1 { font-size: 25px; }
  .identity p {
    max-width: 230px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }
  .status { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(103,233,164,.18); }
  .progress-dock { z-index: 20; top: 12px; right: 12px; }
  .progress-toggle { min-height: 40px; padding: 8px 11px; font-size: 11px; }
  .progress-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 27, 23, .46);
    backdrop-filter: blur(2px);
  }
  #progress {
    position: fixed;
    z-index: 21;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(72dvh, 620px);
    margin: 0;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px;
  }
  #progress-close { width: 42px; height: 42px; flex: 0 0 42px; }
  .conversation {
    height: calc(100dvh - 176px); min-height: 0;
    flex: 0 0 calc(100dvh - 176px); overflow: hidden;
  }
  .topbar { min-height: 58px; padding: 0 14px; }
  .back-home { min-height: 34px; display: inline-flex; align-items: center; }
  .brand small { display: none; }
  .brand span { font-size: 15px; }
  .topbar-actions { gap: 8px; }
  #reset { min-height: 36px; font-size: 10px; }
  #messages { padding: 16px 12px; gap: 14px; }
  .bubble { max-width: 94%; padding: 13px 14px; font-size: 14px; line-height: 1.55; }
  .assistant { max-width: 100%; }
  .message-feedback {
    overflow-x: auto;
    padding-bottom: 2px;
    flex-wrap: nowrap;
  }
  .message-feedback button { min-width: max-content; min-height: 38px; }
  .quick-prompts {
    margin: 0 -2px 9px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .quick-prompts::-webkit-scrollbar { display: none; }
  .quick-prompts button { flex: 0 0 auto; min-height: 40px; }
  .composer-area {
    position: relative; z-index: 5;
    padding: 10px 10px calc(9px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
  }
  #composer { gap: 8px; }
  textarea { min-height: 52px; padding: 12px; border-radius: 14px; }
  #send { min-width: 76px; padding: 0 10px; border-radius: 14px; }
  #microphone { min-width: 58px; padding: 0 7px; border-radius: 14px; font-size: 12px; }
  .composer-meta { display: none; }
}

@media (max-height: 600px) and (orientation: landscape) {
  body { overflow: hidden; }
  .shell {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: clamp(180px, 25vw, 260px) minmax(0, 1fr);
  }
  .presence { min-height: 100dvh; height: 100dvh; }
  .presence video, .presence .domain-coach-image { height: 100dvh; }
  .identity { left: 16px; right: 16px; bottom: 18px; gap: 9px; }
  .voice-toggle { right: 12px; bottom: 12px; width: 42px; height: 42px; padding: 10px; }
  .identity h1 { font-size: 25px; }
  .identity p {
    max-width: 190px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  .progress-dock { z-index: 20; top: 10px; right: 10px; }
  .progress-toggle { min-height: 38px; padding: 7px 10px; font-size: 10px; }
  .progress-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 27, 23, .42);
    backdrop-filter: blur(2px);
  }
  #progress {
    position: fixed;
    z-index: 21;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: min(380px, calc(100vw - 16px));
    max-height: none;
    margin: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #progress-close { width: 40px; height: 40px; flex: 0 0 40px; }
  .conversation { height: 100dvh; min-height: 0; overflow: hidden; }
  .topbar { min-height: 54px; padding: 5px 14px; }
  .back-home { margin: 0; padding: 4px 8px; }
  .brand { gap: 0; }
  .brand span { font-size: 14px; }
  .brand small { display: none; }
  .topbar-actions { gap: 8px; }
  #reset { font-size: 10px; }
  .chat-guest-banner {
    min-height: 34px;
    padding: 7px 14px;
    flex-direction: row;
    align-items: center;
    font-size: 9px;
  }
  #messages { padding: 12px max(14px, calc((100% - 760px) / 2)); gap: 12px; }
  .bubble { padding: 11px 13px; font-size: 13px; line-height: 1.48; }
  .composer-area { padding: 7px 10px max(7px, env(safe-area-inset-bottom)); }
  .quick-prompts { margin-bottom: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .quick-prompts button { min-height: 34px; padding: 6px 10px; flex: 0 0 auto; }
  textarea { min-height: 46px; padding: 10px 12px; }
  #send { min-width: 72px; padding: 0 10px; }
  #microphone { min-width: 58px; padding: 0 8px; }
  .composer-meta { display: none; }
}
/* Guest exploration */
.chat-guest-banner {
  min-height: 40px; padding: 9px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 15px; color: #dcebe7;
  background: #15584d; font-size: 10px;
}
.chat-guest-banner a { color: white; font-weight: 800; }
@media (max-width: 700px) {
  .chat-guest-banner { align-items: flex-start; flex-direction: column; gap: 3px; }
}