/* ═══════════════════════════════════════════════════════════════════════════════
   Flowpath · Patient-Facing Web App
   Design system matched to Manitoba Men's Health Clinic visual identity.
   Mobile-first, no framework, no build step.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Colour palette — pulled from MHC website screenshots */
    --cream:        #F5EFE6;
    --cream-light:  #FBF8F2;
    --tan:          #E3D9C7;
    --tan-dark:     #D4C5AA;
    --gold:         #B8955E;
    --gold-dark:    #9C7D4D;
    --charcoal:     #2C2C2C;
    --charcoal-soft:#4A4A4A;
    --white:        #FFFFFF;

    /* Red flag — used only for escalation states */
    --red-flag:     #B54848;
    --red-flag-bg:  #FBEAEA;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cream);
    color: var(--charcoal);
    line-height: 1.6;
    font-size: 16px;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input {
    font-family: inherit;
}

a { color: inherit; text-decoration: none; }

/* ─── App shell ──────────────────────────────────────────────────────── */
#app {
    width: 100%;
    height: 100%;
    max-width: 480px;       /* Caps width on desktop so it still feels like an iPhone */
    margin: 0 auto;
    position: relative;
    background: var(--cream);
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

/* Screen switching — one screen visible at a time.
   JS sets #app[data-active="welcome"|"procedure"|"disclaimer"|"chat"] */
.screen {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
#app[data-active="welcome"]    .screen-welcome,
#app[data-active="procedure"]  .screen-procedure,
#app[data-active="disclaimer"] .screen-disclaimer,
#app[data-active="chat"]       .screen-chat {
    display: flex;
}

/* ─── Typography primitives ──────────────────────────────────────────── */
.h-serif {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.gold-rule {
    width: 32px;
    height: 2px;
    background: var(--gold);
    margin-bottom: var(--space-md);
}

.helper-text {
    font-size: 13px;
    color: var(--charcoal-soft);
    margin-bottom: var(--space-lg);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-block;
    background: var(--gold);
    color: var(--white);
    padding: 14px 32px;
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    transition: background 0.15s;
    min-height: 44px;        /* Apple HIG minimum tap target */
}
.btn-primary:hover,
.btn-primary:active {
    background: var(--gold-dark);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-primary.btn-red {
    background: var(--red-flag);
}
.btn-primary.btn-red:hover {
    background: #9A3C3C;
}

.btn-secondary {
    display: inline-block;
    background: var(--white);
    color: var(--charcoal);
    border: 1px solid var(--charcoal);
    padding: 12px 28px;
    font-size: 11px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOWPATH LOGO COMPONENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.fp-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--gold);  /* Controls the SVG stroke colour via currentColor */
}

.fp-logo .fp-top {
    font-size: 9px;
    letter-spacing: 0.35em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.fp-logo .fp-wordmark-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fp-logo .fp-glyph {
    width: 48px;
    height: 40px;
    flex-shrink: 0;
}

.fp-logo .fp-wordmark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 48px;
    color: var(--charcoal);
    letter-spacing: 0.01em;
    line-height: 1;
}

.fp-logo .fp-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-xs);
}
.fp-logo .fp-bottom-line {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--charcoal);
}
.fp-logo .fp-bottom-text {
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--charcoal);
    text-transform: uppercase;
    font-weight: 500;
}

/* Mini logo used in top bars */
.fp-logo.mini .fp-wordmark {
    font-size: 20px;
}
.fp-logo.mini .fp-top,
.fp-logo.mini .fp-bottom,
.fp-logo.mini .fp-glyph {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 1 · WELCOME
   ═══════════════════════════════════════════════════════════════════════════════ */

.screen-welcome {
    justify-content: space-between;
    padding: 0 var(--space-lg) var(--space-lg);
}

.welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: calc(var(--space-xl) * 2);
}

.welcome-content .tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--charcoal-soft);
    line-height: 1.4;
    margin-top: var(--space-xl);
    max-width: 280px;
}

.welcome-content .btn-primary {
    margin-top: calc(var(--space-xl) + var(--space-md));
}

.welcome-sponsor {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--tan);
    text-align: center;
}
.sponsor-label {
    font-size: 8px;
    letter-spacing: 0.3em;
    color: var(--charcoal-soft);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

/* MHC wordmark placeholder (swap in real logo file later) */
.mhc-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Jost', sans-serif;
    color: var(--charcoal);
}
.mhc-wordmark .mhc-top,
.mhc-wordmark .mhc-bot {
    font-size: 7px;
    letter-spacing: 0.35em;
    font-weight: 300;
}
.mhc-wordmark .mhc-main {
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 300;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOP BAR (used on procedure + disclaimer screens)
   ═══════════════════════════════════════════════════════════════════════════════ */

.topbar {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-bottom: 1px solid var(--tan);
    flex-shrink: 0;
}
.step-label {
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--charcoal-soft);
    text-transform: uppercase;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 2 · PROCEDURE SELECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.screen-body {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.screen-procedure .h-serif {
    font-size: 26px;
    margin-bottom: var(--space-sm);
}

.procedure-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.proc-card {
    background: var(--white);
    border: 1px solid var(--tan);
    padding: var(--space-md) var(--space-md);
    text-align: left;
    transition: all 0.15s;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.proc-card:hover,
.proc-card:focus,
.proc-card[aria-pressed="true"] {
    border-color: var(--gold);
    background: var(--tan);
    outline: none;
}
.proc-card .proc-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 2px;
}
.proc-card .proc-desc {
    font-size: 12px;
    color: var(--charcoal-soft);
    line-height: 1.4;
}

.app-footer-strip {
    padding: var(--space-sm);
    text-align: center;
    background: var(--white);
    border-top: 1px solid var(--tan);
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--charcoal-soft);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 3 · DISCLAIMER / CONSENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.disclaimer-body {
    display: flex;
    flex-direction: column;
}
.screen-disclaimer .h-serif {
    font-size: 26px;
    margin-bottom: var(--space-md);
}
.disclaimer-block {
    font-size: 13px;
    line-height: 1.7;
    color: var(--charcoal-soft);
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
    border-left: 2px solid var(--gold);
}
.warning-box {
    background: var(--red-flag-bg);
    border-left: 3px solid var(--red-flag);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-md) 0;
    font-size: 12px;
    color: var(--red-flag);
    line-height: 1.55;
}
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    font-size: 13px;
    color: var(--charcoal);
    cursor: pointer;
    line-height: 1.5;
}
.checkbox-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--gold);
}
.screen-disclaimer .btn-primary {
    margin-top: auto;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 4 · CHAT
   ═══════════════════════════════════════════════════════════════════════════════ */

.chat-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--white);
    border-bottom: 1px solid var(--tan);
    flex-shrink: 0;
}
.chat-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-title {
    font-size: 18px;
    font-weight: 500;
}
.procedure-chip {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 600;
}
.chat-subtitle {
    font-size: 10px;
    color: var(--charcoal-soft);
    margin-top: 2px;
}

.chat-area {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg {
    max-width: 82%;
    padding: 10px 13px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
}
/* Styling for markdown content rendered inside assistant / escalate bubbles.
   Claude's responses use <p>, <ul>/<ol>, <li>, <strong>, <em>. */
.msg p {
    margin: 0 0 8px 0;
}
.msg p:last-child {
    margin-bottom: 0;
}
.msg ul,
.msg ol {
    margin: 4px 0 8px 0;
    padding-left: 20px;
}
.msg ul:last-child,
.msg ol:last-child {
    margin-bottom: 0;
}
.msg li {
    margin: 2px 0;
}
.msg strong {
    font-weight: 600;
}
.msg em {
    font-style: italic;
}
.msg.assistant {
    background: var(--white);
    border-left: 2px solid var(--gold);
    align-self: flex-start;
    color: var(--charcoal);
}
.msg.user {
    background: var(--tan);
    align-self: flex-end;
    color: var(--charcoal);
}
.msg.escalate {
    background: var(--red-flag-bg);
    border-left: 2px solid var(--red-flag);
    color: var(--red-flag);
    align-self: flex-start;
    font-weight: 500;
}
.msg.thinking {
    background: var(--white);
    border-left: 2px solid var(--gold);
    align-self: flex-start;
    color: var(--charcoal-soft);
    font-style: italic;
    opacity: 0.7;
}
/* Animated "thinking" dots */
.msg.thinking::after {
    content: '…';
    animation: thinking-dots 1.2s infinite;
}
@keyframes thinking-dots {
    0%, 20%   { content: '.';   }
    40%       { content: '..';  }
    60%, 100% { content: '…';   }
}
.msg .msg-error {
    color: var(--red-flag);
    font-weight: 500;
}

.suggested-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px var(--space-md);
    background: var(--white);
    border-top: 1px solid var(--tan);
    flex-shrink: 0;
}
.chip-btn {
    background: var(--tan);
    color: var(--charcoal);
    border: none;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 16px;
    transition: background 0.15s;
    line-height: 1.2;
}
.chip-btn:hover,
.chip-btn:active {
    background: var(--tan-dark);
}

.chat-input {
    display: flex;
    align-items: center;
    padding: 10px var(--space-md);
    background: var(--white);
    border-top: 1px solid var(--tan);
    gap: var(--space-sm);
    flex-shrink: 0;
}
.chat-input input {
    flex: 1;
    border: 1px solid var(--tan);
    padding: 10px 14px;
    font-size: 15px;
    background: var(--cream-light);
    color: var(--charcoal);
    min-height: 44px;
}
.chat-input input:focus {
    outline: none;
    border-color: var(--gold);
}
.chat-input button {
    background: var(--gold);
    color: var(--white);
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 600;
    text-transform: uppercase;
    min-height: 44px;
}
.chat-input button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Escalation actions appear below the chat area when a red flag fires */
.escalation-actions {
    padding: var(--space-md);
    background: var(--red-flag-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: 1px solid var(--red-flag);
    flex-shrink: 0;
}
.escalation-actions[hidden] {
    display: none;
}
.escalation-actions .btn-primary,
.escalation-actions .btn-secondary {
    width: 100%;
}

/* When escalated, dim the text input so calling is the obvious path */
.chat-input.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROCEDURE CARD · "LAST TIME" BADGE
   Subtle pill on the procedure card a returning patient picked previously.
   ═══════════════════════════════════════════════════════════════════════════════ */
.proc-card.last-time {
    border-color: var(--gold);
}
.last-time-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--cream);
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid var(--gold);
}
.proc-card {
    position: relative; /* so .last-time-badge positions against the card */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHAT HEADER · DONE BUTTON
   Small unobtrusive button that opens the rating modal.
   ═══════════════════════════════════════════════════════════════════════════════ */
.chat-done-btn {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-left: auto;
}
.chat-done-btn:hover {
    background: var(--gold);
    color: var(--white);
}
.chat-done-btn[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INLINE RATING PROMPT
   Soft banner that appears above the input after turn 4.
   ═══════════════════════════════════════════════════════════════════════════════ */
.rating-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    background: var(--cream);
    border-top: 1px solid var(--tan);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--charcoal);
}
.rating-prompt[hidden] {
    display: none;
}
.rating-prompt-text {
    flex: 1;
}
.link-btn {
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.link-btn:hover {
    color: var(--charcoal);
}
.rating-prompt-dismiss {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--charcoal-soft, #7a7a7a);
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.6;
}
.rating-prompt-dismiss:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESTORE BANNER
   Shown at the top of the chat area when a returning device has a prior session.
   ═══════════════════════════════════════════════════════════════════════════════ */
.restore-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 12px;
    background: var(--cream);
    border: 1px solid var(--tan);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
}
.restore-text {
    flex: 1;
}
.restore-btn {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--white);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
}
.restore-btn:hover {
    filter: brightness(0.95);
}
.restore-dismiss {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--charcoal-soft, #7a7a7a);
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
}
.restore-dismiss:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RATING MODAL
   Full-viewport overlay with a centred card. Two questions, skip or submit.
   ═══════════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 44, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    z-index: 100;
    animation: modal-fade 0.2s ease-out;
}
.modal-overlay[hidden] {
    display: none;
}
@keyframes modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-card {
    background: var(--white);
    border-radius: 8px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.modal-body {
    padding: var(--space-lg) var(--space-md);
}
.modal-body h2 {
    margin: 0 0 6px 0;
    color: var(--charcoal);
}
.rating-sub {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--charcoal-soft, #6a6a6a);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.5;
}

.rating-q {
    margin-bottom: var(--space-lg);
}
.rating-q-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

/* Star row — five clickable star SVGs. Selected stars fill with gold. */
.star-row {
    display: flex;
    gap: 6px;
}
.star-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--tan);
    transition: color 0.15s ease, transform 0.15s ease;
}
.star-btn svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
}
.star-btn.filled {
    color: var(--gold);
}
.star-btn:hover {
    transform: scale(1.08);
}

/* Likert row — five numbered buttons with anchor labels below */
.likert-row {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}
.likert-btn {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--tan);
    border-radius: 6px;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.15s ease;
}
.likert-btn:hover {
    border-color: var(--gold);
}
.likert-btn.selected {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}
.likert-anchors {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--charcoal-soft, #7a7a7a);
}

/* Modal action row — Skip + Submit */
.modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-top: var(--space-lg);
}
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
    min-width: 110px;
    padding: 10px 20px;
}

/* Thank-you state */
.modal-thanks {
    text-align: center;
}
.modal-thanks .btn-primary {
    margin-top: var(--space-md);
    min-width: 140px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* On wider screens we add a slight border so the max-width feels intentional */
@media (min-width: 481px) {
    body {
        padding: 0;
    }
    #app {
        border-left: 1px solid var(--tan);
        border-right: 1px solid var(--tan);
    }
}

/* Smaller phones — reduce some paddings */
@media (max-height: 700px) {
    .welcome-content {
        padding-top: var(--space-xl);
    }
    .welcome-content .tagline {
        margin-top: var(--space-lg);
    }
}