.chat-icon span { background: #26a991; }
.chat-navigation { position:relative; margin-left:auto; flex-shrink:0; }
.chat-navigation summary { width:36px; height:36px; display:grid; place-items:center; cursor:pointer; list-style:none; border-radius:6px; }
.chat-navigation summary::-webkit-details-marker { display:none; }
.chat-navigation-options { position:absolute; top:calc(100% + 4px); right:0; width:180px; padding:6px; background:#f7faf8; color:#23382e; border:1px solid #ccd5ce; border-radius:8px; box-shadow:0 4px 12px #0002; z-index:20; }
.chat-navigation-options button { display:block; width:100%; text-align:left; min-height:40px; background:transparent; color:inherit; box-shadow:none; }
.chat-navigation-options button[aria-pressed="true"] { background:#d9ede2; }
.chat-navigation-options button:last-child { color:#b6324e; }
body[data-theme="dark"] .chat-navigation-options { background:#202c31; color:#eef5f1; border-color:#52635a; }
body[data-theme="dark"] .chat-navigation-options button[aria-pressed="true"] { background:#334d42; }
.chat-view.active { display:flex; flex-direction:column; gap:10px; }
.chat-view { color:#342638; }
.chat-view [hidden] { display:none !important; }
.chat-view .phone-app-header { position:static; flex-shrink:0; }
.chat-view h2 { font-size:26px; }
.chat-view button:not(.phone-top-back) { min-height:26.4px; border-radius:4.8px; padding:4.8px 7.2px; font-size:9.6px; }
.chat-compose > button { width:60%; justify-self:start; }
.chat-view input,.chat-view textarea { width:100%; min-width:0; font:inherit; font-size:16px; padding:10px; border:1px solid #a799ae; border-radius:8px; background:#fff; color:#302936; }
.chat-view label { display:grid; gap:6px; margin-bottom:12px; }
.chat-access { overflow:auto; }
.chat-actions,.chat-tabs { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.chat-tabs button[aria-pressed="true"] { outline:2px solid #bd427e; }
.chat-session { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
.chat-feed { overflow:auto; flex:1; min-height:80px; overscroll-behavior:contain; touch-action:pan-y; }
.chat-message { background:#fff; border:1px solid #d6cbd9; border-radius:8px; padding:10px 12px; margin:8px 0; }
.chat-message.note { border-left:4px solid #278d79; background:#e8f5ef; }
.chat-message header { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; }
.chat-message p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-compose { display:grid; gap:8px; flex-shrink:0; }
.chat-compose textarea { resize:none; height:76px; }
.chat-status { margin:0; font-size:14px; min-height:20px; }
#chatIdentity { max-width:100%; overflow-wrap:anywhere; background:transparent; color:inherit; box-shadow:none; text-decoration:underline; }
body[data-theme="dark"] .chat-view { color:#f5edf7; }
body[data-theme="dark"] .chat-message { background:#29262e; border-color:#57505f; }
body[data-theme="dark"] .chat-message.note { background:#203b34; border-left-color:#64d0ad; }
body[data-theme="dark"] .chat-view input,body[data-theme="dark"] .chat-view textarea { background:#29262e; color:#fff; }

.chat-view { background:#eef2ef; }
.chat-view.active { gap:6px; }
.chat-view .phone-app-header { margin-bottom:0; }
.chat-view button:not(.phone-top-back) { font-size:12px; min-height:32px; }
.chat-feed { padding:4px 6px; }
.chat-message { width:fit-content; max-width:88%; margin:4px auto 8px 0; padding:3px 7px; background:#fff; border:0; box-shadow:0 1px 2px #0002; }
.chat-message.own { margin-left:auto; margin-right:0; background:#d9f5df; }
.chat-message.note { border-left:3px solid #c28d20; background:#fff6d9; }
.chat-message header { align-items:center; color:#18735f; font-size:10px; line-height:1; }
.chat-message time { display:block; margin-top:1px; text-align:right; font-size:9px; line-height:1.05; color:#666e69; }
.chat-message p { margin:2px 0 0; font-size:13px; line-height:1.18; }
.chat-presence-dot { display:inline-block; width:9px; height:9px; margin-left:5px; border-radius:50%; background:#8a9490; vertical-align:middle; box-shadow:0 0 0 2px rgba(138,148,144,.18); }
.chat-presence-dot.is-online { background:#23a66d; box-shadow:0 0 0 2px rgba(35,166,109,.18); }
.chat-read-state { margin-left:4px; font-weight:900; letter-spacing:1px; }
.chat-read-state.is-sent { color:#ba3b50; }
.chat-read-state.is-read { color:#b58d18; }
.chat-attachment-status { grid-column:1/-1; margin:0; padding:6px 8px; border-radius:6px; background:#dceae3; color:#235746; font-size:12px; }
.chat-attachment-preview { grid-column:1/-1; width:100%; box-sizing:border-box; display:flex; align-items:flex-start; gap:8px; padding:7px; border-radius:7px; background:#dceae3; }
.chat-attachment-preview img,.chat-attachment-preview video { width:92px; height:72px; border-radius:5px; object-fit:cover; background:#111; }
.chat-attachment-preview span { min-width:0; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
.chat-attachment-preview button { margin-left:auto; min-width:32px; background:transparent !important; color:#8a2845 !important; box-shadow:none !important; }
.chat-attachment { display:block; width:min(280px,100%); max-height:260px; margin-top:5px; border-radius:6px; object-fit:contain; background:#111; cursor:pointer; }
.chat-message video.chat-attachment { cursor:default; }
.chat-message video.chat-attachment { cursor:pointer; }
.chat-media-preview { width:min(94vw,680px); max-height:92dvh; margin:auto; padding:12px; border:0; border-radius:8px; background:#11151a; box-shadow:0 20px 60px #0008; }
.chat-media-preview::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.chat-media-preview img,.chat-media-preview video { display:block; width:100%; max-height:calc(92dvh - 24px); object-fit:contain; background:#111; }
.chat-media-preview [hidden] { display:none !important; }
.chat-media-preview > button { position:absolute; z-index:2; top:8px; right:8px; width:38px; height:38px; min-height:38px; padding:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:25px; line-height:1; }
.chat-message blockquote { margin:3px 0; padding:3px 5px; border-left:2px solid #278d79; background:#00000008; font-size:11px; line-height:1.18; white-space:pre-wrap; overflow-wrap:anywhere; max-height:44px; overflow:auto; cursor:pointer; }
.chat-message blockquote:focus-visible { outline:2px solid #087f69; outline-offset:2px; }
.chat-highlight { animation:chatHighlight 1.4s ease-out; }
@keyframes chatHighlight { 0%,45% { outline:3px solid #f2c84b; outline-offset:3px; } 100% { outline:0 solid transparent; outline-offset:0; } }
.chat-view .chat-options-button { position:absolute; top:50%; width:30px; height:30px; min-height:30px; padding:0; transform:translateY(-50%); border-radius:50%; font-size:22px; line-height:1; background:transparent; box-shadow:none; color:#17836d; flex-shrink:0; }
.chat-message:not(.own),.chat-message.own { max-width:calc(100% - 76px); position:relative; }
.chat-message:not(.own) { margin-left:38px; margin-right:auto; }
.chat-message.own { margin-left:auto; margin-right:38px; }
.chat-message:not(.own) .chat-options-button { right:-36px; }
.chat-message.own .chat-options-button { left:-36px; }
.chat-view .chat-options-button:hover { background:#0000000d; }
body[data-theme="dark"] .chat-view .chat-options-button { color:#83d9b5; }
.chat-compose { grid-template-columns:44px minmax(0,1fr) 52px; gap:8px; align-items:end; }
.chat-compose > * { min-width:0; }
.chat-compose #chatContext { grid-column:1/-1; }
.chat-compose textarea { grid-column:2; height:44px; max-height:38dvh; border-radius:8px; background:white; border:0; }
.chat-compose #chatSend { grid-column:3; width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; display:grid; place-items:center; background:#087f69; color:white; }
.chat-compose-options { grid-column:1; position:relative; width:44px; height:52px; }
.chat-compose-options summary { width:44px; height:52px; display:grid; place-items:center; cursor:pointer; list-style:none; border-radius:50%; background:#e3ece6; color:#235746; }
.chat-compose-options summary::-webkit-details-marker { display:none; }
.chat-compose-options > div { position:absolute; bottom:50px; left:0; width:142px; padding:6px; background:#f7faf8; border:1px solid #ccd5ce; border-radius:8px; box-shadow:0 4px 12px #0003; z-index:20; }
.chat-compose-options button { display:block; width:100%; text-align:left; min-height:36px; background:transparent; color:inherit; box-shadow:none; }
#chatContext { display:flex; align-items:center; gap:8px; border-left:3px solid #278d79; padding:8px; background:#dceae3; font-size:13px; }
#chatContextText { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-dialog { width:min(340px,calc(100vw - 32px)); padding:18px; border:1px solid #ccd5ce; border-radius:8px; color:#23382e; background:#f7faf8; max-height:85dvh; overflow:auto; }
.chat-dialog::backdrop { background:#0007; }
.chat-dialog button { display:block; width:100%; padding:12px; min-height:44px; margin-top:7px; border-radius:6px; background:#e3ece6; color:inherit; font-size:15px; }
.chat-dialog [hidden] { display:none; }
.chat-dialog h3 { margin:0 0 12px; overflow-wrap:anywhere; }
body[data-theme="dark"] .chat-view { background:#101b20; }
body[data-theme="dark"] .chat-message { background:#253038; color:#f0f3f1; }
body[data-theme="dark"] .chat-message.own { background:#174d43; }
body[data-theme="dark"] .chat-message.note { background:#383627; border-left-color:#e6bd5d; }
body[data-theme="dark"] .chat-message header { color:#83d9b5; }
body[data-theme="dark"] .chat-message time { color:#b0c2b9; }
body[data-theme="dark"] #chatContext { background:#263d35; }
body[data-theme="dark"] .chat-dialog { background:#202c31; color:#eef5f1; border-color:#52635a; }
body[data-theme="dark"] .chat-dialog button { background:#33453d; }
body[data-theme="dark"] .chat-compose-options summary { background:#33453d; color:#a5ebcf; }
body[data-theme="dark"] .chat-compose-options > div { background:#202c31; border-color:#52635a; }
.chat-view .phone-app-header { gap:7.5px; margin:-4.5px -4.5px 0; padding:4.5px 3px 6.75px; }
.chat-view .phone-app-header > div { display:flex; align-items:baseline; gap:7px; min-width:0; }
.chat-view .phone-app-header .eyebrow { order:2; margin:0; font-size:.54rem; white-space:nowrap; }
.chat-view .phone-app-header h2 { order:1; font-size:19.5px; white-space:nowrap; }
#chatIdentity { margin-left:auto; margin-right:8px; font-size:11px; min-height:27px; padding:3px 0; }
.chat-navigation { margin-left:0; }
.chat-navigation summary { width:27px; height:27px; }
.chat-navigation summary svg { width:15px; height:15px; }
@media (prefers-reduced-motion:reduce) { .chat-highlight { outline:3px solid #f2c84b; outline-offset:3px; } }
@media (max-width:680px) {
  .chat-feed { -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .chat-feed::-webkit-scrollbar { display:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .chat-dialog[open] { animation:chatDialogIn .15s ease-out; }
  @keyframes chatDialogIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
}