/*
 * ndevr-chat.css — OWL browser chat widget (ndevr-chat.js). Matches the NDEVR web palette used by
 * ndevr-forms.css / the product widget (gold #f2a900 on #1b1e24 / #23272f). Self-contained: redeclares
 * the same tokens on .ndevr-chat so it looks identical whether or not forms.css is on the page.
 * Theming: colors consume the shared --nd-* tokens (/shared/css/theme.css) with the original dark literals as var() fallbacks.
 *
 * Layout: side-by-side (list + conversation) on desktop; on phones a master-detail flow — the
 * conversation list fills the screen, tapping a conversation slides to the messages with a Back arrow.
 */

@layer page {
.ndevr-chat {
  color: var(--nd-text, #e8eaed);
  font-family: var(--nd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.ndevr-chat * { box-sizing: border-box; }

.ndevr-chat .nchat-wrap {
  display: flex; height: 70vh; min-height: 420px;
  border: 1px solid var(--nd-border, #353b46); border-radius: var(--nd-radius, 12px); overflow: hidden; background: var(--nd-surface, #1b1e24);
}

/* ---- left: conversation list ---- */
.ndevr-chat .nchat-left {
  width: 264px; min-width: 220px; display: flex; flex-direction: column;
  border-right: 1px solid var(--nd-border, #353b46); background: var(--nd-surface-2, #23272f);
}
.ndevr-chat .nchat-actions { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--nd-border, #353b46); }
.ndevr-chat .nchat-actions .nui-btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.ndevr-chat .nchat-convs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ndevr-chat .nchat-conv {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer;
  border-bottom: 1px solid var(--nd-tint-1, rgba(255,255,255,.05)); transition: background .12s;
}
.ndevr-chat .nchat-conv:hover { background: var(--nd-tint-1, rgba(255,255,255,.05)); }
.ndevr-chat .nchat-conv.is-active { background: rgba(242,169,0,.13); box-shadow: inset 3px 0 0 var(--nd-accent-deep, #f2a900); }
/* Resource-folder tree: a section label, collapsible folder rows, and a rotating chevron. Resource
   chats nest under their OWL folder so a board doesn't flood the flat list with every card thread. */
.ndevr-chat .nchat-section {
  padding: 11px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nd-muted, #9aa3b2); border-top: 1px solid var(--nd-tint-1, rgba(255,255,255,.06));
  margin-top: 2px;
}
.ndevr-chat .nchat-tree-folder {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--nd-tint-1, rgba(255,255,255,.05)); transition: background .12s; user-select: none;
}
.ndevr-chat .nchat-tree-folder:hover { background: var(--nd-tint-1, rgba(255,255,255,.05)); }
.ndevr-chat .nchat-chev {
  flex: 0 0 auto; width: 14px; height: 14px; color: var(--nd-muted, #9aa3b2);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s;
}
.ndevr-chat .nchat-chev svg { width: 14px; height: 14px; }
.ndevr-chat .nchat-tree-folder.is-open .nchat-chev { transform: rotate(90deg); }
.ndevr-chat .nchat-avatar.nchat-tree-ic { width: 30px; height: 30px; font-size: 17px; }
/* Indented leaf rows inside the tree get a faint guide rail on the left. */
.ndevr-chat .nchat-conv[style*="padding-left"] { border-left: 1px solid var(--nd-tint-1, rgba(255,255,255,.06)); }
/* Name (line 1) + kind tag (line 2) stacked in a flexible column so a long name ellipsizes. */
.ndevr-chat .nchat-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ndevr-chat .nchat-conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
/* Round user avatar: the icon image, or a colored initial fallback. */
.ndevr-chat .nchat-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--nd-tint-2, rgba(255,255,255,.10));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--nd-muted, #9aa3b2); overflow: hidden;
}
/* Resource conversations: a rounded SQUARE (reads as a file, not a person), showing the library
   thumbnail or the type emoji. Group conversations: a soft-tinted disc holding the people glyph. */
.ndevr-chat .nchat-avatar.is-resource { border-radius: 9px; background-color: rgba(242,169,0,.12); }
.ndevr-chat .nchat-avatar.is-resource.is-emoji { font-size: 19px; }
.ndevr-chat .nchat-avatar.is-group { background-color: rgba(242,169,0,.12); color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); }
.ndevr-chat .nchat-avatar.is-group svg { width: 20px; height: 20px; }
.ndevr-chat .nchat-head-avatar { width: 30px; height: 30px; }
/* Presence: a status dot tucked at the avatar's bottom-right corner. The wrapper exists so the dot can
   sit OUTSIDE the avatar's own (overflow:hidden, round) box. Green = online, hollow grey = offline. */
.ndevr-chat .nchat-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.ndevr-chat .nchat-presence-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid var(--nd-surface-2, #23272f);
}
.ndevr-chat .nchat-presence-dot.is-online  { background: var(--nd-presence-online, #35c759); }
.ndevr-chat .nchat-presence-dot.is-offline { background: var(--nd-presence-offline, #6b7280); }
/* Smaller dot on the compact 30px avatars (header + member rows). */
.ndevr-chat .nchat-head-avatar + .nchat-presence-dot,
.ndevr-chat .nchat-member .nchat-presence-dot { width: 10px; height: 10px; }
/* Member row: name stacked over a presence caption. */
.ndevr-chat .nchat-member-namewrap { flex: 1; min-width: 0; }
.ndevr-chat .nchat-member-namewrap .nchat-member-name { flex: none; }
.ndevr-chat .nchat-member-status { font-size: 11.5px; line-height: 1.3; color: var(--nd-muted, #9aa3b2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndevr-chat .nchat-member-status.is-online { color: var(--nd-presence-online, #35c759); }
/* Kind tag pill — Direct / Group / File / Folder. Color-coded so the three kinds are scannable. */
.ndevr-chat .nchat-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  background: var(--nd-tint-1, rgba(255,255,255,.08)); color: var(--nd-muted, #9aa3b2); border: 1px solid transparent;
}
.ndevr-chat .nchat-tag.is-resource { background: rgba(242,169,0,.16); color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); }
.ndevr-chat .nchat-tag.is-group { background: rgba(96,165,250,.16); color: #93c5fd; }
.ndevr-chat .nchat-tag.is-direct { background: rgba(52,211,153,.15); color: #6ee7b7; }
.ndevr-chat .nchat-tag.is-site { background: rgba(167,139,250,.16); color: #c4b5fd; } /* Site Studio builder chats */
/* Light mode: the pastel text above is tuned for dark backgrounds and washes out on a near-white pill.
   Darken the text (and slightly deepen the tint) so the kinds stay scannable. is-resource already adapts via --nd-accent-text. */
html[data-theme="light"] .ndevr-chat .nchat-tag.is-group  { background: rgba(31,111,176,.14);  color: #1f6fb0; }
html[data-theme="light"] .ndevr-chat .nchat-tag.is-direct { background: rgba(28,138,76,.14);   color: #1c8a4c; }
html[data-theme="light"] .ndevr-chat .nchat-tag.is-site   { background: rgba(124,58,237,.13);  color: #6d28d9; }
/* Header: title (line 1) + kind tag (line 2). */
.ndevr-chat .nchat-head-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ndevr-chat .nchat-head-tag { align-self: flex-start; }
.ndevr-chat .nchat-badge { width: 9px; height: 9px; border-radius: 50%; background: var(--nd-accent-deep, #f2a900); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(242,169,0,.18); }
.ndevr-chat .nchat-count {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: linear-gradient(180deg, var(--nd-accent-deep, #f2a900), var(--nd-accent-down, #c98a00)); color: var(--nd-accent-contrast, #232323);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.ndevr-chat .nchat-empty, .ndevr-chat .nchat-login { padding: 18px; color: var(--nd-muted, #9aa3b2); font-size: 14px; line-height: 1.5; }

/* ---- server-unavailable notice ---- */
.ndevr-chat .nchat-unavailable {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px; height: 70vh; min-height: 360px; padding: 24px;
  border: 1px solid var(--nd-border, #353b46); border-radius: var(--nd-radius, 12px); background: var(--nd-surface, #1b1e24);
}
.ndevr-chat .nchat-unavailable-icon { font-size: 40px; opacity: .85; }
.ndevr-chat .nchat-unavailable-title { font-size: 19px; font-weight: 700; color: var(--nd-text, #e8eaed); }
.ndevr-chat .nchat-unavailable-msg { color: var(--nd-muted, #9aa3b2); font-size: 14.5px; line-height: 1.5; max-width: 360px; }
.ndevr-chat .nchat-unavailable .nui-btn { margin-top: 6px; }
@media (max-width: 700px) { .ndevr-chat .nchat-unavailable { height: calc(100vh - 130px); } }

/* ---- right: messages ---- */
.ndevr-chat .nchat-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ndevr-chat .nchat-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--nd-border, #353b46); background: var(--nd-surface-2, #23272f); }
.ndevr-chat .nchat-back {
  display: none; /* shown only on mobile */ border: 0; background: transparent; color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900));
  font-size: 22px; line-height: 1; padding: 4px 8px 4px 0; cursor: pointer;
}
.ndevr-chat .nchat-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* header icon buttons (details / members / clear-all) — pushed to the right edge of the header */
.ndevr-chat .nchat-head-info,
.ndevr-chat .nchat-head-members,
.ndevr-chat .nchat-head-clear {
  margin-left: auto; border: 0; background: transparent; color: var(--nd-muted, #9aa3b2); cursor: pointer;
  width: 34px; height: 34px; padding: 6px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.ndevr-chat .nchat-head-info svg, .ndevr-chat .nchat-head-members svg, .ndevr-chat .nchat-head-clear svg { width: 20px; height: 20px; }
.ndevr-chat .nchat-head-info:hover { color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); background: rgba(242,169,0,.12); }
.ndevr-chat .nchat-head-members:hover { color: var(--nd-text, #e8eaed); background: var(--nd-tint-1, rgba(255,255,255,.06)); }
.ndevr-chat .nchat-head-clear:hover { color: var(--nd-error, #e0584f); background: var(--nd-err-bg, rgba(224,88,79,.12)); }
/* overflow-anchor:none — we drive scroll position explicitly (scroll-to-bottom on open/append, manual
   restore on scroll-back). The browser's default scroll anchoring otherwise nudges scrollTop when a late
   image grows the thread, fighting our pin logic and leaving the newest message stranded mid-pane. */
.ndevr-chat .nchat-messages { flex: 1; overflow-y: auto; overflow-anchor: none; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
/* ---- generic "no conversation selected" placeholder ---- */
.ndevr-chat .nchat-placeholder {
  display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 24px;
}
.ndevr-chat .nchat-placeholder-icon { color: var(--nd-muted, #9aa3b2); opacity: .5; }
.ndevr-chat .nchat-placeholder-icon svg { width: 56px; height: 56px; }
.ndevr-chat .nchat-placeholder-title { font-size: 18px; font-weight: 700; color: var(--nd-text, #e8eaed); }
.ndevr-chat .nchat-placeholder-sub { color: var(--nd-muted, #9aa3b2); font-size: 14px; line-height: 1.5; max-width: 320px; }
/* when nothing is selected, show the placeholder and hide the (empty) thread + composer */
.ndevr-chat.nchat-no-active .nchat-placeholder { display: flex; }
.ndevr-chat.nchat-no-active .nchat-messages,
.ndevr-chat.nchat-no-active .nchat-typing,
.ndevr-chat.nchat-no-active .nchat-composer { display: none; }
.ndevr-chat .nchat-msg { max-width: 76%; padding: 9px 12px; border-radius: 14px; background: var(--nd-surface-2, #23272f); align-self: flex-start; line-height: 1.4; }
.ndevr-chat .nchat-msg.is-mine { align-self: flex-end; background: linear-gradient(180deg, var(--nd-accent-deep, #f2a900), var(--nd-accent-down, #c98a00)); color: var(--nd-accent-contrast, #232323); }
.ndevr-chat .nchat-who { display: block; font-size: 11px; opacity: .7; margin-bottom: 2px; }
.ndevr-chat .nchat-msg.is-mine .nchat-who { color: var(--nd-accent-contrast, #4a3500); opacity: .8; }
.ndevr-chat .nchat-body { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; }
/* inline markdown rendered in message bodies (bold/italic/code/links) */
.ndevr-chat .nchat-body strong { font-weight: 700; }
.ndevr-chat .nchat-body em { font-style: italic; }
.ndevr-chat .nchat-body code { background: var(--nd-tint-2, rgba(255,255,255,.12)); padding: 1px 5px; border-radius: 5px; font-family: var(--nd-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .92em; }
.ndevr-chat .nchat-body a { color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); text-decoration: underline; }
/* markdown headings (`#`..`######`) — inline spans on their own pre-wrap line, bold + scaled by level */
.ndevr-chat .nchat-body .nchat-h { font-weight: 700; line-height: 1.25; }
.ndevr-chat .nchat-body .nchat-h1 { font-size: 1.32em; }
.ndevr-chat .nchat-body .nchat-h2 { font-size: 1.18em; }
.ndevr-chat .nchat-body .nchat-h3 { font-size: 1.07em; }
.ndevr-chat .nchat-body .nchat-h4, .ndevr-chat .nchat-body .nchat-h5, .ndevr-chat .nchat-body .nchat-h6 { font-size: 1em; opacity: .85; }
/* fenced code blocks, blockquotes, horizontal rules, strikethrough */
.ndevr-chat .nchat-body .nchat-pre { display: block; white-space: pre; overflow-x: auto; background: var(--nd-tint-2, rgba(255,255,255,.08)); border: 1px solid var(--nd-line, rgba(255,255,255,.14)); border-radius: 8px; padding: 8px 10px; margin: 4px 0; font-family: var(--nd-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .9em; line-height: 1.45; }
.ndevr-chat .nchat-body .nchat-quote { display: block; border-left: 3px solid var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); padding: 1px 0 1px 10px; margin: 2px 0; color: var(--nd-muted, #9aa3b2); }
.ndevr-chat .nchat-body .nchat-hr { display: block; height: 0; border-top: 1px solid var(--nd-line, rgba(255,255,255,.2)); margin: 8px 0; }
.ndevr-chat .nchat-body del { opacity: .65; }
.ndevr-chat .nchat-msg.is-mine .nchat-body .nchat-pre { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.2); }
.ndevr-chat .nchat-msg.is-mine .nchat-body code { background: rgba(0,0,0,.16); }
.ndevr-chat .nchat-msg.is-mine .nchat-body a { color: var(--nd-accent-contrast, #232323); }
.ndevr-chat .nchat-sys { align-self: center; color: var(--nd-muted, #9aa3b2); font-size: 13px; background: none; max-width: 90%; text-align: center; }
/* grouped (consecutive same-sender) bubbles sit tighter under the block's name header */
.ndevr-chat .nchat-msg.is-grouped { margin-top: -5px; }
/* centered time divider between message blocks */
.ndevr-chat .nchat-divider { align-self: center; color: var(--nd-muted, #9aa3b2); font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; margin: 6px 0 2px; opacity: .75; }
/* automation system line (plaintext OWLSYS messages) — centered, muted, no bubble */
.ndevr-chat .nchat-sys { align-self: center; color: var(--nd-muted, #9aa3b2); font-size: 12.5px; font-style: italic; text-align: center; max-width: 86%; margin: 8px 0; padding: 4px 10px; border: 1px dashed var(--nd-border, #353b46); border-radius: 10px; opacity: .9; }
/* new-message entrance: gentle fade + rise so live messages don't pop in jarringly */
.ndevr-chat .nchat-enter { animation: nd-fade-in .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .ndevr-chat .nchat-enter { animation: none; } }

/* ---- typing indicator (animated dots) ---- */
.ndevr-chat .nchat-typing { display: flex; align-items: center; gap: 7px; padding: 4px 16px 8px; color: var(--nd-muted, #9aa3b2); font-size: 13px; font-style: italic; min-height: 0; }
.ndevr-chat .nchat-typing-dots { display: inline-flex; gap: 3px; }
.ndevr-chat .nchat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--nd-accent-deep, #f2a900); display: inline-block; opacity: .35; animation: nd-bounce 1.3s infinite ease-in-out; }
.ndevr-chat .nchat-typing-dots i:nth-child(2) { animation-delay: .18s; }
.ndevr-chat .nchat-typing-dots i:nth-child(3) { animation-delay: .36s; }

/* ---- read receipt ("Seen") ---- */
.ndevr-chat .nchat-seen { align-self: flex-end; color: var(--nd-muted, #9aa3b2); font-size: 11px; margin: -2px 2px 2px; }

/* ---- composer ---- */
.ndevr-chat .nchat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--nd-border, #353b46); background: var(--nd-surface-2, #23272f); }
/* Multi-line auto-growing composer: starts at one line, grows with content up to max-height, then scrolls.
   The visible box is the WRAP; a textarea (transparent text, visible caret) sits over a mirror div that
   re-renders the same text with @QUAIL highlighted. Wrap + textarea + mirror share identical box metrics
   (padding/font/line-height/wrapping) so the colored text lines up exactly under the caret. */
.ndevr-chat .nchat-input-wrap {
  flex: 1; min-width: 0; position: relative; min-height: 42px; max-height: 140px; overflow: hidden;
  background: var(--nd-surface, #1b1e24); border: 1px solid var(--nd-border, #353b46); border-radius: 16px;
}
.ndevr-chat .nchat-input-wrap:focus-within { border-color: var(--nd-accent-deep, #f2a900); box-shadow: 0 0 0 3px rgba(242,169,0,.15); }
.ndevr-chat .ninput, .ndevr-chat .nchat-input-mirror {
  margin: 0; padding: 10px 14px; border: 0; font-family: inherit; font-size: 15px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.ndevr-chat .ninput {
  display: block; width: 100%; min-height: 42px; max-height: 140px; resize: none; outline: none;
  background: transparent; color: transparent; caret-color: var(--nd-text, #e8eaed); position: relative; z-index: 1; overflow-y: auto;
}
.ndevr-chat .nchat-input-mirror {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--nd-text, #e8eaed);
}
.ndevr-chat .ninput::placeholder { color: var(--nd-muted, #9aa3b2); }
/* @QUAIL mention pill — shown both in the composer mirror and in rendered message bodies. */
.ndevr-chat .nchat-mention {
  color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); font-weight: 700; background: rgba(242,169,0,.14);
  border-radius: 5px; padding: 0 3px;
}
/* In an own (gold) bubble, gold-on-gold disappears — use the same dark contrast as links/code there. */
.ndevr-chat .nchat-msg.is-mine .nchat-mention { color: var(--nd-accent-contrast, #232323); background: rgba(0,0,0,.16); }
/* In the composer mirror the pill sits behind a transparent textarea whose plain text sets the caret
   position; anything that changes the mention's glyph advance (padding OR bold weight) widens the colored
   text and drifts the caret off it. Keep the highlight (color/background/radius don't affect layout) but
   match the textarea's metrics exactly: zero padding, normal weight. */
.ndevr-chat .nchat-input-mirror .nchat-mention { padding: 0; font-weight: inherit; }
/* The member-add field reuses .ninput as a plain single-line input — keep that one opaque/visible. */
.ndevr-chat .nchat-member-add .ninput {
  background: var(--nd-surface, #1b1e24); border: 1px solid var(--nd-border, #353b46); color: var(--nd-text, #e8eaed); border-radius: 9px;
  caret-color: auto; z-index: auto;
}
/* The Vue chat composer (web/src/pages/chat) renders no @mention mirror behind the textarea, so the
   textarea must show its OWN text — otherwise it inherits .ninput's transparent color (meant for the
   mirror-overlay path) and types invisibly (most obvious on the light-mode surface). */
.ndevr-chat .ninput.ninput-plain { color: var(--nd-text, #e8eaed); }

/* ---- send button: shares the unified .nui-btn--primary fill; only its pill layout is local ---- */
.ndevr-chat .nbtn-send { height: 42px; border-radius: 21px; padding: 0 20px; }

/* ---- message info popover (long-press / right-click a bubble) ---- */
.ndevr-chat .nchat-info-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: var(--nd-overlay, rgba(0,0,0,.5)); padding: 20px; animation: nd-fade .15s ease-out;
}
.ndevr-chat .nchat-info-card {
  width: 100%; max-width: 320px; background: var(--nd-surface-2, #23272f); border: 1px solid var(--nd-border, #353b46);
  border-radius: var(--nd-radius, 12px); padding: 16px 18px; box-shadow: var(--nd-shadow-2, 0 18px 50px rgba(0,0,0,.5));
}
.ndevr-chat .nchat-info-title { font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); }
.ndevr-chat .nchat-info-row { display: flex; gap: 12px; padding: 5px 0; font-size: 14px; }
.ndevr-chat .nchat-info-k { flex: 0 0 72px; color: var(--nd-muted, #9aa3b2); }
.ndevr-chat .nchat-info-v { flex: 1; color: var(--nd-text, #e8eaed); word-break: break-word; }
.ndevr-chat .nchat-info-note { color: var(--nd-muted, #9aa3b2); font-size: 13px; line-height: 1.5; margin: 6px 0 2px; }
.ndevr-chat .nchat-menu-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ndevr-chat .nchat-menu-actions .nui-btn { width: 100%; height: 42px; }
/* ---- group members sheet ---- */
.ndevr-chat .nchat-members { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 2px 0; }
.ndevr-chat .nchat-member { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--nd-tint-1, rgba(255,255,255,.05)); }
.ndevr-chat .nchat-member:last-child { border-bottom: 0; }
.ndevr-chat .nchat-member .nchat-avatar { width: 30px; height: 30px; font-size: 12px; }
.ndevr-chat .nchat-member-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndevr-chat .nchat-member-remove {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--nd-err-bg, rgba(224,88,79,.12)); color: var(--nd-error, #e0584f); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.ndevr-chat .nchat-member-remove:hover { background: rgba(224,88,79,.22); }
.ndevr-chat .nchat-member-add { display: flex; gap: 8px; margin-top: 12px; }
.ndevr-chat .nchat-member-add .ninput { flex: 1; }
.ndevr-chat .nchat-member-add .nui-btn { flex: 0 0 auto; height: 40px; padding: 0 16px; }
.ndevr-chat .nchat-member-err { color: var(--nd-error, #e0584f); font-size: 13px; line-height: 1.4; margin-top: 6px; min-height: 1px; }
/* new-group overlay fields */
.ndevr-chat .nchat-field { display: block; margin: 10px 0; }
.ndevr-chat .nchat-field-label { display: block; font-size: 12.5px; color: var(--nd-muted, #9aa3b2); margin-bottom: 5px; }
.ndevr-chat .nchat-text-input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 9px;
  background: var(--nd-surface, #1b1e24); border: 1px solid var(--nd-border, #353b46); color: var(--nd-text, #e8eaed); font-size: 14.5px; font-family: inherit; outline: none;
}
.ndevr-chat .nchat-text-input:focus { border-color: var(--nd-accent-deep, #f2a900); box-shadow: 0 0 0 3px rgba(242,169,0,.15); }
.ndevr-chat .nchat-text-input::placeholder { color: var(--nd-muted, #9aa3b2); }
/* QUAIL assistant toggle (new-group + members sheet) — visually distinct from a member row */
.ndevr-chat .nchat-quail-toggle {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 12px; cursor: pointer;
  border: 1px solid rgba(242,169,0,.35); border-radius: 10px; background: rgba(242,169,0,.07);
}
.ndevr-chat .nchat-quail-toggle.is-static { cursor: default; }
.ndevr-chat .nchat-quail-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--nd-accent-deep, #f2a900); flex: 0 0 auto; }
.ndevr-chat .nchat-quail-toggle-av { width: 30px; height: 30px; flex: 0 0 auto; }
.ndevr-chat .nchat-quail-toggle-text { min-width: 0; }
.ndevr-chat .nchat-quail-toggle-name { font-size: 14px; font-weight: 600; color: var(--nd-text, #e8eaed); }
.ndevr-chat .nchat-quail-toggle-sub { font-size: 12px; color: var(--nd-muted, #9aa3b2); }
/* a retracted ("deleted for everyone") message */
.ndevr-chat .nchat-body.nchat-deleted { font-style: italic; opacity: .65; }

/* On desktop the message pane is always visible; the back arrow is hidden. */
.ndevr-chat .nchat-left { display: flex; }
.ndevr-chat .nchat-right { display: flex; }

/* ---- mobile: master-detail ---- */
@media (max-width: 700px) {
  .ndevr-chat .nchat-wrap { height: calc(100vh - 130px); min-height: 360px; border-radius: 10px; }
  .ndevr-chat .nchat-left { width: 100%; min-width: 0; border-right: 0; }
  /* default = list view: show list, hide conversation */
  .ndevr-chat .nchat-right { display: none; }
  .ndevr-chat.nchat-show-detail .nchat-left { display: none; }
  .ndevr-chat.nchat-show-detail .nchat-right { display: flex; }
  .ndevr-chat .nchat-back { display: inline-block; }
  /* In list view the open conversation stays in m.active (for send/typing), but mobile has no
     side-by-side detail to anchor the highlight to — so don't leave the row highlighted after Back. */
  .ndevr-chat:not(.nchat-show-detail) .nchat-conv.is-active { background: transparent; box-shadow: none; }
  .ndevr-chat .nchat-conv { padding: 15px 16px; }
  .ndevr-chat .nchat-msg { max-width: 86%; }
}

/* ---- attach button (composer paperclip) ---- */
.ndevr-chat .nchat-attach-btn {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; padding: 0;
  border: 1px solid var(--nd-border, #353b46); background: var(--nd-surface, #1b1e24); color: var(--nd-muted, #9aa3b2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s;
}
.ndevr-chat .nchat-attach-btn:hover { color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); border-color: var(--nd-accent-deep, #f2a900); }
.ndevr-chat .nchat-attach-btn svg { width: 20px; height: 20px; }

/* ---- attachment card (an OWL resource shared into the chat) ---- */
.ndevr-chat .nchat-msg.nchat-has-attach { padding: 6px; }
.ndevr-chat .nchat-attach {
  display: flex; align-items: center; gap: 10px; min-width: 210px; max-width: 320px;
  text-decoration: none; color: inherit; padding: 8px 10px; border-radius: 10px;
  background: rgba(0,0,0,.22); border: 1px solid var(--nd-tint-2, rgba(255,255,255,.10)); transition: border-color .12s;
}
.ndevr-chat .nchat-msg.is-mine .nchat-attach { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.20); }
.ndevr-chat .nchat-attach:hover { border-color: var(--nd-accent-deep, #f2a900); }
.ndevr-chat .nchat-attach-thumb {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--nd-tint-1, rgba(255,255,255,.08)); background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.ndevr-chat .nchat-msg.is-mine .nchat-attach-thumb { background-color: rgba(0,0,0,.12); }
.ndevr-chat .nchat-attach-emoji { font-size: 22px; line-height: 1; }
.ndevr-chat .nchat-attach-meta { flex: 1; min-width: 0; }
.ndevr-chat .nchat-attach-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndevr-chat .nchat-attach-sub { font-size: 11.5px; opacity: .72; margin-top: 2px; }
.ndevr-chat .nchat-attach-open { flex: 0 0 auto; opacity: .6; display: inline-flex; }
.ndevr-chat .nchat-attach-open svg { width: 18px; height: 18px; }
.ndevr-chat .nchat-attach:hover .nchat-attach-open { opacity: 1; color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); }

/* ---- inline media (decoded image/video embedded in the bubble) ---- */
/* While the bytes download + decrypt, dim the card and spin its thumb. */
.ndevr-chat .nchat-attach-loading { opacity: .7; pointer-events: none; }
.ndevr-chat .nchat-attach-loading .nchat-attach-thumb { position: relative; }
.ndevr-chat .nchat-attach-loading .nchat-attach-emoji,
.ndevr-chat .nchat-attach-loading .nchat-attach-play { visibility: hidden; }
.ndevr-chat .nchat-attach-loading .nchat-attach-thumb::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
  border-top-color: var(--nd-accent-deep, #f2a900); animation: nd-spin .7s linear infinite;
}
/* Video card: a play badge over the thumb marks it as a video (tap opens the menu → Open plays it). */
.ndevr-chat .nchat-attach-playable .nchat-attach-thumb { position: relative; }
.ndevr-chat .nchat-attach-play {
  position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.32); color: #fff;
}
.ndevr-chat .nchat-attach-play svg { width: 22px; height: 22px; }
/* The embedded image — sized to the bubble, capped so a tall image doesn't run off-screen. The bubble's
   own tap handler opens the message menu (whose "Open" enlarges it), so it shows the pointer cursor. */
.ndevr-chat .nchat-media { border-radius: 10px; overflow: hidden; line-height: 0; cursor: pointer; }
.ndevr-chat .nchat-media img {
  display: block; max-width: min(320px, 72vw); max-height: 360px; width: auto; height: auto;
}
/* Inline markdown images in a text bubble (e.g. `![alt](owl:RID)` from a Trello-imported comment). */
.ndevr-chat .nchat-body .nchat-img {
  display: block; max-width: min(320px, 72vw); max-height: 360px; width: auto; height: auto;
  border-radius: 8px; margin: 4px 0;
}
/* Placeholder box while an owl-image decrypts (no src yet) and a muted look if it can't be decoded. */
img.nchat-owl-img:not([src]) { min-width: 120px; min-height: 80px; background: rgba(127,127,127,.12); }
img.nchat-owl-img.nchat-img-broken { min-height: 0; opacity: .6; }

/* ---- attachment picker (the library grid reused inside the flyup sheet) ---- */
/* The flyup lives on <body> with class .ndevr-forms (not .ndevr-chat), so these are unscoped. */
.owl-flyup-content .owl-pick .owl-tile-acts { display: none; } /* hide hover actions when picking */
.owl-flyup-content .owl-pick .owl-tile { cursor: pointer; }
.owl-flyup-content .owl-pick-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 4px; }
.owl-flyup-content .owl-pick-list { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; }

/* ---- paste / drag-drop attachments ---- */
/* In-flight upload chips (one row per pasted/dropped file) sit in a tray just above the composer. */
.ndevr-chat .nchat-uploads { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 0; }
.ndevr-chat.nchat-no-active .nchat-uploads { display: none; }
.ndevr-chat .nchat-upload-chip {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--nd-border, #353b46); border-radius: 10px; background: var(--nd-surface-2, #23272f);
  font-size: 13px; color: var(--nd-text, #e8eaed);
}
.ndevr-chat .nchat-upload-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndevr-chat .nchat-upload-bar { flex: 0 0 90px; height: 5px; border-radius: 3px; background: var(--nd-tint-2, rgba(255,255,255,.10)); overflow: hidden; }
.ndevr-chat .nchat-upload-fill { height: 100%; width: 2%; border-radius: 3px; background: linear-gradient(90deg, var(--nd-accent-deep, #f2a900), var(--nd-accent-down, #c98a00)); transition: width .2s ease; }
.ndevr-chat .nchat-upload-chip.nchat-upload-error { border-color: var(--nd-err-line, #b4453b); color: var(--nd-err-fg, #f3b6b0); }
.ndevr-chat .nchat-upload-x { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.ndevr-chat .nchat-upload-thumb { flex: 0 0 auto; width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--nd-border, #353b46); }
.ndevr-chat .nchat-upload-chip.nchat-upload-ready { border-color: var(--nd-accent-deep, #f2a900); }

/* Drop-target highlight: a dashed-gold overlay over the message pane + a gold ring on the composer while
   files are dragged over the chat. The overlay anchors to the non-scrolling .nchat-right so it stays put. */
.ndevr-chat .nchat-right { position: relative; }
.ndevr-chat.nchat-dropping .nchat-right::after {
  content: "Drop files to share them here"; position: absolute; inset: 10px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--nd-accent-deep, #f2a900); border-radius: 14px; background: rgba(242,169,0,.10);
  color: var(--nd-accent-text, var(--nd-accent-deep, #f2a900)); font-weight: 600; font-size: 15px; pointer-events: none; z-index: 5;
}
.ndevr-chat.nchat-dropping .nchat-composer { box-shadow: inset 0 0 0 2px var(--nd-accent-deep, #f2a900); border-radius: 12px; }

/* ===== Embedded mode =========================================================================
   The same widget, hosted as a single-conversation panel inside another UI (e.g. a Kanban card's
   comments). No conversation list; a slim header; the message pane fills the host and scrolls
   internally. The host element must define a height (the card modal gives .nk-comments-host one). */
.ndevr-chat.nchat-embedded { display: flex; height: 100%; }
.ndevr-chat.nchat-embedded .nchat-wrap { height: 100%; min-height: 280px; border-radius: 10px; }
.ndevr-chat.nchat-embedded .nchat-right { flex: 1; display: flex; min-width: 0; }
.ndevr-chat.nchat-embedded .nchat-header-slim { padding: 8px 12px; gap: 8px; }
.ndevr-chat.nchat-embedded .nchat-header-slim .nchat-title { font-size: 14px; }
.ndevr-chat.nchat-embedded .nchat-messages { padding: 12px; }
.ndevr-chat.nchat-embedded .nchat-composer { padding: 10px; }
/* Keep the message pane visible on mobile — embedded has no list/back-slide, so the two-pane
   mobile rule (which hides .nchat-right until .nchat-show-detail) must not apply here. */
@media (max-width: 700px) {
  .ndevr-chat.nchat-embedded .nchat-right { display: flex; }
}
}