/* Live chat and messaging (module 22): the agent console, transcripts, chat panels and set-up screens. Prefix cm-. */

/* ---- console layout */
.cm-console { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cm-console > * { min-width: 0; }
.cm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cm-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; min-width: 0; }
.cm-panes-empty { grid-column: 1 / -1; }
.cm-avail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-me { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-hint { margin: 6px 0 0; }
.cm-flash { margin-bottom: 10px; grid-column: 1 / -1; }

/* ---- queue and my chats */
.cm-queue, .cm-mine, .cm-inbox { display: flex; flex-direction: column; }
.cm-inbox { gap: 6px; }
.cm-q { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line, #e3e8ee); min-width: 0; }
.cm-q:last-child { border-bottom: 0; }
.cm-q.offered { background: #fff8e6; }
.cm-q.late { box-shadow: inset 3px 0 0 #d6334b; }
.cm-q.bot { opacity: .85; }
.cm-q-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-q-main b, .cm-q-main .sub { overflow-wrap: anywhere; }
.cm-q-act { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.cm-last { font-style: italic; }
.cm-mi { display: flex; flex-direction: column; padding: 9px 12px; border-bottom: 1px solid var(--line, #e3e8ee); color: inherit; text-decoration: none; position: relative; }
.cm-mi:hover, .cm-mi.on { background: #f2f7fd; }
.cm-mi .ct-badge { position: absolute; right: 10px; top: 10px; }

/* ---- a chat pane */
.cm-pane { background: #fff; border: 1px solid var(--line, #dfe5ec); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; height: 640px; max-height: calc(100vh - 170px); overflow: hidden; }
.cm-pane-head { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--line, #e3e8ee); flex-wrap: wrap; }
.cm-pane-head b { font-size: 15px; }
.cm-pane-act { display: flex; gap: 4px; flex-wrap: wrap; }
.cm-visitor { padding: 6px 12px; border-bottom: 1px solid var(--line, #e3e8ee); font-size: 13px; }
.cm-visitor summary { cursor: pointer; font-weight: 600; }
.cm-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 8px 0; }
.cm-dl dt { color: #6b7785; }
.cm-dl dd { margin: 0; overflow-wrap: anywhere; }
.cm-vlinks { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 6px; }
.cm-list { flex: 1; overflow-y: auto; padding: 10px 12px; background: #f6f8fb; }
.cm-typing { min-height: 18px; padding: 0 12px; font-size: 12px; color: #6b7785; background: #f6f8fb; }
.cm-closed { padding: 10px 12px; border-top: 1px solid var(--line, #e3e8ee); }
.cm-tools:empty { display: none; }
.cm-tool { padding: 10px 12px; border-top: 1px solid var(--line, #e3e8ee); background: #fbfcfd; }
.cm-tool-row { display: flex; gap: 6px; }
.cm-compose { border-top: 1px solid var(--line, #e3e8ee); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cm-compose textarea { width: 100%; resize: vertical; min-height: 44px; border: 1px solid #cfd8e3; border-radius: 8px; padding: 8px; font: inherit; }
.cm-compose-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm-compose-row select { max-width: 150px; border: 1px solid #cfd8e3; border-radius: 6px; padding: 5px; }
.cm-compose-row .ct-btn { margin-left: auto; }
.cm-file-input { max-width: 160px; font-size: 12px; }
.cm-items label { font-size: 12px; font-weight: 600; }
.cm-items .hint { display: block; font-size: 12px; color: #6b7785; }

/* ---- messages (console, transcript, panels) */
.cm-transcript { display: flex; flex-direction: column; gap: 2px; }
.cm-transcript.cm-small { max-height: 320px; overflow-y: auto; }
.cm-msg { margin: 5px 0; max-width: 88%; display: flex; flex-direction: column; min-width: 0; }
.cm-msg.is-customer { align-self: flex-start; }
.cm-msg.is-agent { align-self: flex-end; margin-left: auto; align-items: flex-end; }
.cm-msg.is-bot { align-self: flex-start; }
.cm-meta { font-size: 11px; color: #6b7785; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cm-body { background: #fff; border: 1px solid #e1e7ee; border-radius: 10px; padding: 7px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-msg.is-agent .cm-body { background: #e8f2fd; border-color: #c8def6; }
.cm-msg.is-bot .cm-body { background: #f1effa; border-color: #ddd6f3; }
.cm-sys, .cm-msg.is-system { text-align: center; color: #6b7785; font-size: 12px; margin: 6px auto; max-width: 100%; align-self: center; }
.cm-msg.is-system .cm-body { background: transparent; border: 0; padding: 0; }
.cm-del { border-radius: 8px; padding: 0 6px; background: #eef2f6; }
.cm-del.sandbox { background: #fff3d6; color: #8a5a00; }
.cm-del.failed { background: #fde3e7; color: #a3182e; }
.cm-del.sent, .cm-del.mirrored { background: #e3f5ee; color: #0b6e4f; }
.cm-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.cm-chip { display: inline-block; border: 1px solid #b9cde4; color: #1d4f86; background: #fff; border-radius: 14px; padding: 2px 10px; font-size: 12px; }
.cm-chip.warn { border-color: #e7c36a; color: #8a5a00; background: #fff8e6; }
.cm-chip.ok { border-color: #9fd5c0; color: #0b6e4f; background: #ecf8f3; }
.cm-list-items, ul.cm-list { margin: 5px 0 0; padding-left: 16px; }
.cm-cards { display: flex; gap: 6px; overflow-x: auto; margin-top: 5px; max-width: 100%; }
.cm-card { flex: 0 0 150px; border: 1px solid #e1e7ee; border-radius: 8px; padding: 7px; background: #fff; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.cm-form { border: 1px dashed #b9cde4; border-radius: 8px; padding: 6px 9px; margin-top: 5px; font-size: 13px; background: #fff; }
.cm-form small { color: #6b7785; margin-right: 4px; }
.cm-file { margin-top: 4px; font-size: 13px; }
.cm-img { display: block; max-width: 220px; max-height: 180px; border-radius: 6px; margin-top: 4px; border: 1px solid #e1e7ee; }
.cm-bubble { display: inline-block; border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; max-width: 100%; }
.cm-bubble.bot { background: #f1effa; border: 1px solid #ddd6f3; }

/* ---- detail pages and panels */
.cm-tl .cm-note { margin-top: 3px; font-size: 13px; color: #44505c; }
.cm-statusline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cm-mini { margin: 4px 0 8px; padding-left: 16px; }
.cm-mini li { margin: 2px 0; overflow-wrap: anywhere; }
.cm-tp-form { margin-top: 8px; }
.cm-snippet { background: #0f1b2b; color: #e6eef8; border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 12px; margin: 0 0 8px; position: relative; }
.cm-code { background: #f2f5f8; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
.cm-menu { margin-top: 8px; }
.cm-saved { flex-wrap: wrap; gap: 6px; }
.cm-tick { width: 30px; }
.cm-bulkbar { margin-bottom: 8px; }
.cm-bad { color: #c0283f; }
.cm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-tabs a { position: relative; }
.cm-tabs .ct-badge { margin-left: 6px; }
.cm-kpis2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-inline { min-height: 300px; }

@media (max-width: 1100px) {
    .cm-console { grid-template-columns: minmax(0, 1fr); }
    .cm-pane { height: 560px; }
}
@media (max-width: 560px) {
    .cm-panes { grid-template-columns: minmax(0, 1fr); }
    .cm-msg { max-width: 100%; }
    .cm-compose-row select, .cm-file-input { max-width: 100%; flex: 1 1 100%; }
    .cm-q { flex-direction: column; }
    .cm-q-act { flex-direction: row; }
}
/* Dashboard panels and tables: references never wrap. */
.cm-ref{font:700 12px/1.2 Consolas,'Courier New',monospace;white-space:nowrap;background:#eff4f8;border:1px solid #d6e0e9;border-radius:3px;padding:2px 6px;display:inline-block}
.cm-inl{display:inline!important}
.cm-dbtbl td{vertical-align:middle}
.cm-refsm{font:700 11px Consolas,'Courier New',monospace;white-space:nowrap}
.cm-dbstats{padding:12px 14px;margin:0!important;border-bottom:1px solid #e0e7ed}
@media (max-width:640px){.cm-dbstats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cm-clip{display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-clip.w170{max-width:150px}.cm-clip.w190{max-width:170px}
.cm-counts{align-self:flex-start;max-width:100%}
/* Two panels side by side under a list (one column on phones). */
.cm-row2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px}
.cm-row2>*{min-width:0}
@media (max-width:900px){.cm-row2{grid-template-columns:minmax(0,1fr)}}
.cm-floor{display:grid;gap:14px;min-width:0}