/* Ayah clinical patient chat — canonical companion stylesheet.
   This file contains only the chat's full-viewport interaction geometry,
   safe-area, keyboard, recording, attachment, and responsive layout rules.
   All colors, type, radii, controls, and elevation consume clinical-ui.css. */

html[data-theme-surface="patient-chat"] {
  --ui-accent: var(--deployment-brand-strong, #0f5954);
  --ui-accent-hover: color-mix(in srgb, var(--ui-accent) 84%, #000);
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 7%, #fff);
  --ui-accent-border: color-mix(in srgb, var(--ui-accent) 28%, #fff);
}

:root {
        --intake-header-h: 76px;
      }
      body,
      html {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        background-color: var(--ui-canvas);
      }
      .intake-page-main {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: calc(var(--vvh, 100dvh) - var(--intake-header-h));
        max-height: calc(var(--vvh, 100dvh) - var(--intake-header-h));
        transition:
          height 0.25s ease,
          max-height 0.25s ease,
          padding-top 0.25s ease;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
      }
      @media (min-width: 640px) {
        .intake-page-main {
          padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        }
      }
      .intake-page-wrap {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        gap: 8px;
      }
      .intake-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
        min-height: 0;
      }
      .chat-window {
        flex: 1;
        min-height: 60px;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .chat-bubble {
        max-width: 84%;
        padding: 12px 16px;
        border-radius: var(--ui-radius);
        font-size: 14px;
        line-height: 1.55;
        white-space: pre-wrap;
        animation: bubbleIn 0.2s ease-out forwards;
      }
      @keyframes bubbleIn {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .chat-bubble,
        .chip-container,
        .message-delivery-status {
          animation: none !important;
        }
        .typing-dot {
          animation: none !important;
          opacity: 0.7;
        }
        .message-delivery-status.sending i {
          animation: none !important;
        }
        .intake-page-main {
          transition: none !important;
        }
      }
      .chat-bubble.typing-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 14px 16px;
      }
      .typing-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--ui-muted);
        opacity: 0.35;
        animation: typingPulse 1.15s infinite cubic-bezier(.23, 1, .32, 1);
      }
      .typing-dot:nth-child(1) {
        animation-delay: -0.3s;
      }
      .typing-dot:nth-child(2) {
        animation-delay: -0.15s;
      }
      .typing-dot:nth-child(3) {
        animation-delay: 0s;
      }
      @keyframes typingPulse {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
      }
      .chat-bubble.bot {
        background-color: var(--ui-surface-soft);
        color: var(--ui-text);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
      }
      .chat-bubble.user {
        background-color: var(--ui-accent);
        color: #fff;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
      }
      .eligibility-override {
        align-self: stretch;
        border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);
        border-radius: var(--ui-radius);
        background: var(--ui-surface-soft);
        color: var(--ui-text);
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.5;
      }
      .eligibility-override label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 10px;
        cursor: pointer;
      }
      .eligibility-override input {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: var(--ui-accent);
        flex: 0 0 auto;
      }
      .eligibility-override-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }
      .outgoing-message {
        max-width: 84%;
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }
      .outgoing-message .chat-bubble.user {
        max-width: 100%;
      }
      .message-delivery-status {
        min-height: 16px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding-right: 2px;
        color: var(--ui-muted);
        font-size: 10px;
        line-height: 1;
      }
      .message-delivery-status.sending i {
        animation: deliveryFly 0.8s infinite ease-in-out;
      }
      .message-delivery-status.sent {
        color: var(--ui-success);
        animation: deliveryConfirmed 0.2s ease-out;
      }
      .message-delivery-status.failed {
        color: var(--ui-danger);
      }
      @keyframes deliveryFly {
        0% {
          opacity: 0.45;
          transform: translateX(-3px) rotate(-6deg);
        }
        50% {
          opacity: 1;
          transform: translateX(3px) rotate(3deg);
        }
        100% {
          opacity: 0.45;
          transform: translateX(-3px) rotate(-6deg);
        }
      }
      @keyframes deliveryConfirmed {
        from {
          opacity: 0;
          transform: scale(0.9);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .voice-delivery-row {
        align-self: flex-end;
        padding: 2px 2px 0;
      }
      .chat-bubble.emergency {
        background-color: var(--ui-danger-soft);
        color: var(--ui-danger);
        border: 1px solid var(--ui-danger-border);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
        font-weight: 500;
      }
      .chat-bubble.summary {
        background-color: var(--ui-surface);
        color: var(--ui-text);
        border: 1px solid var(--ui-border);
        align-self: stretch;
        max-width: 100%;
        font-size: 13px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }
      .chat-system-notice {
        align-self: stretch;
        max-width: 100%;
        border-radius: var(--ui-radius);
        padding: 10px 16px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
      }
      .chat-system-notice--danger {
        background-color: var(--ui-danger-soft);
        color: var(--ui-danger);
        border: 1px solid var(--ui-danger-border);
      }
      .chat-system-notice--intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 16px 8px;
      }
      .chat-system-notice--voice {
        background-color: var(--ui-surface);
        color: var(--ui-text-soft);
      }
      .chat-system-notice--status {
        align-self: center;
        width: auto;
        max-width: min(92%, 420px);
        padding: 6px 12px;
        background-color: var(--ui-surface-soft);
        color: var(--ui-text-soft);
        border: 1px solid var(--ui-border);
      }
      .intake-startup-panel {
        position: relative;
        align-self: stretch;
        width: min(100%, 500px);
        margin: auto;
        padding: 22px;
        overflow: hidden;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        color: var(--ui-text);
        box-shadow: var(--ui-shadow-card);
        animation: bubbleIn 0.2s ease-out forwards;
      }
      .intake-startup-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        border-radius: 14px;
        background: var(--ui-accent-soft);
        color: var(--ui-accent);
        font-size: 17px;
      }
      .intake-startup-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.35;
      }
      .intake-startup-copy {
        margin: 8px 0 0;
        color: var(--ui-text-soft);
        font-size: 13px;
        line-height: 1.55;
      }
      .intake-startup-status {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--ui-border);
        color: var(--ui-text-soft);
        font-size: 12px;
        font-weight: 600;
      }
      .intake-startup-spinner {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        border: 2px solid var(--ui-accent-border);
        border-top-color: var(--ui-accent);
        border-radius: 50%;
        animation: intakeStartupSpin 0.8s linear infinite;
      }
      @keyframes intakeStartupSpin {
        to {
          transform: rotate(360deg);
        }
      }
      .intake-startup-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }
      .intake-startup-actions .btn {
        min-height: 38px;
        flex: 1 1 148px;
        padding: 0 16px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
      }
      .intake-startup-actions .btn i {
        font-size: 11px;
      }
      .intake-startup-status[hidden],
      .intake-startup-actions[hidden] {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .intake-startup-panel,
        .intake-startup-spinner {
          animation: none !important;
        }
      }
      @media (max-width: 420px) {
        .intake-startup-panel {
          padding: 20px;
        }
        .intake-startup-actions {
          flex-direction: column;
        }
        .intake-startup-actions .btn {
          width: 100%;
          flex-basis: auto;
        }
      }
      .chip-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 2px;
        animation: bubbleIn 0.2s ease-out forwards;
      }
      .chip-multiselect-hint {
        font-size: 11px;
        font-weight: 500;
        color: var(--ui-muted);
        margin: 2px 2px 0;
      }
      .chat-chip {
        background-color: var(--ui-surface);
        border: 1px solid var(--ui-border);
        color: var(--ui-text);
        padding: 8px 14px;
        border-radius: 999px;
        font-family:
          "SF Pro Display",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition:
          background-color 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      @media (hover: hover) and (pointer: fine) { .chat-chip:hover {
        border-color: var(--ui-accent-border);
      } }
      .chat-chip.selected {
        background-color: var(--ui-accent-soft);
        color: var(--ui-accent);
        border-color: var(--ui-accent-border);
        font-weight: 600;
      }
      .chat-chip.selected::before {
        content: "";
        width: 5px;
        height: 9px;
        flex: 0 0 auto;
        margin: -2px 1px 1px 2px;
        border: solid currentColor;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
      .chat-input-wrap {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
      }
      .chat-input-wrap .chat-input-lock {
        position: absolute;
        left: 15px;
        font-size: 11px;
        color: var(--ui-muted);
        pointer-events: none;
      }
      .chat-input-area {
        display: flex;
        padding: 14px 16px;
        border-top: 1px solid var(--ui-border);
        gap: 10px;
        align-items: center;
        touch-action: none;
      }
      .chat-input-area textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 42px;
        max-height: 120px;
        padding: 10px 52px 10px 34px;
        border: 1px solid var(--ui-border);
        border-radius: 22px;
        font-size: 16px;
        font-family: inherit;
        outline: 0;
        background-color: var(--ui-surface-soft);
        color: var(--ui-text);
        line-height: 1.35;
        resize: none;
        overflow-y: auto;
        touch-action: none;
        transition:
          border-color 0.15s ease,
          background-color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .windows-platform .chat-input-area textarea::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      .chat-input-area textarea:focus {
        background-color: var(--ui-surface);
        border-color: var(--ui-accent-border);
        box-shadow: 0 0 0 3px var(--ui-accent-soft);
      }
      .chat-input-area textarea:disabled {
        opacity: 0.6;
      }
      .composer-action {
        position: absolute;
        right: 5px;
        top: 50%;
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transform: translateY(-50%);
        touch-action: none;
      }
      .composer-recording-status {
        position: absolute;
        inset: 1px;
        border-radius: 22px;
        background: var(--ui-surface-soft);
        display: none;
        align-items: center;
        padding: 0 46px 0 14px;
        gap: 8px;
        color: var(--ui-danger);
        font-size: 13px;
        font-weight: 600;
        z-index: 1;
      }
      .composer-recording-status.active {
        display: flex;
      }
      .commercial-recording-label {
        display: none;
      }
      .recording-cancel {
        border: 0;
        background: 0 0;
        color: var(--ui-muted);
        cursor: pointer;
        padding: 4px;
      }
      .chat-mic-btn {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        font-size: 15px;
        padding: 0;
      }
      .chat-mic-btn.composer-action {
        width: 32px;
        height: 32px;
        min-width: 32px;
      }
      .chat-mic-btn.recording {
        background-color: var(--ui-danger);
        color: #fff;
        border-color: var(--ui-danger);
        animation: micPulse 1.4s infinite ease-in-out;
      }
      @keyframes micPulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 var(--ui-danger-soft);
        }
        50% {
          box-shadow: 0 0 0 8px transparent;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .chat-mic-btn.recording {
          animation: none;
        }
      }
      body.keyboard-open #header-placeholder,
      body.keyboard-open .intake-copyright {
        display: none;
      }
      body.keyboard-open .intake-page-main {
        padding-top: 0;
      }\n\n/* Clinical patient intake — full-screen conversation shell.
 * All selectors are deployment-scoped so the Ayah practice chat is unchanged.
 */

.commercial-chat-only { display: none !important; }

html[data-theme-surface="patient-chat"] {
  --commercial-chat-header-h: 70px;
  --commercial-composer-h: 118px;
  --commercial-chat-bottom-gap: 48px;
}

html[data-theme-surface="patient-chat"],
html[data-theme-surface="patient-chat"] body {
  height: 100%;
  background: var(--ui-canvas);
  color: var(--ui-text);
}

html[data-theme-surface="patient-chat"] body,
html[data-theme-surface="patient-chat"] button,
html[data-theme-surface="patient-chat"] textarea,
html[data-theme-surface="patient-chat"] select {
  font-family: var(--ui-font);
}

html[data-theme-surface="patient-chat"] body {
  background-image: none;
}

/* The conversation is a full-viewport surface.  Every nested flex/grid
 * container must be allowed to shrink so a long response, selected option,
 * or attachment name cannot widen the document on a phone. */
html[data-theme-surface="patient-chat"],
html[data-theme-surface="patient-chat"] body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html[data-theme-surface="patient-chat"] .intake-page-main,
html[data-theme-surface="patient-chat"] .intake-page-wrap,
html[data-theme-surface="patient-chat"] .intake-card,
html[data-theme-surface="patient-chat"] .chat-window,
html[data-theme-surface="patient-chat"] .chat-input-area,
html[data-theme-surface="patient-chat"] .chat-input-wrap {
  min-width: 0;
  max-width: 100%;
}

html[data-theme-surface="patient-chat"] .commercial-chat-only {
  display: flex !important;
}

html[data-theme-surface="patient-chat"] #header-placeholder,
html[data-theme-surface="patient-chat"] .intake-copyright {
  display: none !important;
}

html[data-theme-surface="patient-chat"] .commercial-chat-masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  min-height: var(--commercial-chat-header-h);
  padding: max(10px, env(safe-area-inset-top, 0px)) 18px 10px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

html[data-theme-surface="patient-chat"] .commercial-chat-masthead-inner {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ui-text);
  text-decoration: none;
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 11px;
  background: var(--ui-surface);
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-name {
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: 0.98rem;
  font-weight: 720;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Match the public marketing header's wordmark exactly: a compact AYAH
 * followed by a single standard flex gap, then lighter spaced HEALTH. */
html[data-theme-surface="patient-chat"] .commercial-chat-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-word.primary {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ui-text);
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-word.secondary {
  font-weight: 300;
  letter-spacing: 0.025em;
  color: var(--ui-accent);
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-word.intake {
  font-weight: 620;
  letter-spacing: -0.015em;
}

@media (min-width: 640px) {
  html[data-theme-surface="patient-chat"] .commercial-chat-wordmark { font-size: 1.125rem; }
}

html[data-theme-surface="patient-chat"] .commercial-chat-brand-subtitle {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

html[data-theme-surface="patient-chat"] .commercial-chat-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme-surface="patient-chat"] .commercial-chat-security {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 999px;
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font-size: 0.72rem;
  font-weight: 650;
}

html[data-theme-surface="patient-chat"] .commercial-chat-security i { color: var(--ui-success); }

html[data-theme-surface="patient-chat"] .commercial-chat-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .commercial-chat-icon-btn:hover { background: var(--ui-surface-soft); } }

html[data-theme-surface="patient-chat"] .commercial-chat-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(310px, calc(100vw - 28px));
  display: block !important;
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-dialog);
}

html[data-theme-surface="patient-chat"] .commercial-chat-menu[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .commercial-chat-menu-heading {
  padding: 6px 8px 9px;
  color: var(--ui-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

html[data-theme-surface="patient-chat"] .commercial-chat-menu-row,
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-text);
  font-size: 0.84rem;
  text-align: left;
}

html[data-theme-surface="patient-chat"] button.commercial-chat-menu-action { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] button.commercial-chat-menu-action:hover { background: var(--ui-surface-soft); } }
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action[hidden],
html[data-theme-surface="patient-chat"] .commercial-chat-icon-btn[hidden],
html[data-theme-surface="patient-chat"] .commercial-chat-menu-divider[hidden] { display: none !important; }
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action i,
html[data-theme-surface="patient-chat"] .commercial-chat-menu-row i {
  width: 20px;
  color: var(--ui-muted);
  text-align: center;
}

html[data-theme-surface="patient-chat"] .commercial-chat-menu-divider {
  height: 1px;
  margin: 7px 4px;
  background: var(--ui-border-strong);
}

html[data-theme-surface="patient-chat"] .intake-page-main {
  height: var(--vvh, 100dvh);
  max-height: var(--vvh, 100dvh);
  padding: var(--commercial-chat-header-h) 0 0;
  overflow: hidden;
  transition: none;
}

html[data-theme-surface="patient-chat"] .intake-page-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
}

html[data-theme-surface="patient-chat"] .intake-card {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme-surface="patient-chat"] .chat-window {
  width: 100%;
  box-sizing: border-box;
  padding: 38px max(20px, calc((100vw - 780px) / 2)) 0;
  gap: 18px;
  scroll-padding-bottom: calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap));
  overflow-anchor: none;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

html[data-theme-surface="patient-chat"] .chat-window::after {
  content: "";
  display: block;
  width: 100%;
  min-height: calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap));
  flex: 0 0 calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap));
  pointer-events: none;
}

html[data-theme-surface="patient-chat"] .chat-bubble {
  font-size: 0.98rem;
  line-height: 1.65;
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-theme-surface="patient-chat"] .chat-bubble.bot {
  width: fit-content;
  max-width: min(100%, 720px);
  align-self: flex-start;
  padding: 14px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 20px 20px 20px 6px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

html[data-theme-surface="patient-chat"] .chat-bubble.typing-indicator {
  width: fit-content;
  min-width: 64px;
  max-width: max-content;
}

html[data-theme-surface="patient-chat"] .chat-bubble.user {
  max-width: min(78%, 620px);
  padding: 11px 16px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 18px 18px 5px 18px;
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}

html[data-theme-surface="patient-chat"] .outgoing-message { max-width: min(78%, 620px); }
html[data-theme-surface="patient-chat"] .outgoing-message .chat-bubble.user { max-width: 100%; }

html[data-theme-surface="patient-chat"] .chat-bubble.summary,
html[data-theme-surface="patient-chat"] .eligibility-override {
  width: min(100%, 720px);
  max-width: 100%;
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

html[data-theme-surface="patient-chat"] .chat-bubble.emergency {
  width: min(100%, 720px);
  max-width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--ui-danger-border);
  border-radius: 14px;
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

html[data-theme-surface="patient-chat"] .chat-system-notice,
html[data-theme-surface="patient-chat"] .voice-delivery-row,
html[data-theme-surface="patient-chat"] .chip-container,
html[data-theme-surface="patient-chat"] .chip-multiselect-hint {
  width: min(100%, 720px);
}

html[data-theme-surface="patient-chat"] .chat-system-notice {
  align-self: center;
  margin-inline: auto;
  border-radius: 13px;
  font-size: 0.78rem;
  text-align: center;
}

html[data-theme-surface="patient-chat"] .chat-system-notice--intro {
  justify-content: center;
  text-align: center;
}

html[data-theme-surface="patient-chat"] .chat-system-notice--emergency-header {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 8px;
}

html[data-theme-surface="patient-chat"] .chat-system-notice--emergency-header > i {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

html[data-theme-surface="patient-chat"] .chat-system-notice--emergency-header > span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  text-align: center;
}

html[data-theme-surface="patient-chat"] .chat-system-notice--emergency-header::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 18px;
}

html[data-theme-surface="patient-chat"] .chat-chip {
  max-width: 100%;
  min-height: 42px;
  padding: 9px 15px;
  border-color: var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface);
  font-family: var(--ui-font);
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(28, 43, 54, 0.035);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* React chat chips communicate selection through the surface itself. The
   legacy page may keep its historical checkmark, but React must not shift the
   label when a chip changes state. */
html[data-theme-surface="patient-chat"] .ay-intake-app .chat-chip.selected::before {
  content: none;
}

html[data-theme-surface="patient-chat"] .chat-chip.selected {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface));
  color: var(--ui-accent-hover);
  box-shadow: inset 0 0 0 1px var(--ui-accent-border), 0 2px 8px rgba(28, 43, 54, 0.035);
}

html[data-theme-surface="patient-chat"] .chat-chip.is-primary {
  border-color: var(--ui-accent-fill, var(--ui-accent));
  background: var(--ui-accent-fill, var(--ui-accent));
  color: var(--ui-on-accent, #fff);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-accent) 22%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme-surface="patient-chat"] .chat-chip.is-primary:hover {
    border-color: var(--ui-accent-fill-hover, var(--ui-accent-hover));
    background: var(--ui-accent-fill-hover, var(--ui-accent-hover));
    color: var(--ui-on-accent, #fff);
  }
}
html[data-theme-surface="patient-chat"].dark .chat-chip.is-primary,
html[data-theme-surface="patient-chat"].dark .chat-chip.is-primary:focus-visible {
  border-color: var(--ui-accent-fill, var(--ui-accent));
  background: var(--ui-accent-fill, var(--ui-accent));
  color: var(--ui-on-accent, #fff);
}

html[data-theme-surface="patient-chat"] .btn-primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #ffffff;
}

html[data-theme-surface="patient-chat"].dark .btn-primary { color: #fff; }

html[data-theme-surface="patient-chat"] .btn-secondary {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}

html[data-theme-surface="patient-chat"] .intake-startup-panel {
  width: min(620px, 100%);
  margin: auto;
  padding: 34px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  box-shadow: var(--ui-shadow-popover);
  /* Keep first-paint text at its full contrast. The shared fade-in briefly
   * blends text into the panel and can fall below WCAG contrast thresholds
   * while the clinical startup screen is becoming visible. */
  animation: none;
}

html[data-theme-surface="patient-chat"] .intake-startup-icon {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
}

html[data-theme-surface="patient-chat"] .intake-startup-title {
  font-family: var(--ui-font);
  letter-spacing: -0.025em;
}

html[data-theme-surface="patient-chat"] .intake-startup-actions .btn {
  min-height: 44px;
  border-radius: 12px;
  font-size: 0.86rem;
}

html[data-theme-surface="patient-chat"] .chat-input-area {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(780px, calc(100% - 32px));
  min-height: 96px;
  padding: 10px 12px;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
  box-shadow: 0 18px 54px rgba(26, 45, 58, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  flex-direction: column;
  box-sizing: border-box;
}

html[data-theme-surface="patient-chat"].dark .chat-input-area {
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.44);
}

html[data-theme-surface="patient-chat"] .chat-input-wrap {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  grid-template-rows: auto 44px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
}

html[data-theme-surface="patient-chat"] .chat-input-area.has-chat-tools .chat-input-wrap {
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
}

html[data-theme-surface="patient-chat"] .chat-input-wrap .chat-input-lock { display: none; }

html[data-theme-surface="patient-chat"] .chat-input-area textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 46px;
  max-height: 150px;
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ui-text);
  font-size: 1rem;
  line-height: 1.4;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html[data-theme-surface="patient-chat"] .chat-input-area textarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html[data-theme-surface="patient-chat"] .chat-input-area textarea:focus {
  border: 0;
  background: var(--ui-surface-soft);
  box-shadow: none;
}

html[data-theme-surface="patient-chat"] .chat-input-area:focus-within {
  border-color: var(--ui-accent-border);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent),
    0 18px 54px rgba(26, 45, 58, 0.16);
}

html[data-theme-surface="patient-chat"] .chat-input-area textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}

html[data-theme-surface="patient-chat"].dark .chat-input-area:focus-within {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ui-accent) 24%, transparent),
    0 20px 58px rgba(0, 0, 0, 0.44);
}

html[data-theme-surface="patient-chat"] .composer-meta {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

html[data-theme-surface="patient-chat"] .chat-input-area.has-chat-tools .composer-meta { grid-column: 2; }

html[data-theme-surface="patient-chat"] .composer-tools-btn {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ui-border-strong);
  border-radius: 50%;
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  cursor: pointer;
}

html[data-theme-surface="patient-chat"] .composer-attachment-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid var(--ui-surface);
  border-radius: 999px;
  background: var(--ui-accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 750;
  line-height: 1;
}

html[data-theme-surface="patient-chat"] .composer-attachment-count[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-tools-btn[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-tools-btn[aria-expanded="true"] {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
}


@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .composer-tools-btn:hover {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
} }

html[data-theme-surface="patient-chat"] .composer-tools-menu {
  position: absolute;
  z-index: 70;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  min-width: 205px;
  padding: 6px;
  display: grid !important;
  gap: 3px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-dialog);
}

html[data-theme-surface="patient-chat"] .composer-tools-menu[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-tools-menu button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-text);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

html[data-theme-surface="patient-chat"] .composer-tools-menu button:focus-visible {
  background: var(--ui-surface-soft);
}


@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .composer-tools-menu button:hover {
  background: var(--ui-surface-soft);
} }

html[data-theme-surface="patient-chat"] .composer-tools-menu button[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-language,
html[data-theme-surface="patient-chat"] .composer-security-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 10px;
  color: var(--ui-muted);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

html[data-theme-surface="patient-chat"] .composer-security-status i {
  color: var(--ui-text-soft);
  transition: color 160ms ease;
}

html[data-theme-surface="patient-chat"] .composer-security-status.is-ai-connected i {
  color: var(--ui-success);
}

html[data-theme-surface="patient-chat"] .composer-language {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  cursor: pointer;
}

html[data-theme-surface="patient-chat"] .composer-language[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-action {
  position: static;
  top: auto;
  right: auto;
  grid-row: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  transform: none;
  border-radius: 50%;
}

html[data-theme-surface="patient-chat"] #micBtn,
html[data-theme-surface="patient-chat"] #sendBtn { grid-column: 3; }
html[data-theme-surface="patient-chat"] .chat-input-area.has-chat-tools #micBtn,
html[data-theme-surface="patient-chat"] .chat-input-area.has-chat-tools #sendBtn { grid-column: 4; }
html[data-theme-surface="patient-chat"] #sendBtn { border-radius: 50%; }

/* The shared composer press rule preserves an older absolute-positioning
 * offset. Chat controls use the grid instead, so applying that offset
 * makes the send button visibly jump. Keep only a restrained press cue. */
html[data-theme-surface="patient-chat"] .chat-input-area #sendBtn:active {
  transform: scale(0.985);
  filter: brightness(0.97);
}

html[data-theme-surface="patient-chat"] .chat-input-area #micBtn:active {
  transform: scale(0.985);
  filter: brightness(0.97);
}

html[data-theme-surface="patient-chat"] .composer-attachment-tray {
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

html[data-theme-surface="patient-chat"] .composer-attachment-tray[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .composer-attachment-chip {
  max-width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 999px;
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font-size: 0.7rem;
}

html[data-theme-surface="patient-chat"] .composer-attachment-chip span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme-surface="patient-chat"] .composer-attachment-chip button {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}

html[data-theme-surface="patient-chat"] .composer-recording-status {
  position: static;
  grid-column: 1 / -2;
  grid-row: 2;
  inset: auto;
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 0 0 12px;
  border-radius: 22px;
  background: var(--ui-danger-soft);
}

html[data-theme-surface="patient-chat"] .commercial-recording-label { display: inline; }

html[data-theme-surface="patient-chat"] .composer-recording-status #recordingTimer {
  font-variant-numeric: tabular-nums;
}

html[data-theme-surface="patient-chat"] .composer-recording-status .recording-cancel {
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

html[data-theme-surface="patient-chat"] .chat-input-area.is-recording .composer-tools-btn,
html[data-theme-surface="patient-chat"] .chat-input-area.is-recording .composer-meta,
html[data-theme-surface="patient-chat"] .chat-input-area.is-transcribing .composer-tools-btn,
html[data-theme-surface="patient-chat"] .chat-input-area.is-transcribing .composer-meta {
  display: none !important;
}

html[data-theme-surface="patient-chat"] .chat-input-area.is-recording #micBtn {
  grid-column: -2 / -1;
  border-radius: 50%;
}

html[data-theme-surface="patient-chat"] .chat-input-area.is-transcribing .composer-recording-status {
  grid-column: 1 / -1;
  color: var(--ui-text-soft);
  background: var(--ui-surface-soft);
}

html[data-theme-surface="patient-chat"] #inlineRestartBtn {
  min-height: 46px;
  border-radius: 13px;
  font-size: 0.86rem;
}

html[data-theme-surface="patient-chat"] .chat-input-area.is-restart-only {
  justify-content: center;
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9, 18, 24, 0.52);
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog-backdrop[hidden] { display: none !important; }

html[data-theme-surface="patient-chat"] .commercial-chat-dialog {
  width: min(500px, 100%);
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-dialog);
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog h2 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog p {
  margin: 9px 0 0;
  color: var(--ui-text-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

html[data-theme-surface="patient-chat"] .commercial-chat-dialog-actions .btn {
  min-height: 42px;
  min-width: 92px;
  padding: 9px 18px;
  border-radius: 11px;
  font-size: 0.8rem;
}

html[data-theme-surface="patient-chat"] body.keyboard-open .commercial-chat-masthead {
  display: none !important;
}

html[data-theme-surface="patient-chat"] body.keyboard-open .intake-page-main { padding-top: 0; }
html[data-theme-surface="patient-chat"] body.keyboard-open .chat-input-area {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(780px, calc(100% - 16px));
  margin: 0 auto max(8px, env(safe-area-inset-bottom, 0px));
  transform: none;
  flex: 0 0 auto;
}

html[data-theme-surface="patient-chat"] body.keyboard-open .chat-window::after {
  min-height: 12px;
  flex-basis: 12px;
}

/* A response chip is an available action, while an AI bubble is narration.
   Keep that distinction unmistakable in dark mode without changing either
   treatment in the light theme. */
html[data-theme-surface="patient-chat"].dark .chat-bubble.bot {
  border-color: #505b60;
  background: #2d3437;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .22);
}
html[data-theme-surface="patient-chat"].dark .chat-chip {
  border-color: #344044;
  background: #171d1f;
  color: var(--ui-text-soft);
  box-shadow: none;
}
html[data-theme-surface="patient-chat"].dark .chat-chip:focus-visible {
  border-color: var(--ui-accent-border);
  background: #20292c;
  color: var(--ui-text);
}

@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"].dark .chat-chip:hover {
  border-color: var(--ui-accent-border);
  background: #20292c;
  color: var(--ui-text);
} }
html[data-theme-surface="patient-chat"].dark .chat-chip.selected {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 30%, #171d1f);
  color: var(--ui-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 72%, transparent);
}
html[data-theme-surface="patient-chat"].dark .btn-primary {
  border-color: #2a9188;
  background: #176d65;
  color: #fff;
}
html[data-theme-surface="patient-chat"].dark .btn-primary:focus-visible {
  border-color: #3fa99f;
  background: #207e75;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"].dark .btn-primary:hover {
  border-color: #3fa99f;
  background: #207e75;
  color: #fff;
} }

@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] {
    --commercial-chat-header-h: 64px;
    --commercial-chat-bottom-gap: 34px;
  }
  html[data-theme-surface="patient-chat"] .commercial-chat-masthead { padding-inline: 12px; }
  html[data-theme-surface="patient-chat"] body {
    background-color: var(--ui-canvas);
    background-image: none;
  }
  html[data-theme-surface="patient-chat"] .commercial-chat-brand img { width: 34px; height: 34px; }
  html[data-theme-surface="patient-chat"] .commercial-chat-security span { display: none; }
  html[data-theme-surface="patient-chat"] .commercial-chat-security { width: 38px; height: 38px; justify-content: center; padding: 0; }
  html[data-theme-surface="patient-chat"] .chat-window {
    padding: 24px 16px 0;
  }
  html[data-theme-surface="patient-chat"] .chat-bubble { font-size: 0.94rem; }
  html[data-theme-surface="patient-chat"] .chat-bubble.user,
  html[data-theme-surface="patient-chat"] .outgoing-message { max-width: 86%; }
  html[data-theme-surface="patient-chat"] .intake-startup-panel { padding: 24px 20px; border-radius: 18px; }
  html[data-theme-surface="patient-chat"] .chat-input-area {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: calc(100% - 16px);
    min-height: 96px;
    padding: 10px 12px;
    border-radius: 22px;
  }
  html[data-theme-surface="patient-chat"] .composer-tools-menu { left: 0; }
  html[data-theme-surface="patient-chat"] .composer-attachment-tray { padding-inline: 4px; }
  html[data-theme-surface="patient-chat"] .composer-security-status span { display: none; }
  html[data-theme-surface="patient-chat"] .composer-security-status { padding-inline: 9px; }
}

@media (max-width: 390px) {
  html[data-theme-surface="patient-chat"] .commercial-chat-brand-subtitle { display: none; }
  html[data-theme-surface="patient-chat"] .composer-security-status { padding-inline: 5px; }
  html[data-theme-surface="patient-chat"] .commercial-chat-dialog-actions { flex-direction: column-reverse; }
  html[data-theme-surface="patient-chat"] .commercial-chat-dialog-actions .btn { width: 100%; }
}

/* React intake conversation parity. The React surface keeps its stateful
   workflow classes, while these aliases use the canonical patient-chat
   bubble, chip, and composer language above. */
html[data-theme-surface="patient-chat"] .ay-intake-transcript {
  width: min(100%, 720px);
  display: grid;
  align-content: start;
  gap: 18px;
  margin: 0 auto;
}
html[data-theme-surface="patient-chat"] .ay-intake-conversation {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
html[data-theme-surface="patient-chat"] .ay-intake-conversation > .ay-intake-response-composer,
html[data-theme-surface="patient-chat"] .ay-intake-conversation > .ay-intake-multi-actions {
  margin-top: auto;
}
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble {
  animation: bubbleIn 0.2s ease-out forwards;
}
html[data-theme-surface="patient-chat"] .ay-intake-chip-container,
html[data-theme-surface="patient-chat"] .ay-intake-chip-container + .chip-multiselect-hint {
  width: min(100%, 720px);
  margin-inline: 0;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: min(100%, 780px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  box-shadow: 0 18px 54px rgba(26, 45, 58, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field {
  grid-column: 1 / -1;
  min-height: 46px;
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  font-size: 1rem;
  line-height: 1.4;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field:focus {
  border: 0;
  background: var(--ui-surface-soft);
  box-shadow: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-validation,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-actions {
  grid-column: 1 / -1;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-actions {
  justify-content: space-between;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-actions .ay-button--primary {
  min-width: 108px;
}
html[data-theme-surface="patient-chat"].dark .ay-intake-response-composer {
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.44);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble { animation: none; }
}

/* React conversational composer. It keeps the legacy chat's single compact
   input surface while retaining React's typed turn, upload, and voice APIs. */
html[data-theme-surface="patient-chat"] .ay-intake-app {
  /* On iOS the keyboard shrinks the visual viewport and the browser then pans the page up by
     itself, natively and in step with the keyboard, which carries the fixed composer up with
     it. --ayah-keyboard-inset is only whatever that pan leaves uncovered once it has finished
     (usually nothing), applied as one immediate correction so nothing is ever moved twice. */
  --ayah-ease-kb: cubic-bezier(.32, .72, 0, 1);
  height: 100dvh;
  padding-bottom: var(--ayah-keyboard-inset, 0px);
}
html[data-theme-surface="patient-chat"] .ay-intake-header {
  overflow: hidden;
  /* Keep the header fully opaque so the clinic name and surface label retain
     their measured contrast over every transcript position and theme. */
  background: var(--ui-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 140ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1);
}
html[data-theme-surface="patient-chat"] .ay-intake-main {
  scroll-padding-bottom: 16px;
  overflow-x: clip;
}
html[data-theme-surface="patient-chat"] .ay-intake-conversation {
  gap: 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble,
html[data-theme-surface="patient-chat"] .ay-intake-chip-container {
  animation: ay-chat-enter 180ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes ay-chat-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-shell {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 15px;
  background: var(--ui-surface);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-shell:focus-within {
  border-color: var(--ui-accent-border);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-shell:has(.ay-intake-voice:not(.ay-intake-voice--idle)) {
  align-items: center;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-shell--field-only {
  padding-inline: 8px;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field {
  min-width: 0;
  min-height: 40px;
  max-height: 128px;
  flex: 1 1 auto;
  padding: 9px 7px;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  resize: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-icon,
html[data-theme-surface="patient-chat"] .ay-intake-voice__start.is-compact {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-text-soft);
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-icon svg,
html[data-theme-surface="patient-chat"] .ay-intake-voice__start.is-compact svg,
html[data-theme-surface="patient-chat"] .ay-intake-attach-menu svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-composer-icon:hover,
html[data-theme-surface="patient-chat"] .ay-intake-voice__start.is-compact:hover {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
} }
html[data-theme-surface="patient-chat"] .ay-intake-send-button {
  background: var(--ui-accent);
  color: #fff;
  transition: background-color 140ms ease-out, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-send-button:hover { background: var(--ui-accent-hover); color: #fff; } }
html[data-theme-surface="patient-chat"] .ay-intake-send-button:active { transform: scale(.96); }
html[data-theme-surface="patient-chat"] .ay-intake-send-button:disabled { background: var(--ui-surface-muted); color: var(--ui-muted); }
html[data-theme-surface="patient-chat"] .ay-intake-attach-wrap { position: relative; flex: 0 0 auto; }
html[data-theme-surface="patient-chat"] .ay-intake-attach-menu {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -4px;
  z-index: 12;
  width: min(235px, calc(100vw - 32px));
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-popover);
  transform-origin: bottom left;
  animation: ay-attach-menu-in 160ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes ay-attach-menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-theme-surface="patient-chat"] .ay-intake-attach-menu button {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-attach-menu button:hover { background: var(--ui-accent-soft); color: var(--ui-accent); } }
html[data-theme-surface="patient-chat"] .ay-intake-attach-menu button:disabled { opacity: .5; background: transparent; color: var(--ui-text); cursor: default; }
html[data-theme-surface="patient-chat"] .ay-intake-attach-menu small { padding: 2px 9px 5px; color: var(--ui-muted); font-size: .65rem; line-height: 1.4; }
html[data-theme-surface="patient-chat"] .ay-intake-composer-attachments {
  align-self: flex-start;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0 2px;
  list-style: none;
  text-align: left;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-attachments li {
  min-width: 0;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 4px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font-size: .67rem;
}
html[data-theme-surface="patient-chat"] .ay-intake-attachment-thumb {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ui-surface);
}
html[data-theme-surface="patient-chat"] .ay-intake-attachment-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-muted);
}
html[data-theme-surface="patient-chat"] .ay-intake-attachment-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme-surface="patient-chat"] .ay-intake-composer-attachments li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme-surface="patient-chat"] .ay-intake-composer-attachments li button { width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); }
/* Floating notice above the composer: validation errors, upload status and voice
   messages live here so they can never change the composer's height. */
html[data-theme-surface="patient-chat"] .ay-intake-eyebrow {
  /* left/right + auto margins (not left:50% + translate) so the box may use the card's
     full width: left:50% halves the available width and forces the text onto two lines.
     Opacity-only animation: a transform animation inside this fixed, blurred container
     is a known trigger for iOS drawing the text cursor on the wrong line. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: 0 6px 20px rgba(26, 45, 58, .12);
  color: var(--ui-text-soft);
  font-size: .72rem;
  font-weight: 560;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  animation: ay-eyebrow-in 160ms ease-out both;
}
html[data-theme-surface="patient-chat"] .ay-intake-eyebrow.is-error {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}
@keyframes ay-eyebrow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-eyebrow { animation: none; }
}
/* Without inline message text, the failed/review states are just their buttons. */
html[data-theme-surface="patient-chat"] .ay-intake-voice--failed,
html[data-theme-surface="patient-chat"] .ay-intake-voice--review { justify-content: flex-end; }
html[data-theme-surface="patient-chat"] .ay-intake-attachment-status { padding-inline: 5px; color: var(--ui-muted); font-size: .66rem; line-height: 1.4; }
html[data-theme-surface="patient-chat"] .ay-intake-composer-navigation {
  min-height: 26px;
  padding-inline: 4px;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-navigation .ay-button {
  min-height: 26px;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: .66rem;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-composer-navigation .ay-button:hover {
  background: var(--ui-surface-soft);
  color: var(--ui-text);
} }
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice { min-width: 0; flex: 0 1 auto; }
html[data-theme-surface="patient-chat"] .ay-intake-voice--recording { color: var(--ui-danger); }
@keyframes ay-recording-pulse { 50% { opacity: .35; } }
html[data-theme-surface="patient-chat"] .ay-intake-voice__stop-icon { width: 10px; height: 10px; display: inline-block; border-radius: 2px; background: currentColor; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__status,
html[data-theme-surface="patient-chat"] .ay-intake-voice__error { flex: 1; font-size: .69rem; line-height: 1.4; }
html[data-theme-surface="patient-chat"].dark .ay-intake-composer-shell { background: #171d1f; }
html[data-theme-surface="patient-chat"].dark .ay-intake-response-composer { box-shadow: 0 16px 42px rgba(0, 0, 0, .38); }


@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] .ay-intake-main { padding-inline: 10px; padding-bottom: 6px; }
  html[data-theme-surface="patient-chat"] .ay-intake-transcript { gap: 13px; }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer { width: 100%; padding: 6px; border-radius: 16px; }
  html[data-theme-surface="patient-chat"] .ay-intake-composer-shell { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-app,
  html[data-theme-surface="patient-chat"] .ay-intake-header,
  html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble,
  html[data-theme-surface="patient-chat"] .ay-intake-chip-container,
  html[data-theme-surface="patient-chat"] .ay-intake-attach-menu,
  html[data-theme-surface="patient-chat"] .ay-intake-voice--recording::before { animation: none; transition: none; }
}

/* React uses the legacy conversation primitives directly. These final bridge
   rules intentionally match the established chat instead of introducing a
   second composer, bubble, or startup-card design. */
html[data-theme-surface="patient-chat"] .ay-intake-main {
  padding: 24px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  scroll-padding-bottom: calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap));
}
html[data-theme-surface="patient-chat"] .ay-intake-startup.intake-startup-panel {
  width: min(620px, 100%);
  min-height: 0;
  margin: auto;
  padding: 34px;
  border-radius: 22px;
  box-shadow: var(--ui-shadow-popover);
}
html[data-theme-surface="patient-chat"] .ay-intake-startup__actions .ay-button--secondary {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-text);
}
html[data-theme-surface="patient-chat"] .ay-intake-main .ay-button--quiet,
html[data-theme-surface="patient-chat"] .commercial-chat-dialog .ay-button--secondary {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-text);
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-main .ay-button--quiet:hover,
html[data-theme-surface="patient-chat"] .commercial-chat-dialog .ay-button--secondary:hover {
  border-color: var(--ui-accent-border);
  background: var(--ui-surface-soft);
} }
html[data-theme-surface="patient-chat"] .ay-intake-header-actions { position: relative; }
html[data-theme-surface="patient-chat"] .ay-intake-header { overflow: visible; }
html[data-theme-surface="patient-chat"] .ay-intake-menu-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-text);
}
html[data-theme-surface="patient-chat"] .ay-intake-menu-button svg,
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme-surface="patient-chat"] .ay-intake-menu-button[aria-expanded="true"] {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-menu-button:hover {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
} }
html[data-theme-surface="patient-chat"] .ay-intake-menu.commercial-chat-menu {
  z-index: 70;
}
html[data-theme-surface="patient-chat"] .ay-intake-menu.commercial-chat-menu .commercial-chat-menu-heading,
html[data-theme-surface="patient-chat"] .ay-intake-menu.commercial-chat-menu .commercial-chat-menu-divider {
  display: block;
}
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action svg { color: var(--ui-muted); }
html[data-theme-surface="patient-chat"] .ay-intake-app.is-startup .ay-intake-main {
  padding-bottom: calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap) + 16px);
}
html[data-theme-surface="patient-chat"] .ay-intake-inactive-composer {
  pointer-events: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-inactive-composer .ay-intake-field,
html[data-theme-surface="patient-chat"] .ay-intake-inactive-composer .ay-intake-composer-icon {
  opacity: .62;
}
html[data-theme-surface="patient-chat"] .commercial-chat-dialog-backdrop {
  animation: ay-dialog-backdrop-in 150ms ease-out both;
}
html[data-theme-surface="patient-chat"] .commercial-chat-dialog {
  animation: ay-dialog-in 180ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes ay-dialog-backdrop-in { from { opacity: 0; } }
@keyframes ay-dialog-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (pointer: coarse) {
  /* Bottom-anchored like a messaging app. Otherwise a short transcript sits at the top of the
     screen, and when the keyboard pans the page up the first messages leave the screen and
     only empty space is left above the composer. */
  html[data-theme-surface="patient-chat"] .ay-intake-conversation { justify-content: flex-end; }
}
html[data-theme-surface="patient-chat"] .ay-intake-conversation {
  /* Match the composer's own width so the notice banner (which has no max-width
     of its own and stretches to fill this column) lines up with the composer's
     edges instead of overhanging it. */
  width: min(100%, 780px);
  max-width: none;
  min-height: 100%;
  margin-inline: auto;
  padding-bottom: calc(var(--commercial-composer-h) + var(--commercial-chat-bottom-gap));
}
html[data-theme-surface="patient-chat"] .ay-intake-transcript {
  width: 100%;
  gap: 18px;
}
html[data-theme-surface="patient-chat"] .ay-intake-transcript .outgoing-message {
  width: fit-content;
  justify-self: end;
}
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.is-assistant {
  width: fit-content;
  max-width: min(100%, 720px);
  padding: 14px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 20px 20px 20px 6px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.is-patient {
  max-width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 18px 18px 5px 18px;
  background: var(--ui-accent-soft);
  color: var(--ui-text);
  box-shadow: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer.chat-input-area {
  position: fixed;
  z-index: 45;
  left: 50%;
  --ayah-composer-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  bottom: var(--ayah-composer-bottom);
  width: min(780px, calc(100% - 32px));
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 10px 12px;
  /* Rises by the keyboard inset (minus the home-indicator gap the keyboard covers anyway) so it
     sits just above the keyboard. One transform transition with the keyboard's own curve, so the
     composer and keyboard travel together instead of the composer jumping ahead of it. */
  transform: translate3d(-50%, calc(var(--ayah-keyboard-inset, 0px) * -1 + var(--ayah-keyboard-on, 0) * (var(--ayah-composer-bottom) - 8px)), 0);
  transition: transform 260ms var(--ayah-ease-kb, cubic-bezier(.32, .72, 0, 1)), border-color 160ms ease-out, box-shadow 160ms ease-out;
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
  box-shadow: 0 18px 54px rgba(26, 45, 58, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}
/* The inner shell has no border of its own (by design, so the field reads as
   one surface with the pill), so the focus ring belongs on the pill itself.
   Matches the pill's own selector specificity so it actually wins. */
html[data-theme-surface="patient-chat"] .ay-intake-response-composer.chat-input-area:focus-within {
  border-color: var(--ui-accent-border);
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 18px 54px rgba(26, 45, 58, 0.16);
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell.chat-input-wrap {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: auto 44px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field {
  overflow-y: hidden;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-height: 46px;
  max-height: 150px;
  padding: 12px 14px;
  border: 0 !important;
  border-radius: 13px;
  background: transparent !important;
  color: var(--ui-text);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none !important;
  resize: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field:focus {
  background: var(--ui-surface-soft) !important;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field { caret-color: var(--ui-accent); }
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-attach-wrap,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer > .ay-intake-composer-shell > .ay-intake-attach-button {
  grid-column: 1;
  grid-row: 2;
}
/* Trailing control. The send button and the microphone share ONE slot and stay mounted
   together (ComposerActions). Typing crossfades them in place: both start at the same
   instant with no delay, no drift and no blur, so the swap reads as one icon changing. It is
   a plain opacity transition, so a quick type-then-delete retargets mid-flight. Visibility is
   delayed on the outgoing control so it leaves the tab order once it has faded. */
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell.chat-input-wrap {
  position: relative;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-action-slot {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice { display: contents; }
html[data-theme-surface="patient-chat"] .ay-intake-action-slot > .ay-intake-send-button,
html[data-theme-surface="patient-chat"] .ay-intake-action-slot .ay-intake-voice__start {
  grid-area: 1 / 1;
  /* No colour transition: the send button flips from its muted disabled look to the accent fill as it
     appears, and animating that would flash grey-to-teal while it fades in. */
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s;
}
html[data-theme-surface="patient-chat"] .ay-intake-action-slot.is-voice > .ay-intake-send-button,
html[data-theme-surface="patient-chat"] .ay-intake-action-slot.is-send .ay-intake-voice__start {
  /* !important: the base stylesheet forces every disabled button to opacity 1, and the send
     button is disabled exactly while it is hidden, so without this it never fades out. */
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-out, visibility 0s linear 120ms;
}
html[data-theme-surface="patient-chat"] .ay-intake-action-slot .ay-intake-voice__start:active { transform: scale(.92); }
html[data-theme-surface="patient-chat"] .ay-intake-action-slot.is-send > .ay-intake-send-button:not(:disabled):active { transform: scale(.92); }
/* The filled accent (not the light text accent) keeps the white plane legible in dark mode. */
html[data-theme-surface="patient-chat"] .ay-intake-action-slot > .ay-intake-send-button:not(:disabled) {
  background: var(--ui-accent-fill);
  color: var(--ui-on-accent, #fff);
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-action-slot > .ay-intake-send-button:not(:disabled):hover { background: var(--ui-accent-fill-hover); } }
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice--idle .ay-intake-voice__start.is-compact,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice--review .ay-intake-voice__start.is-compact {
  border: 0 !important;
  background: transparent;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) { html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice--idle .ay-intake-voice__start.is-compact:hover {
  background: var(--ui-accent-soft);
} }

/* While voice is active the panel takes over the whole field area: the field, the "+"
   and the security badge fade out underneath it and fade back when it closes. */
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-attach-wrap,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-security {
  transition: opacity 220ms ease-out, visibility 0s;
}
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell:has(.ay-intake-voice__panel) > .ay-intake-field,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell:has(.ay-intake-voice__panel) > .ay-intake-attach-wrap,
html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell:has(.ay-intake-voice__panel) > .ay-intake-composer-security {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-out, visibility 0s linear 120ms;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--ui-text);
  animation: ay-voice-session-in 240ms cubic-bezier(.23, 1, .32, 1) both;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice--closing .ay-intake-voice__panel {
  animation: ay-voice-session-out 150ms cubic-bezier(.23, 1, .32, 1) both;
  pointer-events: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel--recording { color: var(--ui-danger); }
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel--transcribing {
  gap: 10px;
  padding-inline: 14px;
  color: var(--ui-text-soft);
  font-size: .95rem;
  font-weight: 560;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel--failed {
  justify-content: flex-end;
  gap: 4px;
  padding-inline: 4px;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel--failed .ay-button.ay-button--quiet {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-soft);
  font-size: .84rem;
  font-weight: 650;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel--failed .ay-button.ay-button--quiet:first-of-type:not(:last-of-type) { color: var(--ui-accent); }
html[data-theme-surface="patient-chat"] .ay-intake-voice__shimmer { animation: ay-voice-breathe 1.6s ease-in-out infinite; }
@keyframes ay-voice-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars {
  height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
  transform: scaleY(.28);
  animation: ay-voice-bar 1s ease-in-out infinite;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i:nth-child(2) { animation-delay: .16s; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i:nth-child(3) { animation-delay: .32s; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i:nth-child(4) { animation-delay: .1s; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i:nth-child(5) { animation-delay: .24s; }
@keyframes ay-voice-bar {
  0%, 100% { transform: scaleY(.28); }
  50% { transform: scaleY(1); }
}
@keyframes ay-recording-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-danger) 42%, transparent); }
  to { box-shadow: 0 0 0 9px transparent; }
}
@keyframes ay-voice-session-in {
  from { opacity: 0; transform: translateY(4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ay-voice-session-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(2px) scale(.99); }
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__recording-state {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--ui-danger);
  animation: ay-recording-pulse 1.2s ease-in-out infinite, ay-recording-ring 1.2s ease-out infinite;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__timer {
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--ui-danger);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel .ay-intake-voice__cancel.ay-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ui-text-soft);
  white-space: nowrap;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__cancel svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel .ay-intake-voice__stop.ay-button {
  box-shadow: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: transparent;
  border-radius: 50%;
  background: var(--ui-danger);
  color: #fff;
}
html[data-theme-surface="patient-chat"].dark .ay-intake-voice__panel .ay-intake-voice__stop.ay-button {
  background: color-mix(in srgb, var(--ui-danger) 62%, #1a0605);
  color: #fff;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-security {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text-soft);
  font-size: 0.78rem;
  font-weight: 650;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-security svg,
html[data-theme-surface="patient-chat"] .message-delivery-status svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme-surface="patient-chat"] .ay-intake-composer-security.is-error { color: var(--ui-danger); }
html[data-theme-surface="patient-chat"] .ay-intake-composer-security.is-saving { color: var(--ui-muted); }
html[data-theme-surface="patient-chat"] .message-delivery-status button {
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}
html[data-theme-surface="patient-chat"] .message-delivery-status.sending svg {
  animation: deliveryFly 0.8s infinite ease-in-out;
}
html[data-theme-surface="patient-chat"] .ay-intake-ai-error {
  width: min(100%, 720px);
  margin-inline: auto;
}
html[data-theme-surface="patient-chat"].dark .ay-intake-bubble.chat-bubble.is-assistant {
  border-color: #505b60;
  background: #2d3437;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .22);
}
html[data-theme-surface="patient-chat"].dark .ay-intake-response-composer.chat-input-area {
  box-shadow: 0 20px 58px rgba(0, 0, 0, .44);
}
html[data-theme-surface="patient-chat"].dark .ay-intake-response-composer.chat-input-area:focus-within {
  box-shadow: 0 0 0 3px var(--ui-accent-soft), 0 20px 58px rgba(0, 0, 0, .44);
}
@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] .ay-intake-main { padding: 24px 16px 0; }
  html[data-theme-surface="patient-chat"] .ay-intake-startup.intake-startup-panel { padding: 24px 20px; border-radius: 18px; }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer.chat-input-area {
    --ayah-composer-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    bottom: var(--ayah-composer-bottom);
    width: calc(100% - 16px);
    padding: 10px 12px;
    border-radius: 22px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-composer-security span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-app,
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer.chat-input-area { transition-duration: 0ms; }
  html[data-theme-surface="patient-chat"] .typing-dot,
  html[data-theme-surface="patient-chat"] .message-delivery-status.sending svg,
  html[data-theme-surface="patient-chat"] .ay-intake-voice:not(.ay-intake-voice--idle),
  html[data-theme-surface="patient-chat"] .commercial-chat-dialog-backdrop,
  html[data-theme-surface="patient-chat"] .commercial-chat-dialog { animation: none !important; transform: none !important; }
  html[data-theme-surface="patient-chat"] .ay-intake-voice__dot { animation: none !important; opacity: 1 !important; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__panel,
html[data-theme-surface="patient-chat"] .ay-intake-voice__shimmer,
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i { animation: none !important; }
html[data-theme-surface="patient-chat"] .ay-intake-voice__bars i { transform: scaleY(.6); }
}

/* Phone layout: the composer is one slim pill, like a messaging app. "+" sits inside on
   the left, the mic/send slot inside on the right, and the security badge steps aside. The
   card keeps this app's own surface, border and radius language. Icons pin to the bottom
   edge so they stay put while a long answer grows the field. */
@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer.chat-input-area {
    min-height: 0;
    gap: 6px;
    padding: 2px;
    border-radius: 22px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell.chat-input-wrap {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: 0;
    align-items: end;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field {
    grid-column: 2;
    grid-row: 1;
    min-height: 36px;
    padding: 7px 4px;
    border-radius: 0;
    line-height: 1.3;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-field:focus { background: transparent !important; }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-shell:not(:has(.ay-intake-attach-button)) > .ay-intake-field {
    grid-column: 1 / 3;
    padding-left: 16px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-attach-wrap,
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer > .ay-intake-composer-shell > .ay-intake-attach-button {
    grid-column: 1;
    grid-row: 1;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-action-slot {
    grid-column: 3;
    grid-row: 1;
    width: 36px;
    height: 36px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-security { display: none; }
}

/* Compact phone density: tighter bubbles, gaps and margins so more of the conversation fits, and
   a shorter composer. The field stays at 16px (smaller makes iOS zoom the page on focus); bubble
   text is 15px. Controls stay 36px, above the 24px minimum target size. Desktop and
   tablet are untouched. */
@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] { --commercial-chat-bottom-gap: 16px; }
  html[data-theme-surface="patient-chat"] .ay-intake-main { padding: 12px 12px 0; }
  html[data-theme-surface="patient-chat"] .ay-intake-conversation { gap: 8px; }
  html[data-theme-surface="patient-chat"] .ay-intake-transcript { gap: 10px; }
  /* 15px text (rem is 17px on this page, so px, not rem) with bubbles sized to it. Bubbles leave a
     margin on the far side like a messaging app instead of running edge to edge: replies from the
     assistant stop at 84% of the column, yours at 80%. */
  html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.is-assistant {
    max-width: 84%;
    padding: 8px 12px;
    border-radius: 16px 16px 16px 4px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-transcript .outgoing-message { max-width: 80%; }
  html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.is-patient {
    padding: 7px 12px;
    border-radius: 16px 16px 4px 16px;
  }
  /* The text lives in a <p> that sets its own size (.98rem in clinical-ui.css), so the size has to be
     set on the paragraph; setting it on the bubble alone never reaches the words. */
  html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble p {
    font-size: 15px;
    line-height: 1.42;
  }
  html[data-theme-surface="patient-chat"] .chat-system-notice {
    padding: 7px 12px;
    font-size: .74rem;
    line-height: 1.4;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-chip-container { gap: 6px; }
  html[data-theme-surface="patient-chat"] .chat-chip {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: .82rem;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-icon,
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice__start.is-compact {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex-basis: 36px;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-composer-icon svg,
  html[data-theme-surface="patient-chat"] .ay-intake-response-composer .ay-intake-voice__start.is-compact svg { width: 19px; height: 19px; }
  html[data-theme-surface="patient-chat"] .ay-intake-voice__panel .ay-intake-voice__cancel.ay-button,
  html[data-theme-surface="patient-chat"] .ay-intake-voice__panel .ay-intake-voice__stop.ay-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex-basis: 36px;
  }
}

/* The "+" turns into an "x" when its menu opens and back when it closes: 45deg clockwise to open, back
   counter-clockwise to close. (A plus turned 90deg looks identical, so 45deg is the turn that makes the
   "x".) A transition on the icon, not a keyframe, so tapping quickly reverses from wherever it is. */
html[data-theme-surface="patient-chat"] .ay-intake-attach-button svg {
  transition: transform 240ms cubic-bezier(.23, 1, .32, 1);
}
html[data-theme-surface="patient-chat"] .ay-intake-attach-button.is-open svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-attach-button svg { transition: none; }
}

/* Startup wait: no card, one large mark centered in the chat area. The mark is the brand's own
   heartbeat trace drawn inside a ring with a turning arc: the trace draws and erases while the arc
   circles, so it reads as "working" without a progress claim. Rare, once-per-visit moment, so it can
   carry a little character; still only transform, opacity and stroke-dashoffset on a small SVG.
   It fades in after a short delay so a fast start never flashes it. */
html[data-theme-surface="patient-chat"] .ay-intake-loading {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  animation: ay-loading-in 260ms cubic-bezier(.23, 1, .32, 1) 240ms both;
}
html[data-theme-surface="patient-chat"] .ay-intake-loading__mark {
  width: 88px;
  height: 88px;
  overflow: visible;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme-surface="patient-chat"] .ay-intake-loading__track { stroke: var(--ui-accent-border); }
html[data-theme-surface="patient-chat"] .ay-intake-loading__arc {
  stroke: var(--ui-accent);
  stroke-dasharray: 64 188;
  transform-origin: 48px 48px;
  animation: ay-loading-spin 1.15s linear infinite;
}
html[data-theme-surface="patient-chat"] .ay-intake-loading__pulse {
  stroke: var(--ui-accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ay-loading-trace 1.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
html[data-theme-surface="patient-chat"] .ay-intake-loading__label {
  margin: 0;
  color: var(--ui-text-soft);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  text-align: center;
}
@keyframes ay-loading-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ay-loading-spin { to { transform: rotate(360deg); } }
@keyframes ay-loading-trace {
  0% { stroke-dashoffset: 1; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@keyframes ay-loading-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] .ay-intake-loading__mark { width: 76px; height: 76px; }
}
/* Reduced motion: no turning or drawing. The finished mark breathes gently instead, which still says
   "working" without movement. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-loading { animation: none; }
  html[data-theme-surface="patient-chat"] .ay-intake-loading__arc { animation: none; }
  html[data-theme-surface="patient-chat"] .ay-intake-loading__pulse { animation: none; stroke-dashoffset: 0; }
  html[data-theme-surface="patient-chat"] .ay-intake-loading__mark { animation: ay-loading-breathe 2.2s ease-in-out infinite; }
}

/* ===== Chat design pass (2026-09-19) =====
   Each rule answers one item of Instructions/CHAT-DESIGN-AUDIT-2026-09-19.md. */

/* C2: the message about an answer sits in the conversation, right under the question, never over it. */
html[data-theme-surface="patient-chat"] .ay-intake-transcript .ay-intake-eyebrow {
  position: static;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  box-shadow: none;
  font-size: max(.78rem, 12px);
  text-align: left;
  pointer-events: auto;
}

/* C8: 44px hit areas without changing the compact look (the visible control stays as drawn). */
html[data-theme-surface="patient-chat"] .chat-chip,
html[data-theme-surface="patient-chat"] .ay-intake-composer-icon,
html[data-theme-surface="patient-chat"] .ay-intake-voice__start,
html[data-theme-surface="patient-chat"] .ay-intake-send-button { position: relative; }
html[data-theme-surface="patient-chat"] .chat-chip::after { content: ""; position: absolute; inset: -4px 0; }
html[data-theme-surface="patient-chat"] .ay-intake-composer-icon::after,
html[data-theme-surface="patient-chat"] .ay-intake-voice__start::after,
html[data-theme-surface="patient-chat"] .ay-intake-send-button::after { content: ""; position: absolute; inset: -4px; }
html[data-theme-surface="patient-chat"] .ay-intake-menu-button { width: 44px; }

/* C9: text at least 12px; placeholder at least 4.5:1. */
html[data-theme-surface="patient-chat"] .ay-intake-wordmark small { font-size: max(.72rem, 12px); }
html[data-theme-surface="patient-chat"] .chip-multiselect-hint { font-size: max(.72rem, 12px); }
html[data-theme-surface="patient-chat"]:not(.dark) .ay-intake-field::placeholder { color: #5f6d73; opacity: 1; }

/* C10: the trust cue is readable. One quiet line at the start of the chat; the composer's own label shows on wider screens. */
.ay-intake-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--ui-muted); font-size: max(.72rem, 12px); line-height: 1.4; text-align: center; }
.ay-intake-trust svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* M1: a resumed chat shows its history as it was, without replaying the enter animation. */
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.is-settled,
html[data-theme-surface="patient-chat"] .ay-intake-chip-container.is-settled { animation: none; }

/* M3: press feedback on the controls that had none. */
html[data-theme-surface="patient-chat"] .chat-chip,
html[data-theme-surface="patient-chat"] .ay-intake-review__edit,
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action,
html[data-theme-surface="patient-chat"] .ay-intake-menu-button {
  transition-property: transform, background-color, border-color, color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}
html[data-theme-surface="patient-chat"] .chat-chip:active,
html[data-theme-surface="patient-chat"] .ay-intake-review__edit:active,
html[data-theme-surface="patient-chat"] .commercial-chat-menu-action:active,
html[data-theme-surface="patient-chat"] .ay-intake-menu-button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .chat-chip:active,
  html[data-theme-surface="patient-chat"] .ay-intake-review__edit:active,
  html[data-theme-surface="patient-chat"] .commercial-chat-menu-action:active,
  html[data-theme-surface="patient-chat"] .ay-intake-menu-button:active { transform: none; }
}
/* On wider screens the composer already prints "Secure & autosaved"; the standalone line is for phones, where it is hidden. */
@media (min-width: 641px) { .ay-intake-trust { display: none; } }

/* Completion keeps the same composer footprint after sending, but leaves one
   clear action: safely begin another chat through the existing restart path. */
html[data-theme-surface="patient-chat"] .ay-intake-composer--sent {
  min-height: 96px;
  align-items: center;
  justify-content: center;
}
html[data-theme-surface="patient-chat"] .ay-intake-new-chat {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ui-accent-border);
  border-radius: 13px;
  background: var(--ui-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), opacity 140ms ease-out, background-color 140ms ease-out;
}
html[data-theme-surface="patient-chat"] .ay-intake-new-chat:focus-visible {
  outline: 3px solid var(--ui-accent-soft);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme-surface="patient-chat"] .ay-intake-new-chat:hover { background: var(--ui-accent-hover, var(--ui-accent)); }
}
html[data-theme-surface="patient-chat"] .ay-intake-new-chat:active { transform: translateY(1px); }
html[data-theme-surface="patient-chat"] .ay-intake-consent-card {
  width: min(100%, 720px);
  display: grid;
  gap: 8px;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent-card > p { margin: 0; }
html[data-theme-surface="patient-chat"] .ay-intake-consent__disclosure {
  margin: 0;
  padding-top: 4px;
  color: var(--ui-text-soft);
  font-size: .9rem;
  line-height: 1.5;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent__links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: min(100%, 720px);
  margin: 0 auto;
  padding-top: 0;
  color: var(--ui-muted);
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent__link a:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--ui-accent-soft);
  outline-offset: 1px;
}
html[data-theme-surface="patient-chat"] .ay-intake-consent__separator {
  padding-inline: 1px;
  color: var(--ui-muted);
}
html[data-theme-surface="patient-chat"] .ay-intake-typing {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  align-self: flex-start;
  gap: 4px;
  width: fit-content;
  min-width: 58px;
  min-height: 50px;
  margin-inline: 0;
  text-align: left;
}
html[data-theme-surface="patient-chat"] .ay-intake-bubble.chat-bubble.ay-intake-typing {
  animation: none;
}
html[data-theme-surface="patient-chat"] .ay-intake-typing .typing-dot { width: 6px; height: 6px; }
@media (max-width: 640px) {
  html[data-theme-surface="patient-chat"] .ay-intake-typing {
    min-height: 36px;
    justify-content: center;
  }
  html[data-theme-surface="patient-chat"] .ay-intake-composer--sent { min-height: 44px; padding: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-surface="patient-chat"] .ay-intake-new-chat { transition: none; }
  html[data-theme-surface="patient-chat"] .ay-intake-new-chat:active { transform: none; }
}