.active-call {
  --room-bg: #eaf2f9; --room-surface: #f7fbff; --room-tile: #d5e4ef;
  --room-ink: #203e53; --room-muted: #54738a; --room-line: #aec6d766;
  --room-button: #dcebf5; --room-accent: #315f80;
}
.sylo-app .active-call, .active-call { background: var(--room-bg); color: var(--room-ink); border-color: var(--room-line); box-shadow: 0 20px 70px #183a5933; }
.sylo-app .active-call > header, .active-call > header, .sylo-app .active-call .call-controls, .active-call .call-controls { background: var(--room-surface); border-color: var(--room-line); backdrop-filter: none; }
.active-call .call-heading h2 { color: var(--room-ink); }
.active-call .call-kicker, .active-call > header .call-subtitle { color: var(--room-muted); }
.active-call .call-quality, .active-call .call-security { background: transparent; color: var(--room-muted); border-color: var(--room-line); }
.active-call .call-quality-poor { color: #a55242; background: #fbe9df; }
.active-call .call-expand, .active-call .call-minimize { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid var(--room-line); border-radius: 12px; background: var(--room-button); color: var(--room-ink); }
.sylo-app .active-call .call-tile, .active-call .call-tile { background: linear-gradient(145deg,var(--room-tile),var(--room-bg)); border-color: var(--room-line); box-shadow: none; }
.active-call .call-tile-label { backdrop-filter: none; background: #132a3dd9; }
.active-call .call-tile.is-screen-share video { object-fit: contain; background: #102333; }
.active-call .call-tools button { color: var(--room-muted); }
.active-call .call-tools button:hover, .active-call .call-tools button.selected { background: var(--room-button); color: var(--room-ink); }
.active-call .call-control { background: var(--room-button); color: var(--room-ink); border-color: var(--room-line); }
.active-call .call-control:hover { background: var(--room-tile); }
.active-call .call-control.is-off { background: #f5e1e7; color: #90445b; border-color: #d4a2b3; }
.active-call .call-control.call-end { background: #bd4e66; color: #fff; border-color: #bd4e66; }
.sylo-app .active-call .meeting-chat, .active-call .meeting-chat { background: var(--room-surface); color: var(--room-ink); border-color: var(--room-line); }
.active-call .meeting-chat h3, .active-call .meeting-chat label { color: var(--room-ink); }
.active-call .meeting-chat textarea { background: var(--room-bg); color: var(--room-ink); }
.active-call .meeting-chat-heading .icon-button { background: var(--room-button); color: var(--room-ink); }
.sylo-app .active-call.is-fullscreen, .active-call.is-fullscreen, .active-call:fullscreen { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
.sylo-app:has(.active-call.is-fullscreen) > :is(.primary-nav,.main-content,.skip-link) { visibility: hidden; pointer-events: none; }
.active-call.minimized .call-expand { display: none; }
.active-call .call-tile.has-raised-hand { border-color: #dbb25d; box-shadow: inset 0 0 0 2px #e8bb56; }
.call-raised-hand { position: absolute; z-index: 4; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #e8c66c; border-radius: 12px; background: #fff2c7; color: #745013; font-size: 11px; font-weight: 700; animation: call-hand-enter .6s ease-out; }
.call-tile-local .call-raised-hand { top: 7px; left: 7px; padding: 5px; }
.call-tile-local .call-raised-hand span { display: none; }
.call-hand-notice { position: absolute; z-index: 6; top: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; width: max-content; max-width: calc(100% - 32px); padding: 14px 20px; border: 1px solid #d8bc72; border-radius: 18px; background: #fffae9; color: #6c4d17; box-shadow: 0 12px 36px #0e304332; pointer-events: none; animation: call-hand-toast .4s ease-out; }
.call-hand-notice > span { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: #ffedb0; }
.call-hand-notice svg { animation: call-hand-wave .7s ease-in-out 2; transform-origin: 70% 90%; }
.call-hand-notice strong { font-size: 14px; }
@keyframes call-hand-enter { from { opacity: 0; transform: translateY(10px) rotate(-15deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes call-hand-toast { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes call-hand-wave { 0%,100% { rotate: 0deg; } 30% { rotate: -20deg; } 70% { rotate: 15deg; } }
html[data-appearance="dark"] .active-call { --room-bg: #142735; --room-surface: #1b3343; --room-tile: #26475d; --room-ink: #e3f0f8; --room-muted: #abc4d5; --room-line: #8eafc433; --room-button: #294b60; }
html[data-appearance="dark"] .sylo-app .active-call { background: var(--room-bg); }
html[data-appearance="dark"] .sylo-app .active-call > header, html[data-appearance="dark"] .sylo-app .active-call .call-controls { background: var(--room-surface); }
html[data-appearance="dark"] .sylo-app .active-call .call-tile { background: var(--room-tile); }
.chat-file-dropzone { position: relative; }
.chat-drop-indicator { position: absolute; inset: 12px; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; border: 2px dashed #5e94ac; border-radius: 18px; background: #edf7fcef; color: #264f66; text-align: center; pointer-events: none; }
.chat-drop-indicator strong { font-size: 20px; }
.chat-drop-indicator span { font-size: 14px; }
.chat-files-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 8px; max-height: 50dvh; overflow-y: auto; }
.chat-files-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.chat-files-list li > span { flex: 1; min-width: 0; }
.chat-files-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chat-files-list small { color: var(--muted); }
.outgoing-file-dialog .attachment-preview { display: flex; justify-content: center; align-items: center; max-height: min(48dvh,440px); overflow: hidden; margin-bottom: 18px; border-radius: 14px; background: var(--surface-alt); }
.outgoing-file-dialog .attachment-preview :is(img,video) { display: block; width: 100%; height: auto; max-height: min(48dvh,440px); object-fit: contain; }
.attachment-error { padding: 12px 14px; border: 1px solid #c78383; border-radius: 10px; background: #fff0ed; color: #873b34; font-size: 14px; line-height: 1.5; }
html[data-appearance="dark"] .attachment-error { background: #452e32; color: #f1c6c2; }
@media (max-width:767px) { .call-hand-notice { top: 16px; gap: 9px; padding: 10px 13px; } .call-hand-notice strong { font-size: 12px; } .call-hand-notice > span { width: 38px; height: 38px; } .active-call .call-header-actions { gap: 5px; } .active-call .call-expand,.active-call .call-minimize { width: 36px; height: 36px; min-height: 36px; } .call-raised-hand span { display: none; } .active-call .call-tools { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; overflow: visible; } .active-call .call-tools button { min-width: 0; flex-direction: column; gap: 3px; padding: 5px 2px; } .active-call .call-tools button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (prefers-reduced-motion:reduce) { .call-hand-notice,.call-hand-notice svg,.call-raised-hand { animation: none; } }

.message footer .message-receipt {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; max-width: 100%; min-width: 0; padding: 4px 6px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--accent, #315e63); font: inherit; text-align: left;
  cursor: pointer;
}
.message-receipt > svg { flex: 0 0 auto; }
.message-receipt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message footer .message-receipt:hover { background: var(--accent-soft, #dcebed); }
.message-receipt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dialog.message-readers-dialog {
  width: min(460px, calc(100vw - 24px)); height: fit-content; min-height: 0;
  max-height: min(80dvh, 640px); margin: auto; inset: 0;
  border: 1px solid var(--line, #dfe6e7); border-radius: 20px;
  padding: 24px; overflow: auto;
}
.sylo-app .dialog.message-readers-dialog > header { margin-bottom: 18px; background: transparent; }
.dialog.message-readers-dialog > header h2 { font-size: 20px; }
.dialog.message-readers-dialog > header .icon-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.message-readers-summary { color: var(--muted, #647477); margin: 0 0 16px; }
.message-readers-list { padding: 0; margin: 0; list-style: none; }
.message-readers-list > li {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line, #dfe6e7);
}
.message-readers-list > li:last-child { border-bottom: 0; }
.message-readers-list > li > div:not(.avatar) { min-width: 0; flex: 1; display: grid; gap: 5px; }
.message-readers-list strong { overflow-wrap: anywhere; font-size: 14px; }
.message-readers-list time, .message-readers-list li > div > span { font-size: 13px; color: var(--muted, #647477); }
.message-readers-list > li > svg { flex-shrink: 0; color: var(--accent, #315e63); }
.message-readers-timezone { margin: 18px 0 0; color: var(--muted, #647477); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
[data-appearance="dark"] .message-receipt { color: #a3cbce; }
[data-appearance="dark"] .message footer .message-receipt:hover { background: #263f43; }
@media (max-width: 767px) {
  .message footer .message-receipt { min-height: 36px; }
  .dialog.message-readers-dialog { padding: 20px; }
}

.sylo-app .mail-unread-navigation { padding: 2px 14px 10px; flex-shrink: 0; }
.sylo-app .mail-read-filters { display: flex; gap: 6px; align-items: center; }
.sylo-app .mail-read-filters button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.sylo-app .mail-read-filters button[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); border-color: var(--accent); font-weight: 600; }
.sylo-app .mail-read-filters b { font-size: 11px; min-width: 18px; text-align: center; }
.sylo-app .mail-other-unread { display: grid; gap: 5px; padding: 10px 0 0; }
.sylo-app .mail-other-unread > small { color: var(--muted); font-size: 11px; }
.sylo-app .mail-other-unread button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface-alt); text-align: left; }
.sylo-app .mail-other-unread button > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.sylo-app .mail-other-unread button > b, .sylo-app .mail-account-unread { color: var(--accent); background: var(--accent-soft); border-radius: 999px; white-space: nowrap; padding: 3px 7px; font-size: 10px; font-weight: 600; }
.sylo-app .mail-row .mail-unread-label { display: inline-flex; gap: 5px; align-items: center; align-self: flex-start; color: var(--accent); font-size: 10px; font-weight: 650; line-height: 1.4; }
.sylo-app .mail-unread-label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sylo-app .mail-row.unread { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.sylo-app .mail-row.unread .mail-row-top time::after { content: none; }
.sylo-app .mail-row.unread button > strong, .sylo-app .mail-row.unread .mail-row-top > strong { font-weight: 700; color: var(--text); }
.sylo-app .mail-read-filters button:focus-visible, .sylo-app .mail-other-unread button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .sylo-app .mail-unread-navigation { padding-inline: 16px; } .sylo-app .mail-read-filters button { min-height: 40px; } }