/* Conversazione di un ticket: usata dalla dashboard e incorporata nelle trascrizioni HTML. */
.chat { --chat-bg: #1e1f24; --chat-text: #dbdee1; --chat-muted: #949ba4; --chat-line: #2e3036; --chat-accent: #c9a227;
  background: var(--chat-bg); color: var(--chat-text); font: 15px/1.45 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding: 12px 0; border-radius: 12px; overflow-wrap: anywhere; }
.chat .msg { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 2px 18px; }
.chat .msg:not(.grouped) { margin-top: 14px; }
.chat .msg:hover { background: rgba(255,255,255,.025); }
.chat .avatar { width: 40px; height: 40px; border-radius: 50%; grid-row: span 2; background: #2b2d31; }
.chat .msg.grouped .avatar { visibility: hidden; height: 0; }
.chat .meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.chat .author { font-weight: 600; color: #f2f3f5; }
.chat .author.staff { color: var(--chat-accent); }
.chat .role-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  background: #8b0000; color: #fff; }
.chat .role-badge.bot { background: #5865f2; }
.chat .meta time { font-size: 12px; color: var(--chat-muted); }
.chat .content { min-width: 0; }
.chat .tag { font-size: 11px; color: var(--chat-muted); margin-left: 4px; }
.chat .msg.deleted .content { opacity: .55; text-decoration: line-through; }
.chat .attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chat .att-img img { max-width: min(420px, 100%); max-height: 320px; border-radius: 8px; display: block; }
.chat .att-file { display: inline-flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 8px; background: #2b2d31;
  border: 1px solid var(--chat-line); color: #00a8fc; text-decoration: none; }
.chat .att-file small { color: var(--chat-muted); }
.chat .embed { margin-top: 6px; max-width: 520px; background: #2b2d31; border-left: 4px solid #8b0000; border-radius: 4px; padding: 10px 14px; }
.chat .embed-title { font-weight: 700; color: #f2f3f5; margin-bottom: 4px; }
.chat .embed-desc { font-size: 14px; }
.chat .embed-fields { display: grid; gap: 8px; margin-top: 8px; }
.chat .embed-field b { display: block; font-size: 13px; color: #f2f3f5; }
.chat .embed-field div { font-size: 14px; }
.chat .event { display: flex; align-items: center; gap: 10px; margin: 14px 18px 4px; font-size: 13px; color: var(--chat-muted); }
.chat .event::before, .chat .event::after { content: ''; flex: 1; border-top: 1px solid var(--chat-line); }
.chat .event span { text-align: center; max-width: 85%; }
.chat .event b { color: var(--chat-text); font-weight: 600; }
.chat .empty { padding: 24px; text-align: center; color: var(--chat-muted); }
.chat a { color: #00a8fc; }
.chat .md-code { background: #2b2d31; padding: 1px 4px; border-radius: 4px; font: 13px Consolas, monospace; }
.chat .md-pre { background: #2b2d31; border: 1px solid var(--chat-line); padding: 8px 10px; border-radius: 6px; overflow-x: auto;
  font: 13px Consolas, monospace; white-space: pre-wrap; margin: 4px 0; }
.chat .md-mention { background: rgba(88,101,242,.3); color: #c9cdfb; padding: 0 3px; border-radius: 4px; font-weight: 500; }
.chat .md-time { background: rgba(255,255,255,.06); padding: 0 3px; border-radius: 4px; }
.chat .md-emoji { width: 22px; height: 22px; vertical-align: -5px; }
.chat .md-spoiler { background: #1a1b1e; color: transparent; border-radius: 3px; cursor: pointer; }
.chat .md-spoiler:hover { color: inherit; background: rgba(255,255,255,.08); }
.chat .md-quote { display: block; border-left: 4px solid #4e5058; padding-left: 10px; }
.chat .md-sub { display: block; font-size: 12px; color: var(--chat-muted); }
.chat .md-h1, .chat .md-h2, .chat .md-h3 { display: block; font-weight: 700; color: #f2f3f5; margin: 4px 0; }
.chat .md-h1 { font-size: 1.4em; } .chat .md-h2 { font-size: 1.2em; } .chat .md-h3 { font-size: 1.05em; }
@media (max-width: 600px) {
  .chat .msg { grid-template-columns: 32px 1fr; column-gap: 10px; padding: 2px 10px; }
  .chat .avatar { width: 32px; height: 32px; }
}