:root {
    --care-ink: #20302d;
    --care-muted: #667673;
    --care-paper: #f5f7f1;
    --care-card: #fff;
    --care-line: #dfe7df;
    --care-teal: #2f6f68;
    --care-sage: #dce9df;
    --care-coral: #c8634f;
}
.therapist-directory { min-height: calc(100vh - 68px); padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 7vw, 7rem); color: var(--care-ink); background: linear-gradient(135deg, var(--care-paper), #edf2ec); }
.directory-header { display: flex; justify-content: space-between; gap: 2rem; align-items: end; max-width: 1100px; margin: 0 auto 2.5rem; }
.eyebrow { color: var(--care-teal); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.directory-header h1 { margin: .6rem 0 .8rem; font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 400; line-height: 1; }
.directory-header p { max-width: 580px; color: var(--care-muted); line-height: 1.6; }
.back-link { white-space: nowrap; color: var(--care-teal); font-size: .85rem; font-weight: 700; text-decoration: none; }
.therapist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; max-width: 1100px; margin: auto; }
.therapist-card, .appointment-card, .inbox-section { border: 1px solid var(--care-line); background: var(--care-card); box-shadow: 0 18px 44px rgba(44, 69, 57, .08); }
.therapist-card { display: flex; flex-direction: column; min-height: 310px; padding: 1.2rem; }
.card-top { display: flex; align-items: center; gap: .8rem; }
.therapist-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--care-sage); }
.therapist-identity { min-width: 0; flex: 1; }
.therapist-card h2 { margin: 0; font-size: 1rem; }
.therapist-rating { display: inline-flex; align-items: center; gap: .2rem; margin-left: .55rem; color: #b87932; font-size: .76rem; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.therapist-rating small { color: var(--care-muted); font-size: .68rem; font-weight: 600; }
.profile-status-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .35rem; }
.specialty { margin: .3rem 0 0; color: var(--care-teal); font-size: .82rem; font-weight: 700; }
.online-state { color: var(--care-muted); font-size: .7rem; }
.online-state::before { display: inline-block; width: 7px; height: 7px; margin-right: .3rem; border-radius: 50%; background: #9ca9a4; content: ''; }
.online-state.is-online { color: var(--care-teal); }
.online-state.is-online::before { background: #6d9b67; }
.therapist-card .bio { height: auto; color: var(--care-muted); font-size: .86rem; line-height: 1.55; }
.credentials { color: var(--care-muted); font-size: .75rem; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.card-actions button, .reply-form button { border: 0; cursor: pointer; padding: .7rem .5rem; font: inherit; font-size: .78rem; font-weight: 800; }
.chat-button { background: var(--care-teal); color: #fff; }
.book-button { background: var(--care-sage); color: var(--care-teal); }
.physical-unavailable { display: inline-flex; align-items: center; justify-content: center; padding: .7rem .5rem; border: 1px solid var(--care-line); background: var(--care-paper); color: var(--care-muted); font-size: .75rem; font-weight: 700; text-align: center; }
.card-actions button:disabled { cursor: not-allowed; opacity: .45; }
.card-actions button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(47, 111, 104, .14); }
.overseer-tag { display: inline-flex; align-items: center; padding: .2rem .5rem; background: #f8e3dd; color: #8d3f31; font-size: .68rem; font-weight: 800; line-height: 1.2; }
.console-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.availability-toggle { display: inline-flex; align-items: center; gap: .4rem; color: var(--care-teal); font-size: .78rem; font-weight: 700; }
.therapist-console-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; max-width: 1100px; margin: 0 auto 1.5rem; }
.therapist-console-stats article { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--care-line); background: rgba(255, 255, 255, .72); }
.therapist-console-stats strong { color: var(--care-teal); font-size: 1.6rem; line-height: 1; }
.therapist-console-stats span { color: var(--care-muted); font-size: .72rem; font-weight: 800; }
.therapist-console-toolbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto 1.25rem; }
.search-field, .filter-field { display: grid; gap: .38rem; padding: .8rem .9rem; border: 1px solid var(--care-line); background: rgba(255, 255, 255, .7); box-shadow: 0 10px 24px rgba(44, 69, 57, .04); color: var(--care-muted); font-size: .74rem; font-weight: 800; }
.search-field span, .filter-field span { color: var(--care-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.search-field input, .filter-field select { box-sizing: border-box; width: 100%; border: 1px solid var(--care-line); border-radius: 8px; padding: .72rem .8rem; background: #fff; color: var(--care-ink); font: inherit; outline-color: var(--care-teal); }
.console-status { max-width: 1100px; min-height: 1.2em; margin: 0 auto 1rem; color: var(--care-teal); font-size: .8rem; font-weight: 700; }
.loading-state { color: var(--care-muted); }
.booking-dialog { width: min(440px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); margin: 1rem auto; padding: 0; border: 0; box-sizing: border-box; background: transparent; color: var(--care-ink); }
.booking-dialog::backdrop { background: rgba(32, 48, 45, .42); }
.booking-form { position: relative; display: grid; min-width: 0; max-width: 100%; gap: .7rem; padding: 1.5rem; border: 1px solid var(--care-line); box-sizing: border-box; background: var(--care-card); box-shadow: 0 22px 60px rgba(44, 69, 57, .2); }
.booking-form .eyebrow { margin: 0; }
.booking-form h2 { margin: 0; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.booking-therapist, .booking-help { margin: 0; color: var(--care-muted); font-size: .85rem; line-height: 1.5; }
.booking-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .2rem 0 0; padding: 0; border: 0; }
.booking-modes legend { width: 100%; margin-bottom: .35rem; color: var(--care-ink); font-size: .78rem; font-weight: 800; }
.booking-mode-option { display: flex; align-items: center; gap: .45rem; margin: 0; border: 1px solid var(--care-line); padding: .65rem .7rem; color: var(--care-ink); cursor: pointer; font-size: .78rem; font-weight: 700; }
.booking-mode-option:has(input:checked) { border-color: var(--care-teal); background: var(--care-sage); color: var(--care-teal); }
.booking-mode-option input { accent-color: var(--care-teal); }
.booking-form label { margin-top: .5rem; color: var(--care-ink); font-size: .78rem; font-weight: 800; }
.booking-optional { color: var(--care-muted); font-size: .72rem; font-weight: 600; }
.booking-form input, .booking-form textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--care-line); padding: .75rem; color: var(--care-ink); font: inherit; outline-color: var(--care-teal); }
.booking-form textarea { resize: vertical; }
.booking-status { min-height: 1.2em; margin: .1rem 0 0; font-size: .8rem; line-height: 1.4; }
.booking-status.is-success { color: var(--care-teal); }
.booking-status.is-error { color: var(--care-coral); }
.booking-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }
.booking-actions button { border: 0; cursor: pointer; padding: .7rem .9rem; font: inherit; font-size: .78rem; font-weight: 800; }
.booking-cancel { background: var(--care-sage); color: var(--care-teal); }
.booking-submit { background: var(--care-teal); color: #fff; }
.booking-submit:disabled { cursor: wait; opacity: .6; }
.booking-close { position: absolute; top: .7rem; right: .8rem; border: 0; background: transparent; color: var(--care-muted); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.chat-dialog { width: min(620px, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; background: transparent; }
.chat-dialog::backdrop { background: rgba(32, 48, 45, .42); }
.chat-window { display: grid; max-height: calc(100vh - 2rem); border: 1px solid var(--care-line); background: var(--care-card); box-shadow: 0 22px 60px rgba(44, 69, 57, .2); }
.chat-window-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--care-line); }
.chat-window-header .eyebrow { margin: 0 0 .35rem; }
.chat-window-header h2 { margin: 0; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; }
.chat-close { border: 0; background: transparent; color: var(--care-muted); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.chat-history { min-height: 280px; max-height: 52vh; overflow-y: auto; display: grid; align-content: start; gap: .7rem; padding: 1.2rem; background: var(--care-paper); }
.chat-message { max-width: 82%; padding: .75rem .9rem; background: #fff; border-left: 3px solid var(--care-teal); }
.chat-message.client { margin-left: auto; border-left: 0; border-right: 3px solid var(--care-coral); background: #fff0ec; }
.chat-message-label { display: block; margin-bottom: .2rem; color: var(--care-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.chat-message p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.chat-status { min-height: 1.2em; margin: 0; padding: .6rem 1.2rem 0; color: var(--care-muted); font-size: .78rem; }
.chat-form { padding: .7rem 1.2rem 1.1rem; }
.chat-form textarea { box-sizing: border-box; width: 100%; resize: vertical; border: 1px solid var(--care-line); padding: .8rem; color: var(--care-ink); font: inherit; outline-color: var(--care-teal); }
.chat-form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; color: var(--care-muted); font-size: .72rem; }
.chat-send { border: 0; cursor: pointer; padding: .65rem 1rem; background: var(--care-teal); color: #fff; font: inherit; font-weight: 800; }
.chat-send:disabled { cursor: wait; opacity: .6; }
.therapist-console { max-width: 1200px; margin: auto; }
@media (max-width: 700px) { .therapist-console-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.appointment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.appointment-card { padding: 1rem; }
.appointment-card.is-today { border-color: var(--care-teal); background: linear-gradient(180deg, #f8fdfb, #edf7f5); box-shadow: 0 18px 44px rgba(47, 111, 104, .12); }
.appointment-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.today-badge { display: inline-flex; align-items: center; padding: .25rem .5rem; border-radius: 999px; background: var(--care-sage); color: var(--care-teal); font-size: .68rem; font-weight: 800; }
.appointment-card h3 { margin: 0 0 .5rem; font-size: .95rem; }
.appointment-card p { margin: .35rem 0; color: var(--care-muted); font-size: .8rem; }
.appointment-decision { display: grid; gap: .6rem; margin-top: .8rem; }
.appointment-decision button { border: 0; cursor: pointer; padding: .65rem .8rem; background: var(--care-teal); color: #fff; font: inherit; font-size: .75rem; font-weight: 800; }
.appointment-decision button:disabled { cursor: wait; opacity: .6; }
.appointment-propose-form { display: grid; gap: .4rem; }
.appointment-propose-form label { color: var(--care-muted); font-size: .72rem; font-weight: 700; }
.appointment-propose-form input { box-sizing: border-box; width: 100%; margin-top: .3rem; border: 1px solid var(--care-line); padding: .55rem; font: inherit; }
.inbox-section { padding: 1.2rem; }
.inbox-section h2 { margin-top: 0; font-family: Georgia, serif; font-weight: 400; }
.message-list { display: grid; gap: .6rem; }
.inbox-message { display: grid; gap: .25rem; width: 100%; border: 0; border-left: 3px solid var(--care-teal); padding: .8rem; background: var(--care-paper); color: var(--care-ink); cursor: pointer; font: inherit; font-size: .82rem; text-align: left; }
.inbox-message strong { display: block; margin-bottom: .25rem; }
.inbox-message span { overflow: hidden; color: var(--care-muted); text-overflow: ellipsis; white-space: nowrap; }
.inbox-message:hover, .inbox-message:focus-visible { background: var(--care-sage); outline: 2px solid var(--care-teal); outline-offset: 2px; }
.therapist-chat-dialog { width: min(680px, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; background: transparent; }
.therapist-chat-dialog::backdrop { background: rgba(32, 48, 45, .42); }
.therapist-chat-window { display: grid; max-height: calc(100vh - 2rem); border: 1px solid var(--care-line); background: var(--care-card); box-shadow: 0 22px 60px rgba(44, 69, 57, .2); }
.therapist-chat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--care-line); }
.therapist-chat-header .eyebrow { margin: 0 0 .35rem; }
.therapist-chat-header h3 { margin: 0; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; }
.therapist-chat-history { min-height: 280px; max-height: 52vh; overflow-y: auto; display: grid; align-content: start; gap: .7rem; padding: 1.2rem; background: var(--care-paper); }
.therapist-chat-message { max-width: 82%; padding: .75rem .9rem; border-left: 3px solid var(--care-teal); background: #fff; }
.therapist-chat-message.therapist { margin-left: auto; border-left: 0; border-right: 3px solid var(--care-coral); background: #fff0ec; }
.therapist-chat-message strong { display: block; margin-bottom: .2rem; color: var(--care-muted); font-size: .68rem; text-transform: uppercase; }
.therapist-chat-message p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.therapist-chat-window .reply-form { max-width: none; margin: 0; padding: .7rem 1.2rem 1.1rem; }
.therapist-chat-window .reply-form button { background: var(--care-teal); }
.reply-form { display: grid; gap: .55rem; max-width: 600px; margin-top: 1.2rem; }
.reply-form label { color: var(--care-muted); font-size: .75rem; font-weight: 700; }
.reply-form input, .reply-form textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--care-line); padding: .7rem; font: inherit; outline-color: var(--care-teal); }
.reply-form button { justify-self: start; background: var(--care-ink); color: #fff; }
#replyStatus { color: var(--care-teal); font-size: .8rem; }
@media (max-width: 700px) {
    .therapist-directory { min-height: calc(100vh - 60px); padding: 2rem .85rem 2.5rem; }
    .directory-header { display: block; margin-bottom: 1.6rem; }
    .directory-header h1 { margin-top: .5rem; font-size: clamp(2.4rem, 13vw, 3.4rem); }
    .directory-header p { font-size: .92rem; }
    .back-link { display: inline-block; margin-top: .7rem; }
    .therapist-grid { grid-template-columns: 1fr; gap: .2rem; height: auto; }
    .therapist-card { height:auto; padding: 1rem; }
    .card-actions { grid-template-columns: 1fr; }
    .card-actions button { min-height: 46px; }
    .therapist-console-toolbar { grid-template-columns: 1fr; }
    .console-controls { justify-content: flex-start; margin-top: 1rem; }
    .inbox-section { padding: 1rem; }
    .reply-form input, .reply-form textarea { font-size: 16px; }
}