.internal-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1040; font-family: "Microsoft New Tai Lue", Arial, sans-serif; color: #18334a; }
.chat-launcher { display: grid; place-items: center; position: relative; margin-left: auto; width: 54px; height: 54px; border: 1px solid #0f766e; border-radius: 18px; background: #0f766e; color: white; box-shadow: 0 8px 24px #0f766e40; }
.chat-launcher svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chat-count { display: inline-grid; place-items: center; border-radius: 20px; min-width: 22px; padding: 2px 6px; background: #be123c; color: white; font-size: 11px; font-weight: 600; }
.chat-launcher .chat-count { position: absolute; top: -6px; right: -6px; border: 2px solid white; }
/* The 54px launcher sits 12px below the panel. Anchor the zoom at its center,
   27px from the right and 39px below the panel, including on small screens. */
.chat-panel { position: absolute; right: 0; bottom: 66px; width: 370px; height: min(590px, calc(100dvh - 108px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d6e4e8; border-radius: 18px; background: #fff; box-shadow: 0 16px 55px #16334a30; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0); transform-origin: calc(100% - 27px) calc(100% + 39px); transition: transform 340ms cubic-bezier(.4,0,.8,.2), opacity 120ms ease 180ms, visibility 0s linear 340ms; }
.chat-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition: transform 380ms cubic-bezier(.16,1,.3,1), opacity 140ms ease, visibility 0s; }
.chat-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #f0fdfa; border-bottom: 1px solid #dcebe8; }
.chat-heading strong { font-size: 16px; color: #0f766e; }
.chat-heading small,.chat-peer small { display: block; font-size: 11px; color: #64748b; margin-top: 3px; }
.chat-heading button,.chat-peer button { border: 0; background: transparent; color: inherit; width: 32px; height: 32px; border-radius: 9px; font-size: 22px; }
.chat-search { padding: 12px; }
.chat-search input,.chat-compose textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbdde3; border-radius: 10px; background: #fff; color: inherit; font: inherit; font-size: 13px; }
.internal-chat :is(input,textarea,button):focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.internal-chat button { cursor: pointer; }
.internal-chat button:disabled { opacity: .55; cursor: default; }
.chat-contacts { flex: 1; min-height: 0; overflow: auto; padding: 0 8px; }
.chat-contact { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 8px; border: 0; background: transparent; color: inherit; border-radius: 12px; }
.chat-contact:hover { background: #f0fdfa; }
.chat-avatar { width: 37px; height: 37px; border-radius: 12px; background: #e4f2f0; color: #0f766e; display: grid; place-items: center; font-size: 13px; position: relative; flex-shrink: 0; }
.chat-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-avatar i { position: absolute; width: 10px; height: 10px; bottom: -1px; right: -1px; border: 2px solid #fff; border-radius: 50%; background: #94a3b8; }
.chat-avatar i.online { background: #10b981; }
.chat-contact-name { min-width: 0; flex: 1; }
.chat-contact-name strong,.chat-peer strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.chat-admin-icon { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; color: #0f766e; }
.chat-admin-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-contact-name small { display: block; color: #64748b; font-size: 11px; margin-top: 2px; }
.chat-footnote { font-size: 11px; color: #64748b; text-align: center; padding: 10px; margin: 0; border-top: 1px solid #edf2f5; }
.chat-peer { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid #edf2f5; }
.chat-peer div { min-width: 0; }
.chat-messages { flex: 1; min-height: 0; overflow: auto; padding: 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.chat-message { max-width: 88%; padding: 10px 12px; border-radius: 13px 13px 13px 3px; background: #fff; border: 1px solid #e2e8f0; align-self: flex-start; }
.chat-message.mine { align-self: flex-end; background: #dcf5ef; border-color: #c1e7df; border-radius: 13px 13px 3px 13px; }
.chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin: 0 0 5px; }
.chat-message small { display: block; color: #64748b; font-size: 10px; }
.chat-attachment { display: block; color: #0f766e; text-decoration: none; margin-bottom: 8px; }
.chat-photo { display: block; width: 220px; max-width: 100%; height: 150px; object-fit: contain; border-radius: 8px; background: #edf3f5; margin-bottom: 6px; }
.chat-file-name { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.chat-file-size { display: block; font-size: 10px; margin-top: 3px; }
.chat-attachment:hover .chat-file-name { text-decoration: underline; }
.chat-pending-file { gap: 8px; padding: 8px; margin-bottom: 8px; border: 1px solid #cbdde3; border-radius: 8px; font-size: 12px; }
.chat-pending-file > span { min-width: 0; overflow-wrap: anywhere; }
.chat-pending-file small { display: block; }
.chat-compose-actions { gap: 8px; }
.chat-attach-button { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #b8d8d3; border-radius: 8px; color: #0f766e; cursor: pointer; overflow: hidden; }
.chat-attach-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-attach-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chat-attach-button:focus-within { outline: 2px solid #14b8a6; outline-offset: 2px; }
.chat-compose { border-top: 1px solid #e2e8f0; padding: 12px; }
.chat-compose textarea { resize: none; max-height: 110px; }
.chat-compose > div { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.chat-compose small { color: #64748b; font-size: 10px; }
.chat-compose button { padding: 7px 18px; border: 0; border-radius: 9px; background: #0f766e; color: #fff; font: inherit; font-size: 12px; }
.chat-empty { color: #64748b; font-size: 13px; padding: 22px; text-align: center; }
.chat-error { padding: 10px 12px; background: #fff1f2; color: #9f1239; font-size: 12px; }
.chat-error button,.chat-older { border: 0; background: transparent; text-decoration: underline; color: #0f766e; font: inherit; font-size: 12px; }
html[data-theme="dark"] .internal-chat { color: #e2e8f0; }
html[data-theme="dark"] .chat-panel,html[data-theme="dark"] .chat-compose textarea,html[data-theme="dark"] .chat-search input { background: #152436; border-color: #354558; }
html[data-theme="dark"] .chat-heading,html[data-theme="dark"] .chat-message.mine,html[data-theme="dark"] .chat-contact:hover { background: #153f40; }
html[data-theme="dark"] .chat-heading strong { color: #5eead4; }
html[data-theme="dark"] .chat-admin-icon { color: #5eead4; }
html[data-theme="dark"] .chat-attachment,html[data-theme="dark"] .chat-attach-button { color: #5eead4; }
html[data-theme="dark"] .chat-messages { background: #101c2c; }
html[data-theme="dark"] .chat-message { background: #243448; border-color: #354558; }
html[data-theme="dark"] .internal-chat small,html[data-theme="dark"] .chat-empty,html[data-theme="dark"] .chat-footnote { color: #a5b4c7; }
@media(max-width: 480px) { .internal-chat { right: 12px; bottom: 12px; } .chat-panel { width: calc(100vw - 24px); height: min(590px, calc(100dvh - 92px)); } }
@media print { .internal-chat { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .chat-panel,.chat-panel.is-open { transition: none; transform: none; } }