/* ── Overlay shell — verbatim from original chat-overlay.php ───────────── */
.picker-dialog-bg {
    z-index: 10040 !important;
}

.picker-dialog {
    z-index: 10041 !important;
    font-family: Arial, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: normal !important;
    color: #202124 !important;
    direction: ltr !important;
}

.picker-dialog,
.picker-dialog * {
    box-sizing: content-box !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.picker-dialog button,
.picker-dialog input,
.picker-dialog select,
.picker-dialog textarea {
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.picker-dialog a {
    text-decoration: none !important;
}

.picker-dialog img,
.picker-dialog svg {
    max-width: none !important;
    border-radius: 0 !important;
}

#nhChatOverlay {
    position: fixed;
    inset: 0;
    z-index: 9095;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(5, 10, 18, .68);
    backdrop-filter: blur(10px) saturate(.88);
    -webkit-backdrop-filter: blur(10px) saturate(.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s cubic-bezier(.22, .61, .36, 1);
}
#nhChatOverlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
#nhChatOverlay .nhc-shell {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--nh-bg, #0d1526);
    border-left: none;
    box-shadow: none;
    opacity: 1;
    transition: opacity .22s cubic-bezier(.22, .61, .36, 1);
}
#nhChatOverlay .nhc-bar {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px 10px 14px;
}
#nhChatOverlay .nhc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

#nhChatOverlay .nhc-title-text {
    color: var(--nh-tx-hi, #f0f6ff);
    font-family: var(--chat-font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
    margin: 0;
    display: inline-flex;
    align-items: center;
}
#nhChatOverlay .nhc-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--nh-sub, #8ca0bf);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .12s ease;
    flex-shrink: 0;
    padding: 0;
    font-size: 1.18rem;
}
#nhChatOverlay .nhc-close i {
    font-size: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#nhChatOverlay .nhc-close:hover {
    color: var(--nh-acc, #f59e0b);
}
#nhChatOverlay .nhc-close:active {
    transform: scale(.92);
}
#nhChatOverlay .nhc-bar .chat-sidebar-menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
#nhChatOverlay .nhc-bar .chat-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 10px;
    padding: 0;
    font-size: 1.18rem;
    color: var(--nh-sub, #8ca0bf);
}
#nhChatOverlay .nhc-bar .chat-icon-btn i {
    font-size: inherit;
    line-height: 1;
}
#nhChatOverlay .nhc-bar .chat-icon-btn:hover {
    color: var(--nh-acc, #f59e0b);
}
#nhChatOverlay .nhc-bar .chat-icon-btn:active {
    transform: scale(.92);
}
#nhChatOverlay .nhc-body {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    #nhChatOverlay .nhc-shell {
        border-left: none;
        box-shadow: none;
    }
    #nhChatOverlay .nhc-bar {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }
}
@media (prefers-color-scheme: light) {
    #nhChatOverlay .nhc-shell {
        background: #ffffff;
        border-left: none;
        box-shadow: none;
    }
    #nhChatOverlay .nhc-title-text {
        color: #0f1626;
    }
    #nhChatOverlay .nhc-close {
        color: #61708d;
    }
}

/* ── Chat CSS — inlined from chat/assets/chat.css ──────────────────────────
   Three minimal fixes to work inside the overlay (not a standalone page):
     1. html,body rules omitted          — would break the parent page
     2. .chat-app  height: 100vh → 100%  — fills nhc-body, not the viewport
     3. .chat-modal position: fixed → absolute — confined inside the overlay
   Everything else is verbatim.
   ─────────────────────────────────────────────────────────────────────────── */
#nhChatOverlay {
  --chat-bg: #080d18;
  --chat-surface: #0d1526;
  --chat-surface-2: #111d30;
  --chat-surface-3: #152238;
  --chat-border: #1a2a44;
  --chat-border-2: #243550;
  --chat-text: #c8d6ec;
  --chat-text-strong: #f0f6ff;
  --chat-sub: #6b82a6;
  --chat-accent: #f59e0b;
  --chat-accent-2: #e8650a;
  --chat-green: #22c55e;
  --chat-blue: #3b82f6;
  --chat-red: #ef4444;
  --chat-radius: 14px;
  --chat-radius-sm: 9px;
  --chat-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  --chat-keyboard-offset: 0px;
  --chat-font: 'Inter', system-ui, -apple-system, sans-serif;
  --chat-font-display: 'Playfair Display', Georgia, serif;
  font-family: var(--chat-font);
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay {
    --chat-bg: #f4f6fb;
    --chat-surface: #ffffff;
    --chat-surface-2: #f0f4fb;
    --chat-surface-3: #e9eef8;
    --chat-border: #dce3f0;
    --chat-border-2: #cbd6e7;
    --chat-text: #2d3a52;
    --chat-text-strong: #0f1626;
    --chat-sub: #6b7a96;
  }
}

#nhChatOverlay,
#nhChatOverlay .nhc-shell,
#nhChatOverlay .nhc-bar,
#nhChatOverlay .nhc-title,
#nhChatOverlay .nhc-title-text,
#nhChatOverlay .nhc-close,
#nhChatOverlay .nhc-body,
#nhChatOverlay .chat-app,
#nhChatOverlay .chat-sidebar,
#nhChatOverlay .chat-sidebar-top,
#nhChatOverlay .chat-list-filters-row,
#nhChatOverlay .chat-sidebar-fab,
#nhChatOverlay .chat-sidebar-search,
  #nhChatOverlay .chat-sidebar-menu,
  #nhChatOverlay .chat-sidebar-tools,
  #nhChatOverlay .chat-list-filters,
  #nhChatOverlay .chat-list-pill,
  #nhChatOverlay .chat-icon-btn,
  #nhChatOverlay .chat-dropdown,
  #nhChatOverlay .chat-dropdown-item,
#nhChatOverlay .chat-tabs,
#nhChatOverlay .chat-tab,
#nhChatOverlay .chat-tab-icon,
#nhChatOverlay .chat-tab-label,
#nhChatOverlay .chat-tab-count,
#nhChatOverlay .chat-list,
#nhChatOverlay .chat-list-empty,
#nhChatOverlay .chat-row,
#nhChatOverlay .chat-avatar,
#nhChatOverlay .chat-row-main,
#nhChatOverlay .chat-row-top,
#nhChatOverlay .chat-row-title,
#nhChatOverlay .chat-row-time,
#nhChatOverlay .chat-row-subtitle,
#nhChatOverlay .chat-row-preview,
#nhChatOverlay .chat-row-unread,
#nhChatOverlay .chat-main,
#nhChatOverlay .chat-empty,
#nhChatOverlay .chat-empty-logo,
#nhChatOverlay .chat-thread,
#nhChatOverlay .chat-messages,
#nhChatOverlay .chat-day-break,
#nhChatOverlay .chat-message,
#nhChatOverlay .chat-message-avatar,
#nhChatOverlay .chat-bubble-wrap,
#nhChatOverlay .chat-bubble,
#nhChatOverlay .chat-bubble-sender,
#nhChatOverlay .chat-sender-name,
#nhChatOverlay .chat-sender-role,
#nhChatOverlay .chat-bubble-sep,
#nhChatOverlay .chat-bubble-text,
#nhChatOverlay .chat-bubble-time,
#nhChatOverlay .chat-system-row,
#nhChatOverlay .chat-composer,
#nhChatOverlay .chat-composer-wrap,
#nhChatOverlay .chat-send-btn,
#nhChatOverlay .chat-primary-btn,
#nhChatOverlay .chat-drawer,
#nhChatOverlay .chat-drawer-backdrop,
#nhChatOverlay .chat-drawer-panel,
#nhChatOverlay .chat-drawer-header,
#nhChatOverlay .chat-drawer-title,
#nhChatOverlay .chat-drawer-body,
#nhChatOverlay .chat-drawer-footer,
#nhChatOverlay .chat-drawer-search,
#nhChatOverlay .chat-form-grid,
#nhChatOverlay .chat-form-block,
#nhChatOverlay .chat-member-list,
#nhChatOverlay .chat-member-row,
#nhChatOverlay .chat-member-check,
#nhChatOverlay .chat-member-avatar,
#nhChatOverlay .chat-member-meta,
#nhChatOverlay .chat-member-name,
#nhChatOverlay .chat-member-role,
#nhChatOverlay .chat-modal-note,
#nhChatOverlay .chat-toast-stack,
#nhChatOverlay .chat-toast,
#nhChatOverlay .chat-loading,
#nhChatOverlay .chat-error {
  box-sizing: border-box;
}

#nhChatOverlay .nhc-close,
#nhChatOverlay .chat-icon-btn,
#nhChatOverlay .chat-dropdown-item,
#nhChatOverlay .chat-tab,
#nhChatOverlay .chat-send-btn,
#nhChatOverlay .chat-primary-btn,
#nhChatOverlay .chat-sidebar-search input,
#nhChatOverlay .chat-drawer-search input,
#nhChatOverlay .chat-form-block input,
#nhChatOverlay .chat-form-block textarea,
#nhChatOverlay .chat-form-block select,
#nhChatOverlay .chat-composer-wrap textarea {
  font: inherit;
}

#nhChatOverlay .nhc-close,
#nhChatOverlay .chat-icon-btn,
#nhChatOverlay .chat-dropdown-item,
#nhChatOverlay .chat-tab,
#nhChatOverlay .chat-send-btn,
#nhChatOverlay .chat-primary-btn,
#nhChatOverlay .chat-sidebar-fab {
  cursor: pointer;
}

#nhChatOverlay[hidden],
#nhChatOverlay [hidden] {
  display: none !important;
}

body.nhc-overlay-lock {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  overscroll-behavior: none;
  touch-action: none;
}

/* FIX 1: 100vh → 100% */
#nhChatOverlay .chat-app {
  display: flex;
  height: 100%;
  background: var(--chat-bg);
}

#nhChatOverlay .chat-desktop-rail {
  display: none;
}

#nhChatOverlay .chat-desktop-rail-btn,
#nhChatOverlay .chat-desktop-rail-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border-right: 1px solid var(--chat-border);
  min-width: 0;
}

#nhChatOverlay .chat-sidebar-top {
  padding: 10px 12px 6px 14px;
}

#nhChatOverlay .nhc-bar.is-selection-mode {
  background: rgba(59, 130, 246, .08);
}

/* Exit (←) button — matches nhc-close sizing exactly */
#nhChatOverlay .chat-sidebar-select-exit {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  color: var(--nh-sub, #8ca0bf);
  font-size: 1.18rem;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
#nhChatOverlay .chat-sidebar-select-exit:hover { color: var(--nh-acc, #f59e0b); }
#nhChatOverlay .chat-sidebar-select-exit:active { transform: scale(.92); }
#nhChatOverlay .chat-sidebar-select-exit i {
  font-size: inherit;
  line-height: 1;
  pointer-events: none;
}

/* Count label — matches nhc-title-text weight/size */
#nhChatOverlay .chat-sidebar-select-count {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--chat-font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--nh-tx-hi, #f0f6ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons group — flush right, no margin-left conflict with space-between */
#nhChatOverlay .chat-sidebar-select-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Each action icon button — matches nhc-close sizing */
#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn {
  padding: 0 !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  color: var(--nh-sub, #8ca0bf);
  font-size: 1.18rem;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn:hover { color: var(--nh-acc, #f59e0b); }
#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn:active { transform: scale(.92); }
#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn i {
  font-size: 1.18rem;
  line-height: 1;
  pointer-events: none;
}

#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn.is-pin i {
  transform: rotate(0deg);
}
#nhChatOverlay .chat-sidebar-select-actions .chat-header-action-btn.is-unpin i {
  transform: rotate(45deg);
  color: #3b82f6;
}

#nhChatOverlay .chat-list-filters-row {
  display: block;
  padding: 0 12px 8px 14px;
}

#nhChatOverlay .chat-list-filters-row .chat-list-filters {
  padding: 0;
  margin: 0;
}

#nhChatOverlay .chat-list-filters-row .chat-sidebar-menu {
  flex-shrink: 0;
}

#nhChatOverlay .chat-sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--chat-surface-2);
  border-radius: 999px;
  border: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-sidebar-search i {
  position: absolute;
  left: 11px;
  color: var(--chat-sub);
  font-size: .94rem;
  opacity: .6;
  pointer-events: none;
}

#nhChatOverlay .chat-sidebar-search input::placeholder {
  color: var(--chat-sub);
  opacity: .55;
}

#nhChatOverlay .chat-sidebar-search input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--chat-text-strong);
  padding: 7px 12px 7px 34px;
  outline: none;
  border-radius: 999px;
}

#nhChatOverlay .chat-list-filters {
  display: flex;
  gap: 5px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#nhChatOverlay .chat-list-filters::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-list-pill {
  border: 1px solid var(--chat-border);
  background: transparent;
  color: var(--chat-sub);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .77rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: .18s ease;
}

#nhChatOverlay .chat-list-pill.is-active {
  border-color: rgba(206, 27, 39, .22);
  background: rgba(206, 27, 39, .08);
  color: var(--chat-accent);
}

#nhChatOverlay .chat-sidebar-menu {
  position: relative;
}

/* ── Sidebar floating compose FAB ── */
#nhChatOverlay .chat-sidebar {
  position: relative; /* anchor for FAB */
}

#nhChatOverlay .chat-sidebar-fab {
  position: absolute;
  bottom: calc(68px + 14px); /* above sticky tabs bar */
  right: 14px;
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--chat-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, .38), 0 2px 6px rgba(0,0,0,.22);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

#nhChatOverlay .chat-sidebar-fab:hover {
  background: var(--chat-accent-2);
  box-shadow: 0 6px 22px rgba(245, 158, 11, .48), 0 2px 8px rgba(0,0,0,.28);
  transform: scale(1.07);
}

#nhChatOverlay .chat-sidebar-fab:active {
  transform: scale(.93);
  box-shadow: 0 2px 8px rgba(245, 158, 11, .28);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-sidebar-fab {
    box-shadow: 0 4px 14px rgba(245, 158, 11, .32), 0 1px 4px rgba(0,0,0,.12);
  }
}

@media (max-width: 480px) {
  #nhChatOverlay .chat-sidebar-fab {
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
    right: 12px;
    bottom: calc(68px + 10px);
  }
}

/* ── Conversation list — mobile compactness (≤480px) ── */
@media (max-width: 480px) {
  /* Header top area */
  #nhChatOverlay .chat-sidebar-top {
    padding: 8px 10px 4px;
  }

  /* Search bar — slightly slimmer */
  #nhChatOverlay .chat-sidebar-search input {
    padding: 6px 10px 6px 32px;
    font-size: .88rem;
  }
  #nhChatOverlay .chat-sidebar-search i {
    left: 10px;
    font-size: .88rem;
  }

  /* Filter pills row */
  #nhChatOverlay .chat-list-filters {
    gap: 4px;
    padding: 0 10px 6px;
  }
  #nhChatOverlay .chat-list-pill {
    padding: 3px 9px;
    font-size: .73rem;
  }

  /* Conversation rows */
  #nhChatOverlay .chat-row {
    padding: 8px 12px;
    gap: 9px;
  }

  /* Avatar */
  #nhChatOverlay .chat-row > .chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: .88rem;
  }

  /* Row text */
  #nhChatOverlay .chat-row-title {
    font-size: .88rem;
  }
  #nhChatOverlay .chat-row-time {
    font-size: .7rem;
  }
  #nhChatOverlay .chat-row-subtitle,
  #nhChatOverlay .chat-row-preview {
    font-size: .78rem;
  }
  #nhChatOverlay .chat-row-preview {
    margin-top: 1px;
  }
  #nhChatOverlay .chat-row-top {
    margin-bottom: 2px;
    gap: 6px;
  }

  /* Unread badge */
  #nhChatOverlay .chat-row-unread {
    min-width: 17px;
    height: 17px;
    font-size: .65rem;
    padding: 0 5px;
    margin-left: 4px;
  }

  /* Bottom tabs bar */
  #nhChatOverlay .chat-tabs {
    padding: 8px 6px;
    gap: 4px;
  }
  #nhChatOverlay .chat-tab {
    height: 40px;
    gap: 3px;
  }
  #nhChatOverlay .chat-tab-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  #nhChatOverlay .chat-tab-label {
    font-size: .68rem;
  }
  #nhChatOverlay .chat-tab i {
    font-size: .84rem;
  }
}

/* ── Conversation list — standard phones (≤390px: iPhone 14/15, Pixel 7) ── */
@media (max-width: 390px) {
  #nhChatOverlay .chat-sidebar-top {
    padding: 6px 10px 4px;
  }
  #nhChatOverlay .chat-list-filters {
    gap: 4px;
    padding: 0 10px 5px;
  }
  #nhChatOverlay .chat-list-pill {
    padding: 3px 8px;
    font-size: .71rem;
  }
  #nhChatOverlay .chat-row {
    padding: 7px 11px;
    gap: 8px;
  }
  #nhChatOverlay .chat-row > .chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: .84rem;
  }
  #nhChatOverlay .chat-row-title {
    font-size: .86rem;
  }
  #nhChatOverlay .chat-row-time {
    font-size: .68rem;
  }
  #nhChatOverlay .chat-row-subtitle,
  #nhChatOverlay .chat-row-preview {
    font-size: .76rem;
  }
  #nhChatOverlay .chat-row-top {
    gap: 5px;
    margin-bottom: 2px;
  }
  #nhChatOverlay .chat-row-unread {
    min-width: 16px;
    height: 16px;
    font-size: .63rem;
    padding: 0 4px;
    margin-left: 3px;
  }
  #nhChatOverlay .chat-tabs {
    padding: 6px 5px;
    gap: 3px;
  }
  #nhChatOverlay .chat-tab {
    height: 38px;
    gap: 2px;
  }
  #nhChatOverlay .chat-tab-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  #nhChatOverlay .chat-tab-label {
    font-size: .66rem;
  }
  #nhChatOverlay .chat-tab i {
    font-size: .8rem;
  }
}

/* ── Conversation list — small Android (≤360px) ── */
@media (max-width: 360px) {
  #nhChatOverlay .chat-list-filters-row {
    padding: 0 4px 4px 10px;
  }
  #nhChatOverlay .chat-list-pill {
    padding: 2px 7px;
    font-size: .69rem;
  }
  #nhChatOverlay .chat-row {
    padding: 7px 10px;
    gap: 8px;
  }
  #nhChatOverlay .chat-row > .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: .82rem;
  }
  #nhChatOverlay .chat-row-title {
    font-size: .84rem;
  }
  #nhChatOverlay .chat-row-time {
    font-size: .67rem;
  }
  #nhChatOverlay .chat-row-subtitle,
  #nhChatOverlay .chat-row-preview {
    font-size: .74rem;
  }
  #nhChatOverlay .chat-tabs {
    padding: 5px 4px;
    gap: 2px;
  }
  #nhChatOverlay .chat-tab {
    height: 36px;
  }
  #nhChatOverlay .chat-tab-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }
  #nhChatOverlay .chat-tab-label {
    font-size: .64rem;
  }
}

#nhChatOverlay .chat-icon-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, transform .15s ease;
}

#nhChatOverlay .chat-icon-btn:hover {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: max-content;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  box-shadow: var(--chat-shadow);
  overflow: hidden;
  z-index: 30;
}

#nhChatOverlay .chat-dropdown-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--chat-text);
  padding: 8px 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#nhChatOverlay .chat-dropdown-label {
  padding: 6px 14px 4px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-dropdown-item:hover {
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-dropdown-item.is-active {
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--chat-accent);
}


#nhChatOverlay .chat-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 12px 10px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-surface);
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}

#nhChatOverlay .chat-tab {
  border: none;
  background: transparent;
  color: var(--chat-sub);
  height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color .15s ease;
  cursor: pointer;
}

#nhChatOverlay .chat-tab-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

#nhChatOverlay .chat-tab i {
  font-size: .9rem;
  line-height: 1;
}

#nhChatOverlay .chat-tab-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
}

#nhChatOverlay .chat-tab-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, .15);
  color: var(--chat-sub);
  font-size: .65rem;
  font-weight: 800;
  transition: background .15s ease, color .15s ease;
}

#nhChatOverlay .chat-tab-count.is-live-indicator {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  top: -2px;
  right: -2px;
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-surface-2) 92%, transparent), 0 0 12px rgba(34, 197, 94, .42);
}

#nhChatOverlay .chat-tab:hover .chat-tab-icon {
  background: var(--chat-surface-2);
  color: var(--chat-text);
}

#nhChatOverlay .chat-tab.is-active {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-tab.is-active .chat-tab-icon {
  background: rgba(245, 158, 11, .12);
  color: var(--chat-accent);
  transform: scale(1.08);
}

#nhChatOverlay .chat-tab.is-active .chat-tab-count {
  background: rgba(245, 158, 11, .25);
  color: var(--chat-accent);
}

#nhChatOverlay .chat-list {
  flex: 1;
  overflow: auto;
}

#nhChatOverlay .chat-list.is-tab-switching-left {
  animation: chatListTabSwitchLeft .18s ease;
}

#nhChatOverlay .chat-list.is-tab-switching-right {
  animation: chatListTabSwitchRight .18s ease;
}

@keyframes chatListTabSwitchLeft {
  0% {
    opacity: .52;
    transform: translateX(16px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chatListTabSwitchRight {
  0% {
    opacity: .52;
    transform: translateX(-16px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#nhChatOverlay .chat-list-empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--chat-sub);
  font-size: .88rem;
}

#nhChatOverlay .chat-search-highlight {
  background: rgba(245, 158, 11, .18);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}

#nhChatOverlay .chat-search-message-snippet {
  white-space: normal;
  line-height: 1.4;
}

#nhChatOverlay .chat-search-row-message {
  grid-template-columns: 1fr;
}

#nhChatOverlay .chat-search-message-line {
  white-space: normal;
  line-height: 1.4;
}

#nhChatOverlay .chat-search-message-sender {
  font-weight: 700;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-row {
  border-left: 3px solid transparent;
  padding: 11px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

#nhChatOverlay .chat-row:hover {
  background: var(--chat-surface-2);
}

#nhChatOverlay .chat-row.is-active {
  background: rgba(245, 158, 11, .06);
  border-left-color: var(--chat-accent);
}

#nhChatOverlay .chat-row.is-selected {
  background: rgba(59, 130, 246, .18);
  border-left-color: rgba(59, 130, 246, .92);
}

#nhChatOverlay .chat-avatar,
#nhChatOverlay .chat-header-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--chat-surface-3);
  border: 1px solid var(--chat-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  color: var(--chat-accent);
  overflow: visible;
}

#nhChatOverlay .chat-row > .chat-avatar {
  width: 57px;
  height: 57px;
  border-radius: 999px;
  font-size: 1rem;
  align-self: center;
}

#nhChatOverlay .chat-row.is-selected > .chat-avatar {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .42);
}

#nhChatOverlay .chat-row.is-selected > .chat-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(59, 130, 246, .32);
  z-index: 4;
  pointer-events: none;
}

#nhChatOverlay .chat-row-select-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

#nhChatOverlay .chat-row-select-check i {
  font-size: .94rem;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, .34);
}

#nhChatOverlay .chat-avatar-presence {
  position: absolute;
  z-index: 3;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid var(--chat-surface);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .18);
  pointer-events: none;
}

#nhChatOverlay .chat-row > .chat-avatar .chat-avatar-presence {
  display: none;
}

#nhChatOverlay .chat-row > .chat-avatar.is-direct:has(.chat-avatar-presence) {
  box-shadow: 0 0 0 3px #22c55e, 0 0 0 5px rgba(34, 197, 94, .18);
}

#nhChatOverlay .chat-avatar.is-public-group-avatar,
#nhChatOverlay .chat-header-avatar.is-public-group-avatar {
  box-shadow: 0 0 0 2px #D96C8A;
}

#nhChatOverlay .chat-row.is-active > .chat-avatar.is-public-group-avatar {
  box-shadow: 0 0 0 2px #D96C8A;
}

#nhChatOverlay .chat-row.is-selected > .chat-avatar.is-public-group-avatar {
  box-shadow: 0 0 0 2px #D96C8A, 0 0 0 3px rgba(59, 130, 246, .42);
}

#nhChatOverlay .chat-avatar img,
#nhChatOverlay .chat-header-avatar img,
#nhChatOverlay .chat-message-avatar img,
#nhChatOverlay .chat-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

#nhChatOverlay .chat-avatar.is-direct,
#nhChatOverlay .chat-header-avatar.is-direct {
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .08));
  color: #9ec5ff;
}

#nhChatOverlay .chat-avatar-badge.is-group {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--chat-surface);
  color: var(--chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .24);
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

#nhChatOverlay .chat-avatar-badge.is-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 46%), var(--chat-surface);
  opacity: .5;
}

#nhChatOverlay .chat-avatar-badge.is-group i {
  font-size: .48rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

#nhChatOverlay .chat-avatar.is-broadcast,
#nhChatOverlay .chat-header-avatar.is-broadcast {
  background: rgba(245, 158, 11, .1);
  color: var(--chat-accent);
}

#nhChatOverlay .chat-row-main {
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

#nhChatOverlay .chat-row-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#nhChatOverlay .chat-row-title {
  font-size: .93rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-row-pin-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  color: #3b82f6;
  font-size: .76rem;
  vertical-align: 1px;
}

#nhChatOverlay .chat-row-public-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
  color: #D96C8A;
  font-size: .76rem;
  vertical-align: 1px;
}

#nhChatOverlay .chat-row-time {
  font-size: .75rem;
  color: var(--chat-sub);
  flex-shrink: 0;
}

#nhChatOverlay .chat-row-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

#nhChatOverlay .chat-row-join-btn {
  border: 1px solid rgba(206, 27, 39, .22);
  background: rgba(206, 27, 39, .07);
  color: var(--chat-accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

#nhChatOverlay .chat-row-join-btn:active {
  transform: scale(.98);
}

#nhChatOverlay .chat-list-section-divider {
  margin-top: 6px;
  margin-left: 16px;
  margin-right: 16px;
}

#nhChatOverlay .chat-row-subtitle,
#nhChatOverlay .chat-row-preview {
  font-size: .82rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-row-subtitle {
  flex: 1 1 auto;
  min-width: 0;
}

#nhChatOverlay .chat-row-type-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-sub);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .03em;
  vertical-align: middle;
}

#nhChatOverlay .chat-row-preview {
  margin-top: 2px;
}

#nhChatOverlay .chat-row-preview-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  font-size: .78rem;
  line-height: 1;
  vertical-align: middle;
}

#nhChatOverlay .chat-row-preview-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  font-size: .72rem;
  line-height: 1;
  vertical-align: middle;
}

#nhChatOverlay .chat-row-preview-status.is-sent {
  color: currentColor;
}

#nhChatOverlay .chat-row-preview-status.is-delivered {
  color: #94a3b8;
}

#nhChatOverlay .chat-row-preview-status.is-read {
  color: #22c55e;
}

#nhChatOverlay .chat-row-preview.is-typing,
#nhChatOverlay .chat-header-meta div.is-typing {
  color: #22c55e;
  font-style: italic;
}

#nhChatOverlay .chat-row-unread {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  margin-left: 8px;
}

#nhChatOverlay .chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@media (min-width: 861px) {
  #nhChatOverlay .chat-desktop-rail {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    background: var(--chat-surface);
    border-right: 1px solid var(--chat-border);
  }

  #nhChatOverlay .chat-sidebar {
    width: calc(35% - 64px);
    flex: 0 0 calc(35% - 64px);
    max-width: calc(35% - 64px);
    border-right: 1px solid color-mix(in srgb, var(--chat-border) 88%, transparent);
  }

  #nhChatOverlay .chat-main {
    flex: 0 0 65%;
    max-width: 65%;
  }

  #nhChatOverlay .nhc-bar {
    min-height: 54px;
  }

  #nhChatOverlay .chat-sidebar-top {
    padding-top: 12px;
  }

  #nhChatOverlay .chat-list-filters-row {
    padding-top: 2px;
  }

  #nhChatOverlay .chat-desktop-rail-top,
  #nhChatOverlay .chat-desktop-rail-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #nhChatOverlay .chat-desktop-rail-top {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #nhChatOverlay .chat-desktop-rail-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    margin-bottom: auto;
  }

  #nhChatOverlay .chat-desktop-rail-bottom {
    margin-top: auto;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  #nhChatOverlay .chat-desktop-rail-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--chat-surface-2) 76%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-border) 88%, transparent);
  }

  #nhChatOverlay .chat-desktop-rail-compose {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #nhChatOverlay .chat-desktop-rail-btn {
    position: relative;
    border: none;
    background: transparent;
    color: var(--chat-sub);
    cursor: pointer;
    transition: color .16s ease, transform .16s ease, background .16s ease;
  }

  #nhChatOverlay .chat-desktop-rail-btn[data-rail-tooltip]::after,
  #nhChatOverlay .chat-desktop-rail-user[data-rail-tooltip]::after {
    content: attr(data-rail-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .94);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 14;
  }

  #nhChatOverlay .chat-desktop-rail-user {
    position: relative;
  }

  #nhChatOverlay .chat-desktop-rail-btn[data-rail-tooltip]:hover::after,
  #nhChatOverlay .chat-desktop-rail-btn[data-rail-tooltip]:focus-visible::after,
  #nhChatOverlay .chat-desktop-rail-user[data-rail-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  #nhChatOverlay .chat-desktop-rail-btn:hover {
    color: var(--chat-accent);
    background: var(--chat-surface-2);
  }

  #nhChatOverlay .chat-desktop-rail-btn:active {
    transform: scale(.94);
  }

  #nhChatOverlay .chat-desktop-rail-btn i {
    font-size: 1rem;
    line-height: 1;
  }

  #nhChatOverlay .chat-desktop-rail-icon-image {
    width: 19px;
    height: 19px;
    object-fit: contain;
    display: block;
  }

  #nhChatOverlay .chat-desktop-rail-btn.is-active {
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-accent) 18%, transparent);
  }

  #nhChatOverlay .chat-desktop-rail-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, .94);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(220,38,38,.24);
  }

  #nhChatOverlay .chat-desktop-rail-badge[hidden] {
    display: none !important;
  }

  #nhChatOverlay .chat-desktop-rail-badge.is-live-indicator {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    top: 4px;
    right: 4px;
    background: #22c55e;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-surface-2) 94%, transparent), 0 0 12px rgba(34, 197, 94, .38);
  }

  #nhChatOverlay .chat-desktop-rail-user-avatar {
    position: relative;
    overflow: hidden;
    background: var(--chat-surface-2);
    color: var(--chat-text-strong);
    font-size: .82rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--chat-border), 0 6px 16px rgba(15, 23, 42, .08);
  }

  #nhChatOverlay .chat-desktop-rail-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #nhChatOverlay .chat-desktop-rail-user-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid var(--chat-surface);
    box-shadow: 0 0 0 1px rgba(34,197,94,.22);
  }

  #nhChatOverlay #nhcCloseBtn,
  #nhChatOverlay .chat-sidebar-fab,
  #nhChatOverlay .chat-tabs {
    display: none !important;
  }
}

#nhChatOverlay .chat-main-header {
  min-height: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

#nhChatOverlay .chat-main-header.is-idle {
  background: transparent;
  border-bottom: none;
}

#nhChatOverlay .chat-current-date-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  box-shadow: none;
  background: color-mix(in srgb, var(--chat-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  color: var(--chat-sub);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

#nhChatOverlay .chat-current-date-pill.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#nhChatOverlay .chat-thread.has-pinned-strip .chat-current-date-pill {
  top: 52px;
}

#nhChatOverlay .chat-main-header.is-idle .chat-back-btn,
#nhChatOverlay .chat-main-header.is-idle .chat-header-avatar,
#nhChatOverlay .chat-main-header.is-idle .chat-header-meta {
  display: none;
}

#nhChatOverlay .chat-main-header.is-idle .chat-header-actions {
  margin-left: auto;
}

#nhChatOverlay .chat-back-btn {
  display: none;
  padding: 0;
  font-size: 1.18rem;
}
#nhChatOverlay .chat-back-btn i {
  font-size: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#nhChatOverlay .chat-header-meta {
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-header-selection-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 38px;
  min-height: 38px;
}

#nhChatOverlay .chat-header-meta h1 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--chat-text-strong);
  font-family: var(--chat-font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-header-meta div {
  margin-top: 1px;
  min-height: 1.05em;
  font-size: .82rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-header-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

#nhChatOverlay .chat-header-actions .chat-icon-btn {
  padding: 0;
  font-size: 1.18rem;
}
#nhChatOverlay .chat-header-actions .chat-icon-btn i {
  font-size: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#nhChatOverlay .chat-main-header.has-public-group .chat-header-actions .chat-icon-btn,
#nhChatOverlay .chat-main-header.has-public-group .chat-thread-select-actions .chat-header-action-btn,
#nhChatOverlay .chat-main-header.has-public-group .chat-header-avatar.is-selection-toggle,
#nhChatOverlay .chat-main-header.has-public-group .chat-back-btn {
  color: #D96C8A;
}

#nhChatOverlay .chat-main-header.has-public-group .chat-header-actions .chat-icon-btn:hover,
#nhChatOverlay .chat-main-header.has-public-group .chat-thread-select-actions .chat-header-action-btn:hover,
#nhChatOverlay .chat-main-header.has-public-group .chat-header-avatar.is-selection-toggle:hover,
#nhChatOverlay .chat-main-header.has-public-group .chat-back-btn:hover {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-main-header.is-selection-mode {
  background: rgba(59, 130, 246, .08);
}

#nhChatOverlay .chat-main-header.is-selection-mode .chat-header-meta {
  display: flex;
  align-items: center;
  min-height: 38px;
}

#nhChatOverlay .chat-pinned-strip {
  width: 100%;
  min-height: 40px;
  border: none;
  border-bottom: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface) 94%, var(--chat-surface-2) 6%);
  color: var(--chat-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
  flex-shrink: 0;
}

#nhChatOverlay .chat-pinned-strip:hover {
  background: color-mix(in srgb, var(--chat-surface) 88%, var(--chat-surface-2) 12%);
}

#nhChatOverlay .chat-pinned-strip-icon {
  width: 16px;
  flex: 0 0 16px;
  color: var(--chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-pinned-strip-text {
  flex: 1;
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-pinned-strip-count {
  flex-shrink: 0;
  font-size: .74rem;
  font-weight: 800;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-header-selection-count {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--chat-text-strong);
  line-height: 1;
}

/* Selection toggle (←) — exactly matches normal chat-header-avatar dimensions */
#nhChatOverlay .chat-header-avatar.is-selection-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--chat-sub);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
#nhChatOverlay .chat-header-avatar.is-selection-toggle:hover { color: var(--chat-accent); }
#nhChatOverlay .chat-header-avatar.is-selection-toggle:active { transform: scale(.92); }
#nhChatOverlay .chat-header-avatar.is-selection-toggle i {
  font-size: 1.18rem;
  line-height: 1;
  pointer-events: none;
}

/* Thread select actions — push to right, match chat-header-actions gap & sizing */
#nhChatOverlay .chat-thread-select-actions {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Each action button — matches chat-icon-btn in header context: 34×34px, 1.18rem */
#nhChatOverlay .chat-thread-select-actions .chat-header-action-btn {
  padding: 0 !important;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9px;
  box-shadow: none;
  color: var(--chat-sub);
  font-size: 1.18rem;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
#nhChatOverlay .chat-thread-select-actions .chat-header-action-btn:hover { color: var(--chat-accent); }
#nhChatOverlay .chat-thread-select-actions .chat-header-action-btn:active { transform: scale(.92); }
#nhChatOverlay .chat-thread-select-actions .chat-header-action-btn i {
  font-size: 1.18rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Pin Duration Modal (Mobile-First Native Design) ──────────────────── */
#nhChatOverlay .chat-pin-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#nhChatOverlay .chat-pin-modal[hidden] {
  display: none !important;
}

#nhChatOverlay .chat-pin-modal .chat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#nhChatOverlay .chat-pin-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.24);
  overflow: hidden;
  padding: 0 0 max(16px,env(safe-area-inset-bottom));
}

/* Handle pill for dragging (mobile native pattern) */
#nhChatOverlay .chat-pin-modal-dialog::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--chat-border-2);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
  opacity: .6;
}

#nhChatOverlay .chat-pin-modal .chat-modal-head {
  padding: 8px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--chat-surface);
}

#nhChatOverlay .chat-pin-modal .chat-modal-head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

#nhChatOverlay .chat-pin-modal .chat-modal-head-copy strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  letter-spacing: -.01em;
}

#nhChatOverlay .chat-pin-modal .chat-modal-head-copy p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-pin-modal .chat-modal-body {
  padding: 4px 14px 14px;
  overflow: visible;
}

#nhChatOverlay .chat-pin-duration-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nhChatOverlay .chat-pin-duration-option {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 1.5px solid transparent;
  background: var(--chat-surface-2);
  color: var(--chat-text);
  border-radius: 13px;
  padding: 15px 16px;
  min-height: 58px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  font: inherit;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2,.8,.3,1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

#nhChatOverlay .chat-pin-duration-option::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--chat-accent);
  background: var(--chat-accent);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}

#nhChatOverlay .chat-pin-duration-option::before {
  content: '✓';
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: var(--chat-surface);
  font-size: .7rem;
  font-weight: 900;
  z-index: 1;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1) .05s;
}

#nhChatOverlay .chat-pin-duration-option:active {
  transform: scale(.98);
}

#nhChatOverlay .chat-pin-duration-option strong {
  font-size: .9rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  letter-spacing: -.01em;
  transition: color .2s ease;
}

#nhChatOverlay .chat-pin-duration-option span {
  font-size: .75rem;
  line-height: 1.3;
  color: var(--chat-sub);
  transition: color .2s ease;
}

#nhChatOverlay .chat-pin-duration-option.is-selected {
  border-color: var(--chat-accent);
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-accent) 15%, transparent) inset;
}

#nhChatOverlay .chat-pin-duration-option.is-selected::after,
#nhChatOverlay .chat-pin-duration-option.is-selected::before {
  transform: translateY(-50%) scale(1);
}

#nhChatOverlay .chat-pin-duration-option.is-selected strong {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-pin-modal-foot {
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  background: var(--chat-surface);
}

#nhChatOverlay .chat-pin-modal-foot .chat-secondary-btn,
#nhChatOverlay .chat-pin-modal-foot .chat-primary-btn {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: -.01em;
}

#nhChatOverlay .chat-pin-modal-foot .chat-primary-btn {
  background: var(--chat-accent);
  border: none;
  box-shadow: 0 2px 8px rgba(245,158,11,.25);
}

#nhChatOverlay .chat-pin-modal-foot .chat-secondary-btn {
  background: transparent;
  border: 1.5px solid var(--chat-border);
  color: var(--chat-text);
}

#nhChatOverlay .chat-deleted-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chat-sub);
  font-size: .82rem;
  line-height: 1.35;
  font-style: italic;
  min-height: 20px;
}

#nhChatOverlay .chat-deleted-message i {
  opacity: .82;
  font-size: .78rem;
}

#nhChatOverlay .chat-message.is-mine .chat-deleted-message {
  color: color-mix(in srgb, var(--chat-text-strong) 56%, var(--chat-sub));
}

/* Desktop & Tablet (≥861px) - Center modal */
@media (min-width: 861px) {
  #nhChatOverlay .chat-pin-modal {
    align-items: center;
    padding: 20px;
  }

  #nhChatOverlay .chat-pin-modal-dialog {
    width: min(400px,100%);
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,.32);
    padding-bottom: 16px;
  }

  #nhChatOverlay .chat-pin-modal-dialog::before {
    display: none;
  }

  #nhChatOverlay .chat-pin-modal .chat-modal-head {
    padding: 16px 18px 14px;
  }

  #nhChatOverlay .chat-pin-modal .chat-modal-head-copy strong {
    font-size: 1rem;
  }

  #nhChatOverlay .chat-pin-modal .chat-modal-head-copy p {
    font-size: .82rem;
  }

  #nhChatOverlay .chat-pin-modal .chat-modal-body {
    padding: 6px 16px 16px;
  }

  #nhChatOverlay .chat-pin-duration-list {
    gap: 9px;
  }

  #nhChatOverlay .chat-pin-duration-option {
    padding: 14px 15px;
    min-height: 64px;
  }

  #nhChatOverlay .chat-pin-duration-option:hover {
    background: var(--chat-surface-3);
    border-color: var(--chat-border-2);
  }

  #nhChatOverlay .chat-pin-modal-foot {
    padding: 12px 16px 0;
    flex-direction: row;
    justify-content: flex-end;
  }

  #nhChatOverlay .chat-pin-modal-foot .chat-secondary-btn,
  #nhChatOverlay .chat-pin-modal-foot .chat-primary-btn {
    width: auto;
    min-width: 90px;
    min-height: 44px;
  }
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-pin-modal .chat-modal-backdrop {
    background: rgba(15,23,42,.35);
  }

  #nhChatOverlay .chat-pin-modal-dialog {
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }

  #nhChatOverlay .chat-pin-modal-dialog::before {
    background: rgba(15,22,38,.2);
  }

  #nhChatOverlay .chat-pin-duration-option.is-selected {
    background: color-mix(in srgb, var(--chat-accent) 10%, var(--chat-surface-2));
  }

  @media (min-width: 861px) {
    #nhChatOverlay .chat-pin-modal-dialog {
      box-shadow: 0 12px 48px rgba(0,0,0,.16);
    }
  }
}

@media (max-width: 860px) {
  #nhChatOverlay .chat-main-header.is-selection-mode .chat-header-avatar.is-selection-toggle {
    display: none;
  }
}

@media (min-width: 861px) {
  #nhChatOverlay,
  #nhChatOverlay * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(140, 160, 191, .52) transparent !important;
  }

  #nhChatOverlay ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-track {
    background: transparent !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-thumb {
    background: rgba(140, 160, 191, .52) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, .56) !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-corner {
    background: transparent !important;
  }
}

@media (min-width: 861px) and (prefers-color-scheme: light) {
  #nhChatOverlay,
  #nhChatOverlay * {
    scrollbar-color: rgba(100, 116, 139, .42) transparent !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .42) !important;
  }

  #nhChatOverlay ::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, .42) !important;
  }
}

#nhChatOverlay .chat-header-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#nhChatOverlay .chat-header-action-btn[disabled] {
  opacity: .56;
  cursor: default;
}

#nhChatOverlay .chat-header-call-menu {
  right: 0;
  top: calc(100% + 8px);
}

#nhChatOverlay .chat-dropdown-item.is-disabled,
#nhChatOverlay .chat-dropdown-item:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#nhChatOverlay .chat-dropdown-item:disabled:hover {
  background: transparent;
  color: var(--chat-text);
}

#nhChatOverlay .chat-live-state {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: .35em;
  width: auto;
  height: auto;
  background: transparent;
  pointer-events: none;
}

#nhChatOverlay .chat-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--nh-bg, #0f172a);
  animation: chatLivePulse 1.8s ease-in-out infinite;
}

#nhChatOverlay .chat-live-label {
  display: none;
}

#nhChatOverlay .chat-live-state.is-live .chat-live-dot {
  background: #22c55e;
}

#nhChatOverlay .chat-live-state.is-connecting .chat-live-dot {
  background: #f59e0b;
}

#nhChatOverlay .chat-live-state.is-offline .chat-live-dot,
#nhChatOverlay .chat-live-state.is-idle .chat-live-dot {
  background: #94a3b8;
}

@keyframes chatLivePulse {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}

#nhChatOverlay .chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

#nhChatOverlay .chat-thread {
  position: relative;
}

#nhChatOverlay .chat-empty-panel {
  width: min(100%, 720px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 92%, transparent), color-mix(in srgb, var(--chat-surface-2) 94%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-border) 82%, transparent);
}

#nhChatOverlay .chat-empty-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-surface-3) 88%, transparent);
  color: var(--chat-sub);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#nhChatOverlay .chat-empty-eyebrow i {
  color: var(--chat-accent);
  font-size: .78rem;
}

#nhChatOverlay .chat-empty-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

#nhChatOverlay .chat-empty-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 10px 24px rgba(15, 23, 42, .12));
}

#nhChatOverlay .chat-empty-copy {
  min-width: 0;
}

#nhChatOverlay .chat-empty h2 {
  margin: 0 0 8px;
  font-family: var(--chat-font-display);
  font-size: 1.36rem;
  color: var(--chat-text-strong);
  text-align: left;
}

#nhChatOverlay .chat-empty p {
  margin: 0;
  color: var(--chat-sub);
  font-size: .83rem;
  line-height: 1.55;
  text-align: left;
}

#nhChatOverlay .chat-empty-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#nhChatOverlay .chat-empty-capability {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--chat-surface) 76%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-border) 82%, transparent);
}

#nhChatOverlay .chat-empty-capability-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--chat-surface-3) 90%, transparent);
  color: var(--chat-accent);
  font-size: .96rem;
}

#nhChatOverlay .chat-empty-capability-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nhChatOverlay .chat-empty-capability-copy strong {
  font-size: .84rem;
  font-weight: 800;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-empty-capability-copy span {
  color: var(--chat-sub);
  font-size: .76rem;
  line-height: 1.5;
}

#nhChatOverlay .chat-empty-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--chat-sub);
  font-size: .78rem;
  font-weight: 700;
}

#nhChatOverlay .chat-empty-footer i {
  color: var(--chat-accent);
  font-size: .82rem;
}

@media (max-width: 980px) {
  #nhChatOverlay .chat-empty-panel {
    width: min(100%, 640px);
    padding: 20px;
  }

  #nhChatOverlay .chat-empty-capabilities {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #nhChatOverlay .chat-empty {
    padding: 18px;
  }

  #nhChatOverlay .chat-empty-panel {
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
  }

  #nhChatOverlay .chat-empty-hero {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  #nhChatOverlay .chat-empty-logo {
    width: 56px;
    height: 56px;
  }

  #nhChatOverlay .chat-empty h2 {
    font-size: 1.16rem;
  }

  #nhChatOverlay .chat-empty p {
    font-size: .78rem;
  }
}

#nhChatOverlay .chat-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

#nhChatOverlay .chat-thread.is-entering,
#nhChatOverlay .chat-empty.is-entering {
  animation: chatSurfaceEnter .2s cubic-bezier(.22, .61, .36, 1);
}

@keyframes chatSurfaceEnter {
  0% {
    opacity: .5;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#nhChatOverlay .chat-messages {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Mobile: bubble spacing ── */
@media (max-width: 480px) {
  #nhChatOverlay .chat-messages {
    padding: 10px;
    padding-bottom: 20px;
    gap: 6px;
  }
  #nhChatOverlay .chat-message {
    gap: 6px;
  }
  #nhChatOverlay .chat-bubble-wrap {
    max-width: min(82%, 680px);
  }
  #nhChatOverlay .chat-bubble {
    padding: 9px 10px;
  }
}

#nhChatOverlay .chat-day-break {
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-sub);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 6px 0 2px;
}

#nhChatOverlay .chat-unread-break {
  align-self: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  border: 1px solid rgba(245, 158, 11, .28);
  color: var(--chat-accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 8px 0 4px;
}

#nhChatOverlay .chat-list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

#nhChatOverlay .chat-list-skeleton-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
}

#nhChatOverlay .chat-list-skeleton-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chat-surface), var(--chat-surface-2), var(--chat-surface));
  background-size: 200% 100%;
  animation: chatSkeletonPulse 1.2s ease-in-out infinite;
}

#nhChatOverlay .chat-list-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

#nhChatOverlay .chat-list-skeleton-top,
#nhChatOverlay .chat-list-skeleton-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#nhChatOverlay .chat-list-skeleton-pill {
  width: 26px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chat-surface-2), var(--chat-surface-3), var(--chat-surface-2));
  background-size: 200% 100%;
  animation: chatSkeletonPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

#nhChatOverlay .chat-skeleton-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#nhChatOverlay .chat-skeleton-row.is-mine {
  justify-content: flex-end;
}

#nhChatOverlay .chat-skeleton-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--chat-surface), var(--chat-surface-2), var(--chat-surface));
  background-size: 200% 100%;
  animation: chatSkeletonPulse 1.2s ease-in-out infinite;
}

#nhChatOverlay .chat-skeleton-bubble {
  width: min(72%, 560px);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nhChatOverlay .chat-skeleton-meta {
  width: 54px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chat-surface-2), var(--chat-surface-3), var(--chat-surface-2));
  background-size: 200% 100%;
  animation: chatSkeletonPulse 1.2s ease-in-out infinite;
  align-self: flex-end;
  opacity: .8;
}

#nhChatOverlay .chat-skeleton-row.is-mine .chat-skeleton-bubble {
  border-bottom-right-radius: 5px;
}

#nhChatOverlay .chat-skeleton-row:not(.is-mine) .chat-skeleton-bubble {
  border-bottom-left-radius: 5px;
}

#nhChatOverlay .chat-skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--chat-surface-2), var(--chat-surface-3), var(--chat-surface-2));
  background-size: 200% 100%;
  animation: chatSkeletonPulse 1.2s ease-in-out infinite;
}

#nhChatOverlay .chat-skeleton-line.is-wide {
  width: 82%;
}

#nhChatOverlay .chat-skeleton-line.is-short {
  width: 46%;
}

@keyframes chatSkeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes chatPaginationFadeIn {
  0% {
    opacity: .18;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#nhChatOverlay .chat-message.is-edge-loading,
#nhChatOverlay .chat-day-break.is-edge-loading,
#nhChatOverlay .chat-system-row.is-edge-loading {
  animation: chatPaginationFadeIn .22s ease;
}

#nhChatOverlay .chat-message {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  --chat-reply-swipe-offset: 0px;
  transform: translateX(var(--chat-reply-swipe-offset));
  transition: transform .16s ease;
  will-change: transform;
}

#nhChatOverlay .chat-message.has-reactions {
  margin-bottom: 8px;
}

#nhChatOverlay .chat-message.is-mine {
  justify-content: flex-end;
}

#nhChatOverlay .chat-message.is-swipe-dragging {
  transition: none;
}

#nhChatOverlay .chat-message.is-jump-highlight .chat-bubble {
  animation: chatJumpHighlight 1.35s ease-in-out 2;
}

#nhChatOverlay .chat-message.is-selected .chat-bubble {
  background: rgba(59, 130, 246, .18);
  border-color: rgba(59, 130, 246, .40);
}

#nhChatOverlay .chat-message.is-selected {
  background: rgba(59, 130, 246, .12);
  border-radius: 18px;
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-bubble {
  background: rgba(59, 130, 246, .26);
  border-color: rgba(96, 165, 250, .46);
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet {
  background: rgba(59, 130, 246, .10);
  border-left-color: rgba(59, 130, 246, .78);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .16);
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet-sender {
  color: #2563eb;
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet-text {
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet {
  background: rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-sender {
  color: rgba(255,255,255,.96);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-text {
  color: rgba(255,255,255,.84);
}


@keyframes chatJumpHighlight {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
    border-color: var(--chat-border);
  }
  35% {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .34), 0 12px 26px rgba(245, 158, 11, .18);
    border-color: rgba(245, 158, 11, .5);
  }
}

#nhChatOverlay .chat-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--chat-surface-3);
  border: 1px solid var(--chat-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  color: var(--chat-text-strong);
  overflow: hidden;
}

#nhChatOverlay .chat-typing-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  align-self: flex-start;
  margin-bottom: 6px;
  scroll-margin-bottom: 18px;
}

#nhChatOverlay .chat-typing-bubble {
  min-width: 62px;
  padding: 10px 12px;
  border-radius: 16px 16px 16px 5px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  box-shadow: var(--chat-shadow-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
}

#nhChatOverlay .chat-typing-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .95);
  box-shadow: 0 0 0 0 rgba(148, 163, 184, .24);
  transform-origin: center;
  animation: chatTypingBounce .96s ease-in-out infinite;
}

#nhChatOverlay .chat-typing-dot:nth-child(2) {
  animation-delay: .14s;
}

#nhChatOverlay .chat-typing-dot:nth-child(3) {
  animation-delay: .28s;
}

@keyframes chatTypingBounce {
  0%, 70%, 100% {
    transform: translateY(0) scale(.78);
    opacity: .28;
    box-shadow: 0 0 0 0 rgba(148, 163, 184, 0);
  }
  35% {
    transform: translateY(-6px) scale(1.08);
    opacity: 1;
    box-shadow: 0 6px 14px 0 rgba(148, 163, 184, .18);
  }
}

#nhChatOverlay .chat-bubble-wrap {
  max-width: min(76%, 680px);
}

#nhChatOverlay .chat-bubble {
  background: var(--chat-surface);
  color: var(--chat-text-strong);
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 9px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}

#nhChatOverlay .chat-message.is-mine .chat-bubble {
  background: linear-gradient(135deg, #1c3560, #152a4a);
  border-color: rgba(59, 130, 246, .28);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 5px;
  color: #e8f0ff;
}

@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-bubble {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  }
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-mine .chat-bubble {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #1e3a5f;
    border-color: #bfdbfe;
  }
}

#nhChatOverlay .chat-bubble-sender {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#nhChatOverlay .chat-forwarded-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--chat-sub);
  letter-spacing: .01em;
}

#nhChatOverlay .chat-forwarded-flag i {
  font-size: .72rem;
  opacity: .9;
}

#nhChatOverlay .chat-message.is-mine .chat-forwarded-flag {
  color: rgba(255,255,255,.76);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-mine .chat-forwarded-flag {
    color: #466286;
  }
}

#nhChatOverlay .chat-message-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#nhChatOverlay .chat-message-reply-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-sub);
  padding: 0;
  font-size: .76rem;
  line-height: 1;
  border-radius: 999px;
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

#nhChatOverlay .chat-message-reply-btn:hover {
  color: var(--chat-accent);
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
}

#nhChatOverlay .chat-message-side-actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 4;
}

#nhChatOverlay .chat-message-side-actions.is-left {
  right: -38px;
  left: auto;
}

#nhChatOverlay .chat-message-side-actions.is-right {
  left: -38px;
  right: auto;
}

#nhChatOverlay .chat-message-reaction-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-sub);
  padding: 0;
  font-size: .76rem;
  line-height: 1;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

#nhChatOverlay .chat-message-reaction-btn:hover {
  color: var(--chat-accent);
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
}

@media (max-width: 767px) {
  #nhChatOverlay .chat-message-reaction-btn {
    display: none !important;
  }
}

#nhChatOverlay .chat-reply-snippet {
  margin-bottom: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  border-left: 3px solid var(--chat-accent);
  background: var(--chat-surface-2);
  box-shadow: inset 0 0 0 1px var(--chat-border);
  cursor: pointer;
}

#nhChatOverlay .chat-message.is-mine .chat-reply-snippet {
  background: rgba(255,255,255,.12);
  border-left-color: rgba(255,255,255,.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

#nhChatOverlay .chat-reply-snippet.is-unavailable {
  cursor: default;
  opacity: .9;
}

#nhChatOverlay .chat-reply-snippet-sender {
  font-size: .72rem;
  font-weight: 700;
  color: var(--chat-accent);
  margin-bottom: 2px;
}

#nhChatOverlay .chat-message.is-mine .chat-reply-snippet-sender {
  color: rgba(255,255,255,.92);
}

#nhChatOverlay .chat-reply-snippet-text {
  font-size: .8rem;
  line-height: 1.38;
  color: var(--chat-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-message.is-mine .chat-reply-snippet-text {
  color: rgba(255,255,255,.78);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet {
    background: rgba(219, 234, 254, .92);
    border-left-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
  }
  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet-sender { color: #1d4ed8; }
  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet-text { color: #0f172a; }
  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet {
    background: rgba(255, 243, 219, .96);
    border-left-color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180,83,9,.14);
  }
  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-sender { color: #92400e; }
  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-text { color: #1f2937; }
  #nhChatOverlay .chat-reply-snippet {
    background: rgba(255,255,255,.84);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.26);
  }
  #nhChatOverlay .chat-message.is-mine .chat-reply-snippet {
    background: rgba(255,248,235,.92);
    border-left-color: #d97706;
    box-shadow: inset 0 0 0 1px rgba(217,119,6,.18);
  }
  #nhChatOverlay .chat-reply-snippet-sender { color: #b45309; }
  #nhChatOverlay .chat-message.is-mine .chat-reply-snippet-sender { color: #92400e; }
  #nhChatOverlay .chat-reply-snippet-text { color: #1f2937; }
  #nhChatOverlay .chat-message.is-mine .chat-reply-snippet-text { color: #1f2937; }
}

@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-video-meta-sub {
    color: rgba(226,232,240,.78);
  }
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet {
  background: rgba(59, 130, 246, .10);
  border-left-color: rgba(59, 130, 246, .78);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .16);
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet-sender {
  color: #2563eb;
}

#nhChatOverlay .chat-message.is-selected .chat-reply-snippet-text {
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet {
  background: rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-sender {
  color: rgba(255,255,255,.96);
}

#nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-text {
  color: rgba(255,255,255,.84);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet {
    background: rgba(219, 234, 254, .92);
    border-left-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
  }

  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet-sender {
    color: #1d4ed8;
  }

  #nhChatOverlay .chat-message.is-selected .chat-reply-snippet-text {
    color: #0f172a;
  }

  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet {
    background: rgba(255, 243, 219, .96);
    border-left-color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180,83,9,.14);
  }

  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-sender {
    color: #92400e;
  }

  #nhChatOverlay .chat-message.is-selected.is-mine .chat-reply-snippet-text {
    color: #1f2937;
  }
}

#nhChatOverlay .chat-sender-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--chat-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-sender-role {
  font-size: .72rem;
  font-weight: 500;
  color: var(--chat-sub);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

#nhChatOverlay .chat-bubble-text {
  font-size: .93rem;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
}

#nhChatOverlay .chat-bubble-text p,
#nhChatOverlay .chat-bubble-text ul,
#nhChatOverlay .chat-bubble-text ol,
#nhChatOverlay .chat-bubble-text blockquote,
#nhChatOverlay .chat-bubble-text pre {
  margin: 0 0 8px;
}

#nhChatOverlay .chat-bubble-text p:last-child,
#nhChatOverlay .chat-bubble-text ul:last-child,
#nhChatOverlay .chat-bubble-text ol:last-child,
#nhChatOverlay .chat-bubble-text blockquote:last-child,
#nhChatOverlay .chat-bubble-text pre:last-child {
  margin-bottom: 0;
}

#nhChatOverlay .chat-bubble-text ul,
#nhChatOverlay .chat-bubble-text ol {
  padding-left: 18px;
}

#nhChatOverlay .chat-bubble-text blockquote {
  padding-left: 10px;
  border-left: 3px solid rgba(37,99,235,.35);
  color: var(--chat-sub);
}

#nhChatOverlay .chat-message.is-mine .chat-bubble-text blockquote {
  border-left-color: rgba(191,219,254,.5);
  color: rgba(255,255,255,.76);
}

#nhChatOverlay .chat-bubble-text code {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--chat-surface-3);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .85em;
}

#nhChatOverlay .chat-bubble-text pre {
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--chat-surface-3);
  overflow-x: auto;
}

#nhChatOverlay .chat-bubble-text pre code {
  display: block;
  padding: 0;
  background: transparent;
}

#nhChatOverlay .chat-message.is-mine .chat-bubble-text code,
#nhChatOverlay .chat-message.is-mine .chat-bubble-text pre {
  background: rgba(255,255,255,.12);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-bubble-text code {
    background: rgba(15,23,42,.07);
    color: #1e3a5f;
  }
  #nhChatOverlay .chat-bubble-text pre {
    background: #e9eef8;
    border: 1px solid #dce3f0;
  }
  #nhChatOverlay .chat-bubble-text blockquote {
    border-left-color: rgba(37,99,235,.4);
    color: #6b7a96;
  }
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text code,
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text pre {
    background: rgba(30,58,95,.1);
    border-color: rgba(30,58,95,.15);
    color: #1e3a5f;
  }
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text blockquote {
    border-left-color: rgba(37,99,235,.35);
    color: #3b5278;
  }
}

#nhChatOverlay .chat-bubble-text a.chat-inline-link {
  color: #60a5fa !important;
  text-decoration: none;
  font-weight: 700;
  word-break: break-all;
}

#nhChatOverlay .chat-bubble-text .chat-member-mention,
#nhChatOverlay .chat-composer-preview .chat-member-mention {
  color: #7dd3fc;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview .chat-member-mention {
  font-weight: inherit;
}

#nhChatOverlay .chat-bubble-text a.chat-member-mention {
  color: #7dd3fc !important;
  text-decoration: underline !important;
  font-weight: 700;
}

#nhChatOverlay .chat-bubble-text a.chat-inline-link:hover {
  text-decoration: underline;
}

#nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-inline-link {
  color: #bfdbfe !important;
}

#nhChatOverlay .chat-message.is-mine .chat-bubble-text .chat-member-mention,
#nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-member-mention {
  color: #dbeafe !important;
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-bubble-text a.chat-inline-link { color: #2563eb !important; }
  #nhChatOverlay .chat-bubble-text .chat-member-mention,
  #nhChatOverlay .chat-bubble-text a.chat-member-mention { color: #1d4ed8 !important; }
  #nhChatOverlay .chat-composer-preview .chat-member-mention { color: #1d4ed8; }
}

#nhChatOverlay .chat-member-sheet-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  background: var(--chat-surface-2);
}

#nhChatOverlay .chat-member-sheet-row {
  min-width: 0;
}

#nhChatOverlay .chat-member-sheet-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: 12px;
}

#nhChatOverlay .chat-member-sheet-row-sub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-member-sheet-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(59, 130, 246, .10);
  color: var(--chat-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: .92rem;
  font-weight: 800;
  flex: 0 0 56px;
}

#nhChatOverlay .chat-member-sheet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#nhChatOverlay .chat-member-sheet-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#nhChatOverlay .chat-member-sheet-side {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

#nhChatOverlay .chat-member-sheet-side-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#nhChatOverlay .chat-member-sheet-side-label {
  color: var(--chat-sub);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#nhChatOverlay .chat-member-sheet-side-value {
  color: var(--chat-text);
  font-size: .77rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nhChatOverlay .chat-member-sheet-name {
  color: var(--chat-text-strong);
  font-size: .96rem;
  font-weight: 800;
  line-height: 1.25;
}

#nhChatOverlay .chat-member-sheet-role {
  color: var(--chat-text);
  font-size: .82rem;
  font-weight: 600;
}

#nhChatOverlay .chat-member-sheet-sub {
  color: var(--chat-sub);
  font-size: .76rem;
  line-height: 1.4;
}

#nhChatOverlay .chat-member-sheet-chip {
  display: inline-flex;
  align-items: center;
  max-width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: var(--chat-accent);
  font-size: .7rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  #nhChatOverlay .chat-member-sheet-row-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #nhChatOverlay .chat-member-sheet-side {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  #nhChatOverlay .chat-member-sheet-side-value {
    white-space: normal;
  }
}

#nhChatOverlay .chat-message-links {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

#nhChatOverlay .chat-message-links.is-collapsed {
  display: none;
}

#nhChatOverlay .chat-links-toggle {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--chat-sub);
  font-size: .78rem;
  font-weight: 700;
}

#nhChatOverlay .chat-links-toggle::before,
#nhChatOverlay .chat-links-toggle::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(148,163,184,.28);
}

#nhChatOverlay .chat-message.is-mine .chat-links-toggle {
  color: rgba(255,255,255,.76);
}

#nhChatOverlay .chat-message.is-mine .chat-links-toggle::before,
#nhChatOverlay .chat-message.is-mine .chat-links-toggle::after {
  background: rgba(255,255,255,.22);
}

#nhChatOverlay .chat-message-links li {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-message-links a {
  color: #60a5fa !important;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  word-break: break-all;
}

#nhChatOverlay .chat-message-links a:hover {
  text-decoration: underline;
}

#nhChatOverlay .chat-message.is-mine .chat-message-links li {
  color: rgba(255,255,255,.72);
}

#nhChatOverlay .chat-message.is-mine .chat-message-links a {
  color: #bfdbfe !important;
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message-links a { color: #1d4ed8 !important; }
  #nhChatOverlay .chat-message.is-mine .chat-message-links a { color: #1d4ed8 !important; }
  #nhChatOverlay .chat-message.is-mine .chat-message-links li { color: #3d4f6e; }
}

#nhChatOverlay .chat-link-preview {
  margin-top: 9px;
  display: block;
  width: min(100%, 320px);
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.9);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#nhChatOverlay .chat-message.is-mine .chat-link-preview {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}

#nhChatOverlay .chat-link-preview-media {
  display: block;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(148,163,184,.08));
  overflow: hidden;
}

#nhChatOverlay .chat-link-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-link-preview-body {
  padding: 10px 12px 11px;
  display: grid;
  gap: 4px;
}

#nhChatOverlay .chat-link-preview-site {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-link-preview-title {
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--chat-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#nhChatOverlay .chat-message.is-mine .chat-link-preview-title {
  color: rgba(255,255,255,.96);
}

#nhChatOverlay .chat-link-preview-desc {
  font-size: .76rem;
  line-height: 1.42;
  color: var(--chat-sub);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#nhChatOverlay .chat-message.is-mine .chat-link-preview-site,
#nhChatOverlay .chat-message.is-mine .chat-link-preview-desc {
  color: rgba(255,255,255,.72);
}

#nhChatOverlay .chat-bubble-text.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#nhChatOverlay .chat-read-more {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--chat-accent);
  font-size: .8rem;
  font-weight: 700;
}

#nhChatOverlay .chat-read-more:hover {
  text-decoration: underline;
}

#nhChatOverlay .chat-bubble-time {
  margin-top: 5px;
  font-size: .72rem;
  color: var(--chat-sub);
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  width: 100%;
  flex-wrap: nowrap;
}

#nhChatOverlay .chat-history-view-only-note {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--chat-sub);
  opacity: .9;
}

#nhChatOverlay .chat-message.is-history-view-only .chat-history-view-only-note {
  cursor: default;
}

#nhChatOverlay .chat-message-info-btn {
  border: 0;
  background: transparent;
  color: var(--chat-sub);
  padding: 0;
  margin: 0 0 0 2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  transition: color .15s ease, transform .12s ease;
}

#nhChatOverlay .chat-message-info-btn:hover {
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-message-info-btn:active {
  transform: scale(.94);
}

#nhChatOverlay .chat-message-time-label {
  display: inline-flex;
  align-items: center;
}

#nhChatOverlay .chat-message-info-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#nhChatOverlay .chat-bubble-wrap {
  position: relative;
  overflow: visible;
}

#nhChatOverlay .chat-message-reactions {
  position: absolute;
  bottom: -11px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: min(220px, 100%);
  z-index: 2;
  transform: translateX(var(--chat-reaction-shift-x, 0px));
}

#nhChatOverlay .chat-message.is-mine .chat-message-reactions {
  left: 10px;
  right: auto;
}

#nhChatOverlay .chat-message:not(.is-mine) .chat-message-reactions {
  right: 10px;
  left: auto;
}

#nhChatOverlay .chat-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 22px;
  padding: 0 8px 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-reaction-chip-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

#nhChatOverlay .chat-message.is-mine .chat-reaction-chip {
  background: rgba(219, 234, 254, .98);
  border-color: rgba(59, 130, 246, .20);
  color: #1e3a5f;
}

#nhChatOverlay .chat-reaction-emoji {
  font-size: .82rem;
  line-height: 1;
}

#nhChatOverlay .chat-reaction-chip-stack .chat-reaction-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: -4px;
}

#nhChatOverlay .chat-reaction-chip-stack .chat-reaction-emoji:first-child {
  margin-left: 0;
}

#nhChatOverlay .chat-reaction-count {
  font-size: .72rem;
  line-height: 1;
  font-weight: 800;
}

#nhChatOverlay .chat-reaction-chip {
  cursor: pointer;
}

#nhChatOverlay .chat-reaction-chip:hover {
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-reaction-chip {
    background: rgba(15, 23, 42, .92);
    border-color: rgba(148, 163, 184, .18);
    color: rgba(226, 232, 240, .96);
  }

  #nhChatOverlay .chat-message.is-mine .chat-reaction-chip {
    background: rgba(30, 41, 59, .96);
    border-color: rgba(96, 165, 250, .20);
    color: rgba(226, 232, 240, .96);
  }
}

#nhChatOverlay .chat-reaction-picker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(calc(-50% + var(--chat-reaction-picker-shift-x, 0px))) translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  box-shadow: var(--chat-shadow);
  z-index: 6;
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}

#nhChatOverlay .chat-reaction-picker.chat-reaction-picker-floating {
  z-index: 18;
}

#nhChatOverlay .chat-reaction-picker.is-hidden {
  display: none;
}

#nhChatOverlay .chat-reaction-picker.is-opening {
  animation: chatReactionPickerIn .18s ease both;
}

#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn {
  animation: chatReactionEmojiWave .72s ease both;
}

#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(1) { animation-delay: .02s; }
#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(2) { animation-delay: .07s; }
#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(3) { animation-delay: .12s; }
#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(4) { animation-delay: .17s; }
#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(5) { animation-delay: .22s; }
#nhChatOverlay .chat-reaction-picker.is-opening .chat-reaction-picker-btn:nth-child(6) { animation-delay: .27s; }

#nhChatOverlay .chat-reaction-picker.is-closing {
  animation: chatReactionPickerOut .16s ease both;
}

#nhChatOverlay .chat-reaction-picker-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
}

#nhChatOverlay .chat-reaction-picker-icon {
  width: 34px;
  height: 34px;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

#nhChatOverlay .chat-reaction-picker-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

#nhChatOverlay .chat-reaction-picker-btn:hover {
  background: rgba(148, 163, 184, .12);
}

#nhChatOverlay .chat-reaction-picker-btn.is-selecting {
  animation: chatReactionEmojiSelect .24s ease both;
}

#nhChatOverlay .chat-reaction-fly {
  position: fixed;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), left .42s cubic-bezier(.2,.8,.2,1), top .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease;
}

#nhChatOverlay .chat-reaction-fly .chat-reaction-picker-icon {
  width: 34px;
  height: 34px;
}

#nhChatOverlay .chat-reaction-detail {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(calc(-50% + var(--chat-reaction-detail-shift-x, 0px)));
  width: max-content;
  min-width: 0;
  max-width: min(340px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  box-shadow: var(--chat-shadow);
  z-index: 7;
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}

#nhChatOverlay .chat-reaction-detail.is-opening {
  animation: chatReactionDetailIn .18s ease both;
}

#nhChatOverlay .chat-reaction-detail.is-closing {
  animation: chatReactionDetailOut .16s ease both;
}

#nhChatOverlay .chat-reaction-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--chat-text-strong);
  font-size: .82rem;
  font-weight: 700;
}

#nhChatOverlay .chat-reaction-detail-title {
  min-width: 0;
  flex: 1 1 auto;
}

#nhChatOverlay .chat-reaction-detail-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-reaction-detail-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#nhChatOverlay .chat-reaction-detail-row {
  font-size: .79rem;
  color: var(--chat-sub);
  line-height: 1.35;
}

#nhChatOverlay .chat-reaction-detail-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--chat-border);
  scrollbar-width: none;
}

#nhChatOverlay .chat-reaction-detail-summary::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-reaction-detail-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .10);
  color: var(--chat-text-strong);
  flex: 0 0 auto;
}

#nhChatOverlay .chat-reaction-detail-summary-item .chat-reaction-emoji {
  font-size: .9rem;
}

#nhChatOverlay .chat-reaction-detail-summary-count {
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

#nhChatOverlay .chat-reaction-detail-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  padding-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#nhChatOverlay .chat-reaction-detail-actions::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-reaction-detail-note {
  margin-top: 7px;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--chat-sub);
  text-align: center;
}

@keyframes chatReactionPickerIn {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--chat-reaction-picker-shift-x, 0px))) translateY(calc(-50% + 8px)) scale(.92);
  }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--chat-reaction-picker-shift-x, 0px))) translateY(-50%) scale(1);
  }
}

@keyframes chatReactionPickerOut {
  0% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--chat-reaction-picker-shift-x, 0px))) translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--chat-reaction-picker-shift-x, 0px))) translateY(calc(-50% + 6px)) scale(.94);
  }
}

@keyframes chatReactionDetailIn {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--chat-reaction-detail-shift-x, 0px))) translateY(8px) scale(.96);
  }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--chat-reaction-detail-shift-x, 0px))) translateY(0) scale(1);
  }
}

@keyframes chatReactionDetailOut {
  0% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--chat-reaction-detail-shift-x, 0px))) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--chat-reaction-detail-shift-x, 0px))) translateY(6px) scale(.97);
  }
}

@keyframes chatReactionEmojiSelect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes chatReactionEmojiWave {
  0% {
    transform: translateY(8px) scale(.88);
    opacity: 0;
  }
  35% {
    transform: translateY(-5px) scale(1.08);
    opacity: 1;
  }
  65% {
    transform: translateY(2px) scale(.98);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#nhChatOverlay .chat-message-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  line-height: 1;
}

#nhChatOverlay .chat-message-status.is-queued {
  color: #94a3b8;
}

#nhChatOverlay .chat-message-status.is-sending {
  color: #f59e0b;
}

#nhChatOverlay .chat-message-status.is-failed {
  color: #ef4444;
}

#nhChatOverlay .chat-message-status.is-sent {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-message-status.is-delivered {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-message-status.is-read {
  color: #22c55e;
}

#nhChatOverlay .chat-message-info-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nhChatOverlay .chat-message-info-modal {
  position: absolute;
  inset: 0;
  z-index: 122;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#nhChatOverlay .chat-message-info-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .52);
}

#nhChatOverlay .chat-message-info-modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 92%;
  border-radius: 22px 22px 0 0;
  background: var(--chat-surface);
  box-shadow: 0 -8px 36px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#nhChatOverlay .chat-message-info-modal-sheet::before {
  content: '';
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--chat-border-2);
  margin: 10px auto 0;
  flex-shrink: 0;
}

#nhChatOverlay .chat-message-info-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-message-info-modal-head-copy {
  min-width: 0;
  flex: 1;
}

#nhChatOverlay .chat-message-info-modal-head-copy h4 {
  margin: 0;
  font-size: .96rem;
  font-weight: 800;
  color: var(--chat-text-strong);
  line-height: 1.3;
}

#nhChatOverlay .chat-message-info-modal-head-copy p {
  margin: 2px 0 0;
  font-size: .74rem;
  color: var(--chat-sub);
  line-height: 1.35;
}

#nhChatOverlay .chat-message-info-modal-close {
  border: 0;
  background: transparent;
  color: var(--chat-sub);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#nhChatOverlay .chat-message-info-modal-close:hover {
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-message-info-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

#nhChatOverlay .chat-message-info-loading,
#nhChatOverlay .chat-message-info-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 38px 12px;
  flex-direction: column;
  text-align: center;
  font-size: .84rem;
}

#nhChatOverlay .chat-message-info-loading {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-message-info-error {
  color: #ef4444;
}

#nhChatOverlay .chat-message-info-sheet-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#nhChatOverlay .chat-message-info-status-card {
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

#nhChatOverlay .chat-message-info-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-message-info-status-row:last-child {
  border-bottom: 0;
}

#nhChatOverlay .chat-message-info-status-row.is-detail {
  padding-top: 10px;
  padding-bottom: 10px;
}

#nhChatOverlay .chat-message-info-status-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#nhChatOverlay .chat-message-info-status-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--chat-text);
  line-height: 1.35;
}

#nhChatOverlay .chat-message-info-status-value {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--chat-text-strong);
  text-align: right;
  word-break: break-word;
}

#nhChatOverlay .chat-message-info-sheet-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nhChatOverlay .chat-message-info-sheet-section.is-compact {
  gap: 6px;
}

#nhChatOverlay .chat-message-info-sheet-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--chat-sub);
  text-transform: uppercase;
  letter-spacing: .07em;
}

#nhChatOverlay .chat-message-info-sheet-text {
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  border-radius: 14px;
  padding: 12px 13px;
  font-size: .82rem;
  color: var(--chat-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

#nhChatOverlay .chat-message-info-person {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  background: var(--chat-surface-2);
}

#nhChatOverlay .chat-message-info-person-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chat-surface-3);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}

#nhChatOverlay .chat-message-info-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#nhChatOverlay .chat-message-info-person-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#nhChatOverlay .chat-message-info-person-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  line-height: 1.3;
}

#nhChatOverlay .chat-message-info-person-role {
  font-size: .72rem;
  color: var(--chat-sub);
  line-height: 1.3;
}

#nhChatOverlay .chat-message-info-person-status {
  font-size: .72rem;
  color: var(--chat-text);
  text-align: right;
  white-space: nowrap;
}

#nhChatOverlay .vd-empty {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-sub);
  font-size: .78rem;
  text-align: center;
}

#nhChatOverlay .chat-message-info-preview {
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  border-radius: 14px;
  padding: 10px 12px;
  pointer-events: none;
  user-select: none;
}

#nhChatOverlay .chat-message-info-preview .chat-bubble-sender {
  margin-bottom: 6px;
}

#nhChatOverlay .chat-message-info-preview .chat-message-reply {
  margin-bottom: 8px;
}

#nhChatOverlay .chat-message-info-preview * {
  pointer-events: none !important;
}

#nhChatOverlay .chat-message-info-preview-note {
  margin-top: 6px;
  font-size: .7rem;
  color: var(--chat-sub);
  text-align: right;
}

#nhChatOverlay .chat-file-preview-card.is-drive {
  border-color: rgba(30, 64, 175, .18);
}

#nhChatOverlay .chat-drive-access-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

#nhChatOverlay .chat-drive-access-chip {
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-3);
  color: var(--chat-text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .68rem;
  line-height: 1.2;
  cursor: pointer;
}

#nhChatOverlay .chat-drive-access-chip.is-active {
  background: rgba(37, 99, 235, .12);
  border-color: rgba(37, 99, 235, .35);
  color: #2563eb;
}

#nhChatOverlay .chat-file-preview-card-note.is-warn {
  color: #b45309;
}

@media (min-width: 600px) {
  #nhChatOverlay .chat-message-info-modal {
    align-items: center;
  }

  #nhChatOverlay .chat-message-info-modal-sheet {
    border-radius: 20px;
    max-height: 88%;
  }

  #nhChatOverlay .chat-message-info-modal-sheet::before {
    display: none;
  }
}

@media (max-width: 420px) {
  #nhChatOverlay .chat-message-info-status-row {
    align-items: flex-start;
  }

  #nhChatOverlay .chat-message-info-status-main {
    flex: 1 1 auto;
  }

  #nhChatOverlay .chat-message-info-status-value {
    max-width: 44%;
  }
}

#nhChatOverlay .chat-system-row {
  align-self: center;
  max-width: 90%;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--chat-sub);
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#nhChatOverlay .chat-system-row.is-public-join {
  border-color: rgba(217, 108, 138, .32);
  box-shadow: 0 8px 18px rgba(217, 108, 138, .10);
}

#nhChatOverlay .chat-system-row.is-public-join i {
  color: #D96C8A;
}

#nhChatOverlay .chat-system-row i {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-system-row.has-action {
  justify-content: space-between;
  gap: 12px;
}

#nhChatOverlay .chat-system-row-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#nhChatOverlay .chat-system-jump {
  border: 0;
  background: transparent;
  color: var(--chat-accent);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer {
  border-top: 0;
  background: transparent;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  flex-shrink: 0;
  margin-bottom: var(--chat-keyboard-offset);
}

#nhChatOverlay .chat-composer-disabled-note {
  margin: 8px 10px 10px;
  padding: 11px 14px;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  background: var(--chat-surface);
  color: var(--chat-sub);
  font-size: .84rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#nhChatOverlay .chat-composer-disabled-note span {
  min-width: 0;
  flex: 1 1 auto;
}

#nhChatOverlay .chat-composer-disabled-action {
  border: 0;
  background: transparent;
  color: var(--chat-accent);
  font-size: .82rem;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

#nhChatOverlay .chat-composer-disabled-action:hover {
  color: var(--chat-accent-2);
}

#nhChatOverlay .chat-dropdown-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--chat-border);
}

#nhChatOverlay .chat-template-card {
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#nhChatOverlay .chat-reply-bar {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  background: var(--chat-surface);
}

#nhChatOverlay .chat-reply-bar-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#nhChatOverlay .chat-reply-bar-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--chat-accent);
}

#nhChatOverlay .chat-reply-bar-text {
  font-size: .83rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-reply-bar-close {
  flex-shrink: 0;
}

#nhChatOverlay .chat-template-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-template-card-head strong {
  font-size: .92rem;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-template-card-body {
  padding: 0;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#nhChatOverlay .chat-template-list {
  display: grid;
  gap: 8px;
  padding: 10px 0 12px;
}

@media (min-width: 980px) {
  #nhChatOverlay .chat-template-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#nhChatOverlay .chat-gif-card {
  margin-bottom: 10px;
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  background: var(--chat-surface-2);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  overflow: hidden;
}

#nhChatOverlay .chat-gif-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
}

#nhChatOverlay .chat-gif-card-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 0 12px;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .10);
  color: var(--chat-sub);
}

#nhChatOverlay .chat-gif-card-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--chat-text);
  padding: 0;
}

#nhChatOverlay .chat-gif-card-search input::placeholder {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-gif-card-body {
  padding: 0 12px 10px;
}

#nhChatOverlay .chat-gif-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#nhChatOverlay .chat-gif-item {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

#nhChatOverlay .chat-gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: rgba(148, 163, 184, .12);
}

#nhChatOverlay .chat-gif-item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, .48));
  pointer-events: none;
}

#nhChatOverlay .chat-gif-item:hover {
  transform: translateY(-1px);
}

#nhChatOverlay .chat-gif-item:active {
  transform: scale(.98);
}

#nhChatOverlay .chat-gif-item-label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  z-index: 1;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

#nhChatOverlay .chat-gif-empty,
#nhChatOverlay .chat-gif-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-sub);
  font-size: .86rem;
  text-align: center;
}

#nhChatOverlay .chat-gif-card-foot {
  padding: 0 12px 10px;
  color: var(--chat-sub);
  font-size: .72rem;
  text-align: right;
}

#nhChatOverlay .chat-slash-card {
  margin-bottom: 10px;
  position: relative;
  z-index: 60;
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  background: var(--chat-surface-2);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  overflow: hidden;
}

#nhChatOverlay .chat-slash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
}

#nhChatOverlay .chat-slash-card-head strong {
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--chat-text-strong);
  letter-spacing: .01em;
}

#nhChatOverlay .chat-slash-list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

#nhChatOverlay .chat-slash-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--chat-text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
  transition: background .16s ease, transform .12s ease;
}

#nhChatOverlay .chat-slash-item:hover,
#nhChatOverlay .chat-slash-item:focus-visible {
  background: rgba(245, 158, 11, .10);
}

#nhChatOverlay .chat-slash-item:active {
  transform: scale(.985);
}

#nhChatOverlay .chat-slash-item-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 10px;
  background: rgba(245, 158, 11, .12);
  color: var(--chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

#nhChatOverlay .chat-slash-item-icon.is-avatar {
  background: transparent;
  color: inherit;
  padding: 0;
  overflow: hidden;
}

#nhChatOverlay .chat-slash-item-icon.is-avatar .chat-avatar-fallback,
#nhChatOverlay .chat-slash-item-icon.is-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

#nhChatOverlay .chat-slash-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#nhChatOverlay .chat-slash-item-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-slash-item-meta {
  font-size: .76rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-slash-empty,
#nhChatOverlay .chat-slash-loading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-sub);
  font-size: .84rem;
  text-align: center;
  padding: 0 12px 10px;
}

@media (min-width: 720px) {
  #nhChatOverlay .chat-gif-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  #nhChatOverlay .chat-gif-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-gif-card {
    background: rgba(15, 23, 42, .86);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 14px 28px rgba(2, 6, 23, .36);
  }

  #nhChatOverlay .chat-gif-card-search {
    background: rgba(148, 163, 184, .12);
  }

  #nhChatOverlay .chat-slash-card {
    background: rgba(15, 23, 42, .86);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 14px 28px rgba(2, 6, 23, .36);
  }

  #nhChatOverlay .chat-slash-card-head {
    border-bottom: 1px solid rgba(148, 163, 184, .14);
  }

  #nhChatOverlay .chat-slash-card-head strong {
    color: rgba(248, 250, 252, .96);
  }

  #nhChatOverlay .chat-slash-item-title {
    color: rgba(248, 250, 252, .96);
  }

  #nhChatOverlay .chat-slash-item-meta,
  #nhChatOverlay .chat-slash-empty,
  #nhChatOverlay .chat-slash-loading {
    color: rgba(148, 163, 184, .9);
  }

}

#nhChatOverlay .chat-template-list-item {
  width: 100%;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-text);
  border-radius: 14px;
  padding: 12px 13px;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

#nhChatOverlay .chat-template-list-item:hover {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .06);
  transform: translateY(-1px);
}

#nhChatOverlay .chat-template-list-title {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-template-list-desc {
  display: block;
  margin-top: 3px;
  font-size: .77rem;
  line-height: 1.42;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-template-form {
  display: grid;
  gap: 12px;
  padding: 10px 0 12px;
}

/* ── Attachment popup — anchored above attach button, width = 4-item grid ─── */

/* composer-wrap must be relative so popup positions inside it */
#nhChatOverlay .chat-composer-wrap {
  position: relative;
}

#nhChatOverlay .chat-attach-popup {
  /* Always anchored to right edge of composer-wrap; JS only sets --ap-caret */
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: var(--ap-width, 240px);
  z-index: 50;
  pointer-events: none;
  transform-origin: bottom right;
  transform: translateY(10px) scale(.95);
  opacity: 0;
  transition: none;
}


#nhChatOverlay .chat-attach-popup.is-preview {
  position: fixed;
  top: var(--ap-preview-top, 0px);
  left: var(--ap-preview-left, 0px);
  right: auto;
  bottom: auto;
  width: var(--ap-preview-width, 320px);
  height: var(--ap-preview-height, 320px);
  max-width: none;
  transform: translateY(10px) scale(.98);
  transform-origin: center bottom;
}

#nhChatOverlay .chat-attach-popup.is-open {
  pointer-events: auto;
  transform: translateY(0) scale(1);
  opacity: 1;
}

#nhChatOverlay .chat-attach-popup.is-preview.is-open {
  transform: translateY(0) scale(1);
}

#nhChatOverlay .chat-attach-popup-inner {
  background: #06101f;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  position: relative;
}

/* caret arrow — points down, aligned to attach btn center via --ap-caret */
#nhChatOverlay .chat-attach-popup-inner::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: var(--ap-caret, 22px);
  width: 14px;
  height: 14px;
  background: #06101f;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-popup-inner::after {
  display: none;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-popup-inner {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-popup-inner {
    background: #ffffff;
    border-color: rgba(15,23,42,.11);
    box-shadow: 0 12px 36px rgba(15,23,42,.13), 0 2px 8px rgba(15,23,42,.06);
  }
  #nhChatOverlay .chat-attach-popup-inner::after {
    background: #ffffff;
    border-color: rgba(15,23,42,.11);
  }
}


#nhChatOverlay .chat-attach-preview {
  display: grid;
  gap: 12px;
  width: min(86vw, 376px);
  position: relative;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview {
  width: 100%;
  height: 100%;
  gap: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

#nhChatOverlay .chat-attach-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-attach-preview-top strong {
  font-size: .92rem;
  font-weight: 700;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  justify-content: space-between;
  pointer-events: none;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-top strong {
  display: none;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-top .chat-attach-close {
  pointer-events: auto;
}

#nhChatOverlay .chat-image-select-toggle {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .66);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

#nhChatOverlay .chat-image-select-toggle.is-off {
  color: rgba(248, 250, 252, .78);
  background: rgba(15, 23, 42, .5);
}

#nhChatOverlay .chat-attach-original-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  pointer-events: auto;
  cursor: pointer;
}

#nhChatOverlay .chat-attach-original-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#nhChatOverlay .chat-attach-original-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15, 23, 42, .66);
  color: #e2e8f0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .16);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

#nhChatOverlay .chat-attach-original-toggle-pill i {
  font-size: .78rem;
  opacity: .9;
}

#nhChatOverlay .chat-attach-original-toggle:hover .chat-attach-original-toggle-pill {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

#nhChatOverlay .chat-attach-original-toggle input:checked + .chat-attach-original-toggle-pill {
  background: linear-gradient(135deg, rgba(59,130,246,.88), rgba(37,99,235,.9));
  border-color: rgba(147,197,253,.6);
  color: #eff6ff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .28);
}

#nhChatOverlay .chat-attach-preview-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: pan-y;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-media {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  background: rgba(2, 6, 23, .92);
  padding: 14px 14px calc(96px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

#nhChatOverlay .chat-attach-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-attach-file-preview {
  width: min(100%, 520px);
  max-width: calc(100% - 20px);
  margin: auto;
}

#nhChatOverlay .chat-attach-preview-audio {
  width: min(100%, 560px);
  max-width: calc(100% - 20px);
  position: relative;
  z-index: 1;
  margin: auto;
}

#nhChatOverlay .chat-attach-preview-video {
  width: min(100%, 720px);
  max-width: calc(100% - 20px);
  position: relative;
  z-index: 1;
  margin: auto;
}

#nhChatOverlay .chat-file-preview-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-radius: 18px;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  color: var(--chat-text-strong);
  box-sizing: border-box;
}

#nhChatOverlay .chat-audio-preview-card,
#nhChatOverlay .chat-audio-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  color: var(--chat-text-strong);
  box-sizing: border-box;
}

#nhChatOverlay .chat-audio-preview-card-head,
#nhChatOverlay .chat-audio-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

#nhChatOverlay .chat-audio-preview-card-icon,
#nhChatOverlay .chat-audio-card-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: currentColor;
}

#nhChatOverlay .chat-audio-preview-card-meta,
#nhChatOverlay .chat-audio-card-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#nhChatOverlay .chat-audio-preview-card-name,
#nhChatOverlay .chat-audio-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

#nhChatOverlay .chat-audio-preview-card-sub,
#nhChatOverlay .chat-audio-card-sub {
  font-size: .74rem;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-audio-preview-card audio,
#nhChatOverlay .chat-audio-player {
  width: 100%;
}

#nhChatOverlay .chat-audio-preview-card .chat-voice-bubble,
#nhChatOverlay .chat-audio-card .chat-voice-bubble {
  width: 100%;
}

#nhChatOverlay .chat-video-preview-player {
  width: 100%;
  max-height: min(58vh, 520px);
  border-radius: 18px;
  background: #020617;
  display: block;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-file-preview-card {
  width: min(100%, 560px);
  margin: 0 auto;
  background: rgba(15, 23, 42, .62);
  border-color: rgba(255,255,255,.08);
}

#nhChatOverlay .chat-file-preview-card-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, .16);
  color: #bfdbfe;
  font-size: 1.3rem;
}

#nhChatOverlay .chat-file-preview-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nhChatOverlay .chat-file-preview-card-name,
#nhChatOverlay .chat-attach-preview-thumb-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nhChatOverlay .chat-file-preview-card-name {
  font-size: .94rem;
  font-weight: 700;
}

#nhChatOverlay .chat-file-preview-card-meta,
#nhChatOverlay .chat-file-preview-card-note {
  font-size: .76rem;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-media img {
  object-fit: contain;
}

#nhChatOverlay .chat-image-retry {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(2, 6, 23, .72);
  color: #f8fafc;
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 700;
}

#nhChatOverlay .chat-image-retry i {
  font-size: .78rem;
}

#nhChatOverlay .chat-attach-preview-retry {
  position: absolute;
  inset: auto auto 14px 50%;
  transform: translateX(-50%);
  z-index: 2;
}

#nhChatOverlay .chat-attach-preview-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78) 28%, rgba(2,6,23,.96));
}

#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-audio,
#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-preview-video,
#nhChatOverlay .chat-attach-popup.is-preview .chat-attach-file-preview {
  margin: auto;
}

#nhChatOverlay .chat-attach-preview-thumbs.is-file {
  grid-auto-columns: 88px;
}

#nhChatOverlay .chat-attach-preview-thumb {
  appearance: none;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

#nhChatOverlay .chat-attach-preview-thumb.is-off {
  opacity: .42;
}

#nhChatOverlay .chat-attach-preview-thumb.is-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  background: rgba(255,255,255,.08);
}

#nhChatOverlay .chat-attach-preview-thumb.is-add:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: rgba(148,163,184,.12);
  color: rgba(148,163,184,.8);
}

#nhChatOverlay .chat-attach-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-attach-preview-thumb-file {
  width: 88px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-attach-preview-thumb-file-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dbeafe;
  font-size: 1rem;
}

#nhChatOverlay .chat-attach-preview-thumb-file-name {
  width: 100%;
  font-size: .63rem;
  line-height: 1.2;
  color: #e2e8f0;
  text-align: center;
}

#nhChatOverlay .chat-attach-preview-thumb.is-active {
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 2px rgba(96,165,250,.18);
}

#nhChatOverlay .chat-attach-preview-thumb-more {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .62);
  color: #f8fafc;
  font-size: .82rem;
  font-weight: 800;
}

#nhChatOverlay .chat-attach-preview-thumb-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .78);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
}

#nhChatOverlay .chat-attach-preview-field textarea {
  width: 100%;
  min-height: 78px;
  max-height: 144px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
  padding: 11px 12px;
  outline: none;
}

#nhChatOverlay .chat-attach-preview-field textarea::placeholder {
  color: rgba(226,232,240,.55);
}

#nhChatOverlay .chat-attach-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* item — 2-col left-aligned row list */
#nhChatOverlay .chat-attach-item {
  appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 6px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
}
#nhChatOverlay .chat-attach-item + .chat-attach-item {
  border-top: 1px solid rgba(255,255,255,.055);
}
#nhChatOverlay .chat-attach-item:hover:not(.is-disabled) {
  background: rgba(59,130,246,.08);
}
#nhChatOverlay .chat-attach-item:active:not(.is-disabled) {
  background: rgba(59,130,246,.15);
}
#nhChatOverlay .chat-attach-item.is-disabled {
  opacity: .35;
  cursor: not-allowed;
}
#nhChatOverlay .chat-attach-item-icon {
  width: 38px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 1rem;
  justify-self: stretch;
  align-self: stretch;
}
#nhChatOverlay .chat-attach-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
#nhChatOverlay .chat-attach-item-label {
  font-size: .79rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--chat-text-strong, #f0f6ff);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nhChatOverlay .chat-attach-item-meta {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--chat-sub, #6b82a6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-template-form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-template-form-title {
  min-width: 0;
}

#nhChatOverlay .chat-template-form-title strong {
  display: block;
  font-size: .92rem;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-template-form-title span {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  color: var(--chat-sub);
  line-height: 1.45;
}

#nhChatOverlay .chat-template-back {
  border: 1px solid var(--chat-border);
  background: transparent;
  color: var(--chat-sub);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

#nhChatOverlay .chat-template-fields {
  display: grid;
  gap: 10px;
}

#nhChatOverlay .chat-template-field {
  display: grid;
  gap: 6px;
}

#nhChatOverlay .chat-template-field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-template-field input,
#nhChatOverlay .chat-template-field textarea,
#nhChatOverlay .chat-template-field select {
  width: 100%;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  padding: 10px 12px;
  outline: none;
}

#nhChatOverlay .chat-template-field textarea {
  min-height: 88px;
  resize: vertical;
}

/* ── Recording: animated conic-gradient border on composer-wrap ─────────── */
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-recording) {
  border-color: transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: none;
}

#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-recording)::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(
    from var(--vp-angle, 0deg),
    #7c3aed,
    #06b6d4,
    #ec4899,
    #f59e0b,
    #10b981,
    #7c3aed
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: chatVpBorderSpin 2.4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* Paused: slow pulse, desaturated */
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-paused) {
  border-color: transparent;
  position: relative;
}

#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-paused)::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(
    from var(--vp-angle, 0deg),
    #4b5563,
    #6366f1,
    #4b5563,
    #6366f1,
    #4b5563
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: chatVpBorderSpin 5s linear infinite;
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

@property --vp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes chatVpBorderSpin {
  to { --vp-angle: 360deg; }
}

/* Ensure children stay above the pseudo border */
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-recording) > *,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-status.is-paused) > * {
  position: relative;
  z-index: 1;
}

/* ── Composer wrap — mobile-first modern redesign ───────────────────────── */
#nhChatOverlay .chat-composer-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  background: var(--chat-surface-2);
  border: 1.5px solid var(--chat-border);
  border-radius: 24px;
  padding: 5px 5px 5px 6px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#nhChatOverlay .chat-composer-editor {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  display: grid;
  align-self: flex-end;
  overflow: hidden;
}

#nhChatOverlay .chat-composer-preview,
#nhChatOverlay .chat-composer-wrap textarea {
  grid-area: 1 / 1;
  min-width: 0;
  max-width: 100%;
}

#nhChatOverlay .chat-composer-preview {
  min-width: 0;
  min-height: 34px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px 4px 5px 6px;
  line-height: 1.32;
  font-size: 1.03rem;
  color: var(--chat-text-strong);
  pointer-events: none;
  word-break: break-word;
  white-space: pre-wrap;
  scrollbar-width: none;
}

#nhChatOverlay .chat-composer-preview::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-composer-preview.is-empty {
  visibility: hidden;
}

#nhChatOverlay .chat-composer-preview .md-token {
  opacity: .42;
  font-weight: inherit;
}

#nhChatOverlay .chat-composer-preview .md-token-list {
  color: rgba(59, 130, 246, .88);
  opacity: .72;
}

#nhChatOverlay .chat-composer-preview-linepad {
  display: inline-block;
  min-width: 1px;
  line-height: inherit;
}

#nhChatOverlay .chat-composer-preview .md-guide-strong,
#nhChatOverlay .chat-composer-preview .md-guide-em,
#nhChatOverlay .chat-composer-preview .md-guide-del,
#nhChatOverlay .chat-composer-preview .md-guide-code,
#nhChatOverlay .chat-composer-preview .md-guide-link,
#nhChatOverlay .chat-composer-preview .md-guide-link-label,
#nhChatOverlay .chat-composer-preview .md-guide-codeblock {
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  vertical-align: baseline;
}

#nhChatOverlay .chat-composer-preview .md-guide-strong {
  color: var(--chat-text-strong);
  text-decoration: underline;
  text-decoration-color: rgba(245, 158, 11, .38);
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview .md-guide-em {
  color: var(--chat-text-strong);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(37, 99, 235, .38);
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview .md-guide-del {
  color: var(--chat-sub);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

#nhChatOverlay .chat-composer-preview .md-guide-code {
  background: rgba(15,23,42,.06);
  border-radius: 6px;
}

#nhChatOverlay .chat-composer-preview .md-guide-codeblock {
  display: inline;
  color: var(--chat-text-strong);
  background: rgba(15, 23, 42, .05);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}

#nhChatOverlay .chat-composer-preview .md-guide-link,
#nhChatOverlay .chat-composer-preview .md-guide-link-label {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(37, 99, 235, .52);
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview .md-guide-link-label {
  color: #1d4ed8;
}

#nhChatOverlay .chat-composer-file-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(100%, 260px);
  margin: 1px 3px 1px 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .18);
  color: var(--chat-text-strong);
  vertical-align: middle;
}

#nhChatOverlay .chat-composer-file-token i {
  color: var(--chat-accent);
  font-size: .82em;
}

#nhChatOverlay .chat-composer-file-token-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92em;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-composer-file-token {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .24);
    color: rgba(248,250,252,.96);
  }

  #nhChatOverlay .chat-composer-file-token i {
    color: #f59e0b;
  }

  #nhChatOverlay .chat-composer-file-token-text {
    color: rgba(248,250,252,.96) !important;
  }
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-composer-file-token {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .20);
    color: #0f1626;
  }

  #nhChatOverlay .chat-composer-file-token i {
    color: #b45309;
  }

  #nhChatOverlay .chat-composer-file-token-text {
    color: #0f1626 !important;
  }
}

#nhChatOverlay .chat-composer-preview p,
#nhChatOverlay .chat-composer-preview ul,
#nhChatOverlay .chat-composer-preview ol,
#nhChatOverlay .chat-composer-preview blockquote,
#nhChatOverlay .chat-composer-preview pre {
  margin: 0 0 8px;
}

#nhChatOverlay .chat-composer-preview p:last-child,
#nhChatOverlay .chat-composer-preview ul:last-child,
#nhChatOverlay .chat-composer-preview ol:last-child,
#nhChatOverlay .chat-composer-preview blockquote:last-child,
#nhChatOverlay .chat-composer-preview pre:last-child {
  margin-bottom: 0;
}

#nhChatOverlay .chat-composer-preview ul,
#nhChatOverlay .chat-composer-preview ol {
  padding-left: 18px;
}

#nhChatOverlay .chat-composer-preview blockquote {
  padding-left: 10px;
  border-left: 3px solid rgba(37,99,235,.35);
  color: var(--chat-sub);
}

#nhChatOverlay .chat-composer-preview code {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: rgba(15,23,42,.06);
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

#nhChatOverlay .chat-composer-preview pre {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.08);
}

#nhChatOverlay .chat-composer-preview strong,
#nhChatOverlay .chat-composer-preview em,
#nhChatOverlay .chat-composer-preview del {
  font-weight: inherit;
  font-style: inherit;
  text-decoration-thickness: 1px;
  letter-spacing: inherit;
  word-spacing: inherit;
  vertical-align: baseline;
}

#nhChatOverlay .chat-composer-preview strong {
  color: var(--chat-text-strong);
  text-decoration: underline;
  text-decoration-color: rgba(245, 158, 11, .38);
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview em {
  color: var(--chat-text-strong);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(37, 99, 235, .38);
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-composer-preview del {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-composer-wrap:focus-within {
  border-color: rgba(245, 158, 11, .45);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .08);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-composer-wrap {
    background: #f4f7fc;
    border-color: var(--chat-border);
  }
  #nhChatOverlay .chat-composer-wrap:focus-within {
    border-color: rgba(245, 158, 11, .5);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .10);
  }
}

#nhChatOverlay .chat-composer-wrap textarea {
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  resize: none;
  min-height: 34px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--chat-text-strong);
  padding: 5px 4px 5px 6px;
  line-height: 1.32;
  font-size: 1.03rem;
  align-self: flex-end;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-composer.has-text .chat-composer-editor {
  margin-right: 2px;
}

#nhChatOverlay .chat-composer-editor.is-previewing textarea {
  color: transparent;
  caret-color: var(--chat-text-strong);
}

#nhChatOverlay .chat-composer-wrap textarea::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-composer-wrap textarea::placeholder {
  color: var(--chat-sub);
  opacity: .6;
  font-size: 1.03rem;
  line-height: 1.32;
}

/* Voice inline panel — lives inside composer-wrap when recording */
/* ── Voice inline panel ──────────────────────────────────────────────────── */
#nhChatOverlay .chat-voice-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 100%;
  min-width: 0;
  padding: 0 2px 0 4px;
  min-height: 36px;
}

/* waveform canvas wrapper — takes all remaining space */
#nhChatOverlay .chat-voice-wave-wrap {
  flex: 1;
  min-width: 80px;
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}

#nhChatOverlay .chat-voice-wave {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 6px;
}

/* sr-only: visible only to screen readers */
#nhChatOverlay .chat-voice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#nhChatOverlay .chat-voice-timer {
  font-size: .78rem;
  font-weight: 800;
  color: var(--chat-sub);
  letter-spacing: .08em;
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
}

/* paused: dim the whole waveform area */
#nhChatOverlay .chat-voice-wave-wrap.is-paused .chat-voice-wave {
  opacity: .38;
}
/* paused: timer turns accent colour */
#nhChatOverlay .chat-voice-inline.is-paused .chat-voice-timer {
  color: var(--chat-accent);
}

/* Hide other composer elements when voice recording is active */
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) .chat-gif-btn,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) .chat-composer-editor,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) .chat-template-btn,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) .chat-composer-util-btn,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) .chat-attach-btn,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) #chatVoiceBtn,
#nhChatOverlay .chat-composer-wrap:has(.chat-voice-inline:not([hidden])) #chatSendBtn {
  display: none !important;
}

/* ── Custom voice player bubble ─────────────────────────────────────────── */
#nhChatOverlay .chat-voice-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#nhChatOverlay .chat-image-bubble {
  --chat-image-frame-size: min(320px, calc(100vw - 132px));
  --chat-image-meta-height: 42px;
  --chat-image-gap: 4px;
  display: block;
  width: var(--chat-image-frame-size);
  max-width: 100%;
  min-height: calc(var(--chat-image-frame-size) + var(--chat-image-meta-height));
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#nhChatOverlay .chat-gif-bubble {
  min-height: 0;
}

#nhChatOverlay .chat-bubble:has(.chat-gif-bubble) {
  min-height: 0;
  overflow: hidden;
}

#nhChatOverlay .chat-file-bubble {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
}

#nhChatOverlay .chat-audio-bubble {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
}

#nhChatOverlay .chat-video-bubble {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, calc(100vw - 132px));
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
}

#nhChatOverlay .chat-video-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: transparent;
}

#nhChatOverlay .chat-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #020617;
  object-fit: cover;
  display: block;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#nhChatOverlay .chat-video-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

#nhChatOverlay .chat-video-meta-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

#nhChatOverlay .chat-video-meta-sub {
  min-width: 0;
  grid-column: 1 / 2;
  font-size: .74rem;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-video-download {
  grid-row: 1 / span 2;
  grid-column: 2 / 3;
  justify-self: end;
  color: inherit;
  text-decoration: none;
}

#nhChatOverlay .chat-audio-list {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#nhChatOverlay .chat-audio-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-sizing: border-box;
  box-shadow: none;
}

#nhChatOverlay .chat-audio-list .chat-audio-card + .chat-audio-card {
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .22);
}

#nhChatOverlay .chat-audio-list .chat-audio-card--bare + .chat-audio-card--bare {
  padding-top: 10px !important;
  border-top: 1px solid rgba(148, 163, 184, .22) !important;
}

#nhChatOverlay .chat-audio-card.chat-audio-card--bare {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#nhChatOverlay .chat-audio-card.chat-audio-card--bare .chat-audio-card-head {
  background: transparent !important;
}

#nhChatOverlay .chat-audio-card.chat-audio-card--bare .chat-audio-card-icon {
  background: transparent !important;
  box-shadow: none !important;
}

#nhChatOverlay .chat-file-list {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  align-self: flex-start;
}

#nhChatOverlay .chat-file-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  align-self: flex-start;
}

#nhChatOverlay .chat-file-card-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: rgba(59,130,246,.12);
  color: var(--chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-file-card.is-drive {
  border-color: rgba(34, 197, 94, .2);
  background: linear-gradient(180deg, rgba(34, 197, 94, .08), rgba(59, 130, 246, .06));
}

#nhChatOverlay .chat-file-card.is-drive .chat-file-card-icon {
  background: rgba(34, 197, 94, .14);
  color: #16a34a;
}

#nhChatOverlay .chat-file-card.is-drive .chat-file-card-action {
  color: #16a34a;
}

#nhChatOverlay .chat-file-card-body {
  min-width: 0;
  flex: 0 1 auto;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#nhChatOverlay .chat-file-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 700;
  color: var(--chat-text);
}

#nhChatOverlay .chat-file-card-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  color: var(--chat-sub-strong);
}

#nhChatOverlay .chat-file-card-action {
  color: var(--chat-accent);
  font-size: .82rem;
}

#nhChatOverlay .chat-inline-file-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
}

#nhChatOverlay .chat-inline-file-pill-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

#nhChatOverlay .chat-inline-file-ref,
#nhChatOverlay .chat-inline-file-ref-mark {
  color: #2563eb;
  font-weight: 700;
}

#nhChatOverlay .chat-inline-file-ref-mark.is-event {
  color: #b45309;
}

#nhChatOverlay .chat-inline-file-ref-mark.is-note {
  color: #7c3aed;
}

#nhChatOverlay .chat-inline-file-ref-mark.is-election {
  color: #b45309;
}

#nhChatOverlay .chat-inline-file-ref {
  flex: 0 0 auto;
  font-size: .75rem;
  line-height: 1.2;
  padding-top: 4px;
}

#nhChatOverlay .chat-inline-file-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

#nhChatOverlay .chat-inline-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#nhChatOverlay .chat-inline-file-pill-icon {
  color: var(--chat-accent);
  font-size: .86em;
  flex: 0 0 auto;
}

#nhChatOverlay .chat-inline-file-pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

#nhChatOverlay .chat-inline-file-pill.is-event {
  border-color: rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .12);
}

#nhChatOverlay .chat-inline-file-pill.is-event .chat-inline-file-pill-icon {
  color: #b45309;
}

#nhChatOverlay .chat-inline-file-pill.is-note {
  border-color: rgba(124, 58, 237, .24);
  background: rgba(124, 58, 237, .12);
}

#nhChatOverlay .chat-inline-file-pill.is-note .chat-inline-file-pill-icon {
  color: #7c3aed;
}

#nhChatOverlay .chat-inline-file-pill.is-election {
  border-color: rgba(217, 119, 6, .26);
  background: rgba(217, 119, 6, .12);
}

#nhChatOverlay .chat-inline-file-pill.is-election .chat-inline-file-pill-icon {
  color: #b45309;
}

#nhChatOverlay .chat-inline-file-pill.is-unavailable {
  opacity: .72;
  border-style: dashed;
}

#nhChatOverlay .chat-inline-file-pill.is-unavailable .chat-inline-file-pill-text {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-inline-file-share-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--chat-sub);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#nhChatOverlay .chat-inline-file-share-action:hover {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-inline-file-request-note {
  color: var(--chat-sub);
  font-size: .69rem;
  line-height: 1.25;
}

#nhChatOverlay .chat-image-grid {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  gap: var(--chat-image-gap);
  overflow: hidden;
  border-radius: 18px;
}

#nhChatOverlay .chat-image-grid.is-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

#nhChatOverlay .chat-image-grid.is-count-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

#nhChatOverlay .chat-image-grid.is-count-3 {
  grid-template-columns: 1.08fr .92fr;
  grid-template-rows: repeat(2, 1fr);
}

#nhChatOverlay .chat-image-grid.is-count-3 .chat-image-link:first-child {
  grid-row: 1 / span 2;
}

#nhChatOverlay .chat-image-grid.is-count-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

#nhChatOverlay .chat-image-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-3);
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#nhChatOverlay .chat-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(15, 23, 42, .04);
  opacity: 0;
  transition: opacity .22s ease;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

#nhChatOverlay .chat-image-link.is-loaded img {
  opacity: 1;
}

#nhChatOverlay .chat-image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-surface-2);
  color: var(--chat-sub);
  font-size: 1.1rem;
  transition: opacity .2s ease, visibility .2s ease;
}

#nhChatOverlay .chat-image-link.is-loaded .chat-image-loading {
  opacity: 0;
  visibility: hidden;
}

#nhChatOverlay .chat-image-more {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .52);
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
}

#nhChatOverlay .chat-image-link.is-failed .chat-image-loading {
  opacity: 0;
  visibility: hidden;
}

#nhChatOverlay .chat-image-link.is-failed img {
  opacity: 0;
}

#nhChatOverlay .chat-image-retry-inline {
  position: absolute;
  inset: auto auto 10px 50%;
  transform: translateX(-50%);
  z-index: 3;
}

#nhChatOverlay .chat-image-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-height: var(--chat-image-meta-height);
  box-sizing: border-box;
  font-size: .76rem;
  color: var(--chat-sub-strong);
}

#nhChatOverlay .chat-image-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nhChatOverlay .chat-image-meta i {
  color: var(--chat-accent);
  font-size: .84rem;
}

#nhChatOverlay .chat-image-download-all {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

#nhChatOverlay .chat-image-viewer {
  position: absolute;
  inset: 0;
  z-index: 120;
}

#nhChatOverlay .chat-image-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .18s ease;
}

#nhChatOverlay .chat-image-viewer-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  transition: transform .18s ease;
  will-change: transform;
}

#nhChatOverlay .chat-image-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .66);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-image-viewer-download {
  position: absolute;
  top: 10px;
  right: 58px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .66);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-image-viewer-main {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  touch-action: none;
}

#nhChatOverlay .chat-image-viewer-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

#nhChatOverlay .chat-image-viewer-slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-image-viewer-slide.is-active {
  display: flex;
}

#nhChatOverlay .chat-image-viewer-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform .16s ease;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

#nhChatOverlay .chat-image-viewer-main.is-zoomed img {
  cursor: zoom-out;
}

#nhChatOverlay .chat-image-viewer-retry {
  position: absolute;
  inset: auto auto 18px 50%;
  transform: translateX(-50%);
  z-index: 3;
}

#nhChatOverlay .chat-image-viewer-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62px;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78) 30%, rgba(2,6,23,.96));
  scrollbar-width: thin;
}


#nhChatOverlay .chat-image-viewer-thumb {
  appearance: none;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}

#nhChatOverlay .chat-video-viewer {
  position: absolute;
  inset: 0;
  z-index: 121;
}

#nhChatOverlay .chat-video-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#nhChatOverlay .chat-video-viewer-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#nhChatOverlay .chat-video-viewer-main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-video-viewer-main video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

#nhChatOverlay .chat-video-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .66);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-image-viewer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-image-viewer-thumb.is-active {
  border-color: rgba(96,165,250,.8);
  box-shadow: 0 0 0 2px rgba(96,165,250,.18);
}

/* ── Election Viewer — mirrors member/vote/index.php vdSheet ── */
#nhChatOverlay .chat-election-viewer {
  position: absolute;
  inset: 0;
  z-index: 121;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: nhcEvFade .2s ease both;
}
@keyframes nhcEvFade { from { opacity: 0; } to { opacity: 1; } }

#nhChatOverlay .chat-election-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .52);
}

/* Sheet — bottom-sheet on mobile, centred card on wide */
#nhChatOverlay .chat-election-viewer-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  max-height: 92%;
  border-radius: 20px 20px 0 0;
  background: var(--chat-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
  animation: nhcEvUp .26s cubic-bezier(.34, 1.1, .64, 1) both;
}
@keyframes nhcEvUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* drag handle — mobile only */
#nhChatOverlay .chat-election-viewer-sheet::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--chat-border-2);
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* centred card on wider screens */
@media (min-width: 600px) {
  #nhChatOverlay .chat-election-viewer {
    align-items: center;
  }
  #nhChatOverlay .chat-election-viewer-sheet {
    border-radius: 20px;
    max-height: 88%;
  }
  #nhChatOverlay .chat-election-viewer-sheet::before {
    display: none;
  }
}

/* Head */
#nhChatOverlay .chat-election-viewer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--chat-border);
  flex-shrink: 0;
}

#nhChatOverlay .chat-election-viewer-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(245, 158, 11, .11);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

#nhChatOverlay .chat-election-viewer-head-title {
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-election-viewer-head-title h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

#nhChatOverlay .chat-election-viewer-head-title p {
  font-size: .72rem;
  color: var(--chat-sub);
  margin: 0;
}

#nhChatOverlay .chat-election-viewer-close {
  background: none;
  border: none;
  color: var(--chat-sub);
  cursor: pointer;
  font-size: .95rem;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
#nhChatOverlay .chat-election-viewer-close:hover {
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
}

/* Body */
#nhChatOverlay .chat-election-viewer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#nhChatOverlay .chat-election-viewer-body::-webkit-scrollbar { width: 4px; }
#nhChatOverlay .chat-election-viewer-body::-webkit-scrollbar-track { background: transparent; }
#nhChatOverlay .chat-election-viewer-body::-webkit-scrollbar-thumb { background: var(--chat-border-2); border-radius: 4px; }

/* Foot */
#nhChatOverlay .chat-election-viewer-foot {
  padding: 12px 18px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--chat-border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  background: var(--chat-surface-2);
}

/* Detail body — vd-* ported */
#nhChatOverlay .chat-election-viewer-body .vd-section { margin-bottom: 14px; }
#nhChatOverlay .chat-election-viewer-body .vd-section:last-child { margin-bottom: 0; }
#nhChatOverlay .chat-election-viewer-body .vd-section-label {
  font-size: .68rem; font-weight: 700; color: var(--chat-sub);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
#nhChatOverlay .chat-election-viewer-body .vd-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--chat-border); font-size: .8rem;
}
#nhChatOverlay .chat-election-viewer-body .vd-row:last-child { border-bottom: none; }
#nhChatOverlay .chat-election-viewer-body .vd-row-key { color: var(--chat-sub); flex-shrink: 0; }
#nhChatOverlay .chat-election-viewer-body .vd-row-val { color: var(--chat-text-strong); font-weight: 500; text-align: right; }
#nhChatOverlay .chat-election-viewer-body .vd-desc {
  background: var(--chat-surface-2); border: 1px solid var(--chat-border); border-radius: 10px;
  padding: 12px 14px; font-size: .8rem; color: var(--chat-text); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow-y: auto;
}
#nhChatOverlay .chat-election-viewer-body .vd-cand-list { display: flex; flex-direction: column; gap: 6px; }
#nhChatOverlay .chat-election-viewer-body .vd-cand {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--chat-surface-2); border: 1px solid var(--chat-border); border-radius: 10px; font-size: .8rem;
}
#nhChatOverlay .chat-election-viewer-body .vd-cand-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--chat-surface-3);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--chat-sub); overflow: hidden;
}
#nhChatOverlay .chat-election-viewer-body .vd-cand-av img { width: 100%; height: 100%; object-fit: cover; }
#nhChatOverlay .chat-election-viewer-body .vd-cand-name { font-weight: 600; color: var(--chat-text-strong); }
#nhChatOverlay .chat-election-viewer-body .vd-cand-pos { font-size: .7rem; color: var(--chat-sub); }
#nhChatOverlay .chat-election-viewer-body .vi-prog-wrap { margin-bottom: 0; }
#nhChatOverlay .chat-election-viewer-body .vi-prog-row {
  display: flex; justify-content: space-between; font-size: .65rem; color: var(--chat-sub); margin-bottom: 3px;
}
#nhChatOverlay .chat-election-viewer-body .vi-prog-row span:last-child { font-weight: 600; color: var(--chat-text); }
#nhChatOverlay .chat-election-viewer-body .vi-prog-track {
  height: 3px; background: var(--chat-border); border-radius: 99px; overflow: hidden;
}
#nhChatOverlay .chat-election-viewer-body .vi-prog-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
#nhChatOverlay .chat-election-viewer-body .vi-prog-fill.green {
  background: linear-gradient(90deg, #10b981, #34d399);
}

/* Loading / error states */
#nhChatOverlay .chat-election-loading,
#nhChatOverlay .chat-election-error,
#nhChatOverlay .vd-loading,
#nhChatOverlay .vd-err {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 0; font-size: .84rem; flex-direction: column; text-align: center;
}
#nhChatOverlay .chat-election-loading,
#nhChatOverlay .vd-loading { color: var(--chat-sub); }
#nhChatOverlay .chat-election-error,
#nhChatOverlay .vd-err { color: #ef4444; padding: 32px; }

/* Foot buttons — vi-btn system ported */
#nhChatOverlay .chat-election-viewer-btn,
#nhChatOverlay .chat-election-viewer-foot .vi-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 8px;
  font-size: .74rem; font-weight: 600; cursor: pointer; border: none;
  text-decoration: none; transition: background .17s, transform .12s, box-shadow .17s;
  white-space: nowrap;
}
#nhChatOverlay .chat-election-viewer-btn:active,
#nhChatOverlay .chat-election-viewer-foot .vi-btn:active { transform: scale(.97); }
#nhChatOverlay .chat-election-viewer-btn.is-primary,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-vote {
  background: #10b981; color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.28);
}
#nhChatOverlay .chat-election-viewer-btn.is-primary:hover,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-vote:hover { background: #0ea070; color: #fff; }
#nhChatOverlay .chat-election-viewer-btn.is-results,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-result {
  background: rgba(245, 158, 11, .11); color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, .22);
}
#nhChatOverlay .chat-election-viewer-btn.is-results:hover,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-result:hover { background: rgba(245, 158, 11, .18); }
#nhChatOverlay .chat-election-viewer-btn,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-ghost {
  background: var(--chat-surface-3); color: var(--chat-text); border: 1px solid var(--chat-border);
}
#nhChatOverlay .chat-election-viewer-btn:hover,
#nhChatOverlay .chat-election-viewer-foot .vi-btn-ghost:hover { background: var(--chat-border); color: var(--chat-text-strong); }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-election-viewer-btn.is-results,
  #nhChatOverlay .chat-election-viewer-foot .vi-btn-result {
    background: rgba(59, 130, 246, .13); color: #93c5fd; border-color: rgba(59,130,246,.2);
  }
}

@media (max-width: 860px) {
  #nhChatOverlay .chat-image-viewer-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  #nhChatOverlay .chat-image-viewer-download {
    top: 8px;
    right: 50px;
    width: 36px;
    height: 36px;
  }

  #nhChatOverlay .chat-image-viewer-thumbs {
    grid-auto-columns: 54px;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }

  #nhChatOverlay .chat-image-viewer-thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
  }

  #nhChatOverlay .chat-election-meta-grid {
    grid-template-columns: 1fr;
  }

}




#nhChatOverlay .chat-bubble:has(.chat-image-bubble) {
  min-height: calc(min(320px, calc(100vw - 132px)) + 42px);
  overflow: hidden;
}

#nhChatOverlay .chat-bubble:has(.chat-file-bubble) {
  overflow: hidden;
}

#nhChatOverlay .chat-bubble:has(.chat-audio-bubble) {
  overflow: hidden;
}

#nhChatOverlay .chat-bubble:has(.chat-video-bubble) {
  overflow: hidden;
}

#nhChatOverlay .chat-image-upload-bar {
  flex: 0 0 56px;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .24);
  overflow: hidden;
  margin-right: 2px;
}

#nhChatOverlay .chat-image-upload-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width .18s linear;
}

#nhChatOverlay .chat-bubble-time.is-upload-failed .chat-image-upload-bar-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

#nhChatOverlay .chat-image-upload-percent {
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-gif-powered {
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--chat-sub);
}

/* Row 1: mic icon + Voice label + duration/runtime */
#nhChatOverlay .chat-vp-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 700;
  opacity: .75;
  white-space: nowrap;
}

#nhChatOverlay .chat-vp-header .chat-vp-dl {
  margin-left: auto;
}

#nhChatOverlay .chat-vp-header i {
  font-size: .72rem;
  opacity: .85;
}

#nhChatOverlay .chat-vp-dur {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Row 2: play + waves + speed + download */
#nhChatOverlay .chat-vp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Play/Pause — minimal transparent circle */
#nhChatOverlay .chat-vp-play {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: currentColor;
  opacity: .75;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}

#nhChatOverlay .chat-vp-play:hover {
  opacity: 1;
  background: rgba(255,255,255,.12);
}

#nhChatOverlay .chat-vp-play:active {
  opacity: .7;
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-vp-play:hover {
    background: rgba(0,0,0,.06);
  }
}

#nhChatOverlay .chat-vp-play .fa-play  { margin-left: 2px; }
#nhChatOverlay .chat-vp-play .fa-pause { margin-left: 0; }

/* Wave bars */
#nhChatOverlay .chat-vp-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-vp-waves span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .3;
  flex-shrink: 0;
}

/* Static heights (idle) */
#nhChatOverlay .chat-vp-waves span:nth-child(1)  { height: 10px; }
#nhChatOverlay .chat-vp-waves span:nth-child(2)  { height: 18px; }
#nhChatOverlay .chat-vp-waves span:nth-child(3)  { height: 24px; }
#nhChatOverlay .chat-vp-waves span:nth-child(4)  { height: 14px; }
#nhChatOverlay .chat-vp-waves span:nth-child(5)  { height: 22px; }
#nhChatOverlay .chat-vp-waves span:nth-child(6)  { height: 18px; }
#nhChatOverlay .chat-vp-waves span:nth-child(7)  { height: 26px; }
#nhChatOverlay .chat-vp-waves span:nth-child(8)  { height: 12px; }
#nhChatOverlay .chat-vp-waves span:nth-child(9)  { height: 20px; }
#nhChatOverlay .chat-vp-waves span:nth-child(10) { height: 8px; }

/* Playing: animate */
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span {
  opacity: .8;
  animation: chatVpWave 1.1s ease-in-out infinite;
}

#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(1)  { animation-delay: 0s;    animation-duration: 1.00s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(2)  { animation-delay: .10s;  animation-duration: 0.85s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(3)  { animation-delay: .20s;  animation-duration: 1.15s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(4)  { animation-delay: .05s;  animation-duration: 0.90s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(5)  { animation-delay: .25s;  animation-duration: 1.05s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(6)  { animation-delay: .15s;  animation-duration: 0.95s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(7)  { animation-delay: .30s;  animation-duration: 1.20s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(8)  { animation-delay: .08s;  animation-duration: 0.88s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(9)  { animation-delay: .18s;  animation-duration: 1.10s; }
#nhChatOverlay .chat-voice-bubble.is-playing .chat-vp-waves span:nth-child(10) { animation-delay: .22s;  animation-duration: 0.80s; }

@keyframes chatVpWave {
  0%, 100% { transform: scaleY(.35); }
  50%       { transform: scaleY(1); }
}

/* Speed button */
#nhChatOverlay .chat-vp-speed {
  border: 1.5px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  opacity: .6;
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 6px;
  min-width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: .02em;
  transition: opacity .15s ease, background .15s ease;
}

#nhChatOverlay .chat-vp-speed:hover {
  opacity: 1;
  background: rgba(255,255,255,.10);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-vp-speed:hover {
    background: rgba(0,0,0,.06);
  }
}

/* Download button */
#nhChatOverlay .chat-vp-dl {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: .5;
  font-size: .72rem;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity .15s ease;
}

#nhChatOverlay .chat-vp-dl:hover {
  opacity: 1;
}

/* Seek ±15s buttons */
#nhChatOverlay .chat-vp-seek {
  border: 1.5px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  opacity: .55;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 5px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: .01em;
  transition: opacity .15s ease, background .15s ease;
}

#nhChatOverlay .chat-vp-seek:hover {
  opacity: 1;
  background: rgba(255,255,255,.10);
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-vp-seek:hover {
    background: rgba(0,0,0,.06);
  }
}

/* Keep old .chat-voice-pill for no-attachment fallback */
#nhChatOverlay .chat-voice-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 700;
  opacity: .7;
}

#nhChatOverlay .chat-voice-pill i { font-size: .72rem; }

/* Hidden native audio */
#nhChatOverlay .chat-voice-audio {
  display: none !important;
}

/* Template + Voice icon buttons — pill style inside composer */
  #nhChatOverlay .chat-template-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: 1px;
  font-size: .9rem;
    transition: background .16s ease, color .16s ease, transform .14s ease;
  }

  #nhChatOverlay .chat-composer-util-btn {
    transition:
      background .16s ease,
      color .16s ease,
      transform .18s ease,
      opacity .18s ease,
      margin .18s ease,
      width .18s ease,
      min-width .18s ease;
  }

  #nhChatOverlay .chat-composer-util-btn.is-slid-under {
    width: 0;
    min-width: 0;
    margin-left: -6px;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(42px) scale(.88);
  }

  #nhChatOverlay .chat-composer-tool-btn,
  #nhChatOverlay .chat-composer-send-btn {
    padding: 0 !important;
  }

  #nhChatOverlay .chat-composer-tool-btn > i,
  #nhChatOverlay .chat-composer-send-btn > i {
    font-size: 1.22rem;
    line-height: 1;
  }

  #nhChatOverlay .chat-gif-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 50%;
    background: transparent !important;
  }

  #nhChatOverlay .chat-gif-btn:hover,
  #nhChatOverlay .chat-gif-btn.is-active {
    background: transparent !important;
    color: var(--chat-accent);
    transform: translateY(-1px) scale(1.06);
  }

  #nhChatOverlay .chat-gif-btn:active {
    transform: scale(.92);
  }

#nhChatOverlay .chat-template-btn:hover,
#nhChatOverlay .chat-template-btn.is-active {
  background: rgba(245, 158, 11, .12);
  color: var(--chat-accent);
}

#nhChatOverlay .chat-template-btn:active {
  transform: scale(.9);
}

#nhChatOverlay .chat-send-btn,
#nhChatOverlay .chat-primary-btn {
  border: none;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .32);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

#nhChatOverlay .chat-send-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(245, 158, 11, .42);
}

#nhChatOverlay .chat-send-btn:active {
  transform: scale(.92);
}

#nhChatOverlay .chat-primary-btn {
  border-radius: 12px;
}

#nhChatOverlay .chat-send-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-shrink: 0;
  align-self: flex-end;
  font-size: .88rem;
}

#nhChatOverlay #chatVoiceBtn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .32);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

#nhChatOverlay #chatVoiceBtn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(245, 158, 11, .42);
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  color: #fff;
}

#nhChatOverlay #chatVoiceBtn:active {
  transform: scale(.92);
}

/* ── Template message: CSS custom-property tokens per tone ─────────────── */
#nhChatOverlay .chat-template-message {
  --tm-accent: #f59e0b;
  --tm-accent-soft: rgba(245,158,11,.12);
  --tm-accent-border: rgba(245,158,11,.22);
  --tm-stripe: rgba(245,158,11,.55);
  border-radius: 14px;
  border: 1px solid var(--tm-accent-border);
  background: var(--chat-surface);
  overflow: hidden;
  position: relative;
  padding-bottom: 4px;
}
#nhChatOverlay .chat-template-message::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tm-stripe);
  border-radius: 3px 0 0 3px;
}
#nhChatOverlay .chat-template-message[data-tone="notice"]    { --tm-accent:#3b82f6; --tm-accent-soft:rgba(59,130,246,.10); --tm-accent-border:rgba(59,130,246,.22); --tm-stripe:rgba(59,130,246,.7); }
#nhChatOverlay .chat-template-message[data-tone="event"]     { --tm-accent:#10b981; --tm-accent-soft:rgba(16,185,129,.10); --tm-accent-border:rgba(16,185,129,.24); --tm-stripe:rgba(16,185,129,.7); }
#nhChatOverlay .chat-template-message[data-tone="proposal"]  { --tm-accent:#8b5cf6; --tm-accent-soft:rgba(139,92,246,.10); --tm-accent-border:rgba(139,92,246,.22); --tm-stripe:rgba(139,92,246,.7); }
#nhChatOverlay .chat-template-message[data-tone="voting"]    { --tm-accent:#f59e0b; --tm-accent-soft:rgba(245,158,11,.12); --tm-accent-border:rgba(245,158,11,.24); --tm-stripe:rgba(245,158,11,.7); }
#nhChatOverlay .chat-template-message[data-tone="meeting"]   { --tm-accent:#ec4899; --tm-accent-soft:rgba(236,72,153,.10); --tm-accent-border:rgba(236,72,153,.22); --tm-stripe:rgba(236,72,153,.7); }
#nhChatOverlay .chat-template-message[data-tone="welcome"]   { --tm-accent:#0ea5e9; --tm-accent-soft:rgba(14,165,233,.10); --tm-accent-border:rgba(14,165,233,.22); --tm-stripe:rgba(14,165,233,.7); }
#nhChatOverlay .chat-template-message[data-tone="greeting"]  { --tm-accent:#f43f5e; --tm-accent-soft:rgba(244,63,94,.10);  --tm-accent-border:rgba(244,63,94,.22);  --tm-stripe:rgba(244,63,94,.7); }
#nhChatOverlay .chat-template-message[data-tone="department"]{ --tm-accent:#22c55e; --tm-accent-soft:rgba(34,197,94,.10);  --tm-accent-border:rgba(34,197,94,.22);  --tm-stripe:rgba(34,197,94,.7); }

/* mine bubble override — keep the left stripe, lighten surfaces */
@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-message.is-mine .chat-template-message {
    background: transparent;
    border-color: rgba(255,255,255,.12);
    --tm-stripe: rgba(255,255,255,.35);
  }
  #nhChatOverlay .chat-message.is-mine .chat-tm-headline { color: rgba(255,255,255,.96); }
  #nhChatOverlay .chat-message.is-mine .chat-tm-body   { background: transparent; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip-label,
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip-val,
  #nhChatOverlay .chat-message.is-mine .chat-tm-prose  { color: rgba(255,255,255,.78); }
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip   { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
  #nhChatOverlay .chat-message.is-mine .chat-tm-link   { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.22); }
  #nhChatOverlay .chat-message.is-mine .chat-tm-info-btn { color: rgba(255,255,255,.7); }
  #nhChatOverlay .chat-message.is-mine .chat-tm-info-tip { background: rgba(30,40,65,.95); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.18); }
  /* link-preview in dark — not-mine bubble */
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview {
    background: rgba(15, 23, 42, .58);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
  }
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-title { color: rgba(248,250,252,.96); }
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-site,
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-desc { color: rgba(226,232,240,.74); }
  #nhChatOverlay .chat-message-info-btn { color: rgba(226,232,240,.72); }
  #nhChatOverlay .chat-message-info-btn:hover { color: rgba(248,250,252,.96); }
  #nhChatOverlay .chat-message-info-modal-sheet {
    background: rgba(2, 6, 23, .96);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 -10px 38px rgba(2,6,23,.52);
  }
  #nhChatOverlay .chat-message-info-modal-sheet::before {
    background: rgba(148,163,184,.34);
  }
  #nhChatOverlay .chat-message-info-modal-head {
    border-bottom-color: rgba(148,163,184,.16);
  }
  #nhChatOverlay .chat-message-info-modal-head-copy h4 { color: rgba(248,250,252,.96); }
  #nhChatOverlay .chat-message-info-modal-head-copy p { color: rgba(148,163,184,.9); }
  #nhChatOverlay .chat-message-info-modal-close {
    color: rgba(148,163,184,.92);
  }
  #nhChatOverlay .chat-message-info-modal-close:hover {
    background: rgba(148,163,184,.12);
    color: rgba(248,250,252,.96);
  }
  #nhChatOverlay .chat-message-info-status-card,
  #nhChatOverlay .chat-message-info-sheet-text,
  #nhChatOverlay .chat-message-info-preview {
    background: rgba(15,23,42,.52);
    border-color: rgba(148,163,184,.18);
  }
  #nhChatOverlay .chat-message-info-status-row {
    border-bottom-color: rgba(148,163,184,.14);
  }
  #nhChatOverlay .chat-message-info-status-title { color: rgba(226,232,240,.86); }
  #nhChatOverlay .chat-message-info-status-value { color: rgba(248,250,252,.96); }
  #nhChatOverlay .chat-message-info-sheet-label { color: rgba(148,163,184,.9); }
  #nhChatOverlay .chat-message-info-sheet-text { color: rgba(226,232,240,.92); }
  #nhChatOverlay .chat-message-info-person {
    background: rgba(15,23,42,.52);
    border-color: rgba(148,163,184,.18);
  }
  #nhChatOverlay .chat-message-info-person-avatar {
    background: rgba(30,41,59,.96);
    color: rgba(226,232,240,.86);
  }
  #nhChatOverlay .chat-message-info-person-name { color: rgba(248,250,252,.96); }
  #nhChatOverlay .chat-message-info-person-role { color: rgba(148,163,184,.88); }
  #nhChatOverlay .chat-message-info-person-status { color: rgba(226,232,240,.88); }
  #nhChatOverlay .vd-empty {
    background: rgba(15,23,42,.52);
    border-color: rgba(148,163,184,.22);
    color: rgba(226,232,240,.82);
  }
  #nhChatOverlay .chat-message-info-preview {
    background: rgba(15,23,42,.46);
    border-color: rgba(148,163,184,.18);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble {
    background: rgba(15,23,42,.52);
    border-color: rgba(148,163,184,.18);
    color: rgba(226,232,240,.94);
    box-shadow: none;
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-sender,
  #nhChatOverlay .chat-message-info-preview .chat-bubble-time,
  #nhChatOverlay .chat-message-info-preview .chat-image-meta,
  #nhChatOverlay .chat-message-info-preview .chat-file-card-meta,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-sub,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-site,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-desc {
    color: rgba(148,163,184,.9);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text,
  #nhChatOverlay .chat-message-info-preview .chat-file-card-name,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-name,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-title {
    color: rgba(248,250,252,.96);
  }
  #nhChatOverlay .chat-message-info-preview .chat-link-preview,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-link-preview,
  #nhChatOverlay .chat-message-info-preview .chat-file-card,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card,
  #nhChatOverlay .chat-message-info-preview .chat-video-card {
    background: rgba(15,23,42,.58);
    border-color: rgba(148,163,184,.18);
    box-shadow: none;
  }
  #nhChatOverlay .chat-message-info-preview .chat-file-card-icon,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-icon {
    background: rgba(30,41,59,.96);
    color: rgba(226,232,240,.88);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text code,
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text pre,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text code,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text pre {
    background: rgba(2,6,23,.56);
    color: rgba(226,232,240,.94);
    border-color: rgba(148,163,184,.16);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text blockquote,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text blockquote {
    border-left-color: rgba(148,163,184,.34);
    color: rgba(226,232,240,.88);
  }
  #nhChatOverlay .chat-message-info-preview-note { color: rgba(148,163,184,.88); }
}

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-mine .chat-template-message {
    background: #ffffff;
    border-color: #bfdbfe;
    --tm-stripe: rgba(59,130,246,.55);
  }
  #nhChatOverlay .chat-message.is-mine .chat-tm-headline { color: #0f1626; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-body   { background: transparent; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip-label { color: #6b7a96; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip-val,
  #nhChatOverlay .chat-message.is-mine .chat-tm-prose  { color: #1e3a5f; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-chip   { background: #f0f4fb; border-color: #dce3f0; }
  #nhChatOverlay .chat-message.is-mine .chat-tm-link   { color: #1e40af; border-color: #bfdbfe; }
  /* not-mine preview card */
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview {
    background: #eef2f9;
    border-color: #c8d3e8;
    box-shadow: 0 2px 8px rgba(15,23,42,.07);
  }
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-title { color: #0f1626; }
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-site { color: #1d4ed8; }
  #nhChatOverlay .chat-message:not(.is-mine) .chat-link-preview-desc { color: #3d4f6e; }
  /* is-mine preview card */
  #nhChatOverlay .chat-message.is-mine .chat-link-preview {
    background: #ffffff;
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37,99,235,.08);
  }
  #nhChatOverlay .chat-message.is-mine .chat-link-preview-title { color: #0f1626; }
  #nhChatOverlay .chat-message.is-mine .chat-link-preview-site { color: #1d4ed8; }
  #nhChatOverlay .chat-message.is-mine .chat-link-preview-desc { color: #3d4f6e; }
  /* file & audio cards in bubbles */
  #nhChatOverlay .chat-file-card-name { color: #1e293b; }
  #nhChatOverlay .chat-file-card-meta { color: #64748b; }
  #nhChatOverlay .chat-file-card-icon { background: rgba(59,130,246,.10); color: #2563eb; }
  #nhChatOverlay .chat-audio-preview-card-name,
  #nhChatOverlay .chat-audio-card-name { color: #1e293b; }
  #nhChatOverlay .chat-audio-preview-card-sub,
  #nhChatOverlay .chat-audio-card-sub { color: #64748b; }
  #nhChatOverlay .chat-audio-preview-card-icon,
  #nhChatOverlay .chat-audio-card-icon { color: #2563eb; }
  /* image meta */
  #nhChatOverlay .chat-image-meta { color: #4a5575; }
  /* inline file ref */
  #nhChatOverlay .chat-inline-file-ref,
  #nhChatOverlay .chat-inline-file-ref-mark { color: #2563eb; }
  /* member sheet */
  #nhChatOverlay .chat-member-sheet-card { background: #ffffff; border-color: rgba(15,23,42,.08); }
  #nhChatOverlay .chat-member-sheet-row-sub { border-top-color: rgba(15,23,42,.08); }
  #nhChatOverlay .chat-member-sheet-avatar { background: rgba(59,130,246,.10); color: #1e3a5f; }
  #nhChatOverlay .chat-member-sheet-name { color: #0f1626; }
  #nhChatOverlay .chat-member-sheet-role { color: #2d3a52; }
  #nhChatOverlay .chat-member-sheet-sub { color: #6b7a96; }
  #nhChatOverlay .chat-member-sheet-side-label { color: #6b7a96; }
  #nhChatOverlay .chat-member-sheet-side-value { color: #2d3a52; }
  #nhChatOverlay .chat-member-sheet-chip { background: rgba(245,158,11,.12); color: #b45309; }
  #nhChatOverlay .chat-message-info-btn { color: #6b7a96; }
  #nhChatOverlay .chat-message-info-btn:hover { color: #0f1626; }
  #nhChatOverlay .chat-message-info-modal-sheet {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 -8px 32px rgba(15,23,42,.12);
  }
  #nhChatOverlay .chat-message-info-modal-head {
    border-bottom-color: rgba(15,23,42,.08);
  }
  #nhChatOverlay .chat-message-info-modal-head-copy h4 { color: #0f1626; }
  #nhChatOverlay .chat-message-info-modal-head-copy p { color: #6b7a96; }
  #nhChatOverlay .chat-message-info-modal-close {
    color: #6b7a96;
  }
  #nhChatOverlay .chat-message-info-modal-close:hover {
    background: #f3f6fb;
    color: #0f1626;
  }
  #nhChatOverlay .chat-message-info-status-card,
  #nhChatOverlay .chat-message-info-sheet-text,
  #nhChatOverlay .chat-message-info-preview {
    background: #f8fafc;
    border-color: rgba(15,23,42,.10);
  }
  #nhChatOverlay .chat-message-info-status-row {
    border-bottom-color: rgba(15,23,42,.08);
  }
  #nhChatOverlay .chat-message-info-status-title { color: #2d3a52; }
  #nhChatOverlay .chat-message-info-status-value { color: #0f1626; }
  #nhChatOverlay .chat-message-info-sheet-label { color: #6b7a96; }
  #nhChatOverlay .chat-message-info-sheet-text { color: #2d3a52; }
  #nhChatOverlay .chat-message-info-person {
    background: #f8fafc;
    border-color: rgba(15,23,42,.10);
  }
  #nhChatOverlay .chat-message-info-person-avatar {
    background: rgba(59,130,246,.10);
    color: #1e3a5f;
  }
  #nhChatOverlay .chat-message-info-person-name { color: #0f1626; }
  #nhChatOverlay .chat-message-info-person-role { color: #6b7a96; }
  #nhChatOverlay .chat-message-info-person-status { color: #2d3a52; }
  #nhChatOverlay .vd-empty {
    background: #f8fafc;
    border-color: rgba(15,23,42,.12);
    color: #6b7a96;
  }
  #nhChatOverlay .chat-message-info-preview {
    background: #f8fafc;
    border-color: rgba(15,23,42,.10);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
    color: #0f172a;
    box-shadow: none;
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-sender,
  #nhChatOverlay .chat-message-info-preview .chat-bubble-time,
  #nhChatOverlay .chat-message-info-preview .chat-image-meta,
  #nhChatOverlay .chat-message-info-preview .chat-file-card-meta,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-sub,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-site,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-desc {
    color: #6b7a96;
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text,
  #nhChatOverlay .chat-message-info-preview .chat-file-card-name,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-name,
  #nhChatOverlay .chat-message-info-preview .chat-link-preview-title {
    color: #0f1626;
  }
  #nhChatOverlay .chat-message-info-preview .chat-link-preview,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-link-preview,
  #nhChatOverlay .chat-message-info-preview .chat-file-card,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card,
  #nhChatOverlay .chat-message-info-preview .chat-video-card {
    background: #ffffff;
    border-color: rgba(15,23,42,.10);
    box-shadow: none;
  }
  #nhChatOverlay .chat-message-info-preview .chat-file-card-icon,
  #nhChatOverlay .chat-message-info-preview .chat-audio-card-icon {
    background: rgba(59,130,246,.10);
    color: #2563eb;
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text code,
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text pre,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text code,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text pre {
    background: #eef2f7;
    color: #1e3a5f;
    border-color: rgba(15,23,42,.08);
  }
  #nhChatOverlay .chat-message-info-preview .chat-bubble-text blockquote,
  #nhChatOverlay .chat-message-info-preview .chat-message.is-mine .chat-bubble-text blockquote {
    border-left-color: rgba(37,99,235,.28);
    color: #3d4f6e;
  }
  #nhChatOverlay .chat-message-info-preview-note { color: #6b7a96; }
  /* links-toggle divider */
  #nhChatOverlay .chat-links-toggle { color: #6b7a96; }
  #nhChatOverlay .chat-links-toggle::before,
  #nhChatOverlay .chat-links-toggle::after { background: #c8d3e8; }
  #nhChatOverlay .chat-message.is-mine .chat-links-toggle { color: #1d4ed8; }
  #nhChatOverlay .chat-message.is-mine .chat-links-toggle::before,
  #nhChatOverlay .chat-message.is-mine .chat-links-toggle::after { background: #93c5fd; }
}

/* Header band */
#nhChatOverlay .chat-tm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 8px 15px;
  background: var(--tm-accent-soft);
  border-bottom: 1px solid var(--tm-accent-border);
}
#nhChatOverlay .chat-tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tm-accent-soft);
  border: 1px solid var(--tm-accent-border);
  color: var(--tm-accent);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#nhChatOverlay .chat-tm-badge i { font-size: .7rem; }

/* Headline */
#nhChatOverlay .chat-tm-headline {
  padding: 10px 28px 0 15px;
  margin: 0;
  font-size: .97rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--chat-text-strong);
  font-family: var(--chat-font-display);
  letter-spacing: -.01em;
}

/* Body zone */
#nhChatOverlay .chat-tm-body {
  padding: 8px 12px 22px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Prose block (textarea/long text) */
#nhChatOverlay .chat-tm-prose {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--chat-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Inline chips row */
#nhChatOverlay .chat-tm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#nhChatOverlay .chat-tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  padding: 4px 9px;
  min-width: 0;
}
#nhChatOverlay .chat-tm-chip i {
  font-size: .7rem;
  color: var(--tm-accent);
  flex-shrink: 0;
}
#nhChatOverlay .chat-tm-chip-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--chat-sub);
  white-space: nowrap;
}
#nhChatOverlay .chat-tm-chip-val {
  font-size: .78rem;
  font-weight: 600;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Status pill (for proposal/election statuses) */
#nhChatOverlay .chat-tm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--tm-accent-soft);
  color: var(--tm-accent);
  border: 1px solid var(--tm-accent-border);
  align-self: flex-start;
}
#nhChatOverlay .chat-tm-status i { font-size: .72rem; }

/* Action link button */
#nhChatOverlay .chat-tm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 12px;
  border: 1px solid var(--tm-accent-border);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--tm-accent);
  text-decoration: none;
  align-self: flex-start;
  transition: background .14s ease;
}
#nhChatOverlay .chat-tm-link:hover { background: var(--tm-accent-soft); }
#nhChatOverlay .chat-tm-link i { font-size: .72rem; }

/* Info button — bottom-right of template message */
#nhChatOverlay .chat-tm-info-btn {
  position: absolute;
  bottom: 7px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--tm-accent);
  opacity: .45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  cursor: pointer;
  padding: 0;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 2;
}
#nhChatOverlay .chat-tm-info-btn:hover { opacity: 1; transform: scale(1.15); }

/* Info tooltip */
#nhChatOverlay .chat-tm-info-tip {
  position: absolute;
  bottom: 30px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--chat-surface);
  border: 1px solid var(--tm-accent-border);
  color: var(--tm-accent);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  z-index: 3;
  pointer-events: none;
}
#nhChatOverlay .chat-tm-info-tip i { font-size: .7rem; }

@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-tm-info-tip { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
}

/* Divider inside body */
#nhChatOverlay .chat-tm-sep {
  height: 1px;
  background: var(--chat-border);
  margin: 2px 0;
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-template-message { background: #fff; }
  #nhChatOverlay .chat-tm-chip { background: #f4f6fb; border-color: #dce3f0; }
  #nhChatOverlay .chat-tm-chip-label { color: #6b7a96; }
  #nhChatOverlay .chat-tm-chip-val { color: #0f1626; }
  #nhChatOverlay .chat-tm-prose { color: #2d3a52; }
  #nhChatOverlay .chat-tm-headline { color: #0f1626; }
  #nhChatOverlay .chat-tm-sep { background: #dce3f0; }
}

#nhChatOverlay .chat-jump-btn {
  position: absolute;
  right: 16px;
  bottom: 68px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 158, 11, .2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-surface) 90%, transparent);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  z-index: 6;
}

#nhChatOverlay .chat-jump-btn:hover {
  color: var(--chat-accent);
  border-color: rgba(245, 158, 11, .34);
}

#nhChatOverlay .chat-primary-btn {
  padding: 10px 16px;
}

#nhChatOverlay .chat-send-btn:disabled,
#nhChatOverlay .chat-primary-btn:disabled {
  opacity: .45;
  pointer-events: none;
}

/* ── Drawers ───────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   DRAWERS
   • Big screen (≥861px): inline flex column — pushes chat-app left
   • Mobile (≤860px):     full-screen overlay — unchanged behaviour
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared base ── */
#nhChatOverlay .chat-drawer {
  pointer-events: none;
}
#nhChatOverlay .chat-drawer.is-open {
  pointer-events: auto;
}

/* ── Backdrop ── */
#nhChatOverlay .chat-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 24, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
  cursor: pointer;
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-drawer-backdrop {
    background: rgba(15, 22, 38, .28);
  }
}
#nhChatOverlay .chat-drawer.is-open .chat-drawer-backdrop {
  opacity: 1;
}

/* ── Panel ── */
#nhChatOverlay .chat-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border-left: 1px solid var(--chat-border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
#nhChatOverlay .chat-drawer.is-open .chat-drawer-panel {
  transform: translateX(0);
}

/* ── Header / title / search / body / footer — unchanged ── */
#nhChatOverlay .chat-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  height: 56px;
  border-bottom: 1px solid var(--chat-border);
  flex-shrink: 0;
}
#nhChatOverlay .chat-drawer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#nhChatOverlay .chat-drawer-title i {
  color: var(--chat-accent);
  font-size: .95rem;
  flex-shrink: 0;
}
#nhChatOverlay .chat-drawer-title strong {
  color: var(--chat-text-strong);
  font-family: var(--chat-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nhChatOverlay .chat-drawer-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--chat-border);
  flex-shrink: 0;
}
#nhChatOverlay .chat-drawer-search i {
  position: absolute;
  left: 26px;
  color: var(--chat-sub);
  font-size: .8rem;
  opacity: .6;
  pointer-events: none;
}
#nhChatOverlay .chat-drawer-search input {
  width: 100%;
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  padding: 9px 12px 9px 32px;
  outline: none;
}
#nhChatOverlay .chat-drawer-search input::placeholder {
  color: var(--chat-sub);
  opacity: .55;
}
#nhChatOverlay .chat-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#nhChatOverlay .chat-drawer-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--chat-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
}
#nhChatOverlay .chat-drawer-footer .chat-modal-note {
  flex: none;
  width: 100%;
}
#nhChatOverlay .chat-drawer-footer .chat-primary-btn {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   BIG SCREEN (≥861px) — push-sidebar mode
   Drawers inside .chat-app become a flex column; backdrop hidden.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  /* .chat-app is already flex-row; drawers start collapsed (width:0) */
  #nhChatOverlay .chat-app > .chat-drawer {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    pointer-events: none;
    transition: width .26s cubic-bezier(.4, 0, .2, 1);
    border-left: 1px solid var(--chat-border);
  }
  #nhChatOverlay .chat-app > .chat-drawer.is-open {
    width: 320px;
    pointer-events: auto;
  }
  /* Panel fills the drawer column — no absolute positioning needed */
  #nhChatOverlay .chat-app > .chat-drawer .chat-drawer-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    transform: none;
    box-shadow: none;
    border-left: none;
    transition: none;
  }
  /* Backdrop hidden — push layout replaces the overlay metaphor */
  #nhChatOverlay .chat-app > .chat-drawer .chat-drawer-backdrop {
    display: none;
  }
  /* Also adjust the 30/70 split: when a drawer is open, sidebar+main still fill remaining space */
  #nhChatOverlay .chat-app.has-drawer-open > .chat-sidebar {
    flex: 0 0 calc(35% - 64px);
    width: calc(35% - 64px);
    max-width: calc(35% - 64px);
  }
  #nhChatOverlay .chat-app.has-drawer-open > .chat-main {
    flex: 1 1 0;
    max-width: none;
  }
}

/* ── Mobile (≤860px) — full-width overlay, no change ── */
@media (max-width: 860px) {
  #nhChatOverlay .chat-app > .chat-drawer {
    position: absolute;
    inset: 0;
    width: auto;
  }
  #nhChatOverlay .chat-drawer-panel {
    width: 100%;
    border-left: none;
    box-shadow: none;
  }
}

/* ── #chatScheduleCallModal is a direct child of #nhChatOverlay (position:fixed; display:flex).
   position:absolute on a flex child doesn't produce a full-cover overlay — use fixed
   so inset:0 spans the full viewport, above the shell (z-index 9096 > shell's flex layer). */
#chatScheduleCallModal {
  position: fixed;
  inset: 0;
  z-index: 9096;
}


#nhChatOverlay .chat-form-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 0 12px;
  padding: 0;
}

#nhChatOverlay .chat-form-block {
  padding: 14px 16px 0;
}

#nhChatOverlay .chat-form-block label {
  display: block;
  margin-bottom: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--chat-sub);
  text-transform: uppercase;
  letter-spacing: .04em;
}

#nhChatOverlay .chat-form-block input,
#nhChatOverlay .chat-form-block textarea,
#nhChatOverlay .chat-form-block select {
  width: 100%;
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  padding: 10px 12px;
  outline: none;
}

#nhChatOverlay .chat-form-block textarea {
  resize: vertical;
  min-height: 120px;
}

#nhChatOverlay .chat-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  background: var(--chat-surface-2);
  cursor: pointer;
}

#nhChatOverlay .chat-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#nhChatOverlay .chat-switch-copy strong {
  font-size: .92rem;
  font-weight: 700;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-switch-copy small {
  font-size: .77rem;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-switch-control {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
}

#nhChatOverlay .chat-switch-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

#nhChatOverlay .chat-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, .35);
  transition: background .18s ease;
}

#nhChatOverlay .chat-switch-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

#nhChatOverlay .chat-switch-control input:checked + .chat-switch-slider {
  background: rgba(206, 27, 39, .55);
}

#nhChatOverlay .chat-switch-control input:checked + .chat-switch-slider::after {
  transform: translateX(18px);
}

#nhChatOverlay #chatGroupModal .chat-drawer-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#nhChatOverlay #chatGroupModal .chat-form-block {
  padding: 14px 16px 0;
  flex: none;
}

#nhChatOverlay #chatGroupModal #chatGroupAccessBlock {
  padding-top: 12px;
}

#nhChatOverlay #chatGroupModal #chatGroupAccessBlock > label:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--chat-sub);
  text-transform: uppercase;
  letter-spacing: .04em;
}

#nhChatOverlay #chatGroupModal .chat-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  background: var(--chat-surface-2);
  cursor: pointer;
}

#nhChatOverlay #chatGroupModal .chat-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#nhChatOverlay #chatGroupModal .chat-switch-copy strong {
  font-size: .92rem;
  font-weight: 700;
  color: var(--chat-text-strong);
}

#nhChatOverlay #chatGroupModal .chat-switch-copy small {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--chat-sub);
}

#nhChatOverlay #chatGroupModal .chat-switch-control {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
}

#nhChatOverlay #chatGroupModal .chat-switch-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#nhChatOverlay #chatGroupModal .chat-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, .35);
  transition: background .18s ease;
}

#nhChatOverlay #chatGroupModal .chat-switch-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

#nhChatOverlay #chatGroupModal .chat-switch-control input:checked + .chat-switch-slider {
  background: rgba(206, 27, 39, .55);
}

#nhChatOverlay #chatGroupModal .chat-switch-control input:checked + .chat-switch-slider::after {
  transform: translateX(18px);
}

#nhChatOverlay .chat-member-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 0;
}

#nhChatOverlay .chat-forward-note {
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 10px;
  flex: none;
  width: 100%;
}

#nhChatOverlay .chat-forward-target-list,
#nhChatOverlay #chatForwardTargets {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#nhChatOverlay #chatForwardSummaryNote {
  display: block;
  flex: none;
  width: auto;
  margin: 0 0 10px;
  margin-left: 16px;
  margin-right: 16px;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-forward-target-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
}

#nhChatOverlay .chat-forward-target {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  background: var(--chat-surface-2);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

#nhChatOverlay .chat-forward-target:hover {
  border-color: var(--chat-border-2);
  background: var(--chat-surface-3);
}

#nhChatOverlay .chat-forward-target:active {
  transform: scale(.992);
}

#nhChatOverlay .chat-forward-target.is-selected {
  border-color: rgba(59, 130, 246, .42);
  background: rgba(59, 130, 246, .08);
}

#nhChatOverlay .chat-forward-target .chat-avatar {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

#nhChatOverlay .chat-forward-target-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#nhChatOverlay .chat-forward-target-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-forward-target-subtitle {
  font-size: .75rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-header-avatar,
#nhChatOverlay .chat-header-meta {
  cursor: pointer;
}

#nhChatOverlay .chat-header-avatar,
#nhChatOverlay .chat-header-meta {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease;
}

#nhChatOverlay .chat-header-meta.is-about-trigger {
  padding: 3px 8px 3px 4px;
  margin-left: -4px;
}

#nhChatOverlay .chat-header-avatar.is-about-trigger:hover,
#nhChatOverlay .chat-header-meta.is-about-trigger:hover {
  background: rgba(245, 158, 11, .08);
}

#nhChatOverlay .chat-header-avatar.is-about-trigger:hover {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .18);
}

#nhChatOverlay .chat-header-avatar.is-about-trigger:active,
#nhChatOverlay .chat-header-meta.is-about-trigger:active {
  transform: scale(.98);
}

@media (hover: none) {
  #nhChatOverlay .chat-header-avatar.is-about-trigger:hover,
  #nhChatOverlay .chat-header-meta.is-about-trigger:hover {
    background: transparent;
    box-shadow: none;
  }
}

#nhChatOverlay .chat-conversation-info-panel .chat-drawer-body {
  padding: 0;
  contain: layout paint style;
}

#nhChatOverlay .chat-conversation-info-panel .chat-drawer-header {
  min-height: 50px;
  height: auto;
  padding: 8px 12px;
  gap: 8px;
  background: var(--chat-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

#nhChatOverlay .chat-conversation-info-panel .chat-drawer-title {
  order: 1;
  flex: 1;
  min-width: 0;
  gap: 8px;
}

#nhChatOverlay .chat-conversation-info-panel .chat-drawer-title i {
  font-size: .95rem;
}

#nhChatOverlay .chat-conversation-info-panel .chat-drawer-title strong {
  font-size: 1.15rem;
  line-height: 1.1;
}

#nhChatOverlay .chat-conversation-info-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--chat-sub);
  font-size: 1.18rem;
  line-height: 1;
}

#nhChatOverlay .chat-conversation-info-close i {
  font-size: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#nhChatOverlay .chat-conversation-info-close-mobile {
  display: none;
}

#nhChatOverlay .chat-conversation-info-close-desktop {
  display: inline-flex;
  margin-left: auto;
}

#nhChatOverlay .chat-conversation-info-body {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 24px;
  contain: layout paint style;
}

#nhChatOverlay .chat-conversation-info-avatar-wrap {
  position: relative;
  display: inline-flex;
}

#nhChatOverlay .chat-conversation-info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px 4px;
}

#nhChatOverlay .chat-conversation-info-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: var(--chat-surface-3);
  border: 1px solid var(--chat-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--chat-accent);
  font-size: 1.8rem;
  font-weight: 800;
}

#nhChatOverlay .chat-conversation-info-avatar-edit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, .84);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-conversation-info-avatar-edit:hover {
  background: rgba(30, 41, 59, .92);
}

#nhChatOverlay .chat-conversation-info-avatar-edit i {
  pointer-events: none;
}

#nhChatOverlay .chat-conversation-info-avatar.is-direct {
  border-radius: 999px;
}

#nhChatOverlay .chat-conversation-info-avatar.is-group {
  border-radius: 999px;
}

#nhChatOverlay .chat-conversation-info-avatar.is-public-group-avatar {
  box-shadow: 0 0 0 3px #D96C8A;
}

#nhChatOverlay .chat-conversation-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

#nhChatOverlay .chat-conversation-info-avatar[data-viewable-image] {
  cursor: pointer;
}

#nhChatOverlay .chat-conversation-info-title {
  margin-top: 16px;
  color: var(--chat-text-strong);
  font-family: var(--chat-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}

#nhChatOverlay .chat-conversation-info-title-wrap {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

#nhChatOverlay .chat-conversation-info-title-wrap .chat-conversation-info-title {
  margin-top: 0;
}

#nhChatOverlay .chat-conversation-info-title-toggle {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

#nhChatOverlay .chat-conversation-info-title-editor {
  width: min(320px, calc(100vw - 72px));
  margin: 8px auto 0;
}

#nhChatOverlay .chat-conversation-info-title-editor input {
  width: 100%;
  border: 1px solid var(--chat-line);
  border-radius: 10px;
  background: var(--chat-surface);
  color: var(--chat-text);
  padding: 10px 12px;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: center;
}

#nhChatOverlay .chat-conversation-info-title-editor input:focus {
  outline: none;
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 3px rgba(11,116,222,.12);
}

#nhChatOverlay .chat-conversation-info-subtitle {
  margin-top: 6px;
  color: var(--chat-sub);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
}

#nhChatOverlay .chat-conversation-info-subtag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(217, 108, 138, .30);
  border-radius: 999px;
  color: #D96C8A;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: middle;
}

#nhChatOverlay .chat-conversation-info-section {
  margin-top: 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px 2px;
}

#nhChatOverlay .chat-conversation-info-quick-actions-section {
  margin-top: 14px;
}

#nhChatOverlay .chat-conversation-info-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#nhChatOverlay .chat-conversation-info-quick-action {
  aspect-ratio: 1 / 1;
  min-height: 78px;
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 10px 6px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

#nhChatOverlay .chat-conversation-info-quick-action:hover {
  border-color: rgba(245, 158, 11, .28);
  color: var(--chat-accent);
  background: color-mix(in srgb, var(--chat-surface-2) 90%, rgba(245, 158, 11, .10));
}

#nhChatOverlay .chat-conversation-info-quick-action:active {
  transform: scale(.97);
}

#nhChatOverlay .chat-conversation-info-quick-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: 1rem;
}

#nhChatOverlay .chat-conversation-info-quick-action-label {
  font-size: .77rem;
  font-weight: 800;
  line-height: 1.2;
}

#nhChatOverlay .chat-conversation-info-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#nhChatOverlay .chat-conversation-info-section-label {
  color: var(--chat-sub);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#nhChatOverlay .chat-conversation-info-description-toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
}

#nhChatOverlay .chat-conversation-info-description-view,
#nhChatOverlay .chat-conversation-info-description-empty {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  font-size: .9rem;
  line-height: 1.5;
  word-break: break-word;
}

#nhChatOverlay .chat-conversation-info-description-view {
  position: relative;
}

#nhChatOverlay .chat-conversation-info-description-view.has-more {
  padding-right: 88px;
}

#nhChatOverlay .chat-conversation-info-description-view.is-collapsed .chat-conversation-info-description-content {
  max-height: 8.6em;
  overflow: hidden;
}

#nhChatOverlay .chat-conversation-info-description-view.is-collapsed::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--chat-surface-2) 78%);
}

#nhChatOverlay .chat-conversation-info-description-content {
  display: block;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

#nhChatOverlay .chat-conversation-info-description-content > *:first-child {
  margin-top: 0;
}

#nhChatOverlay .chat-conversation-info-description-content > *:last-child {
  margin-bottom: 0;
}

#nhChatOverlay .chat-conversation-info-description-content p,
#nhChatOverlay .chat-conversation-info-description-content ul,
#nhChatOverlay .chat-conversation-info-description-content ol,
#nhChatOverlay .chat-conversation-info-description-content blockquote,
#nhChatOverlay .chat-conversation-info-description-content pre {
  margin: 0 0 10px;
}

#nhChatOverlay .chat-conversation-info-description-content ul,
#nhChatOverlay .chat-conversation-info-description-content ol {
  padding-left: 18px;
}

#nhChatOverlay .chat-conversation-info-description-content a {
  color: var(--chat-blue);
  text-decoration: none;
}

#nhChatOverlay .chat-conversation-info-description-content code {
  background: rgba(148, 163, 184, .12);
  border-radius: 6px;
  padding: 1px 5px;
  font-size: .85em;
}

#nhChatOverlay .chat-conversation-info-description-content pre {
  background: rgba(148, 163, 184, .10);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  padding: 10px 12px;
  overflow: auto;
}

#nhChatOverlay .chat-conversation-info-description-content blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--chat-border-2);
  color: var(--chat-sub);
}

#nhChatOverlay .chat-conversation-info-description-empty {
  color: var(--chat-sub);
  font-style: italic;
}

#nhChatOverlay .chat-conversation-info-description-more {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--chat-blue);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  z-index: 1;
}

#nhChatOverlay .chat-conversation-info-description-more:hover {
  text-decoration: underline;
}

#nhChatOverlay .chat-conversation-info-description-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#nhChatOverlay .chat-conversation-info-description-editor textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
  padding: 12px 14px;
  outline: none;
  font: inherit;
  line-height: 1.5;
}

#nhChatOverlay .chat-conversation-info-description-editor textarea::placeholder {
  color: var(--chat-sub);
}

#nhChatOverlay .chat-conversation-info-resources-section {
  gap: 12px;
}

#nhChatOverlay .chat-conversation-info-resources-open {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

#nhChatOverlay .chat-conversation-info-resources-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}

#nhChatOverlay .chat-conversation-info-resources-title {
  color: var(--chat-text-strong);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

#nhChatOverlay .chat-conversation-info-resources-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--chat-sub);
  font-size: .86rem;
  font-weight: 700;
}

#nhChatOverlay .chat-conversation-info-resources-count {
  color: var(--chat-text);
}

#nhChatOverlay .chat-conversation-info-resources-section.is-public-group .chat-conversation-info-resources-open,
#nhChatOverlay .chat-conversation-info-resources-section.is-public-group .chat-conversation-info-resources-title,
#nhChatOverlay .chat-conversation-info-resources-section.is-public-group .chat-conversation-info-resources-meta,
#nhChatOverlay .chat-conversation-info-resources-section.is-public-group .chat-conversation-info-resources-count,
#nhChatOverlay .chat-conversation-info-resources-section.is-public-group .chat-conversation-info-resources-open i {
  color: #D96C8A;
}

#nhChatOverlay .chat-conversation-info-resources-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

#nhChatOverlay .chat-conversation-info-resources-strip::-webkit-scrollbar {
  height: 6px;
}

#nhChatOverlay .chat-conversation-info-resources-strip::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .24);
  border-radius: 999px;
}

#nhChatOverlay .chat-conversation-info-members-section {
  gap: 10px;
}

#nhChatOverlay .chat-conversation-info-members-divider {
  display: flex;
  align-items: center;
  min-width: 0;
}

#nhChatOverlay .chat-conversation-info-members-divider::after {
  content: '';
  flex: 1;
  min-width: 0;
  height: 1px;
  margin-left: 10px;
  background: var(--chat-border);
}

#nhChatOverlay .chat-conversation-info-members-divider-label {
  color: var(--chat-text-strong);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

#nhChatOverlay .chat-conversation-info-members-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#nhChatOverlay .chat-conversation-info-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#nhChatOverlay .chat-conversation-info-member-remove {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-left: auto;
  padding: 0;
  border-radius: 999px;
  color: #dc2626;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .14);
  flex-shrink: 0;
}

#nhChatOverlay .chat-conversation-info-member-remove:hover {
  background: rgba(220, 38, 38, .14);
}

#nhChatOverlay .chat-conversation-info-member-row.is-action {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

#nhChatOverlay .chat-conversation-info-member-row.is-action:hover .chat-conversation-info-member-name,
#nhChatOverlay .chat-conversation-info-member-row.is-action:hover .chat-conversation-info-member-sub {
  color: var(--chat-accent);
}

#nhChatOverlay .chat-conversation-info-option-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#nhChatOverlay .chat-conversation-info-option-row.is-note {
  cursor: default;
}

#nhChatOverlay .chat-conversation-info-option-row.is-danger .chat-conversation-info-member-name {
  color: #b91c1c;
}

#nhChatOverlay .chat-conversation-info-option-row.is-danger .chat-conversation-info-member-sub {
  color: rgba(185, 28, 28, .74);
}

#nhChatOverlay .chat-conversation-info-member-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-3);
  overflow: visible;
  flex: 0 0 38px;
}

#nhChatOverlay .chat-conversation-info-member-avatar.is-action {
  color: var(--chat-accent);
  background: rgba(59, 130, 246, .10);
  border-color: rgba(59, 130, 246, .24);
  overflow: visible;
}

#nhChatOverlay .chat-conversation-info-member-avatar.is-action i {
  font-size: .92rem;
}

#nhChatOverlay .chat-conversation-info-member-avatar > img {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

#nhChatOverlay .chat-conversation-info-member-avatar .chat-avatar-badge {
  display: none;
}

#nhChatOverlay .chat-conversation-info-member-avatar .chat-avatar-presence {
  right: -2px;
  bottom: -2px;
}

#nhChatOverlay .chat-conversation-info-member-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

#nhChatOverlay .chat-conversation-info-member-name {
  display: block;
  color: var(--chat-text-strong);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nhChatOverlay .chat-conversation-info-member-sub {
  display: block;
  color: var(--chat-sub);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#nhChatOverlay .chat-conversation-info-members-mini-divider {
  margin: 8px 0 2px;
  padding: 0 2px;
  color: #D96C8A;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#nhChatOverlay .chat-conversation-info-resource-thumb {
    width: 94px;
    height: 94px;
    min-width: 94px;
    min-height: 94px;
    padding: 0;
    border: 1px solid var(--chat-border);
    border-radius: 10px;
    background: var(--chat-surface-2);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#nhChatOverlay .chat-conversation-info-resource-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-conversation-info-resource-thumb.is-loading {
  background:
    linear-gradient(110deg, rgba(148, 163, 184, .10) 8%, rgba(148, 163, 184, .22) 18%, rgba(148, 163, 184, .10) 33%),
    var(--chat-surface-2);
  background-size: 200% 100%;
  animation: chatSkeletonShimmer 1.2s linear infinite;
}

#nhChatOverlay .chat-conversation-info-resource-thumb.is-failed {
  position: relative;
  background: rgba(15, 23, 42, .08);
}

#nhChatOverlay .chat-conversation-info-resource-thumb.is-failed img {
  opacity: .2;
}

#nhChatOverlay .chat-conversation-info-resource-thumb.is-failed::after {
  content: 'Tap to reload';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .46);
  color: #f8fafc;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
}

#nhChatOverlay .chat-discussion-resources-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-discussion-resources-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 18, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#nhChatOverlay .chat-discussion-resources-sheet {
  position: relative;
  width: min(860px, calc(100% - 28px));
  height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  contain: layout paint style;
  will-change: transform, opacity;
}

#nhChatOverlay .chat-discussion-resources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface) 94%, transparent);
}

#nhChatOverlay .chat-discussion-resources-head-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nhChatOverlay .chat-discussion-resources-head-copy h4 {
  margin: 0;
  color: var(--chat-text-strong);
  font-family: var(--chat-font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.2;
}

#nhChatOverlay .chat-discussion-resources-head-copy p {
  margin: 0;
  color: var(--chat-sub);
  font-size: .84rem;
  font-weight: 600;
}

#nhChatOverlay .chat-discussion-resources-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-surface-2) 88%, transparent);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nhChatOverlay .chat-discussion-resources-modal.is-public-group .chat-discussion-resources-head-copy h4,
#nhChatOverlay .chat-discussion-resources-modal.is-public-group .chat-discussion-resources-close,
#nhChatOverlay .chat-discussion-resources-modal.is-public-group .chat-discussion-resources-close i {
  color: #D96C8A;
}

#nhChatOverlay .chat-discussion-resources-modal.is-public-group .chat-discussion-resources-close {
  border-color: #D96C8A;
}

#nhChatOverlay .chat-discussion-resources-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--chat-border);
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#nhChatOverlay .chat-discussion-resources-tabs.is-loading {
  pointer-events: none;
  opacity: .78;
}

#nhChatOverlay .chat-discussion-resources-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--chat-sub);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

#nhChatOverlay .chat-discussion-resources-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface-2) 90%, transparent);
  color: var(--chat-sub);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
}

#nhChatOverlay .chat-discussion-resources-tab.is-active {
  color: var(--chat-text-strong);
  border-bottom-color: var(--chat-accent);
}

#nhChatOverlay .chat-discussion-resources-tab.is-active .chat-discussion-resources-tab-count {
  color: var(--chat-text-strong);
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .10);
}

#nhChatOverlay .chat-discussion-resources-tabs::-webkit-scrollbar {
  display: none;
}

#nhChatOverlay .chat-discussion-resources-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 14px 16px;
  contain: layout paint style;
}

#nhChatOverlay .chat-discussion-resources-body.is-loading {
  overscroll-behavior: contain;
}

#nhChatOverlay .chat-discussion-resources-state {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--chat-sub);
  font-weight: 700;
}

#nhChatOverlay .chat-discussion-resources-state i {
  font-size: .98rem;
}

#nhChatOverlay .chat-discussion-resources-state.is-empty {
  flex-direction: column;
  gap: 12px;
}

#nhChatOverlay .chat-discussion-resources-state.is-empty i {
  font-size: 1.35rem;
  opacity: .8;
}

#nhChatOverlay .chat-discussion-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

#nhChatOverlay .chat-discussion-resources-image-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nhChatOverlay .chat-discussion-resources-image-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nhChatOverlay .chat-discussion-resources-date-divider {
  font-size: .74rem;
  font-weight: 800;
  color: var(--chat-sub);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 0 2px;
}

#nhChatOverlay .chat-discussion-resources-grid.is-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1px;
  row-gap: 3px;
}

#nhChatOverlay .chat-discussion-resources-grid.is-videos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1px;
  row-gap: 3px;
}

#nhChatOverlay .chat-discussion-resources-card-shell,
#nhChatOverlay .chat-discussion-resources-list-shell {
  position: relative;
}

#nhChatOverlay .chat-discussion-resources-card-shell.is-image {
  overflow: hidden;
}

#nhChatOverlay .chat-discussion-resources-card {
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  background: var(--chat-surface-2);
  color: inherit;
  overflow: hidden;
  text-align: left;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  width: 100%;
}

#nhChatOverlay .chat-discussion-resources-card:hover,
#nhChatOverlay .chat-discussion-resources-list-item:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, .22);
}

#nhChatOverlay .chat-discussion-resources-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--chat-surface-3) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#nhChatOverlay .chat-discussion-resources-card.is-image-flat {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  overflow: hidden;
}

#nhChatOverlay .chat-discussion-resources-card-preview.is-image-flat {
  background: transparent;
  border-radius: 0;
}

#nhChatOverlay .chat-discussion-resources-card.is-video-flat {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  overflow: hidden;
}

#nhChatOverlay .chat-discussion-resources-card-preview.is-video-flat {
  background: #0f172a;
  border-radius: 0;
}

#nhChatOverlay .chat-discussion-resources-card-preview.is-video-flat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.18));
  pointer-events: none;
}

#nhChatOverlay .chat-discussion-resources-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-discussion-resources-card--media.is-failed {
  position: relative;
}

#nhChatOverlay .chat-discussion-resources-card--media.is-failed .chat-discussion-resources-card-preview img {
  opacity: .18;
}

#nhChatOverlay .chat-discussion-resources-card--media.is-failed .chat-discussion-resources-card-preview::before {
  content: 'Tap to reload';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .44);
  color: #f8fafc;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
  z-index: 2;
}

#nhChatOverlay .chat-discussion-resources-card-preview.is-video-flat video,
#nhChatOverlay .chat-discussion-resources-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f172a;
  pointer-events: none;
}

#nhChatOverlay .chat-discussion-resources-video-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .62);
  color: rgba(255,255,255,.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .22);
}

#nhChatOverlay .chat-discussion-resources-card-fallback {
  color: var(--chat-sub);
  font-size: 1.35rem;
}

#nhChatOverlay .chat-discussion-resources-card-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(8, 14, 30, .72);
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#nhChatOverlay .chat-discussion-resources-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 52px 13px 12px;
}

#nhChatOverlay .chat-discussion-resources-card-copy strong,
#nhChatOverlay .chat-discussion-resources-list-copy strong {
  color: var(--chat-text-strong);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#nhChatOverlay .chat-discussion-resources-card-copy span,
#nhChatOverlay .chat-discussion-resources-list-copy span {
  color: var(--chat-sub);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

#nhChatOverlay .chat-discussion-resources-list-copy em {
  color: var(--chat-text);
  font-size: .79rem;
  font-style: normal;
  line-height: 1.45;
}

#nhChatOverlay .chat-discussion-resources-list-sender {
  color: var(--chat-accent);
  font-size: .72rem;
  font-weight: 700;
}

#nhChatOverlay .chat-discussion-resources-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#nhChatOverlay .chat-discussion-resources-audio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#nhChatOverlay .chat-discussion-resources-audio-shell {
  position: relative;
}

#nhChatOverlay .chat-discussion-resources-audio-card {
  padding-right: 44px;
  padding: 12px 44px 12px 12px;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--chat-surface-2) 78%, transparent) !important;
}

#nhChatOverlay .chat-discussion-resources-audio-caption {
  color: var(--chat-text);
  font-size: .76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#nhChatOverlay .chat-discussion-resources-list-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 56px 13px 14px;
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  background: var(--chat-surface-2);
  color: inherit;
  text-align: left;
}

#nhChatOverlay .chat-discussion-resources-list-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--chat-surface-3) 88%, transparent);
  color: var(--chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
}

#nhChatOverlay .chat-discussion-resources-list-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nhChatOverlay .chat-discussion-resources-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-surface-3) 86%, transparent);
  color: var(--chat-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

#nhChatOverlay .chat-discussion-resources-action-btn.is-floating {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

#nhChatOverlay .chat-discussion-resources-card-shell.is-image .chat-discussion-resources-action-btn.is-floating {
  width: 27px;
  height: 27px;
  top: 8px;
  right: 8px;
}

#nhChatOverlay .chat-discussion-resources-card-shell.is-image .chat-discussion-resources-action-btn.is-floating i {
  font-size: .68rem;
}

#nhChatOverlay .chat-discussion-resources-action-btn i {
  font-size: .78rem;
  color: var(--chat-accent);
}

#nhChatOverlay .chat-discussion-resources-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 4px 6px;
}

#nhChatOverlay .chat-discussion-resources-load-more {
  min-width: 142px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-surface-2) 90%, transparent);
  color: var(--chat-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, opacity .14s ease;
}

#nhChatOverlay .chat-discussion-resources-load-more:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, .28);
  background: color-mix(in srgb, var(--chat-surface-3) 94%, transparent);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

#nhChatOverlay .chat-discussion-resources-load-more:disabled {
  cursor: default;
  opacity: .82;
  transform: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

#nhChatOverlay .chat-discussion-resources-load-more i {
  color: var(--chat-accent);
  font-size: .86rem;
}

@media (max-width: 860px) {
  #nhChatOverlay .chat-discussion-resources-modal {
    inset: 0;
  }
  #nhChatOverlay .chat-discussion-resources-sheet {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
  #nhChatOverlay .chat-discussion-resources-head {
    padding: 14px 16px 12px;
  }
  #nhChatOverlay .chat-discussion-resources-tabs {
    padding: 12px 16px 0;
  }
  #nhChatOverlay .chat-discussion-resources-body {
      padding: 12px;
  }
  #nhChatOverlay .chat-discussion-resources-load-more-wrap {
    padding-top: 16px;
  }
  #nhChatOverlay .chat-discussion-resources-load-more {
    min-width: 132px;
    height: 38px;
  }
  #nhChatOverlay .chat-discussion-resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #nhChatOverlay .chat-discussion-resources-grid.is-images {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 1px;
      row-gap: 3px;
    }
}

/* ── Group Photo Editor — redesigned ── */
#nhChatOverlay .chat-group-avatar-modal {
  position: fixed;
  inset: 0;
  /* Must sit above the mobile conversation-info overlay (z-index: 85). */
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#nhChatOverlay .chat-group-avatar-modal[hidden] {
  display: none !important;
}

#nhChatOverlay .chat-group-avatar-modal .chat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,10,20,.62);
  backdrop-filter: blur(10px) saturate(.9);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  opacity: 0;
  transition: opacity .26s ease;
}
#nhChatOverlay .chat-group-avatar-modal.is-open .chat-modal-backdrop {
  opacity: 1;
}

#nhChatOverlay .chat-group-avatar-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 40px rgba(0,0,0,.36);
  overflow: hidden;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
#nhChatOverlay .chat-group-avatar-modal.is-open .chat-group-avatar-dialog {
  transform: translateY(0);
}

#nhChatOverlay .chat-group-avatar-dialog::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--chat-border-2);
  margin: 10px auto 0;
  flex-shrink: 0;
  opacity: .55;
}

/* header */
#nhChatOverlay .chat-modal-head.chat-gam-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--chat-border);
}
#nhChatOverlay .chat-group-avatar-modal .chat-modal-head-copy {
  flex: 1;
  text-align: left;
  min-width: 0;
}
#nhChatOverlay .chat-group-avatar-modal .chat-modal-head-copy strong {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-gam-back { flex-shrink: 0; }
#nhChatOverlay .chat-gam-x   { flex-shrink: 0; display: none; }

/* body */
#nhChatOverlay .chat-group-avatar-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 10px;
}

/* stage */
#nhChatOverlay .chat-group-avatar-stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#nhChatOverlay .chat-group-avatar-stage {
  position: relative;
  width: min(220px, 62vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 38%,
    color-mix(in srgb, var(--chat-surface-3) 90%, var(--chat-accent) 10%),
    var(--chat-surface-2) 72%);
  border: 2.5px solid var(--chat-border-2);
  touch-action: none;
  user-select: none;
  cursor: grab;
}
#nhChatOverlay .chat-group-avatar-stage:active {
  cursor: grabbing;
}
#nhChatOverlay .chat-gam-crop-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245,158,11,.35);
  pointer-events: none;
  z-index: 2;
}
#nhChatOverlay .chat-group-avatar-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
#nhChatOverlay .chat-group-avatar-stage-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--chat-sub);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  cursor: pointer;
}
#nhChatOverlay .chat-gam-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--chat-surface-2) 60%, var(--chat-accent) 40%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#nhChatOverlay .chat-gam-empty-icon i {
  font-size: 1.15rem;
  color: var(--chat-accent);
}

/* zoom row */
#nhChatOverlay .chat-group-avatar-controls {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
#nhChatOverlay .chat-gam-zoom-icon {
  font-size: .78rem;
  color: var(--chat-sub);
  flex-shrink: 0;
  opacity: .7;
}
#nhChatOverlay .chat-group-avatar-zoom-label {
  flex: 1;
  min-width: 0;
  display: flex;
}
#nhChatOverlay .chat-group-avatar-zoom-label input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--chat-accent);
  cursor: pointer;
  height: 3px;
}
#nhChatOverlay .chat-group-avatar-zoom-label input[type="range"]:disabled {
  opacity: .32;
  cursor: not-allowed;
}

/* note */
#nhChatOverlay .chat-group-avatar-body .chat-modal-note {
  font-size: .75rem;
  color: var(--chat-sub);
  text-align: center;
  margin: 0;
  min-height: 1.1em;
  transition: color .18s ease;
}

/* footer */
#nhChatOverlay .chat-group-avatar-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 0;
}
#nhChatOverlay .chat-gam-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--chat-border-2);
  background: transparent;
  color: var(--chat-sub);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
#nhChatOverlay .chat-gam-action-btn i { font-size: .82rem; }
#nhChatOverlay .chat-gam-action-btn:hover {
  border-color: var(--chat-accent);
  color: var(--chat-accent);
  background: color-mix(in srgb, transparent 92%, var(--chat-accent) 8%);
}
#nhChatOverlay .chat-gam-action-btn:active { opacity: .8; }
#nhChatOverlay .chat-gam-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
#nhChatOverlay .chat-gam-remove {
  border-color: color-mix(in srgb, var(--chat-border-2) 60%, var(--chat-red) 40%);
  color: var(--chat-red);
}
#nhChatOverlay .chat-gam-remove:hover {
  border-color: var(--chat-red);
  color: var(--chat-red);
  background: color-mix(in srgb, transparent 90%, var(--chat-red) 10%);
}
#nhChatOverlay .chat-gam-save {
  margin-left: auto;
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  background: var(--chat-accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, opacity .15s ease, transform .12s ease;
}
#nhChatOverlay .chat-gam-save:hover  { background: var(--chat-accent-2); }
#nhChatOverlay .chat-gam-save:active { transform: scale(.96); }
#nhChatOverlay .chat-gam-save:disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* desktop ≥ 561px */
@media (min-width: 561px) {
  #nhChatOverlay .chat-group-avatar-modal {
    align-items: center;
    padding: 20px;
  }
  #nhChatOverlay .chat-group-avatar-dialog {
    border-radius: 20px;
    padding-bottom: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    transform: scale(.94) translateY(12px);
    transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .22s ease;
    opacity: 0;
  }
  #nhChatOverlay .chat-group-avatar-dialog::before { display: none; }
  #nhChatOverlay .chat-group-avatar-modal.is-open .chat-group-avatar-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  #nhChatOverlay .chat-gam-back { display: none; }
  #nhChatOverlay .chat-gam-x   { display: inline-flex; }
  #nhChatOverlay .chat-group-avatar-modal .chat-modal-head-copy { text-align: left; }
  #nhChatOverlay .chat-modal-head.chat-gam-head { padding: 14px 16px 12px; }
  #nhChatOverlay .chat-group-avatar-stage { width: min(260px, 100%); }
  #nhChatOverlay .chat-group-avatar-body  { padding: 20px 22px 12px; gap: 16px; }
  #nhChatOverlay .chat-group-avatar-foot  { padding: 10px 22px 0; }
  #nhChatOverlay .chat-group-avatar-modal .chat-modal-backdrop {
    background: rgba(5,10,20,.68);
  }
}

/* conversation-info drawer mobile adjustments (kept from original) */
@media (max-width: 860px) {
  #nhChatOverlay .chat-conversation-info-panel .chat-drawer-header {
    justify-content: flex-start;
    gap: 10px;
  }
  #nhChatOverlay .chat-conversation-info-close-mobile { display: inline-flex; }
  #nhChatOverlay .chat-conversation-info-close-desktop { display: none; }
  #nhChatOverlay .chat-conversation-info-body { padding: 18px 16px 22px; }
  #nhChatOverlay .chat-conversation-info-avatar {
    width: 98px;
    height: 98px;
    border-radius: 28px;
  }
  #nhChatOverlay .chat-conversation-info-title { font-size: 1.22rem; }
}

/* small mobile ≤ 390px */
@media (max-width: 390px) {
  #nhChatOverlay .chat-group-avatar-stage  { width: min(190px, 58vw); }
  #nhChatOverlay .chat-group-avatar-body   { padding: 14px 14px 8px; gap: 12px; }
  #nhChatOverlay .chat-group-avatar-foot   { padding: 8px 14px 0; gap: 6px; }
  #nhChatOverlay .chat-gam-action-btn      { padding: 0 11px; font-size: .78rem; }
  #nhChatOverlay .chat-gam-save            { padding: 0 15px; font-size: .84rem; }
  #nhChatOverlay .chat-group-avatar-modal .chat-modal-head-copy strong { font-size: .88rem; }
}

/* very small ≤ 340px — icon-only action buttons */
@media (max-width: 340px) {
  #nhChatOverlay .chat-group-avatar-stage    { width: min(168px, 54vw); }
  #nhChatOverlay .chat-gam-action-btn span   { display: none; }
  #nhChatOverlay .chat-gam-action-btn        { padding: 0 10px; }
}

/* light mode */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-group-avatar-modal .chat-modal-backdrop {
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(8px) saturate(.95);
    -webkit-backdrop-filter: blur(8px) saturate(.95);
  }
  #nhChatOverlay .chat-group-avatar-dialog {
    background: #ffffff;
    box-shadow: 0 -4px 28px rgba(0,0,0,.14);
  }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-group-avatar-dialog {
    box-shadow: 0 -6px 48px rgba(0,0,0,.52);
  }
  #nhChatOverlay .chat-group-avatar-stage {
    border-color: color-mix(in srgb, var(--chat-border-2) 80%, var(--chat-accent) 20%);
  }
  #nhChatOverlay .chat-gam-crop-ring {
    border-color: rgba(245,158,11,.45);
  }
}

#nhChatOverlay .chat-member-row {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s ease;
}

#nhChatOverlay .chat-member-row:hover {
  background: var(--chat-surface-2);
}

#nhChatOverlay .chat-member-row.is-selected {
  background: rgba(245, 158, 11, .08);
}

#nhChatOverlay .chat-member-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--chat-border-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: transparent;
  flex-shrink: 0;
}

#nhChatOverlay .chat-member-row.is-selected .chat-member-check {
  background: var(--chat-accent);
  border-color: var(--chat-accent);
  color: #fff;
}

#nhChatOverlay .chat-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .08));
  border: 1px solid rgba(59, 130, 246, .25);
  color: #9ec5ff;
  font-size: .76rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

#nhChatOverlay .chat-member-meta {
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-member-name {
  color: var(--chat-text-strong);
  font-size: .93rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-member-role {
  font-size: .8rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-modal-note {
  font-size: .82rem;
  color: var(--chat-sub);
  flex: 1;
  min-width: 0;
}

#nhChatOverlay .chat-toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9200;
}

#nhChatOverlay .chat-toast {
  min-width: 220px;
  max-width: 320px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  color: var(--chat-text-strong);
  border-radius: 12px;
  box-shadow: var(--chat-shadow);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#nhChatOverlay .chat-toast i {
  color: var(--chat-green);
  margin-top: 2px;
}

#nhChatOverlay .chat-toast.is-error i {
  color: #f59a9a;
}

#nhChatOverlay .chat-loading,
#nhChatOverlay .chat-error {
  padding: 22px 16px;
  text-align: center;
  color: var(--chat-sub);
  font-size: .88rem;
}

#nhChatOverlay .chat-error {
  color: #f59a9a;
}

/* ── Big-screen 30/70 split (sidebar / chat-main) ── */
@media (min-width: 861px) {
  #nhChatOverlay .chat-sidebar {
    width: calc(35% - 64px);
    flex: 0 0 calc(35% - 64px);
    max-width: calc(35% - 64px);
  }
  #nhChatOverlay .chat-main {
    flex: 0 0 65%;
    max-width: 65%;
  }
}

@media (max-width: 860px) {
  /* ── Native slide navigation ─────────────────────────────────────────
     Each panel is position:absolute, full size, translated off-screen.
     Only the active panel is visible. JS adds state classes to .chat-app.

     States on .chat-app:
       (default)       → sidebar visible
       .show-main      → main visible
       .show-drawer    → drawer visible

     Panel positions (translateX):
       sidebar:  0        → -100% (off-left)
       main:    +100%     →  0    → -100%
       drawer:  +200% (offscreen right always, until show-drawer)
     ─────────────────────────────────────────────────────────────────── */

  #nhChatOverlay .chat-app {
    position: relative;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  /* All panels: fill the container, stacked via translateX */
  #nhChatOverlay .chat-sidebar,
  #nhChatOverlay .chat-main,
  #nhChatOverlay .chat-app > .chat-drawer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }

  /* Disable pointer events on panels that are off-screen */
  #nhChatOverlay .chat-sidebar,
  #nhChatOverlay .chat-main,
  #nhChatOverlay .chat-app > .chat-drawer {
    pointer-events: none;
  }
  /* Only the visible panel gets pointer events */
  #nhChatOverlay .chat-app .chat-sidebar                      { pointer-events: auto; }
  #nhChatOverlay .chat-app.show-main .chat-sidebar            { pointer-events: none; }
  #nhChatOverlay .chat-app.show-main .chat-main               { pointer-events: auto; }
  #nhChatOverlay .chat-app.show-drawer > .chat-drawer         { pointer-events: auto; }
  #nhChatOverlay .chat-app.show-drawer .chat-main             { pointer-events: none; }

  /* ── Default: sidebar visible ── */
  #nhChatOverlay .chat-sidebar              { transform: translateX(0); }
  #nhChatOverlay .chat-main                 { transform: translateX(100%); }
  #nhChatOverlay .chat-app > .chat-drawer   { transform: translateX(100%); }

  /* ── show-main: main visible, sidebar left, drawer right ── */
  #nhChatOverlay .chat-app.show-main .chat-sidebar            { transform: translateX(-100%); }
  #nhChatOverlay .chat-app.show-main .chat-main               { transform: translateX(0); }
  #nhChatOverlay .chat-app.show-main > .chat-drawer           { transform: translateX(100%); }

  /* ── show-drawer: only the is-open drawer visible, main + sidebar left ── */
  #nhChatOverlay .chat-app.show-drawer .chat-sidebar               { transform: translateX(-100%); }
  #nhChatOverlay .chat-app.show-drawer .chat-main                  { transform: translateX(-100%); }
  #nhChatOverlay .chat-app.show-drawer > .chat-drawer              { transform: translateX(100%); }
  #nhChatOverlay .chat-app.show-drawer > .chat-drawer.is-open      { transform: translateX(0); }

  /* CRITICAL: inline drawers must stay in DOM flow even when [hidden]
     so they can receive transforms. Override the [hidden] display:none. */
  #nhChatOverlay .chat-app > .chat-drawer[hidden] {
    display: flex !important;
  }

  /* Inline drawer panel: fills its absolutely-positioned parent */
  #nhChatOverlay .chat-app > .chat-drawer {
    overflow: hidden;
    pointer-events: auto;
  }
  #nhChatOverlay .chat-app > .chat-drawer .chat-drawer-panel {
    position: relative;
    top: auto; right: auto;
    width: 100%; height: 100%;
    transform: none;
    box-shadow: none;
    border-left: none;
    transition: none;
  }
  #nhChatOverlay .chat-app > .chat-drawer .chat-drawer-backdrop {
    display: none;
  }

  #nhChatOverlay #chatConversationInfoModal.chat-mobile-overlay {
    position: absolute;
    inset: 0;
    z-index: 85;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    transform: none !important;
  }
  #nhChatOverlay #chatConversationInfoModal.chat-mobile-overlay[hidden] {
    display: none !important;
  }
  #nhChatOverlay #chatConversationInfoModal.chat-mobile-overlay .chat-drawer-backdrop {
    display: block;
    opacity: 1;
  }
  #nhChatOverlay #chatConversationInfoModal.chat-mobile-overlay .chat-drawer-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    transform: none !important;
    box-shadow: none;
    border-left: none;
    transition: none;
  }

  #nhChatOverlay .chat-back-btn {
    display: inline-flex;
  }
  #nhChatOverlay .chat-empty {
    display: none !important;
  }
  #nhChatOverlay .chat-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUAL-MODE COMPLETENESS PATCH
   Every element that was hardcoded dark-only is given a proper light
   counterpart. All base defaults remain dark-friendly; light overrides
   live exclusively inside @media (prefers-color-scheme: light).
   No hardcoded dark-only values survive after this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Define missing token (used by image-meta, file-card-meta) ────────── */
#nhChatOverlay { --chat-sub-strong: #8ca0bf; }

@media (prefers-color-scheme: light) {
  #nhChatOverlay { --chat-sub-strong: #4a5575; }
}

/* ── 2. Links inside bubbles — dark default, proper light override ─────────
   Problem: #60a5fa (dark-sky-blue) on a white light-mode bubble is fine,
   but was overridden too broadly. Ensure mine/not-mine both work. ────────── */
#nhChatOverlay .chat-bubble-text a.chat-inline-link {
  color: #60a5fa !important;
}
#nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-inline-link {
  color: #bfdbfe !important;
}
@media (prefers-color-scheme: light) {
  /* not-mine bubble: white bg → need clearly visible blue */
  #nhChatOverlay .chat-bubble-text a.chat-inline-link {
    color: #1d4ed8 !important;
  }
  /* is-mine bubble: light blue bg (#dbeafe) → darker blue text */
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-inline-link {
    color: #1e40af !important;
  }
}

/* ── 3. Mention links inside bubbles ──────────────────────────────────────── */
#nhChatOverlay .chat-bubble-text .chat-member-mention,
#nhChatOverlay .chat-bubble-text a.chat-member-mention {
  color: #7dd3fc !important;
}
#nhChatOverlay .chat-message.is-mine .chat-bubble-text .chat-member-mention,
#nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-member-mention {
  color: #dbeafe !important;
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-bubble-text .chat-member-mention,
  #nhChatOverlay .chat-bubble-text a.chat-member-mention {
    color: #1d4ed8 !important;
  }
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text .chat-member-mention,
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text a.chat-member-mention {
    color: #1e40af !important;
  }
  /* composer preview mention */
  #nhChatOverlay .chat-composer-preview .chat-member-mention {
    color: #1d4ed8;
  }
}

/* ── 4. Attach popup — dark shell, light override ────────────────────────── */
#nhChatOverlay .chat-attach-popup-inner {
  background: #06101f;
  border-color: rgba(255,255,255,.10);
}
#nhChatOverlay .chat-attach-popup-inner::after {
  background: #06101f;
  border-color: rgba(255,255,255,.10);
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-popup-inner {
    background: #f0f4fb;
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 12px 36px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);
  }
  #nhChatOverlay .chat-attach-popup-inner::after {
    background: #f0f4fb;
    border-color: rgba(15,23,42,.12);
  }
}

/* ── 5. Attach grid items ─────────────────────────────────────────────────── */
#nhChatOverlay .chat-attach-item {
  background: transparent;
}
#nhChatOverlay .chat-attach-item + .chat-attach-item {
  border-top-color: rgba(255,255,255,.055);
}
#nhChatOverlay .chat-attach-item-icon {
  color: #60a5fa;
}
#nhChatOverlay .chat-attach-item-label { color: #f0f6ff; }
#nhChatOverlay .chat-attach-item-meta  { color: #6b82a6; }
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-item + .chat-attach-item {
    border-top-color: rgba(15,23,42,.08);
  }
  #nhChatOverlay .chat-attach-item:hover:not(.is-disabled) {
    background: rgba(37,99,235,.06);
  }
  #nhChatOverlay .chat-attach-item-icon {
    color: #2563eb;
  }
  #nhChatOverlay .chat-attach-item-label { color: #0f1626; }
  #nhChatOverlay .chat-attach-item-meta  { color: #6b7a96; }
}

/* ── 6. Attach preview thumbnails ────────────────────────────────────────── */
#nhChatOverlay .chat-attach-preview-thumb {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
#nhChatOverlay .chat-attach-preview-thumb.is-add {
  background: rgba(255,255,255,.08);
  color: #f8fafc;
}
#nhChatOverlay .chat-attach-preview-thumb-file-icon { color: #dbeafe; }
#nhChatOverlay .chat-attach-preview-thumb-file-name { color: #e2e8f0; }
#nhChatOverlay .chat-attach-preview-thumb-more {
  background: rgba(2,6,23,.62);
  color: #f8fafc;
}
#nhChatOverlay .chat-attach-preview-thumb-check {
  background: rgba(2,6,23,.78);
  color: #f8fafc;
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-preview-thumb {
    border-color: rgba(15,23,42,.12);
    background: rgba(15,23,42,.04);
  }
  #nhChatOverlay .chat-attach-preview-thumb.is-add {
    background: rgba(15,23,42,.06);
    color: #3d4f6e;
  }
  #nhChatOverlay .chat-attach-preview-thumb.is-add:disabled {
    background: rgba(15,23,42,.04);
    color: rgba(15,23,42,.35);
  }
  #nhChatOverlay .chat-attach-preview-thumb.is-active {
    border-color: rgba(37,99,235,.65);
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
  }
  #nhChatOverlay .chat-attach-preview-thumb-file-icon { color: #2563eb; }
  #nhChatOverlay .chat-attach-preview-thumb-file-name { color: #2d3a52; }
  #nhChatOverlay .chat-attach-preview-thumb-more {
    background: rgba(15,23,42,.48);
    color: #f8fafc;
  }
  #nhChatOverlay .chat-attach-preview-thumb-check {
    background: rgba(15,23,42,.62);
    color: #f8fafc;
  }
}

/* ── 7. Attach preview caption textarea ──────────────────────────────────── */
#nhChatOverlay .chat-attach-preview-field textarea {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
}
#nhChatOverlay .chat-attach-preview-field textarea::placeholder {
  color: rgba(226,232,240,.55);
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-preview-field textarea {
    border-color: rgba(15,23,42,.14);
    background: rgba(255,255,255,.88);
    color: #0f1626;
  }
  #nhChatOverlay .chat-attach-preview-field textarea::placeholder {
    color: rgba(15,23,42,.38);
  }
}

/* ── 8. Attach preview media container ───────────────────────────────────── */
#nhChatOverlay .chat-attach-preview-media {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-attach-preview-media {
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.10);
  }
}

/* ── 9. Image viewer: thumbnail strip and buttons ────────────────────────── */
#nhChatOverlay .chat-image-viewer-thumbs {
  background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78) 30%, rgba(2,6,23,.96));
}
#nhChatOverlay .chat-image-viewer-thumb {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
#nhChatOverlay .chat-image-viewer-thumb.is-active {
  border-color: rgba(96,165,250,.80);
  box-shadow: 0 0 0 2px rgba(96,165,250,.18);
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-image-viewer-thumbs {
    background: linear-gradient(180deg, rgba(240,244,251,0), rgba(240,244,251,.84) 30%, rgba(240,244,251,.97));
  }
  #nhChatOverlay .chat-image-viewer-thumb {
    border-color: rgba(15,23,42,.14);
    background: rgba(15,23,42,.05);
  }
  #nhChatOverlay .chat-image-viewer-thumb.is-active {
    border-color: rgba(37,99,235,.72);
    box-shadow: 0 0 0 2px rgba(37,99,235,.16);
  }
}

/* ── 10. is-mine bubble: blockquote ──────────────────────────────────────── */
/* dark already set; explicit light override */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-message.is-mine .chat-bubble-text blockquote {
    border-left-color: rgba(37,99,235,.38);
    color: #3b5278;
  }
}

/* ── 11. Composer preview code/pre backgrounds ───────────────────────────── */
#nhChatOverlay .chat-composer-preview .md-guide-code,
#nhChatOverlay .chat-composer-preview code {
  background: rgba(15,23,42,.09);
}
#nhChatOverlay .chat-composer-preview pre {
  background: rgba(15,23,42,.10);
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-composer-preview .md-guide-code,
  #nhChatOverlay .chat-composer-preview code {
    background: rgba(15,23,42,.06);
    color: #1e3a5f;
  }
  #nhChatOverlay .chat-composer-preview pre {
    background: #e9eef8;
    border: 1px solid #dce3f0;
  }
}

/* ── 12. GIF / Slash cards ───────────────────────────────────────────────── */
/* dark overrides already exist; add light base explicitly */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-gif-card {
    background: #ffffff;
    border-color: #dce3f0;
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
  }
  #nhChatOverlay .chat-gif-card-search {
    background: rgba(15,23,42,.05);
    color: #2d3a52;
  }
  #nhChatOverlay .chat-gif-card-search input { color: #0f1626; }
  #nhChatOverlay .chat-gif-card-search input::placeholder { color: #6b7a96; }
  #nhChatOverlay .chat-gif-empty,
  #nhChatOverlay .chat-gif-loading { color: #6b7a96; }
  #nhChatOverlay .chat-gif-card-foot { color: #6b7a96; }
  #nhChatOverlay .chat-slash-card {
    background: #ffffff;
    border-color: #dce3f0;
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
  }
  #nhChatOverlay .chat-slash-card-head {
    border-bottom: 1px solid #e3e8f2;
  }
  #nhChatOverlay .chat-slash-card-head strong { color: #0f1626; }
  #nhChatOverlay .chat-slash-item-title { color: #0f1626; }
  #nhChatOverlay .chat-slash-item-meta { color: #6b7a96; }
  #nhChatOverlay .chat-slash-empty,
  #nhChatOverlay .chat-slash-loading { color: #6b7a96; }
}

/* ── 13. GIF item overlay gradient ──────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-gif-item::after {
    background: linear-gradient(180deg, rgba(240,244,251,0), rgba(240,244,251,.38));
  }
}

/* ── 14. Image "more" overlay ────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-image-more {
    background: rgba(15,23,42,.44);
  }
}

/* ── 15. Live dot box-shadow ─────────────────────────────────────────────── */
#nhChatOverlay .chat-live-dot {
  box-shadow: 0 0 0 2px var(--chat-surface, #0d1526);
}

/* ── 16. Member avatar (sidebar / drawer list) ───────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-member-avatar {
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.05));
    border-color: rgba(37,99,235,.20);
    color: #2563eb;
  }
}

/* ── 17. Typing indicator dots ───────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-typing-dot {
    background: rgba(15,23,42,.40);
    box-shadow: 0 0 0 0 rgba(15,23,42,.10);
  }
}

/* ── 18. File preview card icon in attach popup ──────────────────────────── */
#nhChatOverlay .chat-file-preview-card-icon {
  background: rgba(59,130,246,.16);
  color: #bfdbfe;
}
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-file-preview-card-icon {
    background: rgba(37,99,235,.10);
    color: #2563eb;
  }
}

/* ── 19. Audio card separator in list ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-audio-list .chat-audio-card + .chat-audio-card,
  #nhChatOverlay .chat-audio-list .chat-audio-card--bare + .chat-audio-card--bare {
    border-top-color: rgba(15,23,42,.12) !important;
  }
}

/* ── 20. Skeleton shimmer ────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-list-skeleton-avatar,
  #nhChatOverlay .chat-skeleton-avatar {
    background: linear-gradient(90deg, #e9eef8, #f0f4fb, #e9eef8);
    background-size: 200% 100%;
  }
  #nhChatOverlay .chat-list-skeleton-pill,
  #nhChatOverlay .chat-skeleton-line,
  #nhChatOverlay .chat-skeleton-meta {
    background: linear-gradient(90deg, #dce3f0, #e9eef8, #dce3f0);
    background-size: 200% 100%;
  }
  #nhChatOverlay .chat-skeleton-bubble {
    background: #f4f6fb;
    border-color: #dce3f0;
  }
}

/* ── 21. Jump-to-bottom button ───────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-jump-btn {
    background: rgba(255,255,255,.94);
    border-color: rgba(245,158,11,.22);
    color: #4a5575;
    box-shadow: 0 4px 14px rgba(15,23,42,.10);
  }
  #nhChatOverlay .chat-jump-btn:hover {
    color: #b45309;
    border-color: rgba(245,158,11,.38);
  }
}

/* ── 22. Reaction detail summary item ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-reaction-detail-summary-item {
    background: rgba(15,23,42,.06);
    color: #0f1626;
  }
}

/* ── 23. Election viewer CSS-file overrides (duplicate-free) ─────────────
   PHP inline <style> already handles these via var() tokens.
   Entries here are removed to avoid specificity fights.
   The CSS file's existing election-viewer rules now only need to align
   on the variables (already done). No extra rules needed here. ──────────── */

/* ── 24. Video meta subtitle ─────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-video-meta-sub { color: #6b7a96; }
}

/* ── 25. Unread break pill ───────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-unread-break {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.24);
    color: #b45309;
  }
}

/* ── 26. System row / day break ──────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-system-row {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #6b7a96;
  }
  #nhChatOverlay .chat-day-break {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #6b7a96;
  }
}

/* ── 27. Toast ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-toast {
    background: #ffffff;
    border-color: #dce3f0;
    color: #0f1626;
    box-shadow: 0 8px 28px rgba(15,23,42,.10);
  }
  #nhChatOverlay .chat-toast i { color: #16a34a; }
  #nhChatOverlay .chat-toast.is-error i { color: #dc2626; }
}

/* ── 28. Template message is-mine in light mode ─────────────────────────── */
/* (already covered by the existing light block in the file) */

/* ── 29. Active tab count badge ──────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-tab.is-active .chat-tab-count {
    background: rgba(245,158,11,.18);
    color: #b45309;
  }
}

/* ── Location bubble ─────────────────────────────────────────────────────── */
#nhChatOverlay .chat-location-bubble {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  align-self: flex-start;
}

#nhChatOverlay .chat-location-card {
  display: block;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface) 90%, transparent);
}

/* ── Map thumbnail: real OSM tile image ── */
#nhChatOverlay .chat-location-card-map {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--chat-surface-2) 92%, transparent);
  overflow: hidden;
}

#nhChatOverlay .chat-location-card-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) brightness(.94);
  transition: filter .2s ease;
}

#nhChatOverlay .chat-location-card:hover .chat-location-card-map-img {
  filter: saturate(1) brightness(1);
}

/* Vignette overlay */
#nhChatOverlay .chat-location-card-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Sender avatar centered on map (for live/current location) */
#nhChatOverlay .chat-location-card-map-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), 0 0 0 2px rgba(239,68,68,.45);
  overflow: hidden;
  pointer-events: none;
}

#nhChatOverlay .chat-location-card-map-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#nhChatOverlay .chat-location-card-map-avatar-initials {
  font-size: .85rem;
  font-weight: 700;
  color: #0f1626;
  letter-spacing: -.02em;
  line-height: 1;
  user-select: none;
}

/* Pin centered on map (for place shares) */
#nhChatOverlay .chat-location-card-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) translateY(4px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  pointer-events: none;
}

#nhChatOverlay .chat-location-card-map-pin i {
  font-size: 1.75rem;
  color: #ef4444;
  line-height: 1;
}

/* Dot shadow under pin */
#nhChatOverlay .chat-location-card-map-pin::after {
  content: '';
  width: 8px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  margin-top: -2px;
}

/* "Maps" badge bottom-right */
#nhChatOverlay .chat-location-card-map-badge {
  position: absolute;
  bottom: 7px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8,14,30,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .63rem;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Fallback shown when image fails */
#nhChatOverlay .chat-location-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ef4444;
  font-size: 1.6rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(34,197,94,.16), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(59,130,246,.14), transparent 38%),
    color-mix(in srgb, var(--chat-surface-2) 92%, transparent);
}

/* ── Card body ── */
#nhChatOverlay .chat-location-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 10px;
}

#nhChatOverlay .chat-location-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-location-card-title i {
  color: #ef4444;
  flex-shrink: 0;
  font-size: .80rem;
}

#nhChatOverlay .chat-location-card-coords {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .71rem;
  font-weight: 600;
  color: var(--chat-sub);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-location-card-coords i {
  font-size: .65rem;
  color: var(--chat-sub);
  flex-shrink: 0;
  opacity: .7;
}

/* Footer row: accuracy badge + open link */
#nhChatOverlay .chat-location-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

#nhChatOverlay .chat-location-card-accuracy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--chat-sub);
  background: color-mix(in srgb, var(--chat-surface-3) 80%, transparent);
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  padding: 2px 7px;
}

#nhChatOverlay .chat-location-card-accuracy i {
  font-size: .60rem;
  color: #22c55e;
}

/* ── Bubble action buttons ── */
#nhChatOverlay .chat-location-bubble-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
}

#nhChatOverlay .chat-location-bubble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--chat-border-2);
  background: color-mix(in srgb, var(--chat-surface-2) 90%, transparent);
  color: var(--chat-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

#nhChatOverlay .chat-location-bubble-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#nhChatOverlay .chat-location-bubble-btn i {
  font-size: .80rem;
  flex-shrink: 0;
}

#nhChatOverlay .chat-location-bubble-btn:hover {
  background: color-mix(in srgb, var(--chat-surface-3) 90%, transparent);
  border-color: rgba(59,130,246,.38);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-location-bubble-btn:active {
  transform: scale(.96);
}

#nhChatOverlay .chat-location-bubble-btn--dir {
  color: var(--chat-blue);
  border-color: rgba(59,130,246,.28);
  background: color-mix(in srgb, var(--chat-surface-2) 80%, transparent);
}

#nhChatOverlay .chat-location-bubble-btn--dir i { color: var(--chat-blue); }

#nhChatOverlay .chat-location-bubble-btn--dir:hover {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.50);
  color: var(--chat-blue);
}

#nhChatOverlay .chat-location-bubble-btn--view {
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-call-notice {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: min(300px, 100%);
  max-width: 360px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, .20);
  background: rgba(14, 165, 233, .07);
  padding: 11px 12px 12px;
}

#nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] {
  border-color: rgba(168, 85, 247, .24);
  background: rgba(168, 85, 247, .08);
}

#nhChatOverlay .chat-call-notice-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#nhChatOverlay .chat-call-notice-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  color: #f8fafc;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}

#nhChatOverlay .chat-call-notice[data-call-mode="audio"] .chat-call-notice-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 12px rgba(5, 150, 105, .28);
}

#nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-icon {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .28);
}

#nhChatOverlay .chat-call-notice-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#nhChatOverlay .chat-call-notice-copy strong {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(248, 250, 252, .96);
}

#nhChatOverlay .chat-call-notice-copy span {
  font-size: .76rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, .78);
}

#nhChatOverlay .chat-call-notice-desc {
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, .76);
}

#nhChatOverlay .chat-call-notice-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(248,250,252,.82) !important;
  font-size: .60rem !important;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#nhChatOverlay .chat-call-notice-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  color: rgba(226, 232, 240, .84);
}

#nhChatOverlay .chat-call-notice-meta i {
  color: rgba(191, 219, 254, .92);
}

#nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(248, 250, 252, .88);
  font-size: .78rem;
  font-weight: 600;
}

#nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta i {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.11);
  color: rgba(248,250,252,.92);
}

#nhChatOverlay .chat-call-notice-actions {
  display: flex;
}

#nhChatOverlay .chat-call-notice-btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  width: 100%;
  padding: 0 14px;
  background: rgba(255,255,255,.11);
  color: #f0f6ff;
  text-decoration: none;
  font-size: .81rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease;
}

#nhChatOverlay .chat-call-notice-btn span,
#nhChatOverlay .chat-call-notice-btn i {
  text-decoration: none !important;
}

#nhChatOverlay .chat-call-notice-btn:hover {
  background: rgba(255,255,255,.17);
}

#nhChatOverlay .chat-call-notice-btn:active {
  background: rgba(255,255,255,.22);
}

/* ── Mobile compact ── */
@media (max-width: 480px) {
  #nhChatOverlay .chat-location-bubble {
    max-width: 100%;
  }
  #nhChatOverlay .chat-location-card-map {
    aspect-ratio: 16 / 8;
  }
  #nhChatOverlay .chat-location-card-body {
    padding: 8px 10px 9px;
  }
  #nhChatOverlay .chat-location-bubble-actions {
    gap: 6px;
    margin-top: 6px;
  }
  #nhChatOverlay .chat-location-bubble-btn {
    padding: 7px 8px;
    font-size: .70rem;
    border-radius: 9px;
  }
  #nhChatOverlay .chat-location-card-map-avatar {
    width: 38px;
    height: 38px;
    border-width: 2.5px;
  }
  #nhChatOverlay .chat-location-card-map-avatar-initials {
    font-size: .75rem;
  }
}

/* ── Mobile compact: call notice ── */
@media (max-width: 480px) {
  #nhChatOverlay .chat-call-notice {
    min-width: 0;
    max-width: 100%;
    padding: 10px 11px 11px;
    gap: 8px;
    border-radius: 12px;
  }
  #nhChatOverlay .chat-call-notice-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    font-size: .80rem;
  }
  #nhChatOverlay .chat-call-notice-copy strong {
    font-size: .84rem;
  }
  #nhChatOverlay .chat-call-notice-copy span {
    font-size: .72rem;
  }
  #nhChatOverlay .chat-call-notice-desc {
    font-size: .73rem;
  }
  #nhChatOverlay .chat-call-notice-meta {
    font-size: .71rem;
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta {
    padding: 7px 10px;
    min-height: 34px;
    font-size: .76rem;
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta i {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
  #nhChatOverlay .chat-call-notice-btn {
    min-height: 34px;
    font-size: .78rem;
    border-radius: 9px;
  }
}

/* ── Light mode: location card ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-location-bubble {
    max-width: 340px;
  }
  #nhChatOverlay .chat-location-card {
    background: #ffffff;
    border-color: #dce3f0;
    box-shadow: 0 2px 10px rgba(15,23,42,.06);
  }
  #nhChatOverlay .chat-location-card-map-img {
    filter: saturate(.9) brightness(1);
  }
  #nhChatOverlay .chat-location-card-map-avatar {
    background: #f4f6fb;
    border-color: #f4f6fb;
    box-shadow: 0 4px 12px rgba(15,23,42,.25), 0 0 0 2px rgba(239,68,68,.35);
  }
  #nhChatOverlay .chat-location-card-map-avatar-initials {
    color: #0f1626;
  }
  #nhChatOverlay .chat-location-card-accuracy {
    background: rgba(15,23,42,.04);
    border-color: #dce3f0;
  }
  #nhChatOverlay .chat-location-bubble-btn {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #2d3a52;
  }
  #nhChatOverlay .chat-location-bubble-btn:hover {
    background: #e9eef8;
    border-color: #cbd6e7;
    color: #0f1626;
  }
  #nhChatOverlay .chat-location-bubble-btn--dir {
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.22);
    color: #2563eb;
  }
  #nhChatOverlay .chat-location-bubble-btn--dir i { color: #2563eb; }
  #nhChatOverlay .chat-location-bubble-btn--dir:hover {
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.42);
    color: #1d4ed8;
  }
  #nhChatOverlay .chat-call-notice {
    background: #f5f9ff;
    border-color: rgba(37, 99, 235, .14);
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] {
    background: #faf6ff;
    border-color: rgba(124, 58, 237, .14);
  }
  #nhChatOverlay .chat-call-notice-copy strong {
    color: #0f172a;
  }
  #nhChatOverlay .chat-call-notice-copy span,
  #nhChatOverlay .chat-call-notice-desc,
  #nhChatOverlay .chat-call-notice-meta {
    color: #4a5568;
  }
  #nhChatOverlay .chat-call-notice-badge {
    background: rgba(37, 99, 235, .08);
    color: #2563eb !important;
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-badge {
    background: rgba(124, 58, 237, .08);
    color: #7c3aed !important;
  }
  #nhChatOverlay .chat-call-notice-meta i {
    color: #2563eb;
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta {
    background: #f0e8ff;
    border-color: rgba(124, 58, 237, .11);
    color: #6d28d9;
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-meta i {
    background: rgba(124, 58, 237, .09);
    color: #7c3aed;
  }
  #nhChatOverlay .chat-call-notice-btn {
    background: rgba(37, 99, 235, .09);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, .16);
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-btn {
    background: rgba(124, 58, 237, .09);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, .16);
  }
  #nhChatOverlay .chat-call-notice-btn:hover {
    background: rgba(37, 99, 235, .14);
    border-color: rgba(37, 99, 235, .26);
  }
  #nhChatOverlay .chat-call-notice[data-call-schedule="scheduled"] .chat-call-notice-btn:hover {
    background: rgba(124, 58, 237, .14);
    border-color: rgba(124, 58, 237, .26);
  }
}

/* ── Location viewer / share modal ────────────────────────────────────────── */
#nhChatOverlay .chat-location-viewer {
  position: absolute;
  inset: 0;
  z-index: 122;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: nhcLocFadeIn .18s ease both;
}

@keyframes nhcLocFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#nhChatOverlay .chat-location-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Bottom sheet */
#nhChatOverlay .chat-location-viewer-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100% - 20px);
  background: var(--chat-surface);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nhcLocSlideUp .24s cubic-bezier(.22,.61,.36,1) both;
  box-shadow: 0 -6px 40px rgba(0,0,0,.32);
}

#nhChatOverlay .chat-location-search-viewer {
  position: absolute;
  inset: 0;
  z-index: 123;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: nhcLocFadeIn .18s ease both;
}

#nhChatOverlay .chat-location-live-viewer {
  position: absolute;
  inset: 0;
  z-index: 123;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: nhcLocFadeIn .18s ease both;
}

#nhChatOverlay .chat-location-search-shell {
  max-width: 520px;
  max-height: calc(100% - 20px);
}

#nhChatOverlay .chat-location-live-shell {
  max-width: 520px;
  max-height: calc(100% - 20px);
}

@keyframes nhcLocSlideUp {
  from { transform: translateY(40px); opacity: .5; }
  to   { transform: translateY(0);    opacity: 1;  }
}

/* Drag handle */
#nhChatOverlay .chat-location-viewer-shell::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: var(--chat-border-2);
  margin: 11px auto 0;
  flex-shrink: 0;
}

/* ── Header ── */
#nhChatOverlay .chat-location-viewer-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 13px;
  border-bottom: 1px solid var(--chat-border);
  flex-shrink: 0;
}

#nhChatOverlay .chat-location-viewer-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 1rem;
  flex-shrink: 0;
}

#nhChatOverlay .chat-location-viewer-title {
  min-width: 0;
  flex: 1;
}

#nhChatOverlay .chat-location-viewer-title h4 {
  margin: 0;
  font-size: .93rem;
  font-weight: 800;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-location-viewer-title p {
  margin: 2px 0 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--chat-sub);
  line-height: 1.3;
}

#nhChatOverlay .chat-location-viewer-coords {
  display: block;
  margin: 2px 0 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
  font-family: var(--chat-font);
}

#nhChatOverlay .chat-location-viewer-close {
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface-2) 92%, transparent);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, transform .12s ease;
}

#nhChatOverlay .chat-location-viewer-close:hover {
  color: var(--chat-text-strong);
  background: var(--chat-surface-3);
}

#nhChatOverlay .chat-location-viewer-close:active {
  transform: scale(.88);
}

/* ── Map area ── */
#nhChatOverlay .chat-location-viewer-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 300px;
  background:
    radial-gradient(circle at 20% 20%, rgba(34,197,94,.14), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(59,130,246,.14), transparent 30%),
    var(--chat-surface-2);
  overflow: hidden;
}

/* Subtle grid lines over the placeholder bg */
#nhChatOverlay .chat-location-viewer-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* iframe fills the map area — scoped to iframe only, never overrides abs-positioned siblings */
#nhChatOverlay .chat-location-viewer-map iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ── Loading state ── */
#nhChatOverlay .chat-location-viewer-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--chat-sub);
  font-size: .80rem;
  background: color-mix(in srgb, var(--chat-surface) 86%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#nhChatOverlay .chat-location-viewer-loading-ring {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 1.15rem;
}

/* ── Refresh button in header ── */
#nhChatOverlay .chat-location-viewer-refresh {
  appearance: none;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .18s ease;
}

#nhChatOverlay .chat-location-viewer-refresh:hover {
  background: var(--chat-surface-3);
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-location-viewer-refresh:active {
  transform: rotate(180deg) scale(.90);
}

/* ── Action panel ── */
#nhChatOverlay .chat-location-viewer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface) 97%, transparent);
  flex-shrink: 0;
}

/* Section label */
#nhChatOverlay .chat-location-viewer-actions-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chat-sub);
  padding: 0 2px;
}

#nhChatOverlay .chat-location-viewer-actions-label i {
  font-size: .65rem;
  color: var(--chat-accent);
}

/* 2-col row for secondary options */
#nhChatOverlay .chat-location-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ── Primary button (Send Current Location) ── */
#nhChatOverlay .chat-location-option {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--chat-surface-2) 90%, transparent);
  color: var(--chat-text);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

#nhChatOverlay .chat-location-option:hover:not(:disabled):not(.is-disabled) {
  background: var(--chat-surface-3);
  border-color: var(--chat-border-2);
  transform: translateY(-1px);
}

#nhChatOverlay .chat-location-option:active:not(:disabled):not(.is-disabled) {
  transform: scale(.97);
}

#nhChatOverlay .chat-location-option.is-primary {
  border-color: rgba(59,130,246,.40);
  background: rgba(59,130,246,.10);
}

#nhChatOverlay .chat-location-option.is-primary:hover:not(:disabled) {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.58);
  box-shadow: 0 4px 16px rgba(59,130,246,.14);
}

/* Secondary style (smaller, 2-col) */
#nhChatOverlay .chat-location-option.is-secondary {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 12px;
}

#nhChatOverlay .chat-location-option.is-disabled,
#nhChatOverlay .chat-location-option:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none !important;
}

/* Icon badge */
#nhChatOverlay .chat-location-option-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.22);
  color: #60a5fa;
  font-size: .88rem;
}

#nhChatOverlay .chat-location-option.is-primary .chat-location-option-icon {
  background: rgba(59,130,246,.20);
  border-color: rgba(59,130,246,.32);
}

#nhChatOverlay .chat-location-option.is-secondary .chat-location-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: .78rem;
}

#nhChatOverlay .chat-location-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

#nhChatOverlay .chat-location-option-main {
  font-size: .82rem;
  font-weight: 800;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-location-option.is-secondary .chat-location-option-main {
  font-size: .78rem;
}

#nhChatOverlay .chat-location-option-sub {
  font-size: .70rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nhChatOverlay .chat-location-option-arrow {
  flex-shrink: 0;
  color: var(--chat-sub);
  font-size: .72rem;
  margin-left: auto;
}

#nhChatOverlay .chat-location-search-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

#nhChatOverlay .chat-location-search-panel.is-standalone {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  overflow: hidden;
  flex: 1 1 auto;
}

#nhChatOverlay .chat-location-live-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  overflow: auto;
  flex: 1 1 auto;
}

#nhChatOverlay .chat-location-live-option {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--chat-surface-2) 90%, transparent);
  color: var(--chat-text);
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}

#nhChatOverlay .chat-location-live-option:hover {
  background: var(--chat-surface-3);
  border-color: var(--chat-border-2);
  transform: translateY(-1px);
}

#nhChatOverlay .chat-location-live-option:active {
  transform: scale(.98);
}

#nhChatOverlay .chat-location-live-option-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.24);
  color: #60a5fa;
}

#nhChatOverlay .chat-location-live-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

#nhChatOverlay .chat-location-live-option-main {
  font-size: .83rem;
  font-weight: 800;
  color: var(--chat-text-strong);
}

#nhChatOverlay .chat-location-live-option-sub {
  font-size: .71rem;
  color: var(--chat-sub);
  line-height: 1.35;
}

#nhChatOverlay .chat-location-live-option-arrow {
  flex-shrink: 0;
  color: var(--chat-sub);
  font-size: .72rem;
}

#nhChatOverlay .chat-location-live-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.16);
  color: var(--chat-sub);
  font-size: .72rem;
  line-height: 1.45;
}

#nhChatOverlay .chat-location-live-note i {
  margin-top: 1px;
  color: #60a5fa;
}

/* legacy selectors kept for safety but no longer rendered */
#nhChatOverlay .chat-live-location-preview .chat-location-card-viewonly { pointer-events: none; }
#nhChatOverlay .chat-live-location-actions { display: none; }

#nhChatOverlay .chat-secondary-btn {
  appearance: none;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: var(--chat-text);
  border-radius: 12px;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}

#nhChatOverlay .chat-secondary-btn:hover {
  background: var(--chat-surface-3);
  border-color: var(--chat-border-2);
}

#nhChatOverlay .chat-secondary-btn:active {
  transform: scale(.98);
}

#nhChatOverlay .chat-location-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#nhChatOverlay .chat-location-search-head strong {
  font-size: .84rem;
  font-weight: 800;
  color: var(--chat-text);
}

#nhChatOverlay .chat-location-search-close {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--chat-surface-2);
  color: var(--chat-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#nhChatOverlay .chat-location-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
}

#nhChatOverlay .chat-location-search-box i {
  color: var(--chat-sub);
  font-size: .82rem;
}

#nhChatOverlay .chat-location-search-box input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--chat-text);
  font: inherit;
}

#nhChatOverlay .chat-location-search-status {
  font-size: .73rem;
  color: var(--chat-sub);
}

#nhChatOverlay .chat-location-search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
  overflow-y: auto;
  min-height: 0;
}

#nhChatOverlay .chat-location-result {
  appearance: none;
  width: 100%;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface-2);
  color: inherit;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

#nhChatOverlay .chat-location-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239,68,68,.12);
  color: #ef4444;
  flex-shrink: 0;
}

#nhChatOverlay .chat-location-result-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#nhChatOverlay .chat-location-result-body strong {
  font-size: .81rem;
  color: var(--chat-text);
}

#nhChatOverlay .chat-location-result-body span {
  font-size: .72rem;
  color: var(--chat-sub);
  line-height: 1.4;
}

#nhChatOverlay .chat-location-result-arrow {
  color: var(--chat-sub);
  align-self: center;
}

#nhChatOverlay .chat-location-viewer-back.chat-location-viewer-close {
  margin-right: -2px;
}

/* ── Compact height: smaller map ── */
@media (max-height: 600px) {
  #nhChatOverlay .chat-location-viewer-map {
    min-height: 140px;
    max-height: 180px;
  }
  #nhChatOverlay .chat-location-viewer-actions {
    gap: 6px;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ── Light mode: location viewer ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-location-viewer-backdrop {
    background: rgba(15,23,42,.52);
  }
  #nhChatOverlay .chat-location-viewer-shell {
    background: #ffffff;
    box-shadow: 0 -6px 36px rgba(15,23,42,.14);
  }
  #nhChatOverlay .chat-location-viewer-shell::before {
    background: #cbd6e7;
  }
  #nhChatOverlay .chat-location-viewer-head {
    border-bottom-color: #dce3f0;
  }
  #nhChatOverlay .chat-location-viewer-head-icon {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.18);
  }
  #nhChatOverlay .chat-location-viewer-map {
    background:
      radial-gradient(circle at 20% 20%, rgba(34,197,94,.10), transparent 28%),
      radial-gradient(circle at 78% 76%, rgba(37,99,235,.10), transparent 30%),
      #eef2fb;
  }
  #nhChatOverlay .chat-location-viewer-map::before {
    background-image:
      linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  }
  #nhChatOverlay .chat-location-viewer-loading {
    background: rgba(255,255,255,.88);
    color: #6b7a96;
  }
  #nhChatOverlay .chat-location-viewer-loading-ring {
    background: rgba(37,99,235,.08);
    border-color: rgba(37,99,235,.18);
    color: #2563eb;
  }
  #nhChatOverlay .chat-location-viewer-actions {
    background: rgba(244,246,251,.97);
    border-top-color: #dce3f0;
  }
  #nhChatOverlay .chat-location-viewer-actions-label {
    color: #8a96ae;
  }
  #nhChatOverlay .chat-location-option {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #2d3a52;
  }
  #nhChatOverlay .chat-location-option:hover:not(:disabled):not(.is-disabled) {
    background: #e9eef8;
    border-color: #cbd6e7;
  }
  #nhChatOverlay .chat-location-option.is-primary {
    background: rgba(37,99,235,.08);
    border-color: rgba(37,99,235,.28);
  }
  #nhChatOverlay .chat-location-option.is-primary:hover:not(:disabled) {
    background: rgba(37,99,235,.14);
    border-color: rgba(37,99,235,.48);
    box-shadow: 0 4px 16px rgba(37,99,235,.10);
  }
  #nhChatOverlay .chat-location-option-main { color: #0f1626; }
  #nhChatOverlay .chat-location-option-icon {
    background: rgba(37,99,235,.10);
    border-color: rgba(37,99,235,.20);
    color: #2563eb;
  }
  #nhChatOverlay .chat-location-option.is-primary .chat-location-option-icon {
    background: rgba(37,99,235,.16);
    border-color: rgba(37,99,235,.28);
  }
  #nhChatOverlay .chat-location-live-option {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #2d3a52;
  }
  #nhChatOverlay .chat-location-live-option:hover {
    background: #e9eef8;
    border-color: #cbd6e7;
  }
  #nhChatOverlay .chat-location-live-option-main { color: #0f1626; }
  #nhChatOverlay .chat-location-live-option-icon {
    background: rgba(37,99,235,.10);
    border-color: rgba(37,99,235,.20);
    color: #2563eb;
  }
  #nhChatOverlay .chat-location-live-note {
    background: rgba(37,99,235,.08);
    border-color: rgba(37,99,235,.16);
    color: #6b7a96;
  }
  #nhChatOverlay .chat-location-live-note i {
    color: #2563eb;
  }
  #nhChatOverlay .chat-secondary-btn {
    background: #f4f6fb;
    border-color: #dce3f0;
    color: #2d3a52;
  }
  #nhChatOverlay .chat-secondary-btn:hover {
    background: #e9eef8;
    border-color: #cbd6e7;
  }
}

/* ── Light mode: location viewer header refresh ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-location-viewer-refresh {
    border-color: rgba(15,22,38,.14);
    background: rgba(15,22,38,.05);
    color: #6b7a96;
  }
  #nhChatOverlay .chat-location-viewer-refresh:hover {
    background: rgba(15,22,38,.10);
    color: #0f1626;
  }
}

/* ── Mobile audio bubble: hide timer + circular progress ring ──────────────
   Surgical addition — only affects screens ≤ 768px.
   The ring uses a conic-gradient driven by --vp-progress (0–1) set via JS.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Hide the "0:12 / 2:30" timer text on mobile */
  #nhChatOverlay .chat-voice-bubble .chat-vp-dur {
    display: none !important;
  }

  /* 2. Position context for the ring overlay on the play button */
  #nhChatOverlay .chat-voice-bubble .chat-vp-play {
    position: relative;
    /* remove the static border — the ring replaces it */
    border-color: transparent;
    overflow: visible; /* ring slightly bleeds outside */
  }

  /* 3. Progress ring via pseudo-element (conic-gradient) */
  #nhChatOverlay .chat-voice-bubble .chat-vp-play::before {
    content: '';
    position: absolute;
    inset: -3px;                /* ring sits 3px outside the button */
    border-radius: 50%;
    /* idle: faint ring */
    background: conic-gradient(
      currentColor calc(var(--vp-progress, 0) * 360deg),
      rgba(255,255,255,.18) calc(var(--vp-progress, 0) * 360deg)
    );
    /* mask the centre so only the ring stroke shows */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    transition: background 0.1s linear;
    pointer-events: none;
    z-index: 1;
  }

  /* 4. Light mode: dim the unfilled arc appropriately */
  @media (prefers-color-scheme: light) {
    #nhChatOverlay .chat-voice-bubble .chat-vp-play::before {
      background: conic-gradient(
        currentColor calc(var(--vp-progress, 0) * 360deg),
        rgba(0,0,0,.15) calc(var(--vp-progress, 0) * 360deg)
      );
    }
  }
}

/* END DUAL-MODE COMPLETENESS PATCH */

/* ── Location viewer: full-screen on mobile ────────────────────────────────
   position:fixed breaks out of chat-thread/nhc-body containing blocks so the
   modal covers the entire viewport — header, composer, sidebar, all of it.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Break out of all containing blocks — cover the full viewport */
  #nhChatOverlay .chat-location-viewer,
  #nhChatOverlay .chat-location-search-viewer,
  #nhChatOverlay .chat-location-live-viewer {
    position: fixed;
    inset: 0;
    z-index: 9090; /* below nhChatOverlay (9095) but above everything inside it */
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  /* Backdrop hidden — shell covers everything */
  #nhChatOverlay .chat-location-viewer .chat-location-viewer-backdrop,
  #nhChatOverlay .chat-location-search-viewer .chat-location-viewer-backdrop,
  #nhChatOverlay .chat-location-live-viewer .chat-location-viewer-backdrop {
    display: none;
  }

  /* Shell: full viewport, no radius, no shadow, no max constraints */
  #nhChatOverlay .chat-location-viewer-shell {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
  }

  #nhChatOverlay .chat-location-live-shell {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
  }

  /* Remove drag handle */
  #nhChatOverlay .chat-location-viewer-shell::before {
    display: none;
  }

  #nhChatOverlay .chat-location-live-shell::before {
    display: none;
  }

  /* Head: safe-area for notch/island devices */
  #nhChatOverlay .chat-location-viewer-head {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 12px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  /* Map: flex-fill all remaining vertical space */
  #nhChatOverlay .chat-location-viewer-map {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  /* Actions panel: safe-area bottom + sides */
  #nhChatOverlay .chat-location-viewer-actions {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   LIVE LOCATION DETAIL MODAL — full-screen, real interactive map
   Modeled on .chat-image-viewer: position:absolute inside nhc-body so it
   covers the entire chat shell; position:fixed break-out on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ── */
#nhChatOverlay .chat-live-loc-modal {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1);
}
#nhChatOverlay .chat-live-loc-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Top bar ── */
#nhChatOverlay .chat-live-loc-modal-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  min-height: 56px;
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
  z-index: 2;
}
#nhChatOverlay .chat-live-loc-modal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
#nhChatOverlay .chat-live-loc-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  background: rgba(239,68,68,.14);
  color: var(--chat-red);
  border: 1px solid rgba(239,68,68,.24);
  transition: background .2s, color .2s, border-color .2s;
}
#nhChatOverlay .chat-live-loc-modal-badge.is-active i {
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}
#nhChatOverlay .chat-live-loc-modal-badge.is-ended {
  background: rgba(107,130,166,.10);
  color: var(--chat-sub);
  border-color: var(--chat-border);
}
#nhChatOverlay .chat-live-loc-modal-titles {
  min-width: 0;
  flex: 1;
}
#nhChatOverlay .chat-live-loc-modal-titles h4 {
  margin: 0;
  font-size: .94rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
#nhChatOverlay .chat-live-loc-modal-titles p {
  margin: 0;
  font-size: .72rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Header action buttons ── */
#nhChatOverlay .chat-live-loc-modal-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#nhChatOverlay .chat-live-loc-modal-btn {
  appearance: none;
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  color: var(--chat-sub);
  transition: background .13s, color .13s, transform .12s;
}
#nhChatOverlay .chat-live-loc-modal-btn:hover {
  background: var(--chat-surface-2);
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-live-loc-modal-btn:active { transform: scale(.9); }
#nhChatOverlay .chat-live-loc-modal-btn.is-directions:hover { color: var(--chat-blue); }
#nhChatOverlay .chat-live-loc-modal-btn.is-open-maps:hover  { color: var(--chat-accent); }
#nhChatOverlay .chat-live-loc-modal-btn.is-close:hover      { color: var(--chat-red); }

/* ── Map area ── */
#nhChatOverlay .chat-live-loc-modal-map-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--chat-surface-2);
}
#nhChatOverlay .chat-live-loc-modal-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
#nhChatOverlay .chat-live-loc-map-focus-control {
  width: 40px;
  height: 40px;
  margin: 0 10px 10px 0;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}
#nhChatOverlay .chat-live-loc-map-focus-control:hover {
  background: #f8fafc;
}
#nhChatOverlay .chat-live-loc-map-focus-control:active {
  background: #eef2f7;
}
#nhChatOverlay .chat-live-loc-map-focus-control:focus-visible {
  outline: 2px solid rgba(59, 130, 246, .45);
  outline-offset: 2px;
}
#nhChatOverlay .chat-live-loc-modal-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .84rem;
  color: var(--chat-sub);
  background: var(--chat-surface-2);
  z-index: 2;
  transition: opacity .2s;
}
#nhChatOverlay .chat-live-loc-modal-map-loading[hidden] { display: none; }
#nhChatOverlay .chat-live-loc-modal-spin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chat-surface-3);
  border: 1px solid var(--chat-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-blue);
  font-size: 1rem;
}

/* ── Map action buttons bar (between map and footer) ── */
#nhChatOverlay .chat-live-loc-modal-map-btns {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px 12px;
  background: var(--chat-surface);
  border-top: 1px solid var(--chat-border);
}

/* ── Footer ── */
#nhChatOverlay .chat-team-live-modal {
  position: absolute;
  inset: 0;
  z-index: 122;
  background: var(--chat-surface);
  display: flex;
  flex-direction: column;
}
#nhChatOverlay .chat-team-live-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--chat-border);
  background: var(--chat-surface);
}
#nhChatOverlay .chat-team-live-modal-titles h4 {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-team-live-modal-titles p {
  margin: 2px 0 0;
  font-size: .76rem;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-team-live-modal-map-wrap {
  display: none;
}
#nhChatOverlay .chat-team-live-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--chat-bg);
}
#nhChatOverlay .chat-team-live-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  background: var(--chat-surface);
}
#nhChatOverlay .chat-team-live-row-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, .14);
  color: var(--chat-accent);
  font-weight: 800;
}
#nhChatOverlay .chat-team-live-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#nhChatOverlay .chat-team-live-row-main {
  flex: 1;
  min-width: 0;
}
#nhChatOverlay .chat-team-live-row-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nhChatOverlay .chat-team-live-row-meta {
  margin-top: 3px;
  font-size: .74rem;
  color: var(--chat-sub);
  line-height: 1.45;
}
#nhChatOverlay .chat-team-live-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#nhChatOverlay .chat-team-live-row-actions .chat-location-bubble-btn {
  min-width: 40px;
  padding: 8px 10px;
}
#nhChatOverlay .chat-team-live-empty {
  padding: 24px 16px;
  border: 1px dashed var(--chat-border-2);
  border-radius: 16px;
  background: var(--chat-surface);
  color: var(--chat-sub);
  text-align: center;
  font-size: .84rem;
}

/* ══════════════════════════════════════════════════════
   Google Photos Flow Modal — Android-native Material You
   Surgical replacement: IDs/classes preserved 100%
   ══════════════════════════════════════════════════════ */

/* ── Modal shell ── */
#nhChatOverlay .chat-photos-flow-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 125;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
}
#nhChatOverlay .chat-photos-flow-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
#nhChatOverlay .chat-photos-flow-modal.is-review-stage {
  transform: translateY(calc(-1 * var(--chat-keyboard-offset, 0px)));
}

#nhChatOverlay .chat-composer.is-photos-locked {
  pointer-events: none;
  opacity: .72;
  filter: saturate(.72);
}
#nhChatOverlay .chat-composer.is-photos-review {
  position: relative;
  z-index: 126;
}

/* ── Top bar ── */
#nhChatOverlay .chat-photos-flow-modal-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 6px;
  min-height: 58px;
  background: var(--chat-surface);
  border-bottom: 1px solid var(--chat-border);
  z-index: 2;
}
#nhChatOverlay .chat-photos-flow-modal-meta {
  min-width: 0;
  flex: 1;
}
#nhChatOverlay .chat-photos-flow-original-toggle {
  position: absolute;
  top: 10px;
  right: 58px;
  z-index: 6;
  margin-left: 0;
  flex-shrink: 0;
}
#nhChatOverlay .chat-photos-flow-original-toggle.is-disabled {
  opacity: .5;
}
#nhChatOverlay .chat-photos-flow-original-toggle.is-disabled .chat-attach-original-toggle-pill {
  cursor: default;
}
#nhChatOverlay .chat-photos-flow-modal-title {
  margin: 0;
  font-size: .94rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
#nhChatOverlay .chat-photos-flow-modal-sub {
  margin: 0;
  margin-top: 1px;
  font-size: .72rem;
  color: var(--chat-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Body scroll container ── */
#nhChatOverlay .chat-photos-flow-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(14px + var(--gp-composer-overlay-height, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--chat-bg);
}
#nhChatOverlay .chat-photos-flow-modal-body::-webkit-scrollbar { width: 4px; }
#nhChatOverlay .chat-photos-flow-modal-body::-webkit-scrollbar-track { background: transparent; }
#nhChatOverlay .chat-photos-flow-modal-body::-webkit-scrollbar-thumb { background: var(--chat-border-2); border-radius: 4px; }

/* ── Shared card base ── */
#nhChatOverlay .chat-photos-flow-status-card,
#nhChatOverlay .chat-photos-flow-fallback-card,
#nhChatOverlay .chat-photos-flow-review-card {
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  animation: chatPfCardIn .16s ease both;
}
@keyframes chatPfCardIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── STATUS CARD (instruction / connecting / waiting state) ── */
#nhChatOverlay .chat-photos-flow-status-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  text-align: left;
  position: relative;
}
#nhChatOverlay .chat-photos-flow-status-card::before {
  content: '';
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: var(--chat-blue);
  opacity: .9;
  animation: chatPfStatusPulse 1.8s ease-in-out infinite;
}
@keyframes chatPfStatusPulse {
  0%, 100% { opacity: .45; transform: scaleX(.86); }
  50% { opacity: .95; transform: scaleX(1); }
}
#nhChatOverlay .chat-photos-flow-status-card strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  line-height: 1.3;
}
#nhChatOverlay .chat-photos-flow-status-card span {
  display: block;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-photos-flow-status-card.is-error::before {
  background: var(--chat-red);
  animation: none;
  opacity: .8;
}
#nhChatOverlay .chat-photos-flow-status-card.is-error strong,
#nhChatOverlay .chat-photos-flow-status-card.is-error span {
  color: var(--chat-red);
}

/* Icon ring */
/* ── FALLBACK CARD (popup blocked) ── */
#nhChatOverlay .chat-photos-flow-fallback-card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}
#nhChatOverlay .chat-photos-flow-fallback-card strong {
  font-size: .96rem;
  font-weight: 700;
  color: var(--chat-text-strong);
  line-height: 1.3;
}
#nhChatOverlay .chat-photos-flow-fallback-card span {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--chat-sub);
  max-width: 280px;
}

/* ── REVIEW CARD (items selected) ── */
#nhChatOverlay .chat-photos-flow-review-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Photo preview grid */
#nhChatOverlay .chat-photos-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  align-content: start;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: transparent;
  padding: 10px;
}
#nhChatOverlay .chat-photos-flow-grid::-webkit-scrollbar { width: 4px; }
#nhChatOverlay .chat-photos-flow-grid::-webkit-scrollbar-track { background: transparent; }
#nhChatOverlay .chat-photos-flow-grid::-webkit-scrollbar-thumb { background: var(--chat-border-2); border-radius: 4px; }
#nhChatOverlay .chat-photos-flow-preview-item {
  background: var(--chat-surface-2);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  aspect-ratio: 1 / 1;
}
#nhChatOverlay .chat-photos-flow-preview-add {
  appearance: none;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(59,130,246,.02));
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-photos-flow-preview-add:hover {
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.04));
}
#nhChatOverlay .chat-photos-flow-preview-add:active {
  transform: scale(.98);
}
#nhChatOverlay .chat-photos-flow-preview-add-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.14);
  color: var(--chat-blue);
  font-size: .92rem;
}
#nhChatOverlay .chat-photos-flow-preview-add-label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-photos-flow-preview-item.is-unselected {
  opacity: .58;
}
#nhChatOverlay .chat-photos-flow-preview-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.42);
  transition: transform .14s ease, color .14s ease, opacity .14s ease;
}
#nhChatOverlay .chat-photos-flow-preview-check:hover {
  color: #ffffff;
}
#nhChatOverlay .chat-photos-flow-preview-check:active {
  transform: scale(.94);
}
#nhChatOverlay .chat-photos-flow-preview-check.is-selected {
  color: #60a5fa;
}
#nhChatOverlay .chat-photos-flow-preview-media {
  aspect-ratio: 1 / 1;
  background: var(--chat-surface-3);
  overflow: hidden;
}
#nhChatOverlay .chat-photos-flow-preview-media img,
#nhChatOverlay .chat-photos-flow-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Add-message row */
#nhChatOverlay .chat-photos-flow-note {
  width: calc(100% - 20px);
  margin: 0 10px;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  border: 1px solid var(--chat-border);
  outline: none;
  background: var(--chat-surface-2);
  color: var(--chat-text);
  font: inherit;
  font-size: .82rem;
  line-height: 1.4;
  padding: 10px 12px;
  overflow-y: auto;
  border-radius: 12px;
}
#nhChatOverlay .chat-photos-flow-note::placeholder { color: var(--chat-sub); opacity: .8; }

#nhChatOverlay .chat-photos-flow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 0 10px 10px;
}

/* ── Shared action area ── */
/* Primary (filled) button */
/* ── Mobile layout ── */
@media (max-width: 768px) {
  #nhChatOverlay .chat-photos-flow-modal-bar {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(10px, env(safe-area-inset-top));
  }
  #nhChatOverlay .chat-photos-flow-modal-body {
    padding: 10px 10px;
    padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--gp-composer-overlay-height, 0px));
  }
  #nhChatOverlay .chat-photos-flow-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; padding: 8px; }
  #nhChatOverlay .chat-photos-flow-actions { padding: 0 8px 8px; }
}

/* ── Light mode overrides ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-photos-flow-modal { background: #f4f6fb; }
  #nhChatOverlay .chat-photos-flow-modal-body { background: #f4f6fb; }
  #nhChatOverlay .chat-photos-flow-modal-bar { background: #ffffff; border-bottom-color: #dce3f0; }
  #nhChatOverlay .chat-photos-flow-modal-title { color: #0f1626; }
  #nhChatOverlay .chat-photos-flow-modal-sub { color: #6b7a96; }
  #nhChatOverlay .chat-photos-flow-status-card,
  #nhChatOverlay .chat-photos-flow-fallback-card,
  #nhChatOverlay .chat-photos-flow-review-card {
    background: #ffffff;
    border-color: #dce3f0;
    box-shadow: none;
  }
  #nhChatOverlay .chat-photos-flow-grid { background: transparent; }
  #nhChatOverlay .chat-photos-flow-preview-item { background: #f8fafd; border-color: #dce3f0; }
  #nhChatOverlay .chat-photos-flow-preview-add { background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.02)); }
  #nhChatOverlay .chat-photos-flow-preview-add-icon { background: rgba(37,99,235,.12); color: #2563eb; }
  #nhChatOverlay .chat-photos-flow-preview-check { color: rgba(255,255,255,.98); }
  #nhChatOverlay .chat-photos-flow-preview-check.is-selected { color: #2563eb; }
  #nhChatOverlay .chat-photos-flow-preview-media { background: #edf0f8; }
  #nhChatOverlay .chat-photos-flow-note { color: #0f1626; background: #ffffff; border-color: #dce3f0; }
}

#nhChatOverlay .chat-live-loc-modal-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--chat-surface);
  border-top: 1px solid var(--chat-border);
  min-height: 48px;
}
#nhChatOverlay .chat-live-loc-modal-coords {
  font-size: .72rem;
  font-family: ui-monospace, 'SF Mono', 'Fira Mono', monospace;
  color: var(--chat-sub);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
#nhChatOverlay .chat-live-loc-modal-footer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#nhChatOverlay .chat-live-loc-stop-btn {
  appearance: none;
  border: 1px solid rgba(239,68,68,.32);
  background: rgba(239,68,68,.10);
  color: var(--chat-red);
  border-radius: 10px;
  padding: 6px 14px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .12s;
}
#nhChatOverlay .chat-live-loc-stop-btn:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.48);
}
#nhChatOverlay .chat-live-loc-stop-btn:active { transform: scale(.96); }
#nhChatOverlay .chat-live-loc-stop-btn[hidden] { display: none; }

/* ── Mobile: break out to full viewport (matches image viewer pattern) ── */
@media (max-width: 768px) {
  #nhChatOverlay .chat-live-loc-modal {
    position: fixed;
    inset: 0;
    z-index: 9092; /* above nhc-body content, below nhChatOverlay (9095) */
  }
  #nhChatOverlay .chat-live-loc-modal-bar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #nhChatOverlay .chat-live-loc-modal-titles h4 { font-size: .88rem; }
  #nhChatOverlay .chat-live-loc-modal-titles p  { font-size: .7rem; }
}

/* ── Light mode overrides ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-live-loc-modal {
    background: #f4f6fb;
  }
  #nhChatOverlay .chat-live-loc-modal-bar,
  #nhChatOverlay .chat-live-loc-modal-footer {
    background: #ffffff;
    border-color: #dce3f0;
  }
  #nhChatOverlay .chat-live-loc-modal-map-wrap {
    background: #eef2fb;
  }
  #nhChatOverlay .chat-live-loc-map-focus-control {
    background: #ffffff;
    color: #0f1626;
  }
  #nhChatOverlay .chat-live-loc-map-focus-control:hover {
    background: #f0f4fb;
  }
  #nhChatOverlay .chat-live-loc-map-focus-control:active {
    background: #e4ebf7;
  }
  #nhChatOverlay .chat-live-loc-modal-map-loading {
    background: #eef2fb;
    color: #6b7a96;
  }
  #nhChatOverlay .chat-live-loc-modal-spin {
    background: #f0f4fb;
    border-color: #cbd6e7;
    color: #2563eb;
  }
  #nhChatOverlay .chat-live-loc-modal-btn:hover {
    background: #f0f4fb;
    color: #0f1626;
  }
  #nhChatOverlay .chat-live-loc-modal-badge.is-active {
    background: rgba(239,68,68,.10);
    color: #dc2626;
    border-color: rgba(239,68,68,.22);
  }
  #nhChatOverlay .chat-live-loc-modal-badge.is-ended {
    background: rgba(107,119,140,.08);
    color: #6b7a96;
    border-color: #dce3f0;
  }
  #nhChatOverlay .chat-live-loc-stop-btn {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.24);
    color: #dc2626;
  }
  #nhChatOverlay .chat-live-loc-stop-btn:hover {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.42);
  }
}

/* END LIVE LOCATION MODAL */

/* ══════════════════════════════════════════════════════════════════════════
   LIVE LOCATION — Avatar Map Pin + Floating Status Pill
   Single-color system: --loc-blue (#3b82f6) throughout
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Single location accent colour ── */
#nhChatOverlay {
  --loc-blue: #3b82f6;
  --loc-blue-dim: rgba(59,130,246,.18);
  --loc-blue-ring: rgba(59,130,246,.38);
  --loc-ended: var(--chat-sub);
}

/* ── Avatar pin — modern teardrop shape ── */
#nhChatOverlay .chat-live-loc-avatar-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-100% - 4px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 6px 16px rgba(59,130,246,.36)) drop-shadow(0 2px 6px rgba(0,0,0,.32));
  transition: opacity .22s, filter .22s, transform .18s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#nhChatOverlay .chat-live-loc-avatar-pin.is-map-marker {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  filter: drop-shadow(0 6px 16px rgba(59,130,246,.36)) drop-shadow(0 2px 6px rgba(0,0,0,.32));
}
#nhChatOverlay .chat-live-loc-avatar-pin:active {
  transform: translate(-50%, calc(-100% - 4px)) scale(.93);
}
#nhChatOverlay .chat-live-loc-avatar-pin.is-map-marker:active {
  transform: scale(.93);
}
#nhChatOverlay .chat-live-loc-avatar-pin.is-ended {
  opacity: .52;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.22)) grayscale(.7);
}

/* Teardrop backing plate — gives the avatar its pin-shaped frame */
#nhChatOverlay .chat-live-loc-avatar-pin-img {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  border: 3px solid var(--loc-blue);
  background: var(--chat-surface-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--loc-blue);
  flex-shrink: 0;
  transition: border-color .22s;
  /* White inner glow for polish */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10), 0 0 0 4px var(--loc-blue-dim);
}
#nhChatOverlay .chat-live-loc-avatar-pin.is-ended .chat-live-loc-avatar-pin-img {
  border-color: var(--loc-ended);
  box-shadow: none;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-live-loc-avatar-pin-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pulse ring — single blue only */
#nhChatOverlay .chat-live-loc-avatar-pin:not(.is-ended) .chat-live-loc-avatar-pin-img::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--loc-blue);
  opacity: 0;
  animation: liveAvatarRing 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes liveAvatarRing {
  0%   { transform: scale(.78); opacity: .55; }
  65%  { transform: scale(1.22); opacity: 0; }
  100% { opacity: 0; }
}

/* ── Teardrop tail — sharp, centred, blue only ── */
#nhChatOverlay .chat-live-loc-avatar-pin-tail {
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--loc-blue);
  margin-top: -2px;
  transition: border-top-color .22s;
  /* Subtle shadow on the tail */
  filter: drop-shadow(0 3px 4px rgba(59,130,246,.3));
}
#nhChatOverlay .chat-live-loc-avatar-pin.is-ended .chat-live-loc-avatar-pin-tail {
  border-top-color: var(--loc-ended);
  filter: none;
}

/* ── Floating status pill — single blue theme ── */
#nhChatOverlay .chat-live-loc-map-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--loc-blue);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 12px rgba(59,130,246,.40), 0 1px 4px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .22s, color .22s, border-color .22s, box-shadow .22s;
  pointer-events: none;
}
#nhChatOverlay .chat-live-loc-map-pill.is-active .chat-live-loc-map-pill-icon {
  animation: livePulse 1.4s ease-in-out infinite;
}
#nhChatOverlay .chat-live-loc-map-pill.is-ended {
  background: rgba(30,40,60,.76);
  color: var(--chat-sub);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* Safe-area nudge for mobile */
@media (max-width: 768px) {
  #nhChatOverlay .chat-live-loc-avatar-pin-img {
    width: 44px;
    height: 44px;
  }
  #nhChatOverlay .chat-live-loc-map-pill {
    top: 12px;
    left: max(12px, env(safe-area-inset-left, 12px));
  }
}

/* ── Light mode overrides ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay {
    --loc-blue-dim: rgba(59,130,246,.12);
    --loc-blue-ring: rgba(59,130,246,.28);
  }
  #nhChatOverlay .chat-live-loc-avatar-pin {
    filter: drop-shadow(0 5px 14px rgba(59,130,246,.28)) drop-shadow(0 2px 5px rgba(0,0,0,.16));
  }
  #nhChatOverlay .chat-live-loc-avatar-pin-img {
    background: #fff;
    color: var(--loc-blue);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 4px var(--loc-blue-dim);
  }
  #nhChatOverlay .chat-live-loc-map-pill {
    box-shadow: 0 2px 10px rgba(59,130,246,.32), 0 1px 4px rgba(0,0,0,.10);
  }
  #nhChatOverlay .chat-live-loc-map-pill.is-ended {
    background: rgba(220,225,238,.90);
    color: #6b7a96;
    border-color: rgba(0,0,0,.07);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
  }
}
/* END LIVE LOCATION AVATAR PIN + PILL */
/* ══════════════════════════════════════════════════════════════════════════
   LIVE LOCATION — Pin Info Card & Detail Card
   Single-color: --loc-blue throughout
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mini info card (appears above pin on tap) ── */
#nhChatOverlay .chat-live-loc-pin-info {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 10;
  min-width: 162px;
  max-width: 234px;
  background: rgba(11,18,34,.94);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 11px;
  padding: 9px 11px 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(59,130,246,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
#nhChatOverlay .chat-live-loc-pin-info.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#nhChatOverlay .chat-live-loc-pin-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
#nhChatOverlay .chat-live-loc-pin-info-name {
  font-size: .8rem;
  font-weight: 700;
  color: #f0f6ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
/* (i) info button — blue tinted */
#nhChatOverlay .chat-live-loc-pin-info-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .67rem;
  color: rgba(200,214,236,.62);
  overflow: hidden;
}
#nhChatOverlay .chat-live-loc-pin-info-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#nhChatOverlay .chat-live-loc-pin-info-actions .chat-location-bubble-btn {
  min-width: 0;
}
#nhChatOverlay .chat-live-loc-pin-info-actions .chat-location-bubble-btn span {
  font-size: .67rem;
}
#nhChatOverlay .chat-live-loc-pin-info-acc,
#nhChatOverlay .chat-live-loc-pin-info-upd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nhChatOverlay .chat-live-loc-pin-info-sep { flex-shrink: 0; }
/* Caret — blue-tinted border */
#nhChatOverlay .chat-live-loc-pin-info::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(11,18,34,.94);
}

/* ── Sender detail card — fixed screen-centre modal ── */
/* Inner card panel */
/* Thin blue accent top stripe — on the inner panel */
/* Avatar — blue border, matches pin */
/* ── Mobile adjustments ── */
@media (max-width: 480px) {
  #nhChatOverlay .chat-live-loc-pin-info  { min-width: 148px; max-width: 202px; }
  #nhChatOverlay .chat-live-loc-pin-info-actions .chat-location-bubble-btn span { font-size: .64rem; }
}

/* ── Light mode ── */
@media (prefers-color-scheme: light) {
  #nhChatOverlay .chat-live-loc-pin-info {
    background: rgba(255,255,255,.97);
    border-color: rgba(59,130,246,.20);
    box-shadow: 0 6px 22px rgba(0,0,0,.12), 0 0 0 1px rgba(59,130,246,.07);
  }
  #nhChatOverlay .chat-live-loc-pin-info::after { border-top-color: rgba(255,255,255,.97); }
  #nhChatOverlay .chat-live-loc-pin-info-name { color: #0f1626; }
  #nhChatOverlay .chat-live-loc-pin-info-meta { color: #6b7a96; }
}
/* END PIN INFO + DETAIL CARDS */
#nhChatOverlay .chat-team-live-modal {
  position: absolute;
  inset: 0;
  z-index: 122;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1);
}
#nhChatOverlay .chat-team-live-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
#nhChatOverlay .chat-team-live-modal-map-wrap {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--chat-surface-2);
}
#nhChatOverlay .chat-team-live-modal-footer {
  background: var(--chat-surface);
}
#nhChatOverlay .chat-team-live-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#nhChatOverlay .chat-team-live-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .32);
}
#nhChatOverlay .chat-team-live-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: min(58%, 520px);
  background: var(--chat-surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--chat-border);
  box-shadow: 0 -8px 30px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#nhChatOverlay .chat-team-live-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--chat-border);
}
#nhChatOverlay .chat-team-live-sheet-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#nhChatOverlay .chat-team-live-sheet-copy strong {
  font-size: .88rem;
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-team-live-sheet-copy span {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-team-live-modal-list {
  padding: 12px;
}
#nhChatOverlay .chat-team-live-all-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  background: var(--chat-surface);
  padding: 12px 14px;
  margin: 0 0 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#nhChatOverlay .chat-team-live-all-btn.is-selected {
  border-color: rgba(245, 158, 11, .35);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .18) inset;
  background: color-mix(in srgb, var(--chat-surface) 88%, #f59e0b 12%);
}
#nhChatOverlay .chat-team-live-all-btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--chat-surface-2) 72%, #f59e0b 28%);
  color: #a16207;
  font-size: 1rem;
}
#nhChatOverlay .chat-team-live-all-btn-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#nhChatOverlay .chat-team-live-all-btn-copy strong {
  font-size: .9rem;
  color: var(--chat-text-strong);
}
#nhChatOverlay .chat-team-live-all-btn-copy span {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--chat-sub);
}
#nhChatOverlay .chat-team-live-row.is-selected {
  border-color: rgba(245, 158, 11, .35);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .18) inset;
}
@media (min-width: 820px) {
  #nhChatOverlay .chat-team-live-modal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
  }
  #nhChatOverlay .chat-team-live-all-btn {
    margin: 0;
  }
}
@media (prefers-color-scheme: dark) {
  #nhChatOverlay .chat-team-live-sheet-backdrop {
    background: rgba(2, 6, 23, .52);
  }
  #nhChatOverlay .chat-team-live-sheet-panel {
    box-shadow: 0 -10px 34px rgba(0,0,0,.42);
  }
  #nhChatOverlay .chat-team-live-all-btn.is-selected {
    background: color-mix(in srgb, var(--chat-surface) 84%, #f59e0b 16%);
  }
}
#nhChatOverlay .chat-runtime-notice {
  position: absolute;
  inset: 0;
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(11, 18, 32, 0.28);
}

#nhChatOverlay .chat-runtime-notice-card {
  width: min(420px, 100%);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  color: #14213d;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
  padding: 18px 18px 16px;
}

#nhChatOverlay .chat-runtime-notice-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

#nhChatOverlay .chat-runtime-notice-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #42526b;
}

#nhChatOverlay .chat-runtime-notice-verify {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#nhChatOverlay .chat-runtime-notice-verify-label {
  font-size: 12px;
  font-weight: 700;
  color: #42526b;
}

#nhChatOverlay .chat-runtime-notice-verify-input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  background: #fff;
  color: #14213d;
  padding: 10px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

#nhChatOverlay .chat-runtime-notice-verify-input:focus {
  border-color: rgba(37, 99, 235, 0.68);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

#nhChatOverlay .chat-runtime-notice-verify-input::placeholder {
  color: #8a97a8;
}

#nhChatOverlay .chat-runtime-notice-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#nhChatOverlay .chat-runtime-notice-actions .chat-primary-btn.is-danger {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: none;
}

#nhChatOverlay .chat-runtime-notice-actions .chat-primary-btn.is-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.chat-history-gate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 4px;
}

.chat-history-gate-line {
  height: 1px;
  background: rgba(120, 138, 163, 0.18);
}

.chat-history-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 8px 12px 4px;
}

.chat-history-gate-title {
  font-size: 12px;
  font-weight: 700;
  color: #556274;
}

.chat-history-gate-sub {
  font-size: 11px;
  line-height: 1.45;
  color: #7f8b99;
}

.chat-history-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0;
}

.chat-history-gate-btn:hover,
.chat-history-gate-btn:focus-visible {
  color: #1d4ed8;
}

.chat-history-gate-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f6f82;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0;
}