/* BrandForge comment responder UI (merged from ReplyMate): everything the inbox, comment detail, queue,
   knowledge, rules and trainer views need beyond styles.css. Loaded after styles.css. */

/* Nav badge: escalated count on the Inbox tab */
nav.tabs a .pill { background: var(--red); color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 5px; font-weight: 600; }

/* Sub-navigation inside the inbox section */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.subnav .chip .pill { background: var(--red); color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 5px; font-weight: 600; }

/* Comment list */
.list-item { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; color: var(--text); cursor: pointer; }
.list-item:hover { border-color: var(--accent); }
.list-item .row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.list-item .who { font-weight: 600; }
.list-item .msg { color: var(--text); word-break: break-word; }
.list-item .meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Status badges (styles.css owns .badge, .badge.done/.doing/.blocked/.auto) */
.badge.page { color: var(--blue); border-color: rgba(47,129,247,.4); }
.badge.escalated { color: var(--amber); border-color: rgba(227,179,65,.45); }
.badge.replied { color: var(--green); border-color: rgba(63,185,80,.4); }
.badge.queued { color: var(--blue); border-color: rgba(47,129,247,.4); }
.badge.banned, .badge.hidden, .badge.deleted { color: var(--red); border-color: rgba(248,81,73,.4); }
.badge.new, .badge.processing, .badge.ignored, .badge.ours { color: var(--muted); }
.badge.img { color: #b083f0; border-color: rgba(176,131,240,.4); }
.badge.conf-hi { color: var(--green); border-color: rgba(63,185,80,.4); }
.badge.conf-lo { color: var(--amber); border-color: rgba(227,179,65,.4); }

/* Comment detail */
.quote { border-left: 3px solid var(--line); padding: 8px 12px; margin: 8px 0; background: var(--bg); border-radius: 0 8px 8px 0; color: var(--muted); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.quote.hot { border-left-color: var(--blue); color: var(--text); font-size: 15px; }
.aibox { border: 1px dashed rgba(47,129,247,.5); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.aibox .t { color: var(--blue); font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
img.attach { max-width: 100%; max-height: 340px; border-radius: 8px; margin: 8px 0; border: 1px solid var(--line); }
.fbgo { color: var(--blue); text-decoration: underline; cursor: pointer; margin-left: auto; white-space: nowrap; }

/* Trainer chat (styles.css owns .chatlog, .bub, .bub.user, .bub.bot, .bub.pending) */
.bub .vmeta { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: normal; }
.bub.user .vmeta { color: rgba(255,255,255,.75); }
.bub.errb { background: #3d1b1b; border: 1px solid #7a2e2e; }
.bub.pending { animation: bubpulse 1.6s ease-in-out infinite; }
@keyframes bubpulse { 0%, 100% { opacity: .65; } 50% { opacity: .4; } }

/* Page settings cards inside the Comments tab / Settings */
.pagebox { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.pagebox textarea { min-height: 56px; }

/* Checkbox labels */
label.tick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-right: 12px; cursor: pointer; }
label.tick input { width: auto; margin: 0; }

/* Misc */
.spacer { height: 8px; }
.center { text-align: center; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 14px 0; }