/* Default theme for @insignia/iios-messaging-ui. Everything is driven by CSS variables scoped to .miu-messenger, so a host restyles by overriding the tokens — no component edits. */ .miu-messenger { --miu-bg: #0e0e13; --miu-panel: #16161d; --miu-panel-2: #1d1d26; --miu-border: #262631; --miu-text: #e9e9ef; --miu-muted: #9a9aa7; --miu-accent: #fda913; --miu-accent-text: #1a1206; --miu-radius: 12px; display: flex; height: 100%; min-height: 0; color: var(--miu-text); background: var(--miu-bg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; } .miu-sidebar { width: 300px; flex-shrink: 0; border-right: 1px solid var(--miu-border); overflow-y: auto; background: var(--miu-panel); } .miu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* conversation list */ .miu-convlist { list-style: none; margin: 0; padding: 0; } .miu-convrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--miu-border); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; } .miu-convrow:hover { background: var(--miu-panel-2); } .miu-convrow.is-active { background: var(--miu-panel-2); } .miu-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--miu-accent-text); background: var(--miu-accent); } .miu-convrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .miu-convrow-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miu-convrow-preview { color: var(--miu-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miu-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--miu-accent-text); background: var(--miu-accent); } /* thread */ .miu-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; } .miu-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .miu-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; } .miu-msg.is-mine { align-self: flex-end; align-items: flex-end; } .miu-bubble { padding: 8px 12px; border-radius: 14px; border: 1px solid var(--miu-border); background: var(--miu-panel); white-space: pre-wrap; word-break: break-word; } .miu-msg.is-mine .miu-bubble { border: none; color: var(--miu-accent-text); background: var(--miu-accent); } .miu-msg.is-pending { opacity: 0.6; } .miu-bubble-row { display: flex; align-items: center; gap: 4px; } .miu-msg.is-mine .miu-bubble-row { flex-direction: row-reverse; } .miu-msg-actions { display: flex; gap: 2px; flex-shrink: 0; } .miu-thread-link { align-self: flex-start; margin-top: 3px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel); color: var(--miu-accent); font-size: 12px; font-weight: 600; cursor: pointer; } .miu-msg.is-mine .miu-thread-link { align-self: flex-end; } .miu-react-wrap { position: relative; flex-shrink: 0; } .miu-react-btn { border: none; background: none; cursor: pointer; opacity: 0; font-size: 14px; padding: 2px; transition: opacity 0.12s; } .miu-msg:hover .miu-react-btn { opacity: 0.6; } .miu-react-btn:hover { opacity: 1; } /* Portaled to via .miu-popover so it's never clipped by a scroll container. */ .miu-popover { position: fixed; z-index: 2147483000; transform: translateX(-100%); /* right-align the picker's right edge to the anchor */ } .miu-react-picker { display: flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); width: max-content; } /* On my own (right-aligned) messages, anchor the picker to the left instead so it stays in view. */ .miu-react-emoji { border: none; background: none; cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 6px; } .miu-react-emoji:hover { background: var(--miu-panel-2); } .miu-reactions { display: flex; gap: 4px; margin-top: 3px; } .miu-reaction { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel-2); color: var(--miu-text); cursor: pointer; } .miu-reaction.is-mine { border-color: var(--miu-accent); } /* attachments */ .miu-att-img-link { display: inline-block; margin-top: 4px; } .miu-att-img { max-width: 260px; max-height: 220px; border-radius: 8px; border: 1px solid var(--miu-border); } .miu-att-file { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--miu-border); background: var(--miu-panel-2); color: var(--miu-text); text-decoration: none; font-size: 13px; } .miu-seen { font-size: 11px; color: var(--miu-muted); margin-top: 2px; } .miu-typing { font-size: 12.5px; color: var(--miu-muted); font-style: italic; } /* mentions */ .miu-mention { color: var(--miu-accent); font-weight: 600; } .miu-msg.is-mine .miu-bubble .miu-mention { color: var(--miu-accent-text); text-decoration: underline; } /* composer */ .miu-composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--miu-border); } .miu-composer-row { display: flex; gap: 8px; } .miu-file-input { display: none; } .miu-attach-btn { flex-shrink: 0; width: 38px; border-radius: 10px; border: 1px solid var(--miu-border); background: var(--miu-panel); color: var(--miu-text); cursor: pointer; font-size: 16px; } .miu-staged { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel-2); font-size: 13px; } .miu-staged-x { border: none; background: none; color: var(--miu-muted); cursor: pointer; padding: 0; line-height: 1; } /* inbox mail attachments */ .miu-attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel-2); color: var(--miu-text); font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .miu-mail-msg .miu-attach-chip { margin: 8px 12px 12px; } button.miu-attach-dl { cursor: pointer; color: var(--miu-text); } button.miu-attach-dl:hover { border-color: var(--miu-accent); color: var(--miu-accent); } .miu-attach-pending { display: inline-flex; align-items: center; gap: 6px; } .miu-attach-chip.is-uploading, .miu-staged.is-uploading { color: var(--miu-muted); } .miu-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--miu-border); border-top-color: var(--miu-accent); border-radius: 50%; animation: miu-spin 0.7s linear infinite; } @keyframes miu-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .miu-spinner { animation-duration: 2s; } } .miu-attach-x { border: none; background: none; color: var(--miu-muted); cursor: pointer; padding: 0 2px; line-height: 1; font-size: 12px; } .miu-attach-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .miu-suggest { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); margin: 0; padding: 4px; list-style: none; max-height: 200px; overflow-y: auto; border: 1px solid var(--miu-border); border-radius: var(--miu-radius); background: var(--miu-panel); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); z-index: 5; } .miu-suggest-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; border-radius: 8px; background: transparent; color: var(--miu-text); font: inherit; cursor: pointer; } .miu-suggest-item:hover { background: var(--miu-panel-2); } .miu-input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--miu-border); background: var(--miu-panel); color: var(--miu-text); font: inherit; outline: none; } .miu-input:focus { border-color: var(--miu-accent); } .miu-send { padding: 0 16px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; color: var(--miu-accent-text); background: var(--miu-accent); } .miu-send:disabled { opacity: 0.5; cursor: not-allowed; } /* sidebar sections + channel browser */ .miu-section { border-bottom: 1px solid var(--miu-border); } .miu-section-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--miu-muted); } .miu-section-add { border: none; background: transparent; color: var(--miu-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; } .miu-section-add:hover { color: var(--miu-text); } .miu-empty-sm { padding: 8px 14px 12px; text-align: left; font-size: 12.5px; } .miu-browser { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 16px; gap: 14px; overflow-y: auto; } .miu-browser-head { font-size: 16px; font-weight: 700; } .miu-channel-create { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--miu-border); border-radius: var(--miu-radius); background: var(--miu-panel); } .miu-channel-vis { display: flex; gap: 16px; font-size: 13px; color: var(--miu-muted); } .miu-channel-vis label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } /* new conversation (DM / group) picker */ .miu-newconv { display: flex; flex-direction: column; gap: 10px; } /* Submit buttons in the stacked create/compose forms size to content, not full width. */ .miu-newconv .miu-send, .miu-channel-create .miu-send { align-self: flex-start; height: 38px; } .miu-person-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--miu-border); border-radius: 10px; background: var(--miu-panel); cursor: pointer; } .miu-person-row:hover { border-color: var(--miu-accent); } .miu-person-row.is-active { border-color: var(--miu-accent); background: color-mix(in srgb, var(--miu-accent) 10%, var(--miu-panel)); } .miu-person-row .miu-browser-name { flex: 1 1 auto; } .miu-browser-list { display: flex; flex-direction: column; gap: 6px; } .miu-browser-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--miu-border); border-radius: var(--miu-radius); background: var(--miu-panel); } .miu-channel-glyph { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: var(--miu-muted); background: var(--miu-panel-2); } .miu-browser-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .miu-browser-name { font-weight: 600; } .miu-browser-topic { font-size: 12.5px; color: var(--miu-muted); } .miu-browser-meta { font-size: 11.5px; color: var(--miu-muted); } .miu-join { flex-shrink: 0; padding: 5px 14px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; color: var(--miu-accent-text); background: var(--miu-accent); } .miu-browser-joined { flex-shrink: 0; font-size: 12px; color: var(--miu-muted); } /* thread pane (Slack-style) */ .miu-pane { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--miu-border); background: var(--miu-panel); } .miu-pane-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--miu-border); font-weight: 700; } .miu-pane-close { border: none; background: none; color: var(--miu-muted); cursor: pointer; font-size: 15px; } .miu-pane-messages { background: var(--miu-bg); } .miu-pane-divider { font-size: 11.5px; color: var(--miu-muted); text-align: center; margin: 4px 0; padding-bottom: 4px; border-bottom: 1px solid var(--miu-border); } /* ── Inbox ── */ .miu-inbox { --miu-bg: #0e0e13; --miu-panel: #16161d; --miu-panel-2: #1d1d26; --miu-border: #262631; --miu-text: #e9e9ef; --miu-muted: #9a9aa7; --miu-accent: #fda913; --miu-accent-text: #1a1206; --miu-radius: 12px; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--miu-text); background: var(--miu-bg); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; } .miu-inbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--miu-border); } .miu-inbox-filters { display: flex; gap: 4px; } .miu-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--miu-border); background: var(--miu-panel); color: var(--miu-text); font: inherit; font-size: 13px; cursor: pointer; } .miu-tab.is-active { background: var(--miu-accent); color: var(--miu-accent-text); border-color: var(--miu-accent); font-weight: 700; } .miu-inbox-body { flex: 1; min-height: 0; display: flex; } .miu-inbox-list { width: 340px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--miu-border); background: var(--miu-panel); } .miu-inbox-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--miu-border); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; } .miu-inbox-row:hover, .miu-inbox-row.is-active { background: var(--miu-panel-2); } .miu-inbox-glyph { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: var(--miu-muted); background: var(--miu-panel-2); font-weight: 700; } .miu-inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .miu-inbox-row-top { display: flex; align-items: center; gap: 6px; } .miu-pill { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--miu-muted); background: var(--miu-panel-2); text-transform: capitalize; } .miu-inbox-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miu-inbox-summary { color: var(--miu-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miu-inbox-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--miu-bg); } .miu-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; } .miu-detail-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--miu-border); } .miu-detail-body { padding: 22px; } .miu-detail-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; } .miu-detail-summary { color: var(--miu-muted); line-height: 1.55; } /* mail reader */ .miu-mail { display: flex; flex-direction: column; flex: 1; min-height: 0; } .miu-mail-head { padding: 12px 18px; border-bottom: 1px solid var(--miu-border); font-weight: 700; font-size: 15px; } .miu-mail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .miu-mail-msg { flex: 0 0 auto; /* don't let the flex column shrink cards — they'd clip their own content */ border: 1px solid var(--miu-border); border-radius: var(--miu-radius); background: var(--miu-panel); overflow: hidden; } .miu-mail-meta { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--miu-border); font-size: 12px; color: var(--miu-muted); } .miu-mail-frame { width: 100%; height: 200px; border: none; background: #fff; } .miu-mail-text { padding: 12px; white-space: pre-wrap; word-break: break-word; } /* compose modal — portaled to , so carry SDK theme-token defaults here (the host's own token mapping + a synchronous copy on the portal root override these). */ .miu-portal { --miu-bg: #0e0e13; --miu-panel: #16161d; --miu-panel-2: #1d1d26; --miu-border: #262631; --miu-text: #e9e9ef; --miu-muted: #9a9aa7; --miu-accent: #fda913; --miu-accent-text: #1a1206; --miu-radius: 12px; } .miu-modal-overlay { position: fixed; inset: 0; z-index: 2147483000; background: rgba(2, 2, 6, 0.6); display: grid; place-items: center; padding: 20px; } .miu-modal { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; border: 1px solid var(--miu-border); border-radius: 16px; background: var(--miu-panel); color: var(--miu-text); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; } .miu-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--miu-border); font-weight: 700; } .miu-modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .miu-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--miu-border); } .miu-compose-modes { display: flex; gap: 6px; } .miu-field { display: flex; flex-direction: column; gap: 6px; } .miu-field-lbl { font-size: 12.5px; font-weight: 600; color: var(--miu-muted); } .miu-textarea { resize: vertical; min-height: 90px; } .miu-people { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; } .miu-person { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; } .miu-person.is-active { background: var(--miu-panel-2); } .miu-person span:nth-of-type(1) { flex: 1; } /* misc */ .miu-empty { padding: 24px; color: var(--miu-muted); text-align: center; } .miu-thread-empty { margin: auto; } .miu-error { color: #f0563f; }