/* Avenshore Care — care communications design system
   Layered on top of the original base/refinement styles. Built for readable,
   task-focused desktop work and one-handed mobile patient use. */
:root { --chat-ink:#173b36; --chat-dim:#4c6962; --chat-edge:#dce7e2; --chat-wash:#f4f8f5; --chat-aqua:#e3f2ec; --chat-accent:#0e665c; --chat-warm:#e0be81; }
.chat-page { max-width:1500px; margin:0 auto; }
.chat-page-top { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:4px 0 24px; }
.chat-page-top .eyebrow { font-size:12px; letter-spacing:.15em; }
.chat-page-top h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(38px,3.6vw,53px); line-height:1.09; letter-spacing:-.035em; color:var(--chat-ink); margin:9px 0 8px; }
.heading-period { color:#ba9a5c; }
.chat-page-top p { font-size:16px; color:var(--chat-dim); margin:0; line-height:1.6; }
.chat-top-chip { display:flex; align-items:center; white-space:nowrap; gap:9px; border:1px solid #d2e5da; border-radius:50px; padding:10px 15px; background:#eff7f2; color:#175f53; font-size:14px; font-weight:650; }
.chat-layout { gap:0; min-height: min(710px,calc(100dvh - 245px)); height: min(760px,calc(100dvh - 200px)); grid-template-columns: minmax(260px,300px) minmax(0,1fr); border:1px solid #dce7e2; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 16px 54px rgba(19,67,55,.055); }
.chat-layout.admin-chat { grid-template-columns:minmax(255px,300px) minmax(0,1fr) minmax(220px,245px); }
.chat-layout > .chat-list, .chat-layout > .conversation, .chat-layout > .chat-context { min-width:0; min-height:0; height:100%; border:0; border-radius:0; box-shadow:none; }
.chat-layout > .chat-list { display:flex; flex-direction:column; border-right:1px solid var(--chat-edge); background:#fbfdfb; max-height:none; }
.inbox-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:26px 22px 17px; }
.inbox-label { color:#43695f; font-size:11px; font-weight:750; letter-spacing:.13em; }
.inbox-heading h2 { color:var(--chat-ink); font-size:24px; letter-spacing:-.03em; line-height:1.25; margin:5px 0 0; font-weight:700; }
.inbox-count { display:inline-flex; vertical-align:middle; justify-content:center; align-items:center; background:#e7f1eb; color:#27665b; border-radius:9px; min-width:25px; height:25px; padding:0 7px; font-size:13px; letter-spacing:0; }
.inbox-heading-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #d8e8dd; border-radius:14px; background:#eef7f1; color:#136457; flex:none; }
.inbox-controls { padding:0 18px 18px; border-bottom:1px solid #e3eee8; }
.inbox-search { min-height:47px; padding:0 13px; border:1px solid #d8e5de; border-radius:12px; background:white; display:flex; align-items:center; gap:10px; color:#577268; }
.inbox-search:focus-within { outline:2px solid #b88a3e; outline-offset:2px; }
.inbox-search input { border:0; outline:0; background:transparent; flex:1; min-width:0; padding:12px 0; font-size:15px; color:#173b36; }
.inbox-search input:focus-visible { outline:none; }
.inbox-search input::placeholder { color:#4e6c62; }
.inbox-filters { display:flex; gap:5px; margin-top:13px; }
.inbox-filters button { background:transparent; border:1px solid transparent; padding:8px 11px; border-radius:10px; min-height:39px; color:#526d63; font-size:13px; font-weight:700; }
.inbox-filters button:hover { background:#e9f3ed; }
.inbox-filters button.is-active { background:#dff0e7; color:#105c51; border-color:#bedccc; }
.conversation-list-body { overflow-y:auto; min-height:0; flex:1; scrollbar-color:#bed3c5 transparent; scrollbar-width:thin; }
.chat-list .conversation-row { display:flex; position:relative; padding:17px 15px 17px 18px; gap:11px; min-height:95px; border:0; border-bottom:1px solid #eaf0ec; transition:background .16s; }
.chat-list .conversation-row:hover { background:#eff6f0; }
.chat-list .conversation-row.selected { background:#e6f3eb; box-shadow:inset 4px 0 #0d7968; }
.chat-list .conversation-row .avatar { width:45px; height:45px; font-size:17px; border:1px solid #d3e3dc; }
.chat-list .conv-text { display:flex; flex-direction:column; gap:3px; }
.chat-list .conv-text strong { color:#153d36; font-size:16px; line-height:1.25; font-weight:720; }
.chat-list .conv-text small { color:#526b63; font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-category { color:#416d61; font-size:10px; font-weight:750; letter-spacing:.075em; line-height:1.4; margin-top:5px; }
.conv-arrow { align-self:center; color:#70988a; }
.inbox-foot { display:flex; align-items:center; gap:9px; color:#527268; background:#f2f7f3; padding:14px 17px; font-size:12px; line-height:1.4; border-top:1px solid #e5ece7; }
.inbox-empty { text-align:center; padding:54px 22px 45px; color:#42675c; }
.empty-emblem { display:grid; place-items:center; margin:0 auto 18px; color:#2e7b69; background:#e8f4eb; width:62px; height:62px; border-radius:22px; }
.inbox-empty strong { display:block; font-size:18px; color:#174338; }
.inbox-empty p { max-width:235px; font-size:14px; margin:8px auto; line-height:1.5; }
.chat-layout > .conversation { display:flex; flex-direction:column; overflow:hidden; background:#fff; min-height:0; }
.conversation-head { display:flex; gap:12px; padding:17px 22px; min-height:84px; border-bottom:1px solid var(--chat-edge); background:#fff; }
.thread-avatar { width:44px; height:44px; background:#e7f3eb; color:#176a5c; }
.thread-ident { min-width:0; flex:1; }
.thread-ident strong { display:block; font-size:17px; line-height:1.3; font-weight:750; color:#153e37; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread-ident small { display:block; font-size:13px; line-height:1.4; color:#4c6f64; margin-top:3px; }
.thread-call { display:flex; align-items:center; gap:9px; min-height:46px; padding:0 14px; border:1px solid #c6ddd0; background:#e9f5ed; color:#145d52; font-weight:700; font-size:14px; border-radius:12px; white-space:nowrap; }
.thread-call:hover { background:#daeee2; }
.thread-back { display:none; flex:none; border:0; background:transparent; min-width:43px; height:43px; color:#225d52; border-radius:12px; }
.thread-trust { display:flex; align-items:center; gap:10px; padding:11px 22px; border-bottom:1px solid #e8f0eb; background:#f3f8f4; color:#42685d; font-size:13px; line-height:1.45; }
.thread-trust svg { flex:none; }
.conversation .messages { flex:1 1 auto; min-height:0; max-height:none; display:flex; flex-direction:column; gap:17px; overflow-y:auto; padding:24px clamp(15px,3vw,34px) 30px; background:linear-gradient(165deg,#fcfdfb 0%,#f7faf6 70%,#fafbf8 100%); scrollbar-width:thin; scrollbar-color:#bed6c5 transparent; }
.chat-date-rule { display:flex; align-items:center; gap:15px; margin:2px auto 13px; width:min(100%,450px); color:#4d6e61; font-size:12px; font-weight:600; white-space:nowrap; }
.chat-date-rule:before,.chat-date-rule:after { content:""; height:1px; flex:1; background:#dae7df; }
.message-group { display:flex; flex-direction:column; align-items:flex-start; max-width:86%; }
.message-group.is-mine { align-self:flex-end; align-items:flex-end; }
.message-sender { color:#497064; font-size:12px; font-weight:700; margin-bottom:5px; padding:0 4px; }
.message-group.followup { margin-top:-8px; }
.message-group.followup .message-sender { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.message-group .bubble { align-self:auto; max-width:100%; border-radius:17px 17px 17px 6px; padding:13px 16px 10px; border:1px solid #deebe2; background:#fff; box-shadow:0 4px 14px rgba(18,71,53,.04); color:#1b3f39; font-size:16px; line-height:1.58; overflow-wrap:anywhere; }
.message-group .bubble.mine { color:#163e34; background:#e4f1e8; border-color:#cce5d5; border-radius:17px 17px 6px 17px; }
.bubble-content { white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble-meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:11px; color:#43685b; margin-top:8px; font-weight:600; }
.bubble-meta svg { color:#397c6a; }
.chat-attachment { display:block; color:#1a6355; font-weight:650; font-size:13px; text-decoration:none; }
.chat-attachment img { width:auto; max-width:min(260px,100%); max-height:210px; object-fit:contain; background:#f5f7f5; margin:0 0 8px; border-radius:10px; }
.chat-attachment > span { display:flex; align-items:center; gap:6px; }
.chat-attachment:hover > span { text-decoration:underline; }
.thread-start, .thread-empty { text-align:center; padding:70px 20px; color:#546d64; margin:auto; }
.thread-start span, .thread-empty-art { width:70px; height:70px; display:grid; place-items:center; background:#e7f3ed; border-radius:25px; color:#1e7a68; margin:0 auto 18px; }
.thread-start h3, .thread-empty h2 { font-family:var(--font-display); color:#173e35; font-size:29px; font-weight:500; margin:7px 0; line-height:1.16; }
.thread-start p, .thread-empty p { max-width:360px; margin:9px auto 0; font-size:16px; line-height:1.6; }
.composer { border-top:1px solid #e0e9e3; padding:14px 19px 13px; background:#fff; display:block; flex:none; }
.composer-bar { display:flex; align-items:flex-end; gap:10px; border:1px solid #ccded2; background:#f9fbf9; border-radius:16px; padding:9px 10px; }
.composer-bar:focus-within { border-color:#3d9d85; box-shadow:0 0 0 3px rgba(51,146,113,.11); }
.composer textarea { min-height:44px; max-height:145px; width:100%; flex:1; resize:vertical; border:0; outline:0; background:transparent; padding:9px 6px; font-size:16px; line-height:1.45; color:#1d423a; }
.composer textarea:focus-visible { outline:0; }
.composer textarea::placeholder { color:#4d6b60; }
.attach-control { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:#246c5b; cursor:pointer; flex:none; }
.attach-control:hover { background:#e6f2eb; }
.attach-control:focus-within { outline:3px solid #b78b46; outline-offset:1px; }
.composer-send { display:inline-flex; align-items:center; gap:7px; min-height:45px; border:0; border-radius:12px; padding:0 15px; background:#0d695e; color:#fff; font-size:14px; font-weight:750; }
.composer-send:hover { background:#084d45; }
.composer-helper { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 5px 0; color:#597167; font-size:12px; }
.composer-helper > span:first-child { display:flex; align-items:center; gap:6px; }
.chat-context { padding:0; display:flex; flex-direction:column; border-left:1px solid #e1ebe4 !important; background:#f9fbf8; overflow-y:auto; }
.context-head { text-align:center; padding:35px 15px 25px; border-bottom:1px solid #e4ece5; }
.context-emblem { background:#e8f2eb; color:#1c7564; display:grid; place-items:center; width:67px; height:67px; margin:19px auto 15px; border-radius:22px; }
.context-head h3 { font-family:var(--font-display); font-size:26px; color:#173e36; font-weight:500; line-height:1.12; margin:0 0 8px; }
.context-head p,.context-section p { color:#526f65; font-size:13px; line-height:1.55; margin:5px 0 0; }
.context-section { padding:24px 21px; border-bottom:1px solid #e4ece5; }
.context-caption { display:block; font-size:11px; color:#456b5d; font-weight:750; letter-spacing:.13em; margin-bottom:8px; }
.context-section strong { font-size:15px; color:#1b483c; }
.context-call { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:50px; gap:8px; border:1px solid #cce1d4; border-radius:12px; padding:11px; color:#176a58; background:#ebf5ee; font-size:13px; font-weight:750; text-align:left; }
.context-note { display:flex; align-items:flex-start; gap:9px; color:#436b5f; padding:22px 21px; font-size:13px; line-height:1.55; }
.context-note svg { flex:none; }
.chat-layout .thread-call:focus-visible,.chat-layout button:focus-visible { outline:3px solid #a77934; outline-offset:2px; }
/* The compact admin overview also uses the same functional inbox. */
.admin-grid { min-height:540px; grid-template-columns:minmax(250px,36%) minmax(0,1fr); gap:13px; }
.admin-grid .chat-list { display:flex; flex-direction:column; max-height:660px; min-height:520px; overflow:hidden; }
.admin-grid .conversation-list-body { overflow-y:auto; }
.admin-grid .conversation { min-height:520px; max-height:660px; overflow:hidden; }
.admin-grid .conversation .messages { max-height:none; }
@media (max-width:1300px) { .chat-layout.admin-chat { grid-template-columns:minmax(250px,295px) minmax(0,1fr); } .chat-layout.admin-chat > .chat-context { display:none; } }
@media (max-width:980px) { .chat-page-top { align-items:flex-start; } .chat-top-chip { display:none; } .chat-layout,.chat-layout.admin-chat { grid-template-columns:minmax(215px,260px) minmax(0,1fr); } .chat-layout > .chat-context { display:none; } .thread-call span { display:none; } .thread-call { padding:0 12px; } .inbox-heading { padding:22px 17px 14px; } }
@media (max-width:760px) {
 .chat-page-top { margin:2px 0 19px; } .chat-page-top h1 { font-size:40px; } .chat-page-top p { font-size:16px; }
 .chat-layout,.chat-layout.admin-chat { display:block; height:min(710px,calc(100dvh - 247px)); min-height:440px; border-radius:20px; position:relative; }
 .chat-layout > .chat-list { height:100%; width:100%; border:0; }
 .chat-layout > .conversation { display:none; }
 .chat-layout.mobile-thread-open > .chat-list { display:none; }
 .chat-layout.mobile-thread-open > .conversation { display:flex; height:100%; min-height:0; }
 .chat-layout .chat-context { display:none !important; }
 .thread-back { display:grid; place-items:center; margin-left:-8px; }
 .conversation-head { padding:10px 13px; min-height:69px; gap:7px; }
 .thread-ident strong { font-size:16px; } .thread-ident small { font-size:12px; }
 .thread-avatar { width:39px; height:39px; }
 .thread-call { min-height:42px; padding:0 10px; }
 .thread-trust { padding:9px 15px; font-size:12px; }
 .conversation .messages { padding:18px 14px 21px; gap:15px; }
 .message-group { max-width:92%; } .message-group .bubble { font-size:16px; padding:12px 13px 10px; }
 .composer { padding:10px; } .composer-bar { padding:7px; gap:5px; } .composer-send { min-width:48px; padding:0 10px; }
 .composer-send span { display:none; } .attach-control { width:43px; height:43px; }
 .inbox-heading { padding:20px 18px 13px; } .inbox-controls { padding:0 15px 13px; }
 .chat-list .conversation-row { padding:15px; min-height:82px; }
 .admin-grid { display:block; } .admin-grid .conversation { display:none; } .admin-grid .chat-list { min-height:320px; }
}
@media (max-width:380px) { .chat-page-top h1 { font-size:35px; } .conversation-head { gap:5px; } .thread-ident small { display:none; } .thread-trust { line-height:1.3; } .composer-helper { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .chat-layout * { animation-duration:.01ms !important; transition:none !important; scroll-behavior:auto !important; } }
/* Keep the message composer above the persistent mobile navigation, including
   small displays. A visible composer is essential to the messaging task. */
@media (max-width:760px) {
 .chat-layout,.chat-layout.admin-chat { height:min(650px,max(360px,calc(100dvh - 348px))); }
 .composer { padding-bottom:12px; }
}

.attach-control { appearance:none; border:0; background:transparent; padding:0; }

.message-actions{display:flex;gap:12px;margin-top:8px}.message-actions button{background:transparent;border:0;color:inherit;text-decoration:underline;min-height:44px;padding:8px;font:inherit;cursor:pointer}.messages>button{min-height:44px}.messages .bubble>button{min-height:44px;padding:8px 16px}