/* Internal Chat — chat.css. See CLAUDE.md for architecture/theming notes. */

/* Noto Color Emoji (COLRv1 vector, shipped as raw TTF — fontTools'
   WOFF2 encoder silently corrupts the file, so we avoid the conversion
   step and let the browser read the .ttf directly). The unicode-range
   is critical: the font's cmap also contains U+0020 / digits / # / *
   purely so it can render keycap sequences like 1️⃣, but without
   unicode-range the browser would use those glyphs for ALL spaces/digits
   in chat text, producing abnormally wide spacing everywhere. The range
   below whitelists only the emoji-relevant codepoints actually present
   in the font, so regular text falls through to var(--font-family). */
@font-face {
  font-family: 'NotoColorEmoji';
  src: local('Apple Color Emoji'), url('../fonts/NotoColorEmoji.ttf') format('truetype');
  font-display: swap;
  unicode-range:
    U+00A9-00AE, U+200D, U+203C, U+2049, U+20E3, U+2122, U+2139,
    U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23CF, U+23E9-23FA,
    U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-2604, U+260E-262F,
    U+2638-263A, U+2640-2642, U+2648-2653, U+265F-2668, U+267B-267F,
    U+2692-26A1, U+26A7-26B1, U+26BD-26BE, U+26C4-26C8, U+26CE-26D4,
    U+26E9-26EA, U+26F0-2716, U+271D-2721, U+2728, U+2733-2734,
    U+2744-2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF,
    U+2934-2935, U+2B05-2B07, U+2B1B-2B1C, U+2B50-2B55, U+3030, U+303D,
    U+3297-3299, U+FE0F, U+1F004, U+1F0CF, U+1F170-1F171, U+1F17E-1F17F,
    U+1F18E-1F19A, U+1F1E6-1F202, U+1F21A, U+1F22F-1F23A, U+1F250-1F251,
    U+1F300-1F64F, U+1F680-1F6FC, U+1F7E0-1F7F0, U+1F90C-1F9FF,
    U+1FA70-1FAF8, U+E0030-E0039, U+E0061-E007F;
}

:root {
  --ic-panel-w:  360px;
  --ic-panel-h:  580px;
  --ic-shadow:   0 4px 24px rgba(0,0,0,.15), 0 1px 6px rgba(0,0,0,.08);
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.ic-panel-wrapper {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  font-family: 'NotoColorEmoji', var(--font-family);
  font-size: var(--font-size-base);
}

/* ── FAB ─────────────────────────────────────────────────────── */
.ic-fab {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background-color: var(--btn-primary-bg) !important;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--btn-primary-color);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s, opacity .15s;
  z-index: 10;
}
.ic-fab:hover { opacity: .9; transform: scale(1.07); }
.ic-fab .ic-icon { width: 24px; height: 24px; }

.ic-fab-badge {
  position: absolute; top: -3px; right: -3px;
  background-color: var(--brand-danger) !important;
  color: var(--btn-danger-color);
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--panel-bg);
}
.ic-fab-badge--pulse { animation: ic-fab-badge-pulse 1.4s ease-in-out infinite; }
@keyframes ic-fab-badge-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(217, 83, 79, .6); }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(217, 83, 79, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}

.ic-fab-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--btn-primary-bg);
}

/* ── Panel ───────────────────────────────────────────────────── */
.ic-panel {
  position: absolute;
  bottom: 70px; right: 0;
  width: var(--ic-panel-w);
  height: var(--ic-panel-h);
  max-height: calc(100vh - 173px);
  max-height: calc(100dvh - 173px);
  background-color: var(--panel-bg) !important;
  border-radius: var(--panel-border-radius);
  box-shadow: var(--ic-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  border: var(--panel-border-width) solid var(--panel-default-border);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ic-panel-wrapper.ic-open .ic-panel {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}

/* ── Screens ─────────────────────────────────────────────────── */
.ic-screen {
  display: flex; flex-direction: column;
  height: 100%;
  background-color: var(--panel-bg) !important;
  position: relative;
}
.ic-screen--hidden { display: none !important; }

.ic-jump-to-bottom {
  position: absolute; bottom: 62px; right: 12px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-bg) !important; border: 1px solid var(--default-border-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-color);
  transition: box-shadow .12s, transform .12s;
}
.ic-jump-to-bottom:hover { box-shadow: 0 4px 12px rgba(0,0,0,.25); transform: translateY(-1px); }
.ic-jump-to-bottom .ic-icon { width: 14px; height: 14px; }
.ic-jump-badge {
  position: absolute; top: -9px; left: -6px;
  background: var(--btn-primary-bg); color: var(--btn-primary-color);
  font-size: 10px; font-weight: 600; line-height: 1;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; white-space: nowrap;
}

/* ── Header ──────────────────────────────────────────────────── */
.ic-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  min-height: 56px;
  box-sizing: border-box;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-header-title {
  flex: 1;
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ic-header-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ic-header-info .ic-header-title { flex: 0 0 auto; line-height: 1.3; }
.ic-header-subtitle {
  font-size: 11px;
  color: var(--navbar-inverse-color);
  opacity: .8;
  margin-top: 1px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-header-actions { display: flex; gap: 2px; }
.ic-header-actions button,
.ic-avatar-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-header-actions button:hover,
.ic-avatar-btn:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-header-actions .ic-icon { width: 18px; height: 18px; }

.ic-back-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-back-btn:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-back-btn .ic-icon { width: 20px; height: 20px; }

.ic-avatar-btn { position: relative; overflow: visible; flex-shrink: 0; }
.ic-header-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--navbar-inverse-bg);
}

/* ── Presence menu ───────────────────────────────────────────── */
.ic-presence-menu {
  position: absolute; top: 48px; left: 12px;
  background-color: var(--dropdown-bg) !important;
  border: var(--dropdown-border-width) solid var(--dropdown-border);
  border-radius: var(--dropdown-border-radius);
  padding: 4px;
  box-shadow: var(--dropdown-box-shadow);
  z-index: 20; min-width: 170px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.ic-presence-menu--open { opacity: 1; transform: translateY(0); pointer-events: all; }
.ic-presence-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--dropdown-link-color); font-size: 13px;
  border-radius: var(--border-radius-small);
  transition: background-color .12s;
}
.ic-presence-option:hover {
  background-color: var(--dropdown-link-hover-bg) !important;
  color: var(--dropdown-link-hover-color);
}

/* ── Status dots ─────────────────────────────────────────────── */
.ic-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ic-dot--online  { background-color: var(--brand-success) !important; }
.ic-dot--busy    { background-color: var(--brand-danger) !important; }
.ic-dot--away    { background-color: var(--brand-warning) !important; }
.ic-dot--offline { background-color: var(--text-muted-color) !important; }

/* ── Search ──────────────────────────────────────────────────── */
.ic-search-wrap {
  padding: 8px 12px;
  background-color: var(--panel-bg) !important;
  position: relative; flex-shrink: 0;
  border-bottom: 1px solid var(--default-border-color);
}
.ic-search-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted-color); pointer-events: none;
}
.ic-search {
  width: 100%;
  background-color: var(--input-bg) !important;
  border: var(--input-border-width) solid var(--input-border);
  border-radius: 20px;
  padding: 7px 12px 7px 34px;
  color: var(--input-color);
  font-size: 13px; outline: none; box-sizing: border-box;
}
.ic-search::placeholder { color: var(--gray-light); }
.ic-search:focus { border-color: var(--input-border-focus); }

/* ── Room list ───────────────────────────────────────────────── */
.ic-room-list {
  flex: 1; overflow-y: auto;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}
.ic-room-list::-webkit-scrollbar { width: 4px; }
.ic-room-list::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-bg); border-radius: 4px; }

.ic-room-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer;
  background-color: transparent !important;
  transition: background-color .1s;
  border-bottom: 1px solid var(--default-border-color);
}
.ic-room-item:hover { background-color: var(--default-heading-bg-color) !important; }

.ic-avatar-wrap { position: relative; flex-shrink: 0; }
.ic-avatar-wrap .ic-dot {
  position: absolute; bottom: 1px; right: 1px;
  border: 2px solid var(--panel-bg);
  width: 11px; height: 11px;
}

.ic-avatar-initials {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--brand-primary-text);
}
.ic-color-0 { background-color: #1abc9c !important; }
.ic-color-1 { background-color: var(--brand-primary) !important; }
.ic-color-2 { background-color: var(--brand-info) !important; }
.ic-color-3 { background-color: var(--brand-warning) !important; }
.ic-color-4 { background-color: var(--brand-danger) !important; }
.ic-color-5 { background-color: var(--brand-success) !important; }
.ic-color-6 { background-color: #1aa3c7 !important; }
.ic-color-7 { background-color: #e91e8c !important; }

.ic-room-info  { flex: 1; min-width: 0; }
.ic-room-name-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.ic-room-name  { font-size: 13px; font-weight: 500; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ic-room-preview-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 1px;
}
.ic-room-preview { font-size: 12px; color: var(--text-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ic-preview-sender { color: var(--gray-light); }
.ic-time { font-size: 11px; color: var(--text-muted-color); flex-shrink: 0; white-space: nowrap; }
.ic-badge {
  background-color: var(--link-color) !important;
  color: var(--white-color);
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
@keyframes ic-mention-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.ic-badge--mention {
  background-color: #e53935 !important;
  animation: ic-mention-pulse 1.4s ease-in-out infinite;
}
/* Empty "manually marked unread" badge — no count, just a small dot */
.ic-badge--empty {
  min-width: 10px; width: 10px; height: 10px;
  padding: 0; border-radius: 50%;
  font-size: 0;
}

.ic-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 12px;
  color: var(--text-muted-color); text-align: center; padding: 24px;
}
.ic-empty-state .ic-icon { width: 40px; height: 40px; opacity: .4; }
.ic-empty-state p { font-size: 13px; line-height: 1.6; }

/* ── New conversation choice screen ──────────────────────────── */
.ic-new-choice-body { flex: 1; background-color: var(--panel-bg) !important; }

.ic-choice-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  background-color: transparent !important;
  border: none; border-bottom: 1px solid var(--default-border-color);
  cursor: pointer; text-align: left;
  color: var(--text-color);
  transition: background-color .12s;
}
.ic-choice-row:first-child { border-top: 1px solid var(--default-border-color); }
.ic-choice-row:hover { background-color: var(--default-heading-bg-color) !important; }

.ic-choice-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background-color: var(--state-primary-bg) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--link-color);
}
.ic-choice-icon .ic-icon { width: 20px; height: 20px; }
.ic-choice-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ic-choice-label strong { font-size: 14px; font-weight: 600; }
.ic-choice-label span { font-size: 12px; color: var(--text-muted-color); }
.ic-choice-arrow { width: 16px; height: 16px; color: var(--text-muted-color); flex-shrink: 0; }

/* ── Form screens ────────────────────────────────────────────── */
.ic-form-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column;
  background-color: var(--panel-bg) !important;
}

.ic-field-label { display: block; font-size: 12px; color: var(--text-muted-color); font-weight: 500; margin-bottom: 5px; }

.ic-input {
  width: 100%;
  background-color: var(--input-bg) !important;
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--border-radius);
  padding: 7px 10px; color: var(--input-color);
  font-size: 13px; outline: none; box-sizing: border-box;
}
.ic-input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px var(--input-border-focus-rgba); }

.ic-user-search-wrap { position: relative; margin-bottom: 10px; }
.ic-user-search-wrap .ic-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted-color); pointer-events: none; }
.ic-user-search-wrap .ic-user-search,
.ic-user-search-wrap .ic-group-user-search,
.ic-user-search-wrap .ic-add-member-search,
.ic-user-search-wrap .ic-input { padding-left: 32px; }

.ic-user-list,
.ic-group-user-list {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -14px;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

.ic-user-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 14px;
  background-color: transparent !important;
  border: none; border-bottom: 1px solid var(--default-border-color);
  cursor: pointer; text-align: left; color: var(--text-color);
  transition: background-color .1s;
}
.ic-user-row:hover { background-color: var(--default-heading-bg-color) !important; }
.ic-user-row--selected { background-color: var(--state-primary-bg) !important; }
.ic-user-row--selected:hover { background-color: var(--state-primary-bg) !important; }

.ic-user-row-avatar { flex-shrink: 0; width: 36px; height: 36px; position: relative; }
.ic-user-row-avatar > .ic-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  border: 2px solid var(--panel-bg);
}
.ic-user-row-avatar img {
  display: block !important; width: 36px !important; height: 36px !important;
  border-radius: 50% !important; position: static !important; top: auto !important; margin: 0 !important;
}
.ic-user-row-name { flex: 1; font-size: 14px; font-weight: 500; }
.ic-user-row-check { color: var(--link-color); font-size: 16px; font-weight: 700; flex-shrink: 0; }

.ic-team-row .ic-user-row-name { flex: 0 1 auto; }
.ic-team-count { margin-left: auto; font-size: 12px; color: var(--text-muted-color); flex-shrink: 0; }

.ic-group-selected-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ic-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background-color: var(--state-primary-bg) !important;
  color: var(--state-primary-text);
  border-radius: 12px; padding: 3px 10px;
  font-size: 12px; font-weight: 500;
}
.ic-tag-remove { background-color: transparent !important; border: none; cursor: pointer; color: var(--state-primary-text); font-size: 14px; padding: 0; margin-left: 2px; }
.ic-tag-remove:hover { color: var(--state-danger-text); }

.ic-btn-primary {
  display: block; width: 100%;
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color); border: none;
  border-radius: var(--border-radius); padding: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.ic-btn-primary:hover { background-color: var(--btn-primary-hover-bg) !important; }

.ic-empty-state-sm { padding: 16px 14px; color: var(--text-muted-color); font-size: 13px; text-align: center; }

/* ── Room overlay ────────────────────────────────────────────── */
#ic-room-overlay { position: fixed; bottom: 96px; right: 28px; z-index: 1000; width: var(--ic-panel-w); font-family: 'NotoColorEmoji', var(--font-family); }
#ic-room-overlay.ic-hidden { display: none; }

.ic-room-panel {
  background-color: var(--panel-bg) !important;
  border: var(--panel-border-width) solid var(--panel-default-border);
  border-radius: var(--panel-border-radius);
  height: var(--ic-panel-h);
  display: flex; flex-direction: column;
  box-shadow: var(--ic-shadow);
  overflow: hidden;
  animation: ic-slide-up .2s ease;
}
#ic-room-overlay .ic-room-panel {
  max-height: calc(100vh - 171px);
  max-height: calc(100dvh - 171px);
}
@keyframes ic-slide-up {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ic-room-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  min-height: 56px;
  box-sizing: border-box;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}

/* Avatar with status dot overlay */
.ic-room-header-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
}
.ic-room-header-avatar {
  width: 36px; height: 36px;
}
.ic-room-header-avatar img {
  display: block !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  position: static !important; top: auto !important; margin: 0 !important;
}
/* Status dot — bottom-right of avatar, WhatsApp style */
.ic-room-header-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--navbar-inverse-bg) !important;
  display: block;
}

/* Name + status text */
.ic-room-header-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ic-room-header-name {
  font-size: 15px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.ic-room-header-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--navbar-inverse-color);
  opacity: 0.8;
  margin-top: 1px;
  line-height: 1.2;
}

.ic-room-back, .ic-room-close {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s;
}
.ic-room-back:hover, .ic-room-close:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-room-back .ic-icon, .ic-room-close .ic-icon { width: 18px; height: 18px; }

.ic-messages {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: visible;
  padding: 36px 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
  background-color: var(--body-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

.ic-day-sep, .ic-unread-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  color: var(--text-muted-color);
  font-size: 12px;
  font-weight: 500;
}
.ic-day-sep::before, .ic-day-sep::after,
.ic-unread-sep::before, .ic-unread-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--default-border-color);
}
.ic-day-sep-label, .ic-unread-sep-label {
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--default-border-color);
}
/* Wavy underline treatment for "Today" and "New messages" — matches Google Chat. */
.ic-day-sep--today::before, .ic-day-sep--today::after,
.ic-unread-sep::before, .ic-unread-sep::after {
  height: 8px;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'><path d='M0 3 Q 3 0 6 3 T 12 3' stroke='%234a90e2' fill='none' stroke-width='1.2'/></svg>");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 12px 6px;
}
.ic-day-sep--today .ic-day-sep-label,
.ic-unread-sep-label {
  color: #4a90e2;
  border-color: #4a90e2;
}

.ic-msg-row--system {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.ic-system-msg {
  display: inline-flex;
  max-width: 80%;
}
.ic-system-msg-label {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--default-border-color);
  color: var(--text-muted-color);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.ic-thread-replies-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
  width: 100%;
  color: var(--text-muted-color);
  font-size: 12px;
  font-weight: 500;
}
.ic-thread-replies-sep::before, .ic-thread-replies-sep::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.ic-thread-replies-sep-label {
  white-space: nowrap;
  padding: 2px 10px;
  flex: 0 0 auto;
}

.ic-convo-intro {
  align-self: center;
  max-width: 420px;
  margin: 24px auto 32px;
  padding: 16px 20px;
  text-align: center;
  color: var(--text-muted-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ic-convo-intro-avatar {
  margin-bottom: 6px;
}
.ic-convo-intro-avatar img {
  width: 72px; height: 72px; border-radius: 50%;
}
.ic-convo-intro-name {
  font-size: 17px; font-weight: 600; color: var(--text-color);
}
.ic-convo-intro-title {
  font-size: 13px; color: var(--text-muted-color);
}
.ic-convo-intro-line {
  font-size: 13px; margin-top: 4px;
}
.ic-messages::-webkit-scrollbar { width: 4px; }
.ic-messages::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-bg); border-radius: 4px; }

.ic-messages-loading { display: flex; gap: 5px; justify-content: center; padding: 20px 0; }
.ic-typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--text-muted-color) !important;
  animation: ic-bounce .9s infinite ease-in-out;
}
.ic-typing-dot:nth-child(2) { animation-delay: .15s; }
.ic-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ic-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1); opacity: 1; }
}
/* Extra-small dots for room list preview */
.ic-typing-dots--xs .ic-typing-dot { width: 4px; height: 4px; }
/* Room list typing indicator */
.ic-room-preview-typing {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Message rows */
.ic-msg-row { display: flex; align-items: flex-start; gap: 8px; animation: ic-msg-in .14s ease; margin-bottom: 4px; }
/* Reserve room for the next row's hover action bar (top: -34px) so it
   doesn't overlap the preceding row's thread indicator or reactions strip. */
.ic-msg-row:has(.ic-msg-thread-indicator) + .ic-msg-row,
.ic-msg-row:has(.ic-reactions)            + .ic-msg-row {
    margin-top: 32px;
}
@keyframes ic-msg-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.ic-msg-row--mine { flex-direction: row-reverse; }

.ic-msg-avatar { flex-shrink: 0; width: 34px; height: 34px; align-self: flex-start; }
.ic-msg-avatar img { display: block !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; position: static !important; top: auto !important; margin: 0 !important; }

.ic-msg-bubble-wrap { display: flex; flex-direction: column; max-width: min(72%, 560px); min-width: 0; }
.ic-msg-row--mine .ic-msg-bubble-wrap { align-items: flex-end; }

.ic-msg-bubble { padding: 7px 11px 6px; border-radius: var(--border-radius); font-size: 13px; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; overflow: hidden; max-width: 100%; }
.ic-msg-row--mine .ic-msg-bubble { background-color: var(--state-primary-bg) !important; color: var(--text-color); border-bottom-right-radius: 2px; }
.ic-msg-row:not(.ic-msg-row--mine) .ic-msg-bubble { background-color: var(--panel-bg) !important; color: var(--text-color); border-bottom-left-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.ic-msg-author { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; }
.ic-author-color-0 { color: #e53935; }
.ic-author-color-1 { color: #8e24aa; }
.ic-author-color-2 { color: #1e88e5; }
.ic-author-color-3 { color: #00897b; }
.ic-author-color-4 { color: #f4511e; }
.ic-author-color-5 { color: #43a047; }
.ic-author-color-6 { color: #e91e63; }
.ic-author-color-7 { color: #fb8c00; }

.ic-msg-body { word-break: break-word; overflow-wrap: anywhere; }
.ic-msg-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-size: 10px; color: var(--text-muted-color);
  margin-top: 4px; margin-bottom: -2px;
}
.ic-msg-starred-indicator {
  width: 11px; height: 11px;
  color: #ffb800;
}
.ic-msg-starred-indicator--off { visibility: hidden; }

.ic-input-bar {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 12px;
  background-color: var(--panel-bg) !important;
  border-top: 1px solid var(--default-border-color);
  flex-shrink: 0;
  position: relative;
}
.ic-msg-input {
  flex: 1;
  background-color: var(--input-bg) !important;
  border: var(--input-border-width) solid var(--input-border);
  border-radius: 20px;
  padding: 9px 14px;
  color: var(--input-color);
  font-size: 13px; font-family: inherit;
  outline: none; resize: none; line-height: 1.4;
  min-height: 38px; max-height: 160px; overflow-y: auto;
  box-sizing: border-box;
}
.ic-msg-input::placeholder { color: var(--gray-light); }
.ic-msg-input:focus { border-color: var(--input-border-focus); }

.ic-send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background-color: var(--btn-primary-bg) !important;
  border: none; cursor: pointer; color: var(--btn-primary-color);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ic-send-btn:hover { background-color: var(--btn-primary-hover-bg) !important; }
.ic-send-btn .ic-icon { width: 16px; height: 16px; }

/* Shake animation */
@keyframes ic-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.ic-shake { animation: ic-shake .4s ease; }

/* ── Members screen ──────────────────────────────────────────── */

/* "X members" clickable trigger in room header */
.ic-members-trigger {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ic-members-trigger:hover { opacity: .8; }

/* Room panel uses the same ic-screen system as the main panel */
.ic-room-panel { position: relative; }
.ic-room-panel .ic-screen {
  background-color: var(--panel-bg) !important;
}

/* Drag-and-drop highlight overlay. */
.ic-room-panel.ic-drag-over::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--primary-color, #5b9bd5);
  border-radius: 10px;
  background-color: rgba(91, 155, 213, 0.08);
  pointer-events: none;
  z-index: 10;
}

/* display: contents flattens the wrapper so its ic-screen children become direct flex children of .ic-room-panel. */
.ic-group-management-container { display: contents; }

/* Scrollable member list — fills the screen below the header */
.ic-members-list {
  flex: 1; overflow-y: auto;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

/* Individual member row */
.ic-member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--default-border-color);
  background-color: transparent !important;
}

.ic-member-avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 36px; height: 36px;
}
.ic-member-avatar { width: 36px; height: 36px; }
.ic-member-avatar img {
  display: block !important; width: 36px !important; height: 36px !important;
  border-radius: 50% !important; position: static !important; top: auto !important; margin: 0 !important;
}
.ic-member-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px;
  border: 2px solid var(--panel-bg) !important;
}

.ic-member-info { flex: 1; min-width: 0; }
.ic-member-name {
  font-size: 14px; font-weight: 500; color: var(--text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-member-status { font-size: 11px; color: var(--text-muted-color); margin-top: 1px; }

/* ── Add members button in members screen header ─────────────── */
.ic-add-members-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-add-members-btn:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-add-members-btn .ic-icon { width: 18px; height: 18px; }

/* Add-members screen reuses ic-form-body, ic-user-row, ic-tag, ic-btn-primary */
.ic-add-member-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px; min-height: 0;
}
.ic-add-member-list {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -14px;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

/* ── Edit group screen ───────────────────────────────────────── */

.ic-edit-group-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-edit-group-btn:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-edit-group-btn .ic-icon { width: 17px; height: 17px; }

/* Member row in edit screen */
.ic-edit-member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--default-border-color);
  background-color: transparent !important;
  transition: background-color .15s;
}
.ic-edit-member-row--removing {
  background-color: var(--state-danger-bg) !important;
  opacity: .7;
}

/* Remove / undo button */
.ic-remove-member-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s, color .12s;
  margin-left: auto;
}
.ic-remove-member-btn .ic-icon { width: 16px; height: 16px; }
.ic-remove-member-btn:hover {
  background-color: var(--state-danger-bg) !important;
  color: var(--state-danger-text);
}
.ic-remove-member-btn--undo { color: var(--link-color); }
.ic-remove-member-btn--undo:hover {
  background-color: var(--state-primary-bg) !important;
  color: var(--link-color);
}

.ic-edit-members-list {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -14px;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

/* ── User-type tabs (Internal / Portal) ──────────────────────── */
.ic-user-type-tabs {
  display: flex;
  border-bottom: 1px solid var(--default-border-color);
  margin: 0 -14px 10px;
  flex-shrink: 0;
}
.ic-user-type-tab {
  flex: 1;
  padding: 8px 0;
  background-color: transparent !important;
  border: none; border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted-color);
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.ic-user-type-tab:hover { color: var(--text-color); }
.ic-user-type-tab--active {
  color: var(--link-color);
  border-bottom-color: var(--link-color);
}

/* ── Room item ⋮ menu ────────────────────────────────────────── */
.ic-room-item { position: relative; }
/* Elevate the row that owns the open dropdown above all siblings */
.ic-room-item:has(.ic-room-dropdown--open) { z-index: 10; }

/* ⋮ trigger button — visible on hover */
.ic-room-menu-wrap {
  position: absolute;
  right: 4px; top: 50%; transform: translateY(-50%);
  flex-shrink: 0;
}
.ic-room-menu-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s, background-color .12s, color .12s;
}
.ic-room-menu-btn .ic-icon { width: 18px; height: 18px; }
.ic-room-item:hover .ic-room-menu-btn,
.ic-room-dropdown--open ~ .ic-room-menu-btn,
.ic-room-menu-wrap:has(.ic-room-dropdown--open) .ic-room-menu-btn {
  opacity: 1;
}
.ic-room-menu-btn:hover {
  background-color: var(--default-heading-bg-color) !important;
  color: var(--text-color);
}

/* Dropdown panel */
.ic-room-dropdown {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background-color: var(--dropdown-bg) !important;
  border: var(--dropdown-border-width) solid var(--dropdown-border);
  border-radius: var(--dropdown-border-radius);
  box-shadow: var(--dropdown-box-shadow);
  min-width: 140px;
  z-index: 100;
  padding: 4px 0;
  overflow: hidden;
}
.ic-room-dropdown--open { display: block; }

/* Dropdown items */
.ic-room-menu-pin,
.ic-room-menu-unpin,
.ic-room-menu-mark-unread,
.ic-room-menu-mark-read,
.ic-room-menu-mute,
.ic-room-menu-unmute,
.ic-room-menu-hide,
.ic-room-menu-unhide,
.ic-room-menu-leave,
.ic-room-menu-delete {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 14px;
  background-color: transparent !important;
  border: none; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--dropdown-link-color);
  transition: background-color .1s;
  white-space: nowrap;
}
.ic-room-menu-pin:hover,
.ic-room-menu-unpin:hover,
.ic-room-menu-mark-unread:hover,
.ic-room-menu-mark-read:hover,
.ic-room-menu-mute:hover,
.ic-room-menu-unmute:hover,
.ic-room-menu-hide:hover,
.ic-room-menu-unhide:hover {
  background-color: var(--dropdown-link-hover-bg) !important;
  color: var(--dropdown-link-hover-color);
}
.ic-room-menu-danger { color: var(--state-danger-text) !important; }
.ic-room-menu-danger:hover {
  background-color: var(--state-danger-bg) !important;
  color: var(--state-danger-text) !important;
}

/* Nudge meta left so ⋮ doesn't overlap badge */


/* ── Attachment previews (pending uploads above input bar) ───── */
.ic-attachment-previews {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 10px;
  background-color: var(--panel-bg) !important;
}
.ic-attachment-previews:empty { padding: 0; }

.ic-attachment-chip {
  display: flex; align-items: center; gap: 6px;
  background-color: var(--default-heading-bg-color) !important;
  border: 1px solid var(--default-border-color);
  border-radius: var(--border-radius);
  padding: 4px 8px;
  font-size: 12px; color: var(--text-color);
  max-width: 180px;
}
.ic-attachment-chip--uploading {
  overflow: hidden;
  position: relative;
}
.ic-attachment-chip--uploading::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--ic-upload-progress, 0%);
  background-color: var(--btn-primary-bg);
  opacity: .18;
  transition: width .25s ease;
  pointer-events: none;
  border-radius: inherit;
}
.ic-send-btn--disabled,
.ic-send-btn:disabled,
.ic-send-menu-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ic-attachment-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted-color); }
.ic-attachment-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-attachment-size { font-size: 10px; color: var(--text-muted-color); white-space: nowrap; }
.ic-attachment-spinner { color: var(--text-muted-color); flex-shrink: 0; }
.ic-attachment-remove {
  background-color: transparent !important;
  border: none; cursor: pointer; padding: 0;
  color: var(--text-muted-color); flex-shrink: 0;
  display: flex; align-items: center;
  transition: color .12s;
}
.ic-attachment-remove:hover { color: var(--brand-danger); }

/* Attachment links inside message bubbles */
.ic-msg-attachment {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; margin-top: 4px;
  background-color: rgba(0,0,0,.06) !important;
  border-radius: var(--border-radius-small);
  color: var(--link-color);
  text-decoration: none; font-size: 12px;
  transition: background-color .12s;
}
.ic-msg-attachment:hover { background-color: rgba(0,0,0,.1) !important; text-decoration: underline; }
.ic-msg-row--mine .ic-msg-attachment { background-color: rgba(0,0,0,.08) !important; }

/* Image thumbnails inside bubbles */
.ic-msg-image-wrap {
  display: block; margin-top: 4px; line-height: 0;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  background: none !important; border: none; padding: 0; cursor: zoom-in;
  max-width: 100%;
}
.ic-msg-image {
  display: block;
  max-width: 240px; max-height: 180px;
  width: auto; height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-small);
  transition: opacity .15s;
}
.ic-msg-image:hover { opacity: .88; }

/* Reply quote scroll-to highlight flash */
@keyframes ic-highlight-flash {
  0%   { box-shadow: inset 0 0 0 2px var(--btn-primary-bg); }
  60%  { box-shadow: inset 0 0 0 2px var(--btn-primary-bg); }
  100% { box-shadow: inset 0 0 0 0px transparent; }
}
.ic-msg-highlight .ic-msg-bubble {
  animation: ic-highlight-flash 1.5s ease forwards;
}

/* ── Emoji picker ────────────────────────────────────────────── */
.ic-emoji-wrap {
  position: relative;
  flex-shrink: 0;
}
.ic-emoji-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s, color .12s;
}
.ic-emoji-btn:hover {
  background-color: var(--default-heading-bg-color) !important;
  color: var(--text-color);
}
.ic-emoji-btn .ic-icon { width: 19px; height: 19px; }

.ic-emoji-picker {
  display: none;
  position: fixed;
  width: 320px;
  height: 360px;
  background-color: var(--panel-bg) !important;
  border: var(--panel-border-width) solid var(--panel-default-border);
  border-radius: var(--panel-border-radius);
  box-shadow: var(--ic-shadow);
  z-index: 10000;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ic-emoji-picker--open { display: flex; }

/* ── Search row ──────────────────────────────────────────────── */
.ic-emoji-picker-search {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--default-border-color);
  flex-shrink: 0;
}
.ic-emoji-picker-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted-color);
  pointer-events: none;
}
.ic-emoji-picker-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 28px 6px 32px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius);
  background-color: var(--input-bg) !important;
  color: var(--text-color);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .12s;
}
.ic-emoji-picker-search-input:focus {
  border-color: var(--link-color);
}
.ic-emoji-picker-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none;
  color: var(--text-muted-color);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
  padding: 0 4px;
  font-family: inherit;
}
.ic-emoji-picker-search-clear:hover { color: var(--text-color); }
.ic-emoji-picker-search--has-query .ic-emoji-picker-search-clear { display: block; }

/* ── Category nav row ────────────────────────────────────────── */
.ic-emoji-picker-nav {
  display: flex;
  gap: 1px;
  padding: 6px 6px;
  border-bottom: 1px solid var(--default-border-color);
  flex-shrink: 0;
  overflow: hidden;
}
.ic-emoji-cat-btn {
  background: none !important;
  border: none;
  cursor: pointer;
  /* 10 buttons (FU + 9 categories) must share the 320px nav row without overflow */
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  font-size: 18px; line-height: 1;
  font-family: inherit;
  border-radius: var(--border-radius-small);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0.55;
  border-bottom: 2px solid transparent;
  transition: opacity .12s, background-color .12s, border-color .12s;
}
.ic-emoji-cat-btn:hover {
  opacity: 1;
  background-color: var(--default-heading-bg-color) !important;
}
.ic-emoji-cat-btn--active {
  opacity: 1;
  border-bottom-color: var(--link-color);
}

/* ── Scrollable body ─────────────────────────────────────────── */
.ic-emoji-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

.ic-emoji-category { margin-bottom: 6px; }
.ic-emoji-category--empty { display: none; }
.ic-emoji-cat-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted-color);
  padding: 2px 4px 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
/* ── Emoji grid ── auto-fill + minmax(34px, 1fr) stretches cells to kill the dead strip next to the scrollbar. */
.ic-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 1px;
}
.ic-emoji-item {
  background-color: transparent !important;
  border: none; cursor: pointer;
  font-size: 20px; line-height: 1;
  font-family: inherit;
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--border-radius-small);
  transition: background-color .1s;
  padding: 0;
}
/* ── Search mode flat grid. See CLAUDE.md "Emoji picker — search mode uses flat grid". */
.ic-emoji-picker--searching .ic-emoji-picker-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 1px;
  align-content: start;
}
.ic-emoji-picker--searching .ic-emoji-category,
.ic-emoji-picker--searching .ic-emoji-grid {
  display: contents;
}
.ic-emoji-picker--searching .ic-emoji-category--empty { display: none; }
.ic-emoji-picker--searching .ic-emoji-cat-label       { display: none; }
.ic-emoji-picker--searching .ic-emoji-category--frequently-used { display: none !important; }
.ic-emoji-picker--searching .ic-emoji-picker-no-results { grid-column: 1 / -1; }
.ic-emoji-item--hidden { display: none; }
.ic-emoji-item:hover {
  background-color: var(--default-heading-bg-color) !important;
}

/* ── No-results state ────────────────────────────────────────── */
.ic-emoji-picker-no-results {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted-color);
  font-size: 13px;
}

/* Full-page WhatsApp-style layout (#InternalChat). */

.ic-page {
  display: flex;
  height: calc(100vh - 60px);   /* subtract EspoCRM navbar */
  background-color: var(--body-bg) !important;
  overflow: hidden;
  font-family: 'NotoColorEmoji', var(--font-family);
}

/* ── Sidebar (left conversation list) ───────────────────────── */
.ic-page-sidebar {
  width: 340px;
  min-width: 280px;
  max-width: 400px;
  border-right: 1px solid var(--default-border-color);
  display: flex; flex-direction: column;
  background-color: var(--panel-bg) !important;
  flex-shrink: 0;
}

.ic-page-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-title {
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ic-page-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.ic-page-info .ic-page-title { flex: 0 0 auto; line-height: 1.3; }
.ic-page-subtitle {
  font-size: 11px;
  color: var(--navbar-inverse-color);
  opacity: .8;
  margin-top: 1px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-page-header-actions { display: flex; align-items: center; gap: 4px; }

.ic-page-new-btn,
.ic-page-avatar-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}

/* ic-hidden is set by the full-page view to suppress the floating panel */
.ic-panel-wrapper.ic-hidden { display: none !important; }
.ic-page-new-btn:hover,
.ic-page-avatar-btn:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-page-new-btn .ic-icon { width: 20px; height: 20px; }

.ic-page-status-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--navbar-inverse-bg);
}

/* Presence menu — anchored below avatar button */
.ic-page-avatar-wrap {
  position: relative;
}
.ic-page-presence-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background-color: var(--dropdown-bg) !important;
  border: var(--dropdown-border-width) solid var(--dropdown-border);
  border-radius: var(--dropdown-border-radius);
  padding: 4px; box-shadow: var(--dropdown-box-shadow);
  z-index: 300; min-width: 160px;
  display: none;
}
.ic-page-presence-menu--open { display: block; }
.ic-page-presence-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--dropdown-link-color); font-size: 13px;
  border-radius: var(--border-radius-small);
}
.ic-page-presence-option:hover {
  background-color: var(--dropdown-link-hover-bg) !important;
  color: var(--dropdown-link-hover-color);
}

/* Search */
.ic-page-search-wrap {
  padding: 8px 12px;
  background-color: var(--panel-bg) !important;
  position: relative; flex-shrink: 0;
  border-bottom: 1px solid var(--default-border-color);
}

/* Room list */
.ic-page-room-list {
  flex: 1; overflow-y: auto;
  background-color: var(--panel-bg) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}

/* Force avatar images to correct size in sidebar */
.ic-page-room-item .ic-avatar-wrap img {
  display: block !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  position: static !important; top: auto !important; margin: 0 !important;
}

.ic-page-room-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  background-color: transparent !important;
  border-bottom: 1px solid var(--default-border-color);
  transition: background-color .1s;
  position: relative;
}
.ic-page-room-item:hover { background-color: var(--default-heading-bg-color) !important; }
.ic-page-room-item--active { background-color: var(--state-primary-bg) !important; }
.ic-page-room-item--active:hover { background-color: var(--state-primary-bg) !important; }

/* ⋮ menu on sidebar rows — reuses ic-page-menu-wrap */
.ic-page-menu-wrap {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}
.ic-page-room-item .ic-room-menu-btn {
  opacity: 0;
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, background-color .12s;
}
.ic-page-room-item:hover .ic-room-menu-btn,
.ic-page-room-item:has(.ic-room-dropdown--open) .ic-room-menu-btn { opacity: 1; }
.ic-page-room-item:has(.ic-room-dropdown--open) { z-index: 10; }
.ic-page-menu-pin,
.ic-page-menu-unpin,
.ic-page-menu-mark-unread,
.ic-page-menu-mark-read,
.ic-page-menu-mute,
.ic-page-menu-unmute,
.ic-page-menu-hide,
.ic-page-menu-unhide,
.ic-page-menu-leave,
.ic-page-menu-delete {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 14px;
  background-color: transparent !important;
  border: none; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--dropdown-link-color);
  white-space: nowrap;
}
.ic-page-menu-pin:hover,
.ic-page-menu-unpin:hover,
.ic-page-menu-mark-unread:hover,
.ic-page-menu-mark-read:hover,
.ic-page-menu-mute:hover,
.ic-page-menu-unmute:hover,
.ic-page-menu-hide:hover,
.ic-page-menu-unhide:hover { background-color: var(--dropdown-link-hover-bg) !important; }

/* ── Right panel (active room) ───────────────────────────────── */
.ic-page-main {
  flex: 1;
  display: flex; flex-direction: column;
  background-color: var(--body-bg) !important;
  overflow: hidden;
  position: relative;
}

/* Room view in page mode fills the full right column */
#ic-page-room-container {
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ic-page-main .ic-room-panel {
  height: 100%; border: none; border-radius: 0; box-shadow: none;
  animation: none;
}
.ic-page-main .ic-room-header {
  border-radius: 0;
}
/* Hide the back button in page mode (no panel to go back to) */
.ic-page-main .ic-room-back { display: none; }

/* Empty state */
.ic-page-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 16px;
  color: var(--text-muted-color); text-align: center; padding: 40px;
}
.ic-page-empty-state .ic-icon { width: 64px; height: 64px; opacity: .25; }
.ic-page-empty-state p { font-size: 15px; }

/* Expand button in the floating panel header */
.ic-header-expand {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-header-expand:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-header-expand .ic-icon { width: 16px; height: 16px; }

/* Constrain avatar images in the page sidebar room list */
.ic-page-room-item .ic-avatar-wrap img {
  display: block !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  position: static !important; top: auto !important; margin: 0 !important;
}
/* Slot that hosts the shared new-chat view inside the FAB panel screen */
.ic-new-chat-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* New-chat inline view fills the right panel */
.ic-page-new-container,
.ic-page-new {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background-color: var(--panel-bg) !important;
}
.ic-page-new .ic-room-header {
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-new .ic-new-choice-body,
.ic-page-new .ic-form-body {
  flex: 1; overflow-y: auto;
  background-color: var(--panel-bg) !important;
}
.ic-page-new .ic-screen { display: flex; flex-direction: column; height: 100%; }

/* ── Full-page new conversation panel ───────────────────────── */
.ic-page-content { height: 100%; display: flex; flex-direction: column; }
.ic-page-new-chat {
  background-color: var(--panel-bg) !important;
}
.ic-page-new-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-new-title {
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
}
.ic-page-new-close {
  background-color: transparent !important; border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ic-page-new-close .ic-icon { width: 18px; height: 18px; }
.ic-page-new-close:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }

/* Room container fills the right panel */
.ic-page-room-container {
  background-color: var(--panel-bg) !important;
}
.ic-page-room-container .ic-room-panel {
  height: 100%; border: none; border-radius: 0; box-shadow: none; animation: none;
}
.ic-page-room-container .ic-room-back { display: none; }

/* ── Read receipts ─────────────────────────────────────────────────────── */

/* Direct: tick lives inside .ic-msg-meta */
.ic-receipt-tick {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted-color);
  line-height: 1;
  cursor: default;
}
.ic-receipt-tick--read { color: #4fc3f7; }

/* (group avatar receipts removed — ticks used for all room types) */

/* ── Message action bar (shown on hover, floats above bubble) ───────────── */
.ic-msg-bubble-wrap { position: relative; }

/* Transparent bridge so :hover stays active moving from bubble to action bar. */
.ic-msg-bubble-wrap::before {
  content: '';
  position: absolute;
  top: -38px;      /* matches action bar height + gap */
  left: 0; right: 0;
  height: 38px;
  pointer-events: all;
}

.ic-msg-actions {
  display: none;
  align-items: center;
  gap: 1px;
  position: absolute;
  top: -34px;
  right: 0;
  background: var(--panel-bg);
  border: 1px solid var(--default-border-color);
  border-radius: 14px;
  padding: 3px 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  z-index: 20;
  white-space: nowrap;
}
/* Left-align bar for incoming messages */
.ic-msg-row:not(.ic-msg-row--mine) .ic-msg-actions { right: auto; left: 0; }
.ic-msg-bubble-wrap:hover .ic-msg-actions { display: flex; }
/* Keep action bar visible while emoji picker is open for reacting */
.ic-msg-row--reacting .ic-msg-actions { display: flex; }

.ic-msg-actions button {
  background: none !important;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--text-muted-color);
  display: flex; align-items: center;
  line-height: 1;
  transition: background .12s, color .12s;
}
.ic-msg-actions button:hover {
  background: var(--default-heading-bg-color) !important;
  color: var(--text-color);
}

/* Overflow menu (ellipsis) — hosts Star / Forward / Pin / Delete. */
.ic-msg-row--menu-open .ic-msg-actions { display: flex !important; }
.ic-msg-more-wrap { position: relative; display: inline-flex; }
.ic-msg-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--panel-bg);
  border: 1px solid var(--default-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  padding: 4px;
  z-index: 21;
  flex-direction: column;
  gap: 0;
}
.ic-msg-more-menu--open { display: flex; }
.ic-msg-more-menu--up { top: auto; bottom: calc(100% + 4px); }
.ic-msg-more-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  justify-content: flex-start !important;
  padding: 7px 10px !important;
  border-radius: 6px;
  width: 100%;
  color: var(--text-color) !important;
  font-size: 13px;
}
.ic-msg-more-label { line-height: 1; white-space: nowrap; }
/* Quick-react emoji buttons */
.ic-msg-action-quick-react {
  font-size: 15px;
  padding: 2px 3px !important;
  opacity: .75;
  transition: opacity .12s, transform .1s !important;
}
.ic-msg-action-quick-react:hover {
  opacity: 1;
  transform: scale(1.2);
  background: none !important;
}
/* Separator between quick reacts and action icons */
.ic-msg-actions-sep {
  display: inline-block;
  width: 1px; height: 16px;
  background: var(--default-border-color);
  margin: 0 3px;
  flex-shrink: 0;
}
/* Keep .ic-room-panel as the positioned anchor for absolutely-positioned children. */
.ic-room-panel { position: relative; overflow: visible; }

/* ── Reply quote inside bubble ──────────────────────────────────────────── */
.ic-reply-quote {
  border-left: 3px solid var(--btn-primary-bg);
  padding: 4px 8px;
  margin-bottom: 6px;
  border-radius: 0 4px 4px 0;
  background: rgba(0,0,0,.05);
  cursor: pointer;
}
.ic-reply-quote-header {
  display: flex; align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.ic-reply-quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1;
  font-weight: 700;
  color: var(--btn-primary-bg);
  /* Pull the glyph up so it sits on the cap-line of the avatar/name row */
  margin-top: -4px;
}
.ic-reply-quote-avatar {
  display: inline-flex;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.ic-reply-quote-avatar img {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: cover;
}
.ic-reply-quote-name {
  font-size: 11px; font-weight: 600;
  color: var(--btn-primary-bg);
}
.ic-reply-quote-body {
  font-size: 12px; color: var(--text-muted-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Forwarded-from card ────────────────────────────────────────────────── */
.ic-forwarded-quote {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  margin-bottom: 6px;
  border-left: 3px solid var(--text-muted-color);
  border-radius: 0 4px 4px 0;
  background: rgba(0,0,0,.04);
  font-size: 11px;
  color: var(--text-muted-color);
}
.ic-forwarded-quote-icon {
  display: inline-flex; align-items: center;
  color: var(--text-muted-color);
  flex-shrink: 0;
}
.ic-forwarded-quote-label {
  font-style: italic;
}
.ic-forwarded-quote-name {
  font-weight: 600;
  color: var(--text-color);
}

/* ── Reply/edit preview bar above input ────────────────────────────────── */
.ic-reply-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--default-border-color);
  background: var(--panel-bg) !important;
  font-size: 12px;
}
.ic-reply-preview-bar {
  width: 3px; min-height: 28px; flex-shrink: 0;
  background: var(--btn-primary-bg);
  border-radius: 2px;
}
.ic-reply-preview-bar--edit { background: #f4a82e; }
.ic-reply-preview-body { flex: 1; overflow: hidden; }
.ic-reply-preview-name { font-weight: 600; color: var(--btn-primary-bg); }
.ic-reply-preview-bar--edit ~ .ic-reply-preview-body .ic-reply-preview-name { color: #f4a82e; }
.ic-reply-preview-text { color: var(--text-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-reply-cancel {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color); padding: 2px; flex-shrink: 0;
}
.ic-reply-cancel:hover { color: var(--brand-danger); }

/* Scheduled-edit indicator — separate bar above .ic-reply-preview */
.ic-schedule-edit-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--default-border-color);
  background: var(--state-success-bg, #e6f4ea) !important;
  font-size: 12px;
  color: var(--text-color);
}
.ic-schedule-edit-indicator .ic-icon { width: 14px; height: 14px; flex-shrink: 0; }
.ic-schedule-edit-indicator-text { flex: 1; font-weight: 600; }
.ic-schedule-edit-cancel {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color); padding: 2px; flex-shrink: 0;
}
.ic-schedule-edit-cancel:hover { color: var(--brand-danger); }

/* ── Reactions row below bubble ─────────────────────────────────────────── */
.ic-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.ic-reaction-emoji {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--default-heading-bg-color) !important;
  border: 1px solid var(--default-border-color);
  border-radius: 12px; padding: 2px 7px;
  font-size: 13px; cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.ic-reaction-emoji--mine {
  border-color: var(--btn-primary-bg);
  background: var(--state-primary-bg) !important;
}
.ic-reaction-emoji:hover { border-color: var(--btn-primary-bg); }
.ic-reaction-count { font-size: 11px; color: var(--text-muted-color); }

/* ── Edited label ────────────────────────────────────────────────────────── */
.ic-edited-label {
  font-size: 10px; color: var(--text-muted-color); font-style: italic;
  margin-right: 2px;
}

/* ── @mention autocomplete dropdown ─────────────────────────────────────── */
.ic-mention-dropdown {
  background: var(--panel-bg) !important;
  border: 1px solid var(--default-border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  max-height: 200px; overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
}
.ic-mention-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px;
  background: none !important; border: none;
  text-align: left; cursor: pointer;
  font-size: 13px; color: var(--text-color);
  transition: background .1s;
}
.ic-mention-item--active { background: var(--default-heading-bg-color) !important; }
.ic-mention-item:hover,
.ic-mention-item:focus {
  background: var(--default-heading-bg-color) !important;
  outline: none;
}
.ic-mention-avatar { flex-shrink: 0; line-height: 0; }
.ic-mention-avatar img { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
.ic-mention-name { flex: 1; }
.ic-mention-name strong { font-weight: 700; }

/* ── @mention pill inside message body ──────────────────────────────────── */
.ic-mention {
  display: inline;
  color: var(--link-color);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 2px;
}
.ic-mention--self {
  background: rgba(255,237,40,0.4) !important;
  color: var(--state-default-text) !important;
  padding: 1px 4px;
  border-radius: 4px;
}

/* ── Pinned message banner ───────────────────────────────────────────────── */
.ic-pinned-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--panel-bg) !important;
  border-bottom: 1px solid var(--default-border-color);
  font-size: 12px; color: var(--text-muted-color);
  flex-shrink: 0;
}
.ic-pinned-icon {
  flex-shrink: 0;
  color: var(--btn-primary-bg);
}
.ic-pinned-body {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-color);
}
.ic-pinned-goto,
.ic-pinned-unpin {
  background: none !important; border: none;
  cursor: pointer; padding: 2px 3px; flex-shrink: 0;
  color: var(--text-muted-color); display: flex; align-items: center;
  border-radius: 4px; transition: color .12s, background .12s;
}
.ic-pinned-goto:hover  { color: var(--btn-primary-bg); background: var(--state-primary-bg) !important; }
.ic-pinned-unpin:hover { color: var(--brand-danger); }

/* Pin button in action bar */
.ic-msg-action-pin--active { color: var(--btn-primary-bg); }

/* ── Scroll pagination — older messages loader ───────────────────────────── */
.ic-older-loader {
  display: flex; gap: 5px; justify-content: center;
  padding: 10px 0 4px;
}

/* ── Group admin / founder badges ───────────────────────────────────────── */
.ic-admin-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: var(--btn-primary-color);
  background: var(--btn-primary-bg) !important;
  border-radius: 4px; padding: 1px 5px;
  margin-left: 5px; vertical-align: middle;
  letter-spacing: .02em; text-transform: uppercase;
}
/* Founder variant — distinct amber colour */
.ic-admin-badge--founder {
  background: #f59e0b !important;
  color: #fff;
}

/* Set-admin button — filled star when member is already admin */
.ic-set-admin-btn--active { color: var(--btn-primary-bg) !important; }

/* Member action buttons group (admin + remove) */
.ic-member-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

/* Set-admin star button */
.ic-set-admin-btn {
  background: none !important; border: none; cursor: pointer;
  padding: 3px 4px; border-radius: 6px;
  color: var(--text-muted-color);
  display: flex; align-items: center;
  transition: color .12s, background .12s;
}
.ic-set-admin-btn:hover {
  color: var(--btn-primary-bg);
  background: var(--state-primary-bg) !important;
}

/* ── Message search ──────────────────────────────────────────────────────── */

/* Search icon button in header */
.ic-room-search-btn {
  background: transparent !important; border: none; cursor: pointer;
  color: var(--navbar-inverse-link-color); opacity: .75;
  padding: 4px; border-radius: 6px; display: flex; align-items: center;
  transition: opacity .15s;
  flex-shrink: 0;
}
.ic-room-search-btn:hover,
.ic-room-search-btn--active { opacity: 1; }

/* Search bar strip below the header */
.ic-search-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--panel-bg) !important;
  border-bottom: 1px solid var(--default-border-color);
  flex-shrink: 0;
}
.ic-search-bar-icon { flex-shrink: 0; color: var(--text-muted-color); }
.ic-search-input {
  flex: 1; border: none; outline: none;
  background: transparent !important;
  font-size: 13px; color: var(--text-color);
  font-family: inherit;
}
.ic-search-input::placeholder { color: var(--gray-light); }
.ic-search-count {
  font-size: 11px; color: var(--text-muted-color);
  white-space: nowrap; flex-shrink: 0; min-width: 50px; text-align: right;
}
.ic-search-prev,
.ic-search-next,
.ic-search-close {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color); padding: 3px 4px; border-radius: 5px;
  display: flex; align-items: center; flex-shrink: 0;
  transition: color .12s, background .12s;
}
.ic-search-prev:hover,
.ic-search-next:hover { color: var(--btn-primary-bg); background: var(--state-primary-bg) !important; }
.ic-search-close:hover { color: var(--brand-danger); }
.ic-search-prev:disabled,
.ic-search-next:disabled { opacity: .35; pointer-events: none; }

/* Matching message row highlight */
.ic-search-match .ic-msg-bubble {
  outline: 1px solid var(--default-border-color);
}
.ic-search-match--current .ic-msg-bubble {
  outline: 2px solid var(--btn-primary-bg);
  box-shadow: 0 0 0 3px var(--state-primary-bg);
}

/* Keyword highlight inside message body */
mark.ic-search-hl {
  background: rgba(255, 213, 0, 0.45);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.ic-typing-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 14px 2px;
  font-size: 12px; color: var(--text-muted-color);
  flex-shrink: 0; min-height: 22px;
}
.ic-typing-dots {
  display: inline-flex; align-items: center; gap: 3px;
}
/* Override the generic ic-typing-dot bounce timing for the indicator */
.ic-typing-indicator .ic-typing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background-color: var(--text-muted-color);
  display: inline-block;
  animation: ic-bounce .9s ease-in-out infinite;
}
.ic-typing-indicator .ic-typing-dot:nth-child(1) { animation-delay: 0s; }
.ic-typing-indicator .ic-typing-dot:nth-child(2) { animation-delay: .15s; }
.ic-typing-indicator .ic-typing-dot:nth-child(3) { animation-delay: .30s; }
.ic-typing-text { font-style: italic; }

/* ── Deleted message tombstone ───────────────────────────────────────────── */
.ic-msg-bubble--deleted {
  background: var(--panel-bg) !important;
  border: 1px dashed var(--default-border-color) !important;
  opacity: .7;
}
.ic-msg-deleted-text {
  color: var(--text-muted-color) !important;
  font-style: italic;
  font-size: 13px;
}

/* Delete button in action bar */
.ic-msg-action-delete:hover {
  color: var(--brand-danger) !important;
  background: rgba(211, 47, 47, .08) !important;
}

/* ── Message forwarding modal ────────────────────────────────────────────── */
.ic-forward-search-wrap {
  padding: 8px 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--default-border-color);
}
.ic-forward-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: 20px; padding: 6px 14px;
  font-size: 13px; font-family: inherit;
  background: var(--input-bg) !important;
  color: var(--input-color); outline: none;
}
.ic-forward-search:focus { border-color: var(--btn-primary-bg); }
.ic-forward-list { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 0; }
.ic-forward-room-item {
  display: flex; align-items: center;
  width: 100%; padding: 8px 14px; gap: 10px;
  background: none !important; border: none; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--text-color);
  transition: background .1s;
}
.ic-forward-room-item:hover { background: var(--default-heading-bg-color) !important; }
.ic-forward-room-item--selected { background: var(--state-primary-bg) !important; }
.ic-forward-room-item--selected:hover { background: var(--state-primary-bg) !important; }
.ic-forward-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ic-forward-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ic-forward-room-name { flex: 1; font-size: 13px; }
.ic-forward-check {
  display: none;
  width: 20px; height: 20px; flex-shrink: 0;
  align-items: center; justify-content: center;
  color: var(--btn-primary-bg);
}
.ic-forward-room-item--selected .ic-forward-check { display: inline-flex; }
.ic-forward-empty { padding: 16px; color: var(--text-muted-color); font-size: 13px; text-align: center; }
.ic-forward-footer {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--default-border-color);
  display: flex; justify-content: flex-end;
}
.ic-forward-send-btn {
  padding: 6px 16px;
  font-size: 13px; font-weight: 600;
  border: none; border-radius: 4px;
  cursor: pointer;
  background: var(--btn-primary-bg); color: #fff;
  transition: opacity .15s;
}
.ic-forward-send-btn:hover:not(:disabled) { opacity: .9; }
.ic-forward-send-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Forward button in action bar */
.ic-msg-action-forward:hover { color: var(--btn-primary-bg); }

/* ── Link preview card ───────────────────────────────────────────────────── */
.ic-link-preview {
  display: flex; gap: 10px; margin-top: 6px;
  border: 1px solid var(--default-border-color);
  border-left: 3px solid var(--btn-primary-bg);
  border-radius: 6px; overflow: hidden;
  background: var(--body-bg) !important;
  text-decoration: none !important;
  color: inherit !important;
  max-width: 320px;
  transition: background .12s;
}
.ic-link-preview:hover { background: var(--default-heading-bg-color) !important; }
.ic-link-preview-img {
  width: 72px; height: 72px; object-fit: cover; flex-shrink: 0;
}
.ic-link-preview-body { padding: 7px 10px 7px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-link-preview-title { font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--text-color); }
.ic-link-preview-desc  { font-size: 11px; color: var(--text-muted-color); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-link-preview-domain { font-size: 10px; color: var(--btn-primary-bg); margin-top: auto; }
.ic-link-preview:not(:has(.ic-link-preview-img)) .ic-link-preview-body { padding-left: 10px; }

/* ── @all mention ────────────────────────────────────────────────────────── */
.ic-mention--all {
  background: rgba(255, 152, 0, .25) !important;
  color: var(--state-warning-text) !important;
  font-weight: 700;
  padding: 1px 4px; border-radius: 4px;
}

/* ── Formatting toolbar ──────────────────────────────────────────────────── */
.ic-formatting-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 12px;
  background: var(--panel-bg) !important;
  border-top: 1px solid var(--default-border-color);
  flex-shrink: 0; flex-wrap: wrap;
}
.ic-fmt-btn {
  background: none !important; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 5px;
  color: var(--text-muted-color);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.ic-fmt-btn:hover { background: var(--default-heading-bg-color) !important; color: var(--text-color); }
.ic-fmt-sep {
  display: inline-block; width: 1px; height: 16px;
  background: var(--default-border-color); margin: 0 3px; flex-shrink: 0;
}
.ic-fmt-toggle-btn {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s; flex-shrink: 0;
}
.ic-fmt-toggle-btn:hover,
.ic-fmt-toggle-btn--active { background: var(--default-heading-bg-color) !important; color: var(--btn-primary-bg); }

/* ── Formatted message body elements ─────────────────────────────────────── */
.ic-code-block {
  background: var(--default-heading-bg-color) !important;
  border: 1px solid var(--default-border-color);
  border-radius: 6px; padding: 8px 10px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px; line-height: 1.5;
  overflow-x: auto; white-space: pre; margin: 4px 0; display: block;
}
.ic-code-inline {
  background: var(--default-heading-bg-color) !important;
  border: 1px solid var(--default-border-color);
  border-radius: 3px; padding: 1px 4px;
  font-family: 'Courier New', Courier, monospace; font-size: 12px;
}
.ic-blockquote {
  display: block; border-left: 3px solid var(--btn-primary-bg);
  padding: 2px 8px; margin: 2px 0;
  color: var(--text-muted-color); font-style: italic;
}
.ic-body-link { color: var(--btn-primary-bg); text-decoration: underline; }

/* ── Forward modal ───────────────────────────────────────────────────────── */


/* ── Pinned conversation indicator ──────────────────────────────────────── */
.ic-room-pinned-icon {
  color: var(--btn-primary-bg);
  opacity: .8;
  pointer-events: none;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transform: rotate(45deg) !important;
}
/* ── Muted conversation indicator ───────────────────────────────────────── */
.ic-room-mute-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--text-muted-color);
  opacity: .75;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Inline link dialog (replaces prompt) ───────────────────────────────── */
.ic-link-dialog {
  background: var(--panel-bg) !important;
  border: 1px solid var(--btn-primary-bg);
  border-radius: 6px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ic-link-dialog-row {
  display: flex; align-items: center; gap: 8px;
}
.ic-link-dialog-label {
  font-size: 11px; color: var(--text-muted-color);
  width: 30px; flex-shrink: 0; text-align: right;
}
.ic-link-dialog-text,
.ic-link-dialog-input {
  flex: 1; border: 1px solid var(--input-border);
  border-radius: 4px; padding: 3px 7px;
  outline: none; background: var(--input-bg) !important;
  font-size: 12px; color: var(--text-color);
  font-family: inherit;
}
.ic-link-dialog-text:focus,
.ic-link-dialog-input:focus { border-color: var(--btn-primary-bg); }
.ic-link-dialog-actions {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.ic-link-dialog-ok {
  background: var(--btn-primary-bg) !important;
  border: none; cursor: pointer; border-radius: 4px;
  color: var(--btn-primary-color);
  font-size: 12px; padding: 3px 12px; white-space: nowrap;
}
.ic-link-dialog-cancel {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color); font-size: 14px; line-height: 1;
}

/* ── Link preview slot — sits between content and meta row ──────────────── */
.ic-link-preview-slot:empty { display: none; }
.ic-link-preview-slot { margin-top: 4px; }

/* ── Image viewer modal ──────────────────────────────────────────────────── */
.ic-viewer {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
}
.ic-viewer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .88);
}
.ic-viewer-toolbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  flex-shrink: 0;
}
.ic-viewer-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 50%;
}
.ic-viewer-actions {
  display: flex; align-items: center; gap: 8px;
}
.ic-viewer-actions button,
.ic-viewer-actions a {
  background: rgba(255,255,255,.12) !important;
  border: none; border-radius: 6px; cursor: pointer;
  color: #fff; display: flex; align-items: center;
  justify-content: center; padding: 6px;
  transition: background .15s;
  text-decoration: none;
}
.ic-viewer-actions button:hover,
.ic-viewer-actions a:hover {
  background: rgba(255,255,255,.25) !important;
}
.ic-viewer-scale-label {
  font-size: 12px; color: rgba(255,255,255,.7);
  min-width: 38px; text-align: center;
}
.ic-viewer-stage {
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ic-viewer-img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  cursor: grab;
  transform-origin: center center;
  transition: transform .12s ease;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 4px;
}
.ic-viewer-img:active { cursor: grabbing; }

/* Make image bubble clickable */


/* ── GIF picker ──────────────────────────────────────────────────────────── */
.ic-gif-btn {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s; flex-shrink: 0;
}
.ic-gif-btn:hover { background: var(--default-heading-bg-color) !important; color: var(--btn-primary-bg); }

.ic-gif-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-bg) !important;
  border: 1px solid var(--default-border-color);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 120;
  flex-direction: column;
  overflow: hidden;
  height: 380px;
}
.ic-gif-panel--open { display: flex; }

.ic-gif-search-wrap {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--default-border-color);
  flex-shrink: 0;
}
.ic-gif-search-icon {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted-color);
  pointer-events: none;
}
.ic-gif-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: 20px; padding: 6px 28px 6px 32px;
  font-size: 13px; font-family: inherit;
  background: var(--input-bg) !important;
  color: var(--input-color); outline: none;
  transition: border-color .12s;
}
.ic-gif-search:focus { border-color: var(--link-color); }
.ic-gif-search-clear {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  display: none;
  background: none; border: none;
  cursor: pointer; font-size: 16px;
  color: var(--text-muted-color);
  padding: 0 4px; font-family: inherit;
}
.ic-gif-search-clear:hover { color: var(--text-color); }
.ic-gif-search-wrap--has-query .ic-gif-search-clear { display: block; }

.ic-gif-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 6px;
}
/* 5 columns in main (full-page) view */
.ic-page .ic-gif-grid {
  grid-template-columns: repeat(4, 1fr);
}
.ic-gif-item {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 6px; cursor: pointer;
  transition: opacity .1s, transform .1s;
  background: var(--default-heading-bg-color);
}
.ic-gif-item:hover { opacity: .85; transform: scale(1.03); }
.ic-gif-empty,
.ic-gif-loading {
  grid-column: 1 / -1;
  text-align: center; padding: 32px 16px;
  color: var(--text-muted-color); font-size: 13px;
}
.ic-gif-item--square {
  aspect-ratio: 1/1; object-fit: contain;
  background: transparent;
}

/* ── GIF picker: category chips ───────────────────────────────────────── */
.ic-gif-cat-wrap {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--default-border-color);
}
.ic-gif-categories {
  display: flex; gap: 6px;
  padding: 6px 10px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.ic-gif-categories::-webkit-scrollbar { display: none; }
.ic-gif-cat-nav {
  position: absolute; top: 0; bottom: 1px;
  width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-bg);
  border: none;
  cursor: pointer;
  color: var(--text-muted-color);
  padding: 0;
  z-index: 1;
}
.ic-gif-cat-nav:hover { color: var(--text-color); }
.ic-gif-cat-nav .ic-icon { width: 14px; height: 14px; }
.ic-gif-cat-nav--left {
  left: 0;
  background: linear-gradient(to right, var(--panel-bg) 60%, transparent 100%);
}
.ic-gif-cat-nav--right {
  right: 0;
  background: linear-gradient(to left, var(--panel-bg) 60%, transparent 100%);
}

.ic-gif-cat-chip {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px; font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  background: var(--default-heading-bg-color);
  color: var(--text-color);
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.ic-gif-cat-chip:hover { border-color: var(--default-border-color); }
.ic-gif-cat-chip--active {
  background: var(--btn-primary-bg);
  color: #fff;
  border-color: var(--btn-primary-bg);
}

/* ── GIF picker: bottom tabs ──────────────────────────────────────────── */
.ic-gif-tabs {
  display: flex;
  border-top: 1px solid var(--default-border-color);
  flex-shrink: 0;
}
.ic-gif-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 12px; font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted-color);
  border: none; background: none;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.ic-gif-tab:hover { color: var(--text-color); }
.ic-gif-tab--active {
  color: var(--btn-primary-bg);
  border-bottom-color: var(--btn-primary-bg);
}

/* ── GIF picker: infinite scroll spinner ──────────────────────────────── */
.ic-gif-load-more {
  grid-column: 1 / -1;
  text-align: center; padding: 12px;
  color: var(--text-muted-color); font-size: 12px;
}

/* GIF inline in message body */
.ic-msg-gif {
  max-width: 100%; width: 280px; max-height: 200px;
  border-radius: 8px; display: block;
  margin-top: 4px; cursor: zoom-in;
  object-fit: cover;
}
.ic-msg-gif:hover { opacity: .9; }

/* ── GIF preview bar (above input) ──────────────────────────────────────── */
.ic-gif-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--default-border-color);
  background: var(--panel-bg) !important;
  font-size: 12px;
}
.ic-gif-preview-thumb {
  width: 48px; height: 36px;
  object-fit: cover; border-radius: 4px;
  flex-shrink: 0;
}
.ic-gif-preview-cancel {
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color); padding: 2px; flex-shrink: 0;
  margin-left: auto;
}
.ic-gif-preview-cancel:hover { color: var(--brand-danger); }

/* ── Attachment chip image thumbnail ─────────────────────────────────────── */
.ic-att-chip-thumb {
  width: 36px; height: 36px;
  object-fit: cover; border-radius: 4px;
  flex-shrink: 0;
}
.ic-attachment-chip--image {
  padding: 4px 8px 4px 4px;
}

/* ── Emoji shortcode dropdown ────────────────────────────────────────────── */
.ic-emoji-shortcode-dropdown {
  background: var(--panel-bg) !important;
  border: 1px solid var(--default-border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  max-height: 220px; overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
}
.ic-emoji-shortcode-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 12px;
  background: none !important; border: none;
  cursor: pointer; text-align: left; font-size: 13px;
  font-family: inherit;
  color: var(--text-color);
}
.ic-emoji-shortcode-item:hover,
.ic-emoji-shortcode-item--active {
  background: var(--default-heading-bg-color) !important;
  outline: none;
}
.ic-emoji-shortcode-glyph {
  font-size: 20px; width: 28px; text-align: center; flex-shrink: 0;
}

/* ── Single-emoji message ────────────────────────────────────────────────── */
.ic-msg-body--emoji-only {
  font-size: 48px;
  line-height: 1.1;
  background: none !important;
  padding: 0 !important;
}


/* ── Reply quote image/gif thumbnail ────────────────────────────────────── */
.ic-reply-quote-preview {
  display: flex; align-items: center; gap: 6px;
}
.ic-reply-quote-thumb {
  width: 36px; height: 36px;
  object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.ic-reply-quote-file-icon {
  width: 20px; height: 20px; flex-shrink: 0; opacity: 0.7;
}

/* ── Reply preview bar thumbnail ─────────────────────────────────────────── */
.ic-reply-preview-thumb {
  width: 36px; height: 36px;
  object-fit: cover; border-radius: 4px; flex-shrink: 0;
}

/* ── Add-members user type tabs ──────────────────────────────────────────── */
.ic-add-member-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--default-border-color);
  margin-bottom: 10px; flex-shrink: 0;
}
.ic-add-member-tab {
  flex: 1; padding: 8px 0; font-size: 13px; font-weight: 500;
  background: none !important; border: none; cursor: pointer;
  color: var(--text-muted-color);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ic-add-member-tab--active {
  color: var(--btn-primary-bg);
  border-bottom-color: var(--btn-primary-bg);
}

/* ── User profile hover card ─────────────────────────────────────────────── */
.ic-profile-card {
  position: fixed; z-index: 9999;
  background: var(--panel-bg) !important;
  border: 1px solid var(--default-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  width: 240px;
  overflow: hidden;
  pointer-events: auto;
}
.ic-pc-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 7px;
}
.ic-pc-avatar img {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important; display: block !important;
  flex-shrink: 0;
}
.ic-pc-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ic-pc-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  border: 2px solid var(--panel-bg);
}
.ic-pc-name-wrap {
  min-width: 0;
  flex: 1;
}
.ic-pc-name {
  font-size: 12px; font-weight: 600; line-height: 1.2;
  color: var(--text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-pc-last-seen {
  font-size: 10.5px;
  color: var(--text-muted-color);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-pc-body {
  padding: 0 10px 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.ic-pc-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-muted-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-pc-row span {
  overflow: hidden; text-overflow: ellipsis;
}
.ic-pc-icon {
  flex-shrink: 0; color: var(--text-muted-color); opacity: .7;
  width: 12px; height: 12px;
}
.ic-pc-custom-status { align-items: flex-start; }
.ic-pc-custom-emoji {
  flex-shrink: 0;
  width: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  line-height: 1;
}
.ic-pc-custom-status > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; }
.ic-pc-custom-until { color: var(--text-muted-color); opacity: .8; }
/* Make avatar cursor a pointer to hint interactivity */
.ic-msg-avatar { cursor: pointer; }

/* ── Custom status (Google-Chat-style) ─────────────────────────── */

/* Separator above the "Add a status" entry in the presence menu */
.ic-presence-sep {
  height: 1px;
  margin: 4px 2px;
  background-color: var(--dropdown-divider-bg, var(--border-color, #e0e0e0));
}

/* "Add a status" / "Clear status" dropdown entries match .ic-presence-option */
.ic-presence-custom-open,
.ic-presence-custom-clear,
.ic-page-presence-custom-open,
.ic-page-presence-custom-clear {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background-color: transparent !important;
  border: none; cursor: pointer; text-align: left;
  color: var(--dropdown-link-color); font-size: 13px;
  border-radius: var(--border-radius-small);
  transition: background-color .12s;
}
.ic-presence-custom-open:hover,
.ic-presence-custom-clear:hover,
.ic-page-presence-custom-open:hover,
.ic-page-presence-custom-clear:hover {
  background-color: var(--dropdown-link-hover-bg) !important;
  color: var(--dropdown-link-hover-color);
}
.ic-presence-custom-icon {
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.ic-presence-custom-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Inline emoji badge shown next to usernames / room names */
.ic-custom-emoji {
  display: inline-block;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
  line-height: 1;
}

/* Small emoji badge at the bottom-right of the FAB */
.ic-fab-custom {
  position: absolute;
  bottom: -2px; left: -2px;
  width: 18px; height: 18px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  background-color: var(--panel-bg);
  border: 2px solid var(--btn-primary-bg);
  display: grid; place-items: center;
  font-size: 10px; line-height: 1;
  text-align: center;
  pointer-events: none;
}

/* Emoji badge on the header avatar button (compact panel) */
.ic-header-custom {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: var(--navbar-inverse-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  pointer-events: none;
}

/* Emoji badge on the full-page avatar button */
.ic-page-avatar-custom {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: var(--navbar-inverse-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  pointer-events: none;
}

/* ── Custom status FAB screen slot ────────────────────────────── */
.ic-custom-status-screen-slot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ic-custom-status-screen-slot .ic-status-body {
  flex: 1;
  overflow-y: auto;
}

/* ── Forward screen slot ────────────────────────────────────────── */
.ic-forward-screen-slot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-forward-screen-slot .ic-forward-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Custom status screen ──────────────────────────────────────── */

.ic-status-body {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}

.ic-status-input-row {
  display: flex; align-items: center; gap: 6px;
  position: relative;
}
.ic-status-emoji-btn {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 17px; line-height: 1;
  background-color: var(--dropdown-link-hover-bg, #f2f2f2);
  border: 1px solid var(--border-color, #ddd);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.ic-status-emoji-btn:hover { background-color: var(--dropdown-link-hover-bg); }

.ic-status-presets {
  display: flex; flex-direction: column; gap: 1px;
}
.ic-status-preset {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background-color: transparent; border: none; cursor: pointer;
  text-align: left;
  border-radius: var(--border-radius-small);
  color: var(--text-color);
  font-size: 12px;
  transition: background-color .12s;
}
.ic-status-preset:hover { background-color: var(--dropdown-link-hover-bg); }
.ic-status-preset-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }
.ic-status-preset-label { flex: 1; }
.ic-status-preset-duration {
  color: var(--text-muted-color); font-size: 10px; flex-shrink: 0;
}

/* Flatten EditForModalRecordView chrome so embedded fields blend into the modal surface. */
.ic-status-text-slot,
.ic-status-form-slot {
  display: block;
  min-width: 0;
}
/* Explicit width required — Bootstrap inner wrappers overflow without it. */
.ic-status-form-slot {
  width: 380px;
  max-width: calc(100% - 24px);
  align-self: center;
}
.ic-panel .ic-status-form-slot {
  width: 260px;
}
.ic-status-text-slot .edit,
.ic-status-form-slot .edit,
.ic-status-text-slot .record-grid,
.ic-status-form-slot .record-grid,
.ic-status-text-slot .left,
.ic-status-form-slot .left,
.ic-status-text-slot .middle,
.ic-status-form-slot .middle {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.ic-status-text-slot .panel,
.ic-status-form-slot .panel {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ic-status-text-slot .panel-heading,
.ic-status-form-slot .panel-heading {
  display: none !important;
}
.ic-status-text-slot .panel-body,
.ic-status-form-slot .panel-body,
.ic-status-text-slot .panel-body-form,
.ic-status-form-slot .panel-body-form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ic-status-text-slot { flex: 1; }
.ic-status-text-slot .row { margin: 0; }
.ic-status-text-slot .cell {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.ic-status-text-slot .control-label { display: none; }
.ic-status-text-slot .field { display: block; }

.ic-status-form-slot .row { margin: 0; }
.ic-status-form-slot .cell {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
}
.ic-status-form-slot .cell:last-child { margin-bottom: 0; }
.ic-status-form-slot .control-label {
  font-size: 11px;
  color: var(--text-muted-color);
  margin-bottom: 2px;
  font-weight: normal;
}
.ic-status-form-slot .field { display: block; }

/* Keep selectize / input-groups inside the cell — both ignore parent width by default. */
.ic-status-form-slot .selectize-control,
.ic-status-text-slot  .selectize-control {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.ic-status-form-slot .selectize-input {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* Bootstrap .input-group is display:table by default, which ignores parent max-width. */
.ic-status-form-slot .input-group {
  display: flex !important;
  width: 100% !important;
  align-items: stretch;
}
.ic-status-form-slot .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  display: block !important;
}
.ic-status-form-slot .input-group .input-group-btn {
  flex: 0 0 36px;
  display: flex !important;
  align-items: stretch;
}
.ic-status-form-slot .input-group .input-group-btn > .btn {
  width: 36px;
  padding: 6px 0;
  text-align: center;
}
/* Datetime field: two input-groups (date + time) side-by-side */
.ic-status-form-slot .input-group-container-2 {
  display: flex;
  gap: 6px;
  width: 100%;
}
.ic-status-form-slot .input-group-container-2 > .input-group {
  flex: 1 1 0;
  min-width: 0;
}

.ic-status-footer {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color, #e0e0e0);
}
/* Compact sizing only — colors inherited from btn btn-default / btn-primary. */
.ic-status-cancel,
.ic-status-submit {
  padding: 5px 12px;
  font-size: 12px;
}

/* Absolute-position the picker relative to the input row — .ic-panel's transform
   breaks the base position:fixed containing block inside the FAB panel. */
.ic-status-emoji-picker {
  position: absolute !important;
  top: 40px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
}
/* ── User Settings — cog button, FAB screen, full-page pane, compact room list ── */

/* Cog button inside the FAB panel header — mirrors .ic-header-expand */
.ic-header-settings {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-header-settings:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-header-settings .ic-icon { width: 16px; height: 16px; }

/* Cog button in the full-page sidebar header — mirrors .ic-page-new-btn */
.ic-page-settings-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.ic-page-settings-btn:hover { background-color: var(--default-heading-bg-color) !important; }
.ic-page-settings-btn .ic-icon { width: 18px; height: 18px; }

.ic-settings-screen-slot {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ic-settings-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column;
}

/* ── Settings form slot — flatten EditForModalRecordView chrome (same as .ic-status-form-slot). */
.ic-settings-form-slot {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* FAB panel is narrow — clamp wide widgets to body width. */
.ic-panel .ic-settings-body,
.ic-panel .ic-settings-form-slot,
.ic-panel .ic-settings-form-slot * {
  max-width: 100% !important;
  box-sizing: border-box;
}
.ic-panel .ic-settings-body { overflow-x: hidden; }
.ic-settings-form-slot .edit,
.ic-settings-form-slot .record-grid,
.ic-settings-form-slot .left,
.ic-settings-form-slot .middle {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.ic-settings-form-slot .panel {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ic-settings-form-slot .panel-heading { display: none !important; }
.ic-settings-form-slot .panel-body,
.ic-settings-form-slot .panel-body-form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.ic-settings-form-slot .row { margin: 0; }
.ic-settings-form-slot .cell {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
}
.ic-settings-form-slot .cell:last-child { margin-bottom: 0; }
.ic-settings-form-slot .control-label {
  font-size: 12px;
  color: var(--text-muted-color);
  margin-bottom: 4px;
  font-weight: normal;
}
.ic-settings-form-slot .field { display: block; }
.ic-settings-form-slot .selectize-control { width: 100% !important; }
.ic-settings-form-slot .selectize-input { width: 100% !important; }
.ic-settings-footer {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color, #e0e0e0);
  flex-shrink: 0;
}
/* Compact sizing only — colors inherited from btn btn-default / btn-primary. */
.ic-settings-cancel,
.ic-settings-save {
  padding: 5px 12px;
  font-size: 12px;
}

/* Full-page settings pane — mirrors .ic-page-new-chat / .ic-page-new-header */
.ic-page-settings {
  background-color: var(--panel-bg) !important;
}
.ic-page-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-settings-title {
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
}
.ic-page-settings-close {
  background-color: transparent !important; border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ic-page-settings-close .ic-icon { width: 18px; height: 18px; }
.ic-page-settings-close:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-page-settings-slot {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.ic-page-settings-slot .ic-settings-body { padding: 20px 28px; max-width: 720px; }
.ic-page-settings-slot .ic-settings-footer { padding: 12px 28px; }

/* ── Full-page custom status pane — mirrors .ic-page-settings*. */
.ic-page-custom-status {
  background-color: var(--panel-bg) !important;
}
.ic-page-custom-status-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-custom-status-title {
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
}
.ic-page-custom-status-close {
  background-color: transparent !important; border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ic-page-custom-status-close .ic-icon { width: 18px; height: 18px; }
.ic-page-custom-status-close:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-page-custom-status-slot {
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ic-page-custom-status-slot .ic-status-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 28px 40px;
  gap: 16px;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}
.ic-page-custom-status-slot .ic-status-footer {
  flex-shrink: 0;
  padding: 16px 40px;
  border-top: 1px solid var(--border-color, #e0e0e0);
}

/* ── Full-page custom-status: upscaled typography & field sizing (overrides the FAB-panel defaults). */

/* Emoji picker trigger — big pill so the chosen emoji reads at a glance */
.ic-page-custom-status-slot .ic-status-emoji-btn {
  width: 56px; height: 56px;
  font-size: 28px;
  border-radius: 50%;
}
.ic-page-custom-status-slot .ic-status-input-row { gap: 14px; }

/* Text field — larger input, more padding */
.ic-page-custom-status-slot .ic-status-text-slot input[data-name="text"] {
  font-size: 16px;
  padding: 12px 16px;
  height: 52px;
}

/* Presets — compact rows so the form below has more vertical room */
.ic-page-custom-status-slot .ic-status-presets {
  gap: 1px;
  margin-top: 0;
}
.ic-page-custom-status-slot .ic-status-preset {
  padding: 8px 12px;
  font-size: 13px;
  gap: 12px;
  border-radius: var(--border-radius);
}
.ic-page-custom-status-slot .ic-status-preset-emoji { font-size: 16px; }
.ic-page-custom-status-slot .ic-status-preset-duration { font-size: 11px; }

/* Duration + customExpiresAt flex row — labels fixed-height so both cells align vertically. */
.ic-page-custom-status-slot .ic-status-form-slot {
  width: 100%;
  max-width: 680px;
  align-self: center;
}
.ic-page-custom-status-slot .ic-status-form-slot .row {
  display: flex !important;
  gap: 18px;
  align-items: flex-start;
}
.ic-page-custom-status-slot .ic-status-form-slot .cell {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  margin-bottom: 0;
  padding: 0;
}
/* Duration gets a narrow basis so the datetime field's inline addons have room. */
.ic-page-custom-status-slot .ic-status-form-slot .cell[data-name="duration"] {
  flex: 0 1 220px;
}
.ic-page-custom-status-slot .ic-status-form-slot .cell[data-name="customExpiresAt"] {
  flex: 1 1 auto;
}
.ic-page-custom-status-slot .ic-status-form-slot .cell.hidden-cell {
  display: none !important;
}
.ic-page-custom-status-slot .ic-status-form-slot .control-label {
  display: block;
  font-size: 13px;
  line-height: 20px;
  height: 20px;
  margin: 0 0 8px 0;
  padding: 0;
  flex-shrink: 0;
}
.ic-page-custom-status-slot .ic-status-form-slot .field {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
/* Zero the first child's top margin so both fields start at the exact same Y below their labels. */
.ic-page-custom-status-slot .ic-status-form-slot .field > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.ic-page-custom-status-slot .ic-status-form-slot .selectize-input,
.ic-page-custom-status-slot .ic-status-form-slot .form-control {
  font-size: 14px;
  min-height: 42px;
  padding: 9px 12px;
}
/* Match the 42px input min-height so addon buttons line up flush. */
.ic-page-custom-status-slot .ic-status-form-slot .input-group-btn > .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Override the global .ic-btn-primary block layout so Done sits inline with Cancel. */
.ic-page-custom-status-slot .ic-status-footer {
  justify-content: flex-end;
  gap: 12px;
}
.ic-page-custom-status-slot .ic-status-cancel,
.ic-page-custom-status-slot .ic-status-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  min-width: 120px;
  padding: 10px 22px;
  font-size: 14px;
  border-radius: var(--border-radius);
}

/* ── Full-page reschedule pane — mirrors .ic-page-settings*. */
.ic-page-reschedule {
  background-color: var(--panel-bg) !important;
}
.ic-page-reschedule-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background-color: var(--navbar-inverse-bg) !important;
  border-bottom: var(--navbar-border-width) solid var(--navbar-inverse-border);
  flex-shrink: 0;
}
.ic-page-reschedule-title {
  font-size: 16px; font-weight: 600;
  color: var(--navbar-inverse-link-color);
}
.ic-page-reschedule-close {
  background-color: transparent !important; border: none; cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ic-page-reschedule-close .ic-icon { width: 18px; height: 18px; }
.ic-page-reschedule-close:hover { background-color: var(--navbar-inverse-link-hover-bg) !important; }
.ic-page-reschedule-slot,
.ic-reschedule-screen-slot {
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ic-reschedule-screen-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
}
.ic-page-reschedule-slot .ic-reschedule-screen-body { max-width: 720px; }
.ic-reschedule-screen-slot .ic-reschedule-screen-body { padding: 16px; }

.ic-reschedule-screen-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 28px;
  border-top: 1px solid var(--panel-border-color, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
}
.ic-reschedule-screen-slot .ic-reschedule-screen-footer { padding: 10px 16px; }

/* ── Compact room list mode ────────────────────────────────────────────── */

/* FAB panel — compact room item */
.ic-room-item.ic-room-item--compact {
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 10px;
}
.ic-room-item--compact .ic-avatar-wrap--sm {
  width: 28px; height: 28px;
  flex-shrink: 0;
  position: relative;
}
.ic-room-item--compact .ic-avatar-wrap--sm img,
.ic-room-item--compact .ic-avatar-wrap--sm .ic-avatar-initials {
  width: 28px !important; height: 28px !important;
  font-size: 11px !important;
  border-radius: 50% !important;
}
.ic-room-item--compact .ic-room-info {
  flex: 1; min-width: 0;
}
.ic-room-item--compact .ic-room-name-row {
  display: flex; align-items: center; gap: 6px;
}
.ic-room-item--compact .ic-room-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── In-app popup notification (Espo popup-notification pipeline) ──────
   We relocate our popup out of Espo's default #popup-notifications-container
   (bottom-right) into our own top-right container so new-message popups
   stack from the top. The card is styled to match the chat panel look and
   includes an inline reply composer. */
#ic-popup-notifications-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
  font-family: 'NotoColorEmoji', var(--font-family);
}

.popup-notification.popup-notification-internal-chat-message {
  pointer-events: auto;
  background-color: var(--panel-bg) !important;
  color: var(--text-color);
  border: var(--panel-border-width) solid var(--panel-default-border);
  border-radius: var(--panel-border-radius);
  box-shadow: var(--ic-shadow);
  /* Override Espo's base 400px width + margins — our container controls sizing. */
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  animation: ic-popup-slide-in .18s ease-out;
}

@keyframes ic-popup-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popup-notification-internal-chat-message .ic-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  background-color: var(--navbar-inverse-bg) !important;
  color: var(--navbar-inverse-link-color);
  border-bottom: 1px solid var(--panel-default-border);
  cursor: pointer;
}
.popup-notification-internal-chat-message .ic-popup-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--navbar-inverse-link-icon-color);
  flex-shrink: 0;
}
.popup-notification-internal-chat-message .ic-popup-room-name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navbar-inverse-link-color);
}
.popup-notification-internal-chat-message .ic-popup-badge {
  background-color: var(--brand-danger) !important;
  color: var(--btn-danger-color);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.popup-notification-internal-chat-message .ic-popup-close {
  background-color: transparent !important;
  border: none;
  cursor: pointer;
  color: var(--navbar-inverse-link-icon-color);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color .15s;
}
.popup-notification-internal-chat-message .ic-popup-close:hover {
  background-color: var(--navbar-inverse-link-hover-bg) !important;
}

.popup-notification-internal-chat-message .ic-popup-message {
  padding: 10px 12px;
  background-color: var(--panel-bg) !important;
  cursor: pointer;
  border-bottom: 1px solid var(--default-border-color);
}
.popup-notification-internal-chat-message .ic-popup-sender {
  font-size: 12px;
  font-weight: 600;
  color: var(--link-color);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-notification-internal-chat-message .ic-popup-body {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.popup-notification-internal-chat-message .ic-popup-reply {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  background-color: var(--panel-bg) !important;
}
.popup-notification-internal-chat-message .ic-popup-reply-input {
  flex: 1;
  min-height: 32px;
  max-height: 96px;
  resize: none;
  background-color: var(--input-bg) !important;
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--border-radius);
  padding: 6px 10px;
  color: var(--input-color);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
}
.popup-notification-internal-chat-message .ic-popup-reply-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-border-focus-rgba);
}
.popup-notification-internal-chat-message .ic-popup-reply-input:disabled {
  opacity: .6;
}
.popup-notification-internal-chat-message .ic-popup-reply-send {
  flex-shrink: 0;
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
.popup-notification-internal-chat-message .ic-popup-reply-send:hover {
  background-color: var(--btn-primary-hover-bg) !important;
}
.popup-notification-internal-chat-message .ic-popup-reply-send:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ic-header-close--mobile { display: none !important; }

/* ── Mobile (phones / narrow viewports) ─────────────────────────
   The desktop FAB panel is 360×580 positioned 28px from bottom-right.
   On phones it opens off-screen or behind the EspoCRM navbar (which
   sits at z-index 1030–2150), so we collapse it to a full-viewport
   sheet layered above everything — effectively a native-app takeover.
   The FAB stays in its corner until the panel is opened, at which
   point we hide it so it doesn't overlap the header. Same treatment
   for the separate room overlay. */
@media (max-width: 640px) {
  /* Full-page view on mobile: pin below the EspoCRM mobile navbar (42px)
     and size with 100dvh so the input bar stays visible when the soft
     keyboard opens. Using `bottom: 0` would anchor to the layout viewport
     and push the composer behind the keyboard. */
  .ic-page {
    position: fixed;
    top: 42px; left: 0; right: 0; bottom: auto;
    width: 100vw;
    height: calc(100vh - 42px);
    height: calc(100dvh - 42px);
    z-index: 1;
  }
  /* EspoCRM's mobile navbar is `position: static`, so its own z-index is
     ignored and the fixed .ic-page paints above it (covering the hamburger
     dropdown). Promote the navbar to a positioned stacking slot above the
     chat. `position: relative` with no offsets doesn't move the navbar. */
  #navbar {
    position: relative;
    z-index: 1040;
  }
  /* Sidebar fills full width by default */
  .ic-page .ic-page-sidebar { width: 100%; max-width: none; min-width: 0; border-right: none; }
  /* Main panel hidden until room/settings/new-chat opens */
  .ic-page .ic-page-main { display: none; }
  /* Any content open: hide sidebar, reveal main */
  .ic-page.ic-page--main-open .ic-page-sidebar { display: none; }
  .ic-page.ic-page--main-open .ic-page-main { display: flex; }
  /* Show back button and fix room height when room is open.
     `min-height: 0` on every flex item in the chain is required — flex items
     default to `min-height: auto` (= intrinsic content size), so without it a
     long message list prevents ancestors from shrinking, the room panel grows
     past the viewport, and the composer/scroll are clipped. */
  .ic-page.ic-page--room-open .ic-room-back { display: flex !important; }
  .ic-page.ic-page--main-open .ic-page-main { min-height: 0; }
  .ic-page.ic-page--main-open .ic-page-main > .ic-page-content { min-height: 0; flex: 1; height: auto; }
  .ic-page.ic-page--room-open .ic-room-panel { flex: 1; height: auto; min-height: 0; }
  .ic-page.ic-page--room-open .ic-screen { flex: 1; height: auto; min-height: 0; }
  .ic-page.ic-page--room-open .ic-messages { min-height: 0; }

  .ic-panel-wrapper {
    bottom: 16px;
    right: 16px;
    z-index: 1000;
  }

  .ic-panel {
    position: fixed;
    top: 42px; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: calc(100vh - 42px);
    height: calc(100dvh - 42px);
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    transform: translateY(16px);
  }
  .ic-panel-wrapper.ic-open .ic-panel {
    transform: translateY(0);
  }
  .ic-panel-wrapper.ic-open .ic-fab { display: none; }
  #ic-room-overlay:not(.ic-hidden) ~ .ic-panel-wrapper .ic-fab { display: none; }

  #ic-room-overlay {
    top: 42px; left: 0; right: 0; bottom: 0;
    width: 100vw;
    z-index: 1000;
  }
  #ic-room-overlay .ic-room-panel { max-height: none; }
  .ic-room-panel {
    height: calc(100vh - 42px);
    height: calc(100dvh - 42px);
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* No point in an "expand to full view" button when the panel already
     occupies the whole viewport. */
  .ic-header-expand { display: none !important; }
  /* Desktop closes the panel by clicking the FAB again; on mobile the FAB is
     hidden while the panel is open, so reveal the explicit close button. */
  .ic-header-close--mobile { display: flex !important; }
}

/* ── Shortcuts sidebar (Home | @Mentions | ⭐Starred) ───────────── */
.ic-shortcuts {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--default-border-color);
  background-color: var(--panel-bg) !important;
  flex-shrink: 0;
}
.ic-shortcut {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: none !important; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px;
  color: var(--text-muted-color);
  font-size: 12px; font-weight: 500;
  text-align: center;
  flex: 1 1 calc(33.333% - 4px);
  min-width: calc(33.333% - 4px);
  transition: background-color .12s, color .12s;
}
.ic-shortcut .ic-icon { width: 15px; height: 15px; flex-shrink: 0; }
.ic-shortcut-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ic-shortcut:hover {
  background-color: var(--default-heading-bg-color) !important;
  color: var(--text-color);
}
.ic-shortcut--active {
  background-color: var(--state-primary-bg, rgba(51, 122, 183, 0.12)) !important;
  color: var(--text-color) !important;
}
.ic-shortcut--active .ic-icon { background-color: var(--text-color) !important; }
.ic-shortcut-label {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-shortcut-badge {
  position: absolute;
  top: -6px; right: -8px;
  background-color: #e53935 !important;
  color: #fff;
  font-size: 9px; font-weight: 600;
  padding: 0 4px; border-radius: 8px;
  min-width: 14px; height: 14px; line-height: 14px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--panel-bg);
  pointer-events: none;
}

/* Compact mode — icons only, no labels, one row */
.ic-shortcuts--compact { flex-wrap: nowrap; }
.ic-shortcuts--compact .ic-shortcut {
  padding: 6px 4px;
  gap: 0;
  flex: 1 1 0;
  min-width: 0;
}
.ic-shortcuts--compact .ic-shortcut-label { display: none; }

/* ── Starred action (star icon in message action bar) ───────────── */
.ic-msg-action-star--active { color: #f7b84b !important; }
.ic-msg-action-star--active .ic-icon { background-color: #f7b84b !important; }

/* ── Aggregate cross-room message list (Mentions / Starred) ────── */
.ic-shortcut-list-slot {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.ic-flat-list-wrap {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  background-color: var(--panel-bg) !important;
}
.ic-flat-list-scroll {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-bg);
}
.ic-flat-list-scroll::-webkit-scrollbar { width: 4px; }
.ic-flat-list-scroll::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-bg); border-radius: 4px; }
.ic-flat-list-empty, .ic-flat-list-loader {
  padding: 24px; text-align: center;
  color: var(--text-muted-color); font-size: 13px;
}
.ic-flat-list-item {
  display: flex; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--default-border-color);
  transition: background-color .12s;
  position: relative;
}
.ic-flat-list-item:hover { background-color: var(--default-heading-bg-color) !important; }
.ic-flat-list-item:has(.ic-flat-list-dropdown--open) { z-index: 10; }

/* ⋮ trigger on each starred card */
.ic-flat-list-menu-wrap {
  position: absolute;
  right: 4px; top: 6px;
  flex-shrink: 0;
}
.ic-flat-list-menu-btn {
  background-color: transparent !important;
  border: none; cursor: pointer;
  color: var(--text-muted-color);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s, background-color .12s, color .12s;
}
.ic-flat-list-menu-btn .ic-icon { width: 16px; height: 16px; }
.ic-flat-list-item:hover .ic-flat-list-menu-btn,
.ic-flat-list-menu-wrap:has(.ic-flat-list-dropdown--open) .ic-flat-list-menu-btn {
  opacity: 1;
}
.ic-flat-list-menu-btn:hover {
  background-color: var(--default-heading-bg-color) !important;
  color: var(--text-color);
}

.ic-flat-list-dropdown {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background-color: var(--dropdown-bg) !important;
  border: var(--dropdown-border-width) solid var(--dropdown-border);
  border-radius: var(--dropdown-border-radius);
  box-shadow: var(--dropdown-box-shadow);
  min-width: 140px;
  z-index: 100;
  padding: 4px 0;
  overflow: hidden;
}
.ic-flat-list-dropdown--open { display: block; }
.ic-flat-list-unstar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 14px;
  background-color: transparent !important;
  border: none; cursor: pointer; text-align: left;
  font-size: 13px; color: var(--dropdown-link-color);
  transition: background-color .1s;
  white-space: nowrap;
}
.ic-flat-list-unstar:hover {
  background-color: var(--dropdown-link-hover-bg) !important;
  color: var(--dropdown-link-hover-color);
}
.ic-flat-list-avatar { flex-shrink: 0; }
.ic-flat-list-main { flex: 1; min-width: 0; }
.ic-flat-list-head {
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.ic-flat-list-author { font-size: 13px; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; }
.ic-flat-list-room   { font-size: 11px; color: var(--text-muted-color); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ic-flat-list-time   { font-size: 11px; color: var(--text-muted-color); flex-shrink: 0; }
.ic-flat-list-preview {
  font-size: 12px; color: var(--text-muted-color);
  margin-top: 2px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Threads ───────────────────────────────────────────────────────────── */

/* "N replies" indicator under a root message bubble. */
.ic-msg-thread-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--default-border-color);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--btn-primary-bg);
  cursor: pointer;
  line-height: 1.3;
  transition: background .12s, color .12s;
}
.ic-msg-thread-indicator:hover {
  background: var(--default-heading-bg-color);
  color: var(--btn-primary-hover-bg);
}
.ic-msg-thread-indicator .ic-icon {
  width: 12px; height: 12px;
}
.ic-msg-thread-count { font-weight: 600; }
.ic-msg-thread-last  { color: var(--text-muted-color); font-weight: 400; }

/* Thread screen uses the same DOM/classes as the main chat screen, so all
   main-room styles apply. Thread-specific rules only. */
.ic-screen[data-screen="thread"] .ic-msg-thread-indicator,
.ic-screen[data-screen="thread"] .ic-msg-action-thread { display: none; }

.ic-screen[data-screen="thread"] > .ic-room-header { flex-shrink: 0; }

/* Page-mode hides the main room's back button (browser back serves that role),
   but the thread screen ALWAYS needs its back button — it's the only way back
   to the main room. Override the page-mode hide rules. */
.ic-page-main .ic-screen[data-screen="thread"] .ic-room-back,
.ic-page-room-container .ic-screen[data-screen="thread"] .ic-room-back {
    display: flex !important;
}

/* ── Plus button & upward menu ── */
.ic-plus-wrap {
  position: relative;
  flex-shrink: 0;
}
.ic-plus-btn,
.ic-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted-color);
  cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.ic-plus-btn:hover,
.ic-attach-btn:hover {
  background: var(--default-heading-bg-color);
  color: var(--text-color);
}
.ic-plus-menu,
.ic-schedule-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--panel-bg);
  border: 1px solid var(--default-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  min-width: 160px;
  padding: 4px;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.ic-plus-menu--hidden { display: none; }
.ic-plus-menu-item,
.ic-schedule-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text-color);
  white-space: nowrap;
}
.ic-plus-menu-item:hover,
.ic-schedule-menu-item:hover { background: var(--dropdown-link-hover-bg); }

/* ── Poll creation screen ── */
.ic-screen[data-screen="poll"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-poll-screen-slot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-poll-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ic-poll-options-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ic-poll-options-label {
  font-size: 11px;
  color: var(--text-muted-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ic-poll-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ic-poll-option-input {
  flex: 1;
}
.ic-poll-remove-option {
  flex-shrink: 0;
  color: var(--text-muted-color);
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
}
.ic-poll-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
}

/* ── Poll card (in message feed — IS the bubble) ── */
.ic-poll-card {
  padding: 7px 11px 6px;
  border-radius: var(--border-radius);
  font-size: 13px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  word-break: break-word;
  overflow: hidden;
}
.ic-msg-row--mine .ic-poll-card {
  background-color: var(--state-primary-bg) !important;
  color: var(--text-color);
  border-bottom-right-radius: 2px;
}
.ic-msg-row:not(.ic-msg-row--mine) .ic-poll-card {
  background-color: var(--panel-bg) !important;
  color: var(--text-color);
  border-bottom-left-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ic-poll-card-question {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}
.ic-poll-card-hint {
  font-size: 11px;
  color: var(--text-muted-color);
  margin-top: -4px;
}
.ic-poll-vote-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  width: 100%;
  padding: 7px 10px;
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: border-color .15s;
}
.ic-poll-vote-option:hover { border-color: var(--btn-primary-bg); }
.ic-poll-vote-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--btn-primary-bg);
  opacity: .12;
  border-radius: var(--border-radius);
  transition: width .3s ease;
}
.ic-poll-vote-option--voted .ic-poll-vote-bar { opacity: .22; }
.ic-poll-vote-option--voted { border-color: var(--btn-primary-bg); }
.ic-poll-vote-radio {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--btn-primary-bg);
  background: transparent;
  position: relative;
  transition: background .15s;
}
.ic-poll-vote-option--voted .ic-poll-vote-radio {
  border-color: var(--btn-primary-bg);
  background: var(--btn-primary-bg);
}
.ic-poll-vote-option--voted .ic-poll-vote-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.ic-poll-vote-label {
  flex: 1;
  font-size: 13px;
  position: relative;
}
.ic-poll-vote-count {
  font-size: 11px;
  color: var(--text-muted-color);
  flex-shrink: 0;
  position: relative;
}
.ic-poll-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted-color);
  margin-bottom: -2px;
}
.ic-poll-total-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ic-poll-votes-detail {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
}
.ic-poll-detail-opt { font-weight: 600; }
.ic-poll-detail-names { color: var(--text-muted-color); font-size: 11px; }

/* ── PDF attachment card in message bubbles ──────────────────────────── */
.ic-msg-pdf-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px;
  padding: 8px 12px 8px 8px;
  background: rgba(0,0,0,.06) !important;
  border: none; border-radius: var(--border-radius-small);
  cursor: pointer; text-align: left;
  max-width: 240px;
  transition: background-color .12s;
}
.ic-msg-pdf-wrap:hover { background: rgba(0,0,0,.11) !important; }
.ic-msg-row--mine .ic-msg-pdf-wrap { background: rgba(0,0,0,.09) !important; }
.ic-msg-row--mine .ic-msg-pdf-wrap:hover { background: rgba(0,0,0,.15) !important; }

.ic-msg-pdf-icon-cell {
  position: relative; flex-shrink: 0;
  width: 28px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--link-color);
}
.ic-msg-pdf-icon-cell .ic-icon { width: 28px; height: 28px; }

.ic-pdf-badge {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .03em;
  color: #fff; background: var(--link-color);
  border-radius: 2px; padding: 1px 3px;
  pointer-events: none; white-space: nowrap;
}

.ic-msg-pdf-name {
  font-size: 12px; color: var(--link-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}

/* ── PDF viewer: iframe fills the stage ─────────────────────────────── */
.ic-viewer-stage--pdf {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
.ic-viewer-pdf {
  width: 100%; height: 100%;
  border: none; display: block; background: #fff;
}

/* ── Record preview card in message bubbles ─────────────────────────── */
.ic-record-preview {
  display: block;
  margin-top: 4px;
  padding: 8px 12px;
  border-left: 3px solid var(--btn-primary-bg);
  background: rgba(0,0,0,.04);
  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
  max-width: 320px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .12s;
}
.ic-record-preview:hover { background: rgba(0,0,0,.08); text-decoration: none; color: inherit; }

.ic-record-preview-scope {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--btn-primary-bg);
  margin-bottom: 2px;
}

.ic-record-preview-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-record-preview-status {
  margin-top: 3px;
}

.ic-record-preview-assigned {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-record-preview--denied {
  border-left-color: var(--text-muted);
  background: rgba(0,0,0,.025);
}
.ic-record-preview-denied-label {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.ic-record-preview-wrap {
  display: inline-block;
  max-width: 420px;
  width: 100%;
}
.ic-record-preview-wrap .ic-record-preview {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.ic-invitation-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.ic-invitation-btn {
  flex: 1;
  min-width: max-content;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ic-invitation-btn:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.ic-invitation-btn:disabled { opacity: .5; cursor: default; }

.ic-invitation-btn--success { border-color: var(--btn-success-bg); color: var(--btn-success-bg); }
.ic-invitation-btn--warning { border-color: var(--btn-warning-bg); color: var(--btn-warning-bg); }
.ic-invitation-btn--danger  { border-color: var(--btn-danger-bg);  color: var(--btn-danger-bg);  }

.ic-invitation-btn--success.ic-invitation-btn--active { background: var(--btn-success-bg); border-color: var(--btn-success-bg); color: #fff; }
.ic-invitation-btn--warning.ic-invitation-btn--active { background: var(--btn-warning-bg); border-color: var(--btn-warning-bg); color: #fff; }
.ic-invitation-btn--danger.ic-invitation-btn--active  { background: var(--btn-danger-bg);  border-color: var(--btn-danger-bg);  color: #fff; }

.ic-invitation-btn--success.ic-invitation-btn--active:hover:not(:disabled) { background: var(--btn-success-bg); }
.ic-invitation-btn--warning.ic-invitation-btn--active:hover:not(:disabled) { background: var(--btn-warning-bg); }
.ic-invitation-btn--danger.ic-invitation-btn--active:hover:not(:disabled)  { background: var(--btn-danger-bg);  }

/* ───────── Schedule message (split send button + preset menu) ───────── */
.ic-send-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}
.ic-send-split .ic-send-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 38px;
}
.ic-send-split--no-schedule .ic-send-btn {
  border-radius: 50%;
}
.ic-send-menu-btn {
  width: 22px; height: 38px;
  border-radius: 0 19px 19px 0;
  background-color: var(--btn-primary-bg) !important;
  border: none; border-left: 1px solid rgba(255,255,255,.25);
  cursor: pointer; color: var(--btn-primary-color);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.ic-send-menu-btn:hover { background-color: var(--btn-primary-hover-bg) !important; }
.ic-send-menu-btn .ic-icon { width: 10px; height: 10px; }

.ic-schedule-menu {
  left: auto;
  right: 0;
  min-width: 280px;
}
.ic-schedule-menu--hidden { display: none !important; }
.ic-schedule-preset-label { flex: 1; }
.ic-schedule-preset-time { color: var(--text-muted-color, var(--gray-light)); font-size: 12px; }
.ic-schedule-menu-sep { height: 1px; background: var(--default-border-color); margin: 4px 6px; }

/* Scheduled-messages banner (shown above composer) */
.ic-schedule-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--text-muted-color, var(--gray-light));
  font-size: 13px;
}
.ic-schedule-banner--hidden { display: none !important; }
.ic-schedule-banner .ic-icon { width: 14px; height: 14px; flex-shrink: 0; }
.ic-schedule-banner-text { flex: 0 1 auto; }
.ic-schedule-banner-view {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--link-color, var(--primary-color));
  font-size: 13px;
}
.ic-schedule-banner-view:hover { text-decoration: underline; }

/* Scheduled list — per-row action toolbar + failed state */
.ic-scheduled-item { align-items: flex-start; }
.ic-scheduled-item .ic-flat-list-head {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px;
  width: 100%;
}
.ic-scheduled-item .ic-flat-list-room {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-scheduled-when {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted-color, var(--gray-light)); font-size: 12px;
  white-space: nowrap;
}
.ic-scheduled-actions {
  position: absolute;
  right: 6px; bottom: 6px;
  display: flex; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
  background: var(--panel-bg);
  border-radius: 6px;
  padding: 2px;
}
.ic-flat-list-item:hover .ic-scheduled-actions,
.ic-scheduled-item--failed .ic-scheduled-actions {
  opacity: 1; pointer-events: auto;
}
.ic-scheduled-actions button {
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted-color, var(--gray-light));
}
.ic-scheduled-actions button:hover {
  background: var(--default-heading-bg-color);
  color: var(--text-color);
}
.ic-scheduled-actions .ic-icon { width: 14px; height: 14px; }
.ic-scheduled-item--failed {
  background: var(--danger-soft-bg, rgba(217, 83, 79, .08));
}
.ic-scheduled-error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--btn-danger-bg, #d9534f);
}

/* Schedule-picker screen (in-room) */
.ic-screen[data-screen="schedule"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-schedule-screen-slot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-schedule-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ic-schedule-screen-body {
  padding: 16px 18px;
  flex: 1;
  overflow-y: auto;
}
.ic-schedule-screen-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted-color, var(--gray-light));
}
.ic-schedule-screen-body > .ic-attachment-previews:empty {
  display: none;
}
.ic-schedule-screen-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
}

/* Composer: editing a scheduled message */
.ic-schedule-menu--edit-mode .ic-schedule-preset,
.ic-schedule-menu--edit-mode .ic-schedule-custom,
.ic-schedule-menu--edit-mode .ic-schedule-menu-sep {
  display: none !important;
}
.ic-schedule-send-now { display: none; }
.ic-schedule-menu--edit-mode .ic-schedule-send-now { display: flex; }