/* Comms-only V16 polish. Visual reference: css/hymail-v16.css.
 * Additive skin: existing layout, visibility, events and media remain owned by each app.
 * Chroma is confined to card borders; no full-screen animated layers. */
@property --comms-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes comms-orbit { to { --comms-angle: 360deg; } }
body.hyos-comms-v16 {
  --comms-bg: #000204;
  --comms-surface: #070d19;
  --comms-raised: #101b2e;
  --comms-ink: #f6f9ff;
  --comms-muted: #a5b4cc;
  --comms-line: #35465f;
  --comms-accent: #35eaff;
  --comms-shadow: 0 16px 40px #0006;
  --comms-edge: conic-gradient(from var(--comms-angle), #ff315f, #ff34dd, #a83cff, #5f54ff, #248dff, #22dfff, #20edbd, #83f16d, #ecf35f, #ffb84b, #ff315f);
  --bg-deep: var(--comms-bg); --bg-surface: var(--comms-surface); --bg-card: var(--comms-raised);
  --text: var(--comms-ink); --muted: var(--comms-muted); --border: var(--comms-line);
  --accent: var(--comms-accent); --border-focus: var(--comms-accent);
  --mt-bg: var(--comms-bg); --mt-text: var(--comms-ink); --mt-muted: var(--comms-muted);
  --mt-border: var(--comms-line); --mt-glass: var(--comms-surface); --mt-glass-light: var(--comms-raised);
  color-scheme: dark;
  color: var(--comms-ink);
  background: radial-gradient(ellipse at 8% 0%, #248dff17, transparent 50%),
    radial-gradient(ellipse at 95% 90%, #a657ff14, transparent 55%), var(--comms-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--comms-accent);
}
/* Existing shared themes use data-theme; brand styles also support data-mode. */
html:is([data-theme='light'], [data-mode='light'], .light) body.hyos-comms-v16,
body.hyos-comms-v16:is([data-theme='light'], [data-mode='light'], .light) {
  --comms-bg: #eef3fa; --comms-surface: #ffffff; --comms-raised: #e7eef8;
  --comms-ink: #14243b; --comms-muted: #4b5e78; --comms-line: #a4b4ca;
  --comms-accent: #006477; --comms-shadow: 0 12px 32px #20395b15;
  color-scheme: light;
}
body.hyos-comms-v16 :is(.hm-sidebar, .hm-center, .hm-detail, .ht-sidebar, .ht-chat) {
  background: var(--comms-surface);
  color: var(--comms-ink);
  border-color: var(--comms-line);
  min-width: 0;
}
body.hyos-comms-v16 :is(.hm-sidebar-header, .hm-chat-header, .hm-detail-header, .ht-nav, .ht-chat-header, .ht-sidebar-header, .ht-input-bar) {
  background: var(--comms-surface);
  color: var(--comms-ink);
  border-color: var(--comms-line);
}
/* Layered card edges without pseudo-elements over controls or video. */
body.hyos-comms-v16 :is(.mt-card, .hm-modal, .ht-modal, .ht-input-wrap) {
  --comms-edge: conic-gradient(from var(--comms-angle), #ff315f, #ff34dd, #a83cff, #5f54ff, #248dff, #22dfff, #20edbd, #83f16d, #ecf35f, #ffb84b, #ff315f);
  border: 1px solid transparent;
  border-radius: 18px;
  background: linear-gradient(var(--comms-surface), var(--comms-surface)) padding-box,
    var(--comms-edge) border-box;
  color: var(--comms-ink);
  box-shadow: var(--comms-shadow);
  animation: comms-orbit 18s linear infinite;
}
body.hyos-comms-v16 .mt-card::before { background: none; }
body.hyos-comms-v16 :is(.mt-h, .hm-modal h3, .ht-chat-title) { letter-spacing: -.025em; }
body.hyos-comms-v16 :is(.mt-sub, .mt-note, .ht-chat-desc) { color: var(--comms-muted); line-height: 1.6; }
body.hyos-comms-v16 :is(.hm-search-wrap, .ht-sidebar-header select, .mt-field input, .hm-modal .fi) {
  background: var(--comms-raised); color: var(--comms-ink);
  border: 1px solid var(--comms-line); border-radius: 12px;
}
body.hyos-comms-v16 :is(input, textarea)::placeholder { color: var(--comms-muted); opacity: 1; }
body.hyos-comms-v16 :is(.hm-chip, .ht-nav-tab) { border-radius: 12px; }
body.hyos-comms-v16 :is(.hm-chip.active, .ht-nav-tab.active) {
  color: var(--comms-accent);
  box-shadow: inset 0 -2px var(--comms-accent);
}
body.hyos-comms-v16 :is(.hm-conv-item, .ht-channel-item) { border-radius: 12px; }
body.hyos-comms-v16 :is(.hm-conv-item:hover, .ht-channel-item:hover) { background: var(--comms-raised); }
body.hyos-comms-v16 .mt-btn:not(.ghost) {
  background: linear-gradient(110deg, #234fc6, #6734bf);
  color: #fff; box-shadow: 0 6px 18px #234fc630;
}
body.hyos-comms-v16 .mt-btn.ghost { color: var(--comms-ink); background: var(--comms-raised); border-color: var(--comms-line); }
body.hyos-comms-v16 :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--comms-accent); outline-offset: 3px;
}
body.hyos-comms-v16 :is(.hm-search-wrap, .ht-input-wrap):focus-within {
  box-shadow: 0 0 0 3px var(--comms-accent);
}
body.hyos-comms-v16 :is(.hm-new-btn, .hm-detail-close, .ht-nav-icon-btn) { min-width: 44px; min-height: 44px; }
body.hyos-comms-v16 .hm-sidebar-header { flex-wrap: wrap; }
body.hyos-comms-v16 .hm-sidebar-header h2 { flex: 1 0 100%; }
/* Keep meeting cards reachable when the keyboard opens or at 200% zoom. */
body.hyos-comms-v16 .mt-wrap { height: 100%; height: 100dvh; overflow-y: auto; }
body.hyos-comms-v16 .mt-card { flex-shrink: 0; margin-block: auto; }
@media (min-width: 769px) {
  body.hyos-comms-v16 :is(.hm-center, .ht-chat) { border-radius: 18px 0 0 0; border-left: 1px solid var(--comms-line); }
}
@media (max-width: 768px) {
  body.hyos-comms-v16 :is(.hm-modal, .ht-modal) { max-width: calc(100vw - 24px); }
  body.hyos-comms-v16 :is(input, textarea, select) { font-size: 16px; }
  body.hyos-comms-v16 .mt-card { padding: 22px 18px; border-radius: 18px; }
  body.hyos-comms-v16 .ht-input-bar { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.hyos-comms-v16 *, body.hyos-comms-v16 *::before, body.hyos-comms-v16 *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  body.hyos-comms-v16 :is(.mt-card, .hm-modal, .ht-modal, .ht-input-wrap) {
    border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none;
  }
}
/* Camera surfaces stay dark in either theme; preserve readable fallback text. */
body.hyos-comms-v16 :is(.mt-preview-off, .mt-preview-off iconify-icon) { color: #b9c8df; }