.teamchat-view { height: 100%; min-height: 0; padding: 0 !important; overflow: hidden; }
.teamchat-room.is-subchat { margin-left: 16px; width: calc(100% - 16px); border-left: 3px solid #9fcac6; }
.teamchat-tree-branch { color: #68808a; font-size: 19px; flex: none; margin-left: -12px; }
.teamchat-rooms { flex-shrink: 1; }
body .teamchat-room { flex-shrink: 0; min-width: 0; }
body .teamchat-room-copy { flex: 1; min-width: 0; }
body .teamchat-room-copy strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
body .teamchat-room-copy small { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
body .teamchat-new-room.is-company-action { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 6px; width: calc(100% - 22px); margin: 0 0 10px 22px; min-height: 34px; padding: 6px 9px; border-width: 1px; border-radius: 8px; font-size: 12px; }
body .teamchat-new-room.is-company-action small { font-size: 11px; white-space: nowrap; }
.teamchat-participant-company { white-space: normal; overflow-wrap: anywhere; }
.teamchat-readers-dialog { width: min(440px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; border: 1px solid #bed3d9; border-radius: 16px; padding: 20px; color: #173540; }
.teamchat-readers-dialog::backdrop { background: #06172266; }
.teamchat-readers-dialog small { display: block; overflow-wrap: anywhere; color: #58717d; }
.teamchat-readers-dialog button { margin: 4px; padding: 9px 13px; }
/* Blue unread dot; launcher number uses the shared Cockpit counter text colour. */
body .nav-item.cockpit-teamchat .nav-counter { border-color: #b7d7e4; background: #e8f3f8; color: #247c9f; }
body.launcher-webstyle .nav-item.cockpit-teamchat .nav-counter { border-color: rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.055); }
body .nav-item.cockpit-teamchat .nav-counter::before,
body.launcher-webstyle .nav-item.cockpit-teamchat .nav-counter::before { background: #247c9f; box-shadow: 0 0 0 4px #247c9f21; }
body.launcher-webstyle .nav-item.cockpit-teamchat:disabled,
body.launcher-webstyle #dashboardTeamchatButton:disabled { opacity: .58; filter: grayscale(1); cursor: not-allowed; }
body.launcher-webstyle .nav-item.cockpit-teamchat .nav-counter[hidden] { display: none; }
.teamchat-shell { display: grid; grid-template-columns: minmax(210px, 280px) minmax(360px, 1fr) minmax(190px, 250px); height: 100%; min-height: 0; background: #eef5f6; color: #153742; }
.teamchat-rail, .teamchat-side { display: flex; min-height: 0; flex-direction: column; gap: 12px; padding: 18px; background: #f8fbfc; border-right: 1px solid #cedfe4; }
.teamchat-side { overflow: auto; border-right: 0; border-left: 1px solid #cedfe4; }
.teamchat-rail-head, .teamchat-conversation-head, .teamchat-compose-actions, .teamchat-message-head, .teamchat-message-actions, .teamchat-dms-actions { display: flex; align-items: center; gap: 8px; }
.teamchat-rail-head { justify-content: space-between; }
.teamchat-rail h3, .teamchat-conversation-head h3 { margin: 0; font-size: 18px; }
.teamchat-icon-button, .teamchat-button, .teamchat-compose button, .teamchat-message-actions button, .teamchat-dms-actions button, .teamchat-admin button { border: 1px solid #bbd2d8; border-radius: 9px; background: #fff; color: #176b68; padding: 8px 10px; font: inherit; font-weight: 750; cursor: pointer; }
.teamchat-button.is-primary, .teamchat-compose button[type="submit"] { border-color: #0f766e; background: #0f766e; color: #fff; }
.teamchat-icon-button:disabled, .teamchat-button:disabled, .teamchat-compose button:disabled, .teamchat-dms-actions button:disabled { cursor: not-allowed; opacity: .45; }
.teamchat-status { min-height: 34px; padding: 9px 12px; border-radius: 9px; background: #e2f1f1; color: #24555b; font-size: 12px; line-height: 16px; }
.teamchat-status.is-error { background: #fff0f2; color: #9e3246; }
.teamchat-rooms { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 7px; overflow: auto; }
.teamchat-room { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #bed3d9; border-radius: 11px; background: #f8fbfc; color: #153742; text-align: left; cursor: pointer; }
.teamchat-room:hover { background: #e9f2f3; }.teamchat-room.is-active { border-color: #8fc8c4; background: #dff0ef; }
.teamchat-room-copy { display: grid; min-width: 0; gap: 4px; }.teamchat-room-copy strong, .teamchat-room-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teamchat-room-copy small, .teamchat-message-head time, .teamchat-dms-body small { color: #69838d; font-size: 11px; }
.teamchat-count { min-width: 25px; padding: 4px 7px; border-radius: 999px; background: #cc405d; color: #fff; text-align: center; font-size: 11px; font-weight: 850; }
.teamchat-main { display: grid; min-height: 0; grid-template-rows: auto 1fr auto; }
.teamchat-conversation-head { justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #cedfe4; background: #fff; }
.teamchat-conversation-head p { margin: 4px 0 0; color: #69838d; font-size: 12px; }
.teamchat-messages { min-height: 0; overflow: auto; padding: 20px clamp(14px, 3vw, 40px); }
.teamchat-message { max-width: 780px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #cedfe4; border-left: 4px solid #14918a; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(18, 58, 66, .05); }
.teamchat-message.is-admin { border-left-color: #2563eb; }
.teamchat-message.is-superadmin { border-left-color: #e47b16; }
.teamchat-message.is-developer { border-left-color: #7c3aed; }
.teamchat-message.is-developer .teamchat-message-avatar, .teamchat-message.is-developer .teamchat-role-label { background: #7c3aed; color: #fff; }
.teamchat-participant.is-developer .teamchat-participant-avatar { background: #7c3aed; }
.teamchat-participant.is-developer .teamchat-participant-role { color: #7c3aed; }
.teamchat-reply-reference.is-developer { border-left-color: #7c3aed; }
.teamchat-reply-reference.is-developer strong { color: #7c3aed; }
.teamchat-message-head { flex-wrap: wrap; }.teamchat-message-head time { margin-left: auto; }.teamchat-developer-label { padding: 3px 7px; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.teamchat-text { margin: 10px 0; white-space: pre-wrap; line-height: 1.5; }.teamchat-deleted { color: #7b8e95; font-style: italic; }
.teamchat-translation { margin: 10px 0; padding: 9px 11px; border-left: 3px solid #14918a; border-radius: 0 8px 8px 0; background: #edf6f5; }.teamchat-translation .teamchat-text { margin: 4px 0 0; }.teamchat-translation-label { color: #176b68; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.teamchat-translation-error { display: block; margin-top: 4px; color: #a23449; font-size: 11px; }.teamchat-translation-error[hidden] { display: none; }
.teamchat-image { display: block; max-width: min(100%, 720px); max-height: 560px; margin: 10px 0; border-radius: 10px; object-fit: contain; background: #e3edef; }
.teamchat-message-actions { margin-top: 9px; }.teamchat-message-actions button { padding: 5px 8px; border: 0; background: transparent; font-size: 11px; }.teamchat-message-actions .teamchat-danger { color: #a23449; }
.teamchat-compose { padding: 14px 20px 18px; border-top: 1px solid #cedfe4; background: #fff; }.teamchat-compose textarea { box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; border: 1px solid #bfd3d8; border-radius: 10px; padding: 11px; color: #153742; font: inherit; }
.teamchat-compose-actions { flex-wrap: wrap; margin-top: 8px; }.teamchat-compose-actions button[type="submit"] { margin-left: auto; }.teamchat-file-label { cursor: pointer; color: #176b68; font-weight: 750; }.teamchat-file-label input { display: none; }
.teamchat-staged { margin-top: 8px; color: #176b68; font-size: 12px; font-weight: 700; }
.teamchat-dms-staged { display: flex; align-items: center; gap: 8px; }
.teamchat-dms-staged[hidden] { display: none; }
.teamchat-draft-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.teamchat-view .teamchat-dms-staged .teamchat-draft-remove { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #617880; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }
.teamchat-view .teamchat-dms-staged .teamchat-draft-remove:hover:not(:disabled) { background: #f9e7eb; color: #a23449; transform: scale(1.06); }
.teamchat-view .teamchat-dms-staged .teamchat-draft-remove:focus-visible { outline: 2px solid #117c77; outline-offset: 2px; }
.teamchat-view .teamchat-dms-staged .teamchat-draft-remove:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .teamchat-view .teamchat-dms-staged .teamchat-draft-remove { transition: none; transform: none !important; } }
.teamchat-voice-staged { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #bbd2d8; border-radius: 9px; background: #f4fafb; }
.teamchat-voice-staged[hidden] { display: none; }
.teamchat-voice-staged button { margin-left: auto; border: 0; background: transparent; color: #a23449; padding: 2px 6px; }
.teamchat-voice-message { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 10px; max-width: 520px; margin: 9px 0; padding: 10px 12px; border: 1px solid #bed3db; border-radius: 10px; background: #f4fafb; }
.teamchat-voice-icon { display: grid; grid-row: 1 / span 2; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 900; }
.teamchat-voice-label { color: #315660; font-size: 12px; font-weight: 800; }
.teamchat-voice-player { width: 100%; min-width: 220px; height: 34px; }
.teamchat-images-staged { display: flex; align-items: center; gap: 8px; }.teamchat-images-staged[hidden] { display: none; }.teamchat-images-staged button { border: 0; padding: 3px 6px; background: transparent; color: #a23449; font: inherit; cursor: pointer; }
.teamchat-presence { display: flex; flex-direction: column; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid #d7e4e8; }.teamchat-presence-user::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #20a66a; }
.teamchat-participants { display: grid; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid #d7e4e8; }.teamchat-participants-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.teamchat-participants-head span { color: #69838d; font-size: 11px; }.teamchat-participant-list { display: grid; gap: 7px; }.teamchat-participant { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #d9e5e8; border-radius: 9px; background: #fff; }.teamchat-participant-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #0f766e; color: #fff; font-size: 11px; font-weight: 900; }.teamchat-participant-copy { display: grid; min-width: 0; gap: 2px; }.teamchat-participant-copy strong,.teamchat-participant-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.teamchat-participant-copy small { color: #69838d; font-size: 10px; }.teamchat-participant-role { color: #176b68; font-size: 10px; font-weight: 800; }.teamchat-participant.is-superadmin .teamchat-participant-avatar { background: #e47b16; }.teamchat-participant.is-superadmin .teamchat-participant-role { color: #b65b00; }.teamchat-participant-state { color: #718991; font-size: 10px; white-space: nowrap; }.teamchat-participant.is-online .teamchat-participant-state { color: #168457; font-weight: 800; }.teamchat-participant.is-online .teamchat-participant-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #20a66a; }
.teamchat-dms-card { display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin: 12px 0; padding: 10px; border: 1px solid #bed3db; border-radius: 10px; background: #f7fbfc; }.teamchat-dms-thumbnail { display: grid; min-height: 75px; place-items: center; overflow: hidden; border-radius: 7px; background: #dbe9ed; color: #55717c; font-weight: 900; }.teamchat-dms-thumbnail img { width: 100%; height: 100%; object-fit: cover; }.teamchat-dms-body { display: flex; min-width: 0; flex-direction: column; gap: 5px; }.teamchat-dms-actions { flex-wrap: wrap; margin-top: auto; }.teamchat-dms-actions button { padding: 6px 8px; font-size: 11px; }
.teamchat-dms-body .teamchat-dms-access-state { color: #9a3d4c; }
.teamchat-admin summary { cursor: pointer; color: #176b68; font-weight: 850; }.teamchat-admin form, .teamchat-settings { display: grid; gap: 8px; margin-top: 12px; }.teamchat-admin label { display: grid; gap: 4px; color: #506f7a; font-size: 11px; font-weight: 700; }.teamchat-admin input[type="text"], .teamchat-admin select { min-width: 0; border: 1px solid #c5d8dd; border-radius: 8px; padding: 8px; background: #fff; color: #153742; }
.teamchat-permission-tenant { display: grid; gap: 6px; margin-top: 12px; }.teamchat-permissions { display: grid; gap: 7px; margin-top: 10px; }.teamchat-permission { display: grid; gap: 5px; padding: 9px; border-radius: 8px; background: #edf5f6; }.teamchat-permission.is-member { box-shadow: inset 3px 0 #14918a; }.teamchat-permission > span { display: grid; }.teamchat-permission small { overflow: hidden; color: #718991; font-size: 9px; text-overflow: ellipsis; }.teamchat-check { display: flex !important; align-items: center; gap: 5px; }
.teamchat-empty { color: #718991; font-size: 12px; }.teamchat-preview-dialog { width: min(1000px, 90vw); max-height: 90vh; border: 0; border-radius: 14px; padding: 0; }.teamchat-preview-dialog::backdrop { background: rgba(2, 16, 24, .76); }.teamchat-preview-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fff; }.teamchat-preview-pages { display: grid; gap: 18px; padding: 18px; background: #dbe4e7; }.teamchat-preview-pages figure { margin: 0; }.teamchat-preview-pages img { display: block; max-width: 100%; margin: auto; box-shadow: 0 5px 20px rgba(0,0,0,.22); }.teamchat-preview-pages figcaption { margin-top: 6px; text-align: center; }
@media (max-width: 1050px) { .teamchat-shell { grid-template-columns: 220px minmax(0, 1fr); }.teamchat-side { grid-column: 1 / -1; max-height: 240px; border-top: 1px solid #cedfe4; border-left: 0; } }
@media (max-width: 720px) { .teamchat-shell { grid-template-columns: 1fr; }.teamchat-rail { max-height: 190px; }.teamchat-message { max-width: none; } }
.teamchat-translation-dialog { width: min(360px, 85vw); border: 1px solid #bfd3d8; border-radius: 12px; padding: 20px; background: #fff; color: #153742; font: inherit; }
.teamchat-translation-dialog::backdrop { background: rgba(4,31,40,.42); }
.teamchat-translation-dialog h3 { margin: 0 0 16px; font-size: 16px; }
.teamchat-translation-dialog form { display: flex; gap: 10px; flex-wrap: wrap; }
.teamchat-translation-dialog label { display: grid; gap: 6px; width: 100%; font-size: 13px; font-weight: 700; }
.teamchat-translation-dialog select, .teamchat-translation-dialog button { padding: 10px; border: 1px solid #bfd3d8; border-radius: 8px; background: #fff; color: #153742; font: inherit; }
.teamchat-translation-dialog button[type="submit"] { background: #117c77; color: #fff; border-color: #117c77; }