/* ============================================================================
   CHAT SUPPORT — Suport Clienți (consolă operatori)
   Integrat în light-theme-ul platformei AiMindloop (vezi css/light-theme.css).
   Toate clasele sunt prefixate cs- (vezi BADGE GUIDELINES din light-theme.css).

   Autor: AI MINDLOOP SRL
   ============================================================================ */

/* ─── Topbar: taburi + prezență ──────────────────────────────────────────── */

.cs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    /* Chenar de „toolbar": bara de taburi + prezența citesc ca o zonă distinctă */
    padding: 10px 12px;
    background: var(--gray-50);
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-sm);
}

.cs-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cs-tab {
    padding: 8px 16px;
    min-height: 40px;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-600);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.cs-tab:hover {
    background: var(--tk-teal-50, #ecfeff);
    color: var(--tk-teal-700, #0e7490);
}
.cs-tab.active {
    background: var(--tk-teal-600, #0891b2);
    color: #fff;
    border-color: var(--tk-teal-600, #0891b2);
    /* tabul activ „iese în față" față de bara gri a toolbar-ului */
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.35);
}

.cs-presence {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    color: var(--gray-700);
}
.cs-presence-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-400);
    flex-shrink: 0;
}
.cs-presence-dot.online { background: var(--success); }
.cs-presence-dot.away { background: var(--warning); }
.cs-presence select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    outline: none;
}

/* Pastila cu numărul de tichete necitite pe tabul „Tichete". */
.cs-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}
.cs-tab.active .cs-tab-badge {
    background: #fff;
    color: var(--tk-teal-700, #0e7490);
}

/* Pastila din meniul lateral „Suport Clienți" (best-effort). */
.cs-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* Comutatoare mici pentru sunet / notificări desktop, lângă prezență. */
.cs-cue-toggles {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cs-cue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.cs-cue-btn:hover {
    background: var(--tk-teal-50, #ecfeff);
    border-color: var(--tk-teal-300, #67e8f9);
}
.cs-cue-btn[aria-pressed="true"] {
    background: var(--tk-teal-50, #ecfeff);
    border-color: var(--tk-teal-600, #0891b2);
    box-shadow: inset 0 0 0 1px var(--tk-teal-600, #0891b2);
}
.cs-cue-btn:focus-visible {
    outline: 2px solid var(--tk-teal-600, #0891b2);
    outline-offset: 2px;
}

/* ─── Layout inbox: listă + conversație ──────────────────────────────────── */

.cs-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 16px;
    align-items: start;
}

.cs-list-panel,
.cs-conv-panel {
    background: #fff;
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: calc(100vh - 220px);
    overflow: hidden;
}

/* ─── Detaliu tichet: layout 3 coloane (centru conversație + sidebar dreapta) ─
   Clasă NOUĂ pusă pe #csConvPanel DOAR când un tichet e deschis (renderConversation).
   NU modifică .cs-layout global (folosit de inbox). */
.cs-conv-panel.cs-conv-split {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px);
    /* OBLIGATORIU: fără rând explicit, rândul implicit e "auto" = max-content, deci
       firul de discuție se randa la înălțimea lui totală și era tăiat de
       overflow:hidden de pe panou (fără bară de scroll, deci restul discuției era
       invizibil). minmax(0, 1fr) leagă rândul de înălțimea panoului →
       .cs-conv-body redevine zona de scroll. */
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}
/* Header-ul e flex-shrink:0 și creștea necontrolat: panourile „Context client",
   „Istoric client" și „Acțiuni" se încarcă async DUPĂ randare și împingeau firul
   afară. Plafonăm DOAR zona auxiliară, nu tot header-ul — titlul, badge-urile și
   cardul clientului (cu butonul „Sună" și link-ul de lead) rămân mereu vizibile,
   indiferent de înălțimea ecranului. */
.cs-conv-split .cs-conv-aux {
    /* ATENȚIE: aici NU merge procentaj. Părintele (.cs-conv-header) n-are înălțime
       definită, deci un % s-ar rezolva circular: browserul calculează întâi
       header-ul din conținutul NEplafonat, apoi plafonează copilul — header-ul
       rămâne mare (măsurat: 620px, cu firul redus la 28px). vh e o referință
       absolută. 20vh = 180px pe 900px înălțime; firul rămâne la ~316px. */
    max-height: 20vh;
    overflow-y: auto;
}
.cs-conv-split .cs-conv-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.cs-conv-split .cs-conv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    border-left: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Paneluri sidebar (Acțiuni rapide / AI / SLA) — același limbaj vizual ca restul */
.cs-side-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-side-hidden { display: none; }
.cs-side-title {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--gray-700);
}
.cs-side-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cs-side-field-col {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.cs-side-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-400);
    flex-shrink: 0;
}
.cs-side-field .cs-select { flex: 1 1 auto; min-width: 0; max-width: 190px; }
.cs-side-field-col .cs-select { max-width: none; }
.cs-side-value { text-align: right; }
.cs-side-muted { color: var(--gray-400); }
.cs-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.cs-side-actions .cs-btn { flex: 1 1 auto; }
.cs-conv-split .cs-tags-row { margin: 0; }

/* Acțiuni AI (listă de butoane pline pe lățime) + panoul de rezultat */
.cs-ai-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-ai-action {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 12px;
    min-height: 36px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cs-ai-action:hover { background: var(--gray-50); border-color: var(--tk-teal-600, #0891b2); }
.cs-ai-action:disabled { opacity: 0.6; cursor: default; }
.cs-ai-suggest {
    background: var(--tk-teal-50, #ecfeff);
    border-color: var(--tk-teal-200, #a5f3fc);
    color: var(--tk-teal-800, #155e75);
    font-weight: 600;
}
.cs-ai-result {
    margin-top: 4px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 10px;
    font-size: 12.5px;
}
.cs-ai-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--gray-700);
}
.cs-ai-result-tools { display: flex; gap: 4px; flex-shrink: 0; }
.cs-ai-result-body {
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--gray-800);
    line-height: 1.5;
    max-height: 240px;
    overflow-y: auto;
}

/* Istoric SLA */
.cs-sla-thr {
    font-size: 11px;
    color: var(--gray-400);
}
.cs-sla-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--gray-700);
}
.cs-sla-lbl { font-weight: 600; }
.cs-sla-row .cs-history-when { margin-left: auto; }
.cs-sla-over {
    color: var(--tk-red-700, #b91c1c);
    font-weight: 700;
}
.cs-sla-info { font-size: 12px; color: var(--gray-600); }
.cs-sla-ok { font-size: 12.5px; color: var(--tk-green-700, #15803d); font-weight: 600; }

/* ─── Filtre ─────────────────────────────────────────────────────────────── */

.cs-filters {
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-input,
.cs-select,
.cs-textarea {
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm, 8px);
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--gray-800);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
    border-color: var(--tk-teal-600, #0891b2);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.cs-filters .cs-select { flex: 1 1 30%; min-width: 0; }
.cs-filters .cs-input { flex: 1 1 100%; }

/* ─── Butoane ────────────────────────────────────────────────────────────── */

.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 14px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}
.cs-btn:hover { background: var(--gray-100); }
.cs-btn:active { transform: scale(0.98); }
.cs-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.cs-btn-primary {
    background: var(--tk-teal-600, #0891b2);
    border-color: var(--tk-teal-600, #0891b2);
    color: #fff;
}
.cs-btn-primary:hover { background: var(--tk-teal-700, #0e7490); }

.cs-btn-success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.cs-btn-success:hover { filter: brightness(0.95); background: var(--success); }

.cs-btn-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}
.cs-btn-warning:hover { filter: brightness(0.95); background: var(--warning); }
.cs-btn-danger {
    background: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
    color: #fff;
}
.cs-btn-danger:hover { filter: brightness(0.95); background: var(--danger, #dc2626); }

.cs-btn-sm { padding: 4px 10px; min-height: 32px; font-size: 12px; }

/* ─── Lista de tichete ───────────────────────────────────────────────────── */

.cs-ticket-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    /* fundal discret ca rândurile-card (albe) să se detașeze clar */
    background: var(--gray-50);
}

.cs-ticket-card {
    padding: 10px 12px;
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius-sm, 8px);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    background: #fff;
}
.cs-ticket-card:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.cs-ticket-card.active {
    background: var(--tk-teal-50, #ecfeff);
    border-color: var(--tk-teal-600, #0891b2);
    /* conversația selectată: chenar teal gros (border 2px + inel 2px) + umbră */
    box-shadow: inset 0 0 0 2px var(--tk-teal-600, #0891b2), var(--shadow-sm);
}
.cs-ticket-card.unread {
    border-left: 5px solid var(--tk-teal-600, #0891b2);
    background: var(--tk-teal-50, #ecfeff);
    box-shadow: inset 0 0 0 1px var(--tk-teal-100, #cffafe);
}

/* Punct de „mesaj nou necitit" în dreptul subiectului. */
.cs-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tk-teal-600, #0891b2);
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 0 0 3px var(--tk-teal-50, #ecfeff);
    animation: cs-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes cs-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Flash scurt când un rând trece NOU în starea „necitit" (seen→unread). */
.cs-ticket-card.cs-new-unread { animation: cs-unread-flash 1.4s ease-out 1; }
@keyframes cs-unread-flash {
    0%   { background: var(--tk-teal-200, #a5f3fc); box-shadow: 0 0 0 3px var(--tk-teal-200, #a5f3fc); }
    30%  { background: var(--tk-teal-100, #cffafe); }
    100% { background: var(--tk-teal-50, #ecfeff); box-shadow: inset 0 0 0 1px var(--tk-teal-100, #cffafe); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-unread-dot { animation: none; }
    .cs-ticket-card.cs-new-unread { animation: none; }
}

.cs-ticket-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.cs-ticket-subject {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.cs-ticket-card.unread .cs-ticket-subject { color: var(--tk-teal-700, #0e7490); }
.cs-ticket-time {
    font-size: 11px;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.cs-ticket-preview {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* ─── Badge-uri status / prioritate / sursă / rating ─────────────────────── */

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
/* „Nou" e teal — aceeași semantică vizuală ca tk-st-pending din modulul Task-uri */
.cs-st-new     { background: var(--tk-teal-50, #ecfeff); color: var(--tk-teal-700, #0e7490); }
.cs-st-open    { background: var(--success-bg, #d1fae5); color: #047857; }
.cs-st-pending { background: var(--warning-bg, #fef3c7); color: #b45309; }
.cs-st-solved  { background: var(--gray-100); color: var(--gray-600); }
.cs-st-closed  { background: var(--gray-200); color: var(--gray-500); }

.cs-pr-low    { background: var(--gray-100); color: var(--gray-500); }
.cs-pr-normal { background: var(--gray-100); color: var(--gray-600); }
.cs-pr-high   { background: var(--warning-bg, #fef3c7); color: #b45309; }
.cs-pr-urgent { background: var(--error-bg, #fee2e2); color: #b91c1c; }

.cs-src { background: var(--gray-50); color: var(--gray-500); border: 1px solid var(--gray-200); }

.cs-assignee { background: var(--primary-50); color: var(--primary-700); }
.cs-assignee-ai { background: #f3e8ff; color: #7e22ce; }

.cs-rating-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.cs-rating-stars .cs-star-off { color: var(--gray-300); }

.cs-reopen-badge { background: var(--error-bg, #fee2e2); color: #b91c1c; }

/* ─── Paginare ───────────────────────────────────────────────────────────── */

.cs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 12px;
    color: var(--gray-500);
}

/* ─── Panoul de conversație ──────────────────────────────────────────────── */

.cs-conv-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.cs-conv-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-conv-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800);
    flex: 1;
    min-width: 0;
    margin: 0;
}
/* Toolbar coerent: stânga status+asignare, dreapta acțiuni; înălțimi egale */
.cs-conv-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
}
.cs-conv-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-conv-actions .cs-select {
    min-height: 38px;
    padding: 7px 10px;
}
.cs-back-btn { display: none; }

/* ─── Card client ────────────────────────────────────────────────────────── */

.cs-client-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--gray-600);
}

/* Blocul client: metadata + etichete integrate în aceeași casetă
   (rândul „+ etichetă" nu mai plutește singur sub card) */
.cs-client-block {
    background: var(--gray-50);
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 12px;
}
.cs-client-block .cs-client-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.cs-client-block .cs-tags-row { margin-top: 8px; }
.cs-client-block .cs-tags-row:empty { display: none; margin: 0; }
.cs-client-card strong { color: var(--gray-800); }
.cs-client-card a {
    color: var(--tk-teal-700, #0e7490);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cs-client-card a:hover { text-decoration: underline; }

/* ─── Mesaje ─────────────────────────────────────────────────────────────── */

.cs-conv-body {
    flex: 1;
    /* fără asta, elementul flex nu se poate micșora sub înălțimea conținutului
       și scroll-ul nu se activează */
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* zona de mesaje citește ca un panou „adâncit" între header și composer */
    box-shadow: inset 0 7px 9px -9px rgba(17, 24, 39, 0.18),
                inset 0 -7px 9px -9px rgba(17, 24, 39, 0.18);
}

.cs-msg {
    /* plafon de lizibilitate: pe panouri late (~1200px) bula nu se mai
       întinde pe toată lățimea — max ~720px (~70 caractere pe rând) */
    max-width: min(78%, 720px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-msg-bubble {
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cs-msg-meta {
    font-size: 11px;
    color: var(--gray-400);
    padding: 0 4px;
}

.cs-msg.visitor { align-self: flex-start; }
.cs-msg.visitor .cs-msg-bubble {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-bottom-left-radius: 4px;
    color: var(--gray-800);
}

.cs-msg.operator { align-self: flex-end; }
.cs-msg.operator .cs-msg-meta { text-align: right; }
.cs-msg.operator .cs-msg-bubble {
    background: var(--tk-teal-600, #0891b2);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cs-msg.ai { align-self: flex-end; }
.cs-msg.ai .cs-msg-meta { text-align: right; }
.cs-msg.ai .cs-msg-bubble {
    background: #f3e8ff;
    border: 1px solid #e9d5ff;
    color: #581c87;
    border-bottom-right-radius: 4px;
}

.cs-msg.system {
    align-self: center;
    max-width: 92%;
}
.cs-msg.system .cs-msg-bubble {
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 12px;
    text-align: center;
    padding: 2px 8px;
}

/* ─── Notă internă (vizibilă doar operatorilor) ──────────────────────────── */

.cs-msg.note {
    align-self: flex-end;
    max-width: 86%;
}
.cs-msg.note .cs-msg-meta { text-align: right; color: #b45309; }
.cs-msg.note .cs-msg-bubble {
    background: var(--warning-bg, #fef3c7);
    border: 1px dashed var(--warning, #f59e0b);
    color: #78350f;
    border-bottom-right-radius: 4px;
}

/* ─── Ștergere mesaj / notă (migrarea 388) ───────────────────────────────── */

/* Butonul „Șterge" apare la hover/focus pe mesajele care pot fi șterse;
   pe ecrane tactile (fără hover) rămâne vizibil, discret. */
.cs-msg-del {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    margin: 0;
    font-size: 11px;
    color: var(--gray-400);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.cs-msg:hover .cs-msg-del,
.cs-msg-del:focus-visible { opacity: 1; }
.cs-msg-del:hover { color: var(--danger, #dc2626); text-decoration: underline; }
@media (hover: none) { .cs-msg-del { opacity: .8; } }
/* „👁 Vezi original" (doar manageri) rămâne vizibil pe mesajul șters */
.cs-msg-del.cs-msg-orig { opacity: .85; }
.cs-msg-del.cs-msg-orig:hover { color: var(--tk-teal-600, #0891b2); }

.cs-msg.cs-msg-deleted .cs-msg-bubble,
.cs-msg.note.cs-msg-deleted .cs-msg-bubble {
    background: transparent;
    border: 1px dashed var(--gray-300, #d1d5db);
    color: var(--gray-500, #6b7280);
    font-style: italic;
    font-size: 12.5px;
}

/* ─── Rezumat AI la escaladare ───────────────────────────────────────────── */

/* Avertisment: firul e trunchiat de plafonul serverului (nu e o discuție scurtă). */
.cs-trunc-note {
    align-self: center;
    max-width: 100%;
    background: var(--gray-100, #f3f4f6);
    border: 1px dashed var(--gray-300, #d1d5db);
    border-radius: var(--border-radius-sm, 8px);
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--gray-600, #4b5563);
    text-align: center;
}

.cs-escalation-card {
    background: #f3e8ff;
    border: 1px solid #e9d5ff;
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px 12px;
    font-size: 13px;
    color: #581c87;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-escalation-title {
    font-weight: 700;
    font-size: 12.5px;
}

/* ─── Formular răspuns ───────────────────────────────────────────────────── */

/* Composer integrat: textarea sus + toolbar jos, în același chenar */
.cs-reply {
    position: relative;
    padding: 10px 12px;
    border-top: 1px solid var(--gray-200);
    background: #fff;
    flex-shrink: 0;
}
.cs-composer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cs-composer:focus-within {
    border-color: var(--tk-teal-600, #0891b2);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.cs-reply .cs-textarea {
    border: none;
    border-radius: 0;
    box-shadow: none;
    resize: none;
    width: 100%;
    padding: 10px 12px;
    max-height: 150px; /* ~6 rânduri, sincron cu auto-resize-ul din JS */
    overflow-y: auto;
    line-height: 1.4;
}
.cs-reply .cs-textarea:focus {
    border: none;
    box-shadow: none;
}
.cs-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.cs-reply-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.cs-send-btn {
    flex-shrink: 0;
    padding: 8px 20px;
    margin-left: auto;
}
.cs-note-toggle {
    font-size: 11.5px;
    color: var(--gray-500);
    white-space: nowrap;
}
.cs-note-toggle input { width: 13px; height: 13px; }

/* Hint + selector „tasta de trimitere" sub compozitor */
.cs-sendkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 2px 0;
    font-size: 11.5px;
    color: var(--gray-500);
}
.cs-sendkey-hint { min-width: 0; }
.cs-sendkey-select {
    font-size: 11.5px;
    padding: 2px 4px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-600);
    max-width: 100%;
}

/* ─── Popup răspunsuri predefinite ───────────────────────────────────────── */

.cs-canned-pop {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
    padding: 6px;
}
.cs-canned-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.cs-canned-item:hover { background: var(--tk-teal-50, #ecfeff); }
.cs-canned-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray-800);
}
.cs-canned-preview {
    font-size: 11.5px;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-canned-empty {
    padding: 12px;
    font-size: 12.5px;
    color: var(--gray-400);
    text-align: center;
}
.cs-canned-admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    margin-bottom: 6px;
    background: var(--gray-50);
}

/* ─── Stare goală / notă ─────────────────────────────────────────────────── */

.cs-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gray-500);
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    padding: 30px;
    margin: 8px;
    border: 1px dashed var(--gray-300);
    border-radius: var(--border-radius, 12px);
    background: #fff;
}
.cs-empty-icon { font-size: 38px; opacity: 0.65; }

.cs-error-note {
    color: var(--error);
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

/* ─── Rapoarte ───────────────────────────────────────────────────────────── */

.cs-report-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    margin-bottom: 16px;
}
.cs-report-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-800);
}

.cs-period-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
/* varianta „card": bara principală de perioadă din Rapoarte, pe un rând compact */
.cs-period-bar.cs-period-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
}
.cs-period-bar label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-500);
}
.cs-quick-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cs-quick { border-radius: 999px; }
.cs-quick.active {
    background: var(--tk-teal-600, #0891b2);
    border-color: var(--tk-teal-600, #0891b2);
    color: #fff;
}
.cs-quick.active:hover { background: var(--tk-teal-700, #0e7490); }

/* Grupuri de KPI: „Volum" / „Timpi" / „Calitate" */
.cs-stats-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-stats-group-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-500);
    margin-bottom: 6px;
}
.cs-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.cs-stat-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px 12px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cs-stat-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.cs-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.cs-stat-ico {
    font-size: 14px;
    line-height: 1;
    opacity: 0.8;
    flex-shrink: 0;
}
.cs-stat-sub {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 600;
}
.cs-stat-label {
    font-size: 11.5px;
    color: var(--gray-500);
    margin-top: 2px;
}
/* KPI fără date: discret, nu un dash mare care pare bug */
.cs-stat-empty { opacity: 0.75; }
.cs-stat-nodata {
    font-size: 11.5px;
    font-weight: 500;
    font-style: italic;
    color: var(--gray-400);
}

.cs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--gray-200);
    /* umbre de indicare a scroll-ului orizontal (pure CSS, background-attachment) */
    background:
        linear-gradient(90deg, #fff 40%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
        linear-gradient(270deg, #fff 40%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
        linear-gradient(90deg, rgba(17,24,39,0.10), rgba(17,24,39,0)) left / 12px 100% no-repeat scroll,
        linear-gradient(270deg, rgba(17,24,39,0.10), rgba(17,24,39,0)) right / 12px 100% no-repeat scroll,
        #fff;
}
.cs-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent; /* lasă umbrele de scroll să se vadă */
    font-size: 13px;
}
.cs-table th {
    padding: 9px 10px;
    text-align: left;
    font-size: 12px;
    color: var(--gray-600);
    text-transform: none;
    font-weight: 700;
    border-bottom: 2px solid var(--gray-200);
    background: transparent;
    white-space: nowrap;
}
.cs-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    white-space: nowrap;
}
.cs-table tbody tr { transition: background var(--transition-fast); }
.cs-table tbody tr:hover td { background: var(--tk-teal-50, #ecfeff); }
.cs-table tr:last-child td { border-bottom: none; }
.cs-table .cs-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Setări ─────────────────────────────────────────────────────────────── */

.cs-settings-form {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-form-row > label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-600);
}
.cs-form-hint {
    font-size: 11.5px;
    color: var(--gray-400);
}
.cs-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--gray-700);
    cursor: pointer;
}
.cs-check input { width: 16px; height: 16px; cursor: pointer; }

/* ─── Modal tichet manual ────────────────────────────────────────────────── */

.cs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cs-modal {
    background: #fff;
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
}
.cs-modal h3 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
}
.cs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .cs-layout { display: block; }
    .cs-list-panel { max-height: none; margin-bottom: 16px; }
    .cs-conv-panel { max-height: none; min-height: 70vh; }
    /* când o conversație e deschisă pe mobil, ascundem lista */
    .cs-layout.conv-open .cs-list-panel { display: none; }
    .cs-layout:not(.conv-open) .cs-conv-panel { display: none; }
    .cs-back-btn { display: inline-flex; }
    .cs-msg { max-width: 90%; }
    .cs-stats-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

    /* Detaliu tichet pe mobil: sidebarul curge SUB conversație (o coloană) */
    .cs-conv-panel.cs-conv-split { display: flex; flex-direction: column; }
    .cs-conv-split .cs-conv-aux { max-height: none; overflow-y: visible; }
    .cs-conv-split .cs-conv-main { flex: 1 1 auto; min-height: 58vh; overflow: hidden; }
    .cs-conv-split .cs-conv-sidebar {
        border-left: none;
        border-top: 1px solid var(--gray-200);
        overflow-y: visible;
    }
    .cs-side-field .cs-select { max-width: none; }
}

/* ============================================================================
   VAL 2 — Conectori API (panoul „Acțiuni” + administrare), chei widget,
   consum & facturare. Același limbaj vizual ca restul consolei (prefix cs-).
   ============================================================================ */

/* ─── Panoul „🔌 Acțiuni” din conversație ────────────────────────────────── */

/* Panou colapsabil (<details>) — discret când e închis */
.cs-conn-panel {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 0;
}
.cs-conn-panel > .cs-conn-chips,
.cs-conn-panel > .cs-conn-form {
    margin: 0 12px 10px;
}
.cs-conn-panel > .cs-conn-chips + .cs-conn-form { margin-top: 8px; }
.cs-conn-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
summary.cs-conn-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color var(--transition-fast);
}
summary.cs-conn-title::-webkit-details-marker { display: none; }
summary.cs-conn-title:hover { color: var(--tk-teal-700, #0e7490); }
summary.cs-conn-title:focus-visible {
    outline: 2px solid var(--tk-teal-600, #0891b2);
    outline-offset: -2px;
    border-radius: var(--border-radius-sm, 8px);
}
.cs-conn-caret {
    font-size: 10px;
    transition: transform var(--transition-fast);
}
.cs-conn-panel[open] .cs-conn-caret { transform: rotate(90deg); }
.cs-conn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-conn-chip {
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.cs-conn-chip:hover { background: var(--tk-teal-50, #ecfeff); color: var(--tk-teal-700, #0e7490); }
.cs-conn-chip.active {
    background: var(--tk-teal-600, #0891b2);
    border-color: var(--tk-teal-600, #0891b2);
    color: #fff;
}

.cs-conn-form {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-conn-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Rezultat conector: key-value + JSON brut ───────────────────────────── */

.cs-kv {
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    overflow: hidden;
    background: #fff;
}
.cs-kv-row {
    display: flex;
    border-bottom: 1px solid var(--gray-100);
    font-size: 12.5px;
}
.cs-kv-row:last-child { border-bottom: none; }
.cs-kv-key {
    flex: 0 0 40%;
    max-width: 220px;
    padding: 6px 10px;
    background: var(--gray-50);
    color: var(--gray-500);
    font-weight: 600;
    word-break: break-word;
}
.cs-kv-val {
    flex: 1;
    padding: 6px 10px;
    color: var(--gray-800);
    word-break: break-word;
}

.cs-conn-pre {
    margin: 0;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── Administrare conectori (Setări): caseta de test sub rând ───────────── */

.cs-conn-test-box {
    border: 1px dashed var(--gray-300);
    border-radius: var(--border-radius-sm, 8px);
    padding: 10px 12px;
    margin: -2px 0 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── Cod inline (chei publice, secrete) + caseta „secret o singură dată” ── */

.cs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    background: var(--gray-100);
    border-radius: 4px;
    padding: 1px 6px;
    word-break: break-all;
}

.cs-secret-box {
    background: var(--warning-bg, #fef3c7);
    border: 1px solid var(--warning, #f59e0b);
    border-radius: var(--border-radius-sm, 8px);
    padding: 12px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #78350f;
}
.cs-secret-title { font-weight: 700; }
.cs-secret-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-secret-row .cs-code { background: #fff; }

/* ─── Consum & facturare ─────────────────────────────────────────────────── */

.cs-billing-total {
    background: var(--tk-teal-50, #ecfeff);
    border-color: var(--tk-teal-100, #cffafe);
}
.cs-billing-total .cs-stat-value { color: var(--tk-teal-700, #0e7490); }

/* ═══ VAL 3: tag-uri, SLA, WhatsApp, istoric client, program de lucru ═════ */

/* ─── Badge-uri noi ──────────────────────────────────────────────────────── */

.cs-sla-badge {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-weight: 700;
}
.cs-wa-badge {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ─── Val 2: coada după așteptare, fragment de căutare, prioritate editabilă ─ */

/* „⏳ așteaptă de X” — culoarea față de pragul SLA de răspuns */
.cs-wait { font-weight: 600; }
.cs-wait-neutral { background: var(--gray-100, #f3f4f6); color: var(--gray-700, #374151); border: 1px solid var(--gray-200, #e5e7eb); }
.cs-wait-ok { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.cs-wait-warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.cs-wait-late { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; font-weight: 700; }

/* fragmentul din mesaje care a potrivit căutarea */
.cs-ticket-match {
    font-size: 12px;
    color: var(--gray-600, #4b5563);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}
.cs-ticket-match mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; font-style: normal; }

/* selectul de prioritate din bara laterală — marginea stângă = culoarea priorității */
.cs-pr-select { border-left-width: 4px; }
.cs-pr-sel-low { border-left-color: var(--gray-300, #d1d5db); }
.cs-pr-sel-normal { border-left-color: var(--tk-teal-600, #0891b2); }
.cs-pr-sel-high { border-left-color: #f59e0b; }
.cs-pr-sel-urgent { border-left-color: #dc2626; }

/* ─── Tag-uri: chips + editor ────────────────────────────────────────────── */

.cs-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-tags-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.cs-tags-row:empty { display: none; margin: 0; }
.cs-tag-edit { padding-right: 4px; }
.cs-tag-x {
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.cs-tag-x:hover { color: var(--danger, #dc2626); }
.cs-tag-add { display: inline-flex; }
.cs-tag-input {
    height: 24px;
    font-size: 11.5px;
    padding: 2px 8px;
    width: 110px;
    border-radius: 999px;
}

/* ─── ✨ Sugerează răspuns ───────────────────────────────────────────────── */

.cs-suggest-btn {
    background: #f3e8ff;
    border-color: #e9d5ff;
    color: #6b21a8;
    white-space: nowrap;
}
.cs-suggest-btn:hover:not(:disabled) { background: #ede0fe; }

/* ─── Linii de evenimente în cronologie (transfer, SLA, auto-close, taguri) */

.cs-event-line .cs-msg-bubble { font-style: italic; }
.cs-ev-sla_breach .cs-msg-bubble { color: #b91c1c; font-weight: 600; font-style: normal; }
.cs-ev-transferred .cs-msg-bubble { color: var(--gray-600); }

/* ─── 📋 Istoric client ──────────────────────────────────────────────────── */

.cs-history-panel {
    margin-top: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    max-height: 220px;
    overflow-y: auto;
}
.cs-history-title {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--gray-700);
}
.cs-history-sub {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-400);
}
.cs-history-line { color: var(--gray-600); }
.cs-history-link {
    color: var(--tk-teal-700, #0e7490);
    cursor: pointer;
    text-decoration: underline;
}
.cs-history-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--gray-700);
    cursor: pointer;
    min-width: 0;
}
a.cs-history-item:hover { background: var(--gray-100); }
.cs-history-order { cursor: default; }
.cs-history-subj {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-history-total { font-weight: 600; white-space: nowrap; }
.cs-history-when {
    color: var(--gray-400);
    font-size: 11px;
    white-space: nowrap;
}

/* ─── Setări: subtitluri + editor program de lucru ───────────────────────── */

.cs-settings-subtitle {
    margin: 14px 0 2px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    font-size: 13.5px;
    color: var(--gray-800);
}
.cs-bh-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
}
.cs-bh-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-bh-day {
    width: 72px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-600);
}
.cs-bh-input { flex: 1; font-size: 12.5px; }

/* ═══ REDESIGN 2026-07 — limbaj vizual unificat cu modulul Task-uri ════════
   (scala --tk-teal-* e definită pe :root în css/tasks-modern.css; toate
   folosirile de aici au fallback hex, deci consola merge și fără acel fișier) */

/* ─── Focus vizibil pe elementele interactive (accesibilitate tastatură) ─── */

.cs-btn:focus-visible,
.cs-tab:focus-visible,
.cs-conn-chip:focus-visible,
.cs-tag-x:focus-visible,
.cs-suggest-btn:focus-visible {
    outline: 2px solid var(--tk-teal-600, #0891b2);
    outline-offset: 2px;
}
.cs-check input[type="checkbox"] { accent-color: var(--tk-teal-600, #0891b2); }

/* ─── Toggle „📌 Notă" ca chip cu stare activă (progresiv, via :has) ──────── */

.cs-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    min-height: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}
.cs-note-toggle:hover { border-color: var(--gray-300); }
.cs-note-toggle:has(input:checked) {
    background: var(--warning-bg, #fef3c7);
    border-color: var(--warning, #f59e0b);
    color: #92400e;
}
.cs-note-toggle input { accent-color: var(--warning, #f59e0b); }

/* ─── Skeleton shimmer: listă tichete + conversație ──────────────────────── */

.cs-skel-card {
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    margin-bottom: 8px;
    background: #fff;
}
.cs-skel-line {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg,
        var(--gray-100, #f3f4f6) 25%,
        var(--gray-200, #e5e7eb) 50%,
        var(--gray-100, #f3f4f6) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer 1.4s ease infinite;
    margin-bottom: 8px;
}
.cs-skel-line:last-child { margin-bottom: 0; }
.cs-skel-chip { width: 120px; height: 16px; border-radius: 999px; }

.cs-skel-conv {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}
.cs-skel-bubble {
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(90deg,
        var(--gray-100, #f3f4f6) 25%,
        var(--gray-200, #e5e7eb) 50%,
        var(--gray-100, #f3f4f6) 75%);
    background-size: 200% 100%;
    animation: cs-shimmer 1.4s ease infinite;
}
.cs-skel-bubble.left  { align-self: flex-start; border-bottom-left-radius: 4px; }
.cs-skel-bubble.right { align-self: flex-end; border-bottom-right-radius: 4px; }

@keyframes cs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-skel-line, .cs-skel-bubble { animation: none; }
}

/* ─── Mobil ≤900px: ținte de atingere ≥44px ──────────────────────────────── */

@media (max-width: 900px) {
    .cs-btn { min-height: 44px; }
    .cs-btn-sm { min-height: 40px; }
    .cs-tab { min-height: 44px; }
    .cs-select,
    .cs-input { min-height: 44px; }
    .cs-tag-input { min-height: 32px; height: auto; }
    .cs-note-toggle { min-height: 40px; }
    .cs-reply { align-items: flex-end; }
    .cs-reply .cs-textarea { min-height: 44px; }
    .cs-conv-actions .cs-select { flex: 1 1 40%; }
    .cs-modal-actions .cs-btn { flex: 1 1 auto; }
}

/* ═══ FAZA 3 — responsive pentru layout-urile noi (rapoarte + composer) ═══ */

@media (max-width: 900px) {
    /* KPI pe 2 coloane pe mobil */
    .cs-stats-grid { grid-template-columns: 1fr 1fr; }

    /* bara de perioadă: inputurile de dată împart rândul, Aplică full-width */
    .cs-period-bar label { flex: 1 1 40%; }
    .cs-period-bar .cs-quick-chips { flex: 1 1 100%; }
    .cs-period-bar #csStatsApply { flex: 1 1 100%; }

    /* headerul conversației: grupurile de acțiuni pe rânduri curate */
    .cs-conv-actions { justify-content: flex-start; }
    .cs-conv-actions-group { flex: 1 1 100%; }
    .cs-conv-actions-group .cs-select { flex: 1 1 40%; }

    /* composer: toolbar-ul se comprimă, Trimite rămâne complet vizibil */
    .cs-composer-bar { padding: 8px; }
    .cs-send-btn { min-height: 44px; }
}

@media (max-width: 480px) {
    .cs-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cs-stat-value { font-size: 17px; }

    /* Trimite full-width sub unelte, la ecrane foarte înguste */
    .cs-reply-tools { flex: 1 1 100%; }
    .cs-send-btn { flex: 1 1 100%; margin-left: 0; }
}

/* ─── Prezență reală: bandă + dialog de inactivitate ──────────────────────────
   Banda e PERMANENTĂ (nu un pop-up): rămâne vizibilă exact cât operatorul nu e
   disponibil, fiindcă un dialog repetat e închis reflex și nu mai schimbă nimic.
   Dialogul apare doar la depășirea pragului configurat în Setări. */

.cs-presence-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--warning, #f59e0b);
    border-left: 4px solid var(--warning, #f59e0b);
    border-radius: var(--border-radius, 12px);
    background: #fffbeb;
    color: var(--gray-800);
    font-size: 13px;
    line-height: 1.45;
}
.cs-presence-banner-icon { font-size: 16px; line-height: 1; }
/* textul ia spațiul rămas; butonul nu se comprimă */
.cs-presence-banner > span:not(.cs-presence-banner-icon) { flex: 1 1 240px; min-width: 0; }
.cs-presence-banner .cs-btn { flex: 0 0 auto; }

.cs-presence-modal { max-width: 440px; }
.cs-presence-why {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-700);
}
.cs-presence-count {
    margin: 6px 0 2px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: var(--warning, #f59e0b);
    font-variant-numeric: tabular-nums;  /* cifrele nu mai „sar" la fiecare secundă */
}
.cs-presence-count-note {
    text-align: center;
    font-size: 12px;
    color: var(--gray-500);
}

@media (max-width: 900px) {
    .cs-presence-banner { padding: 10px; font-size: 12.5px; }
    /* pe mobil butonul trece pe rândul lui, la lățime completă (țintă ≥44px) */
    .cs-presence-banner .cs-btn { flex: 1 1 100%; }
}

/* ─── Mobil ≤600px: bară de sus a consolei compactată ─────────────────────────
   Scop: pe telefoane (~375px) bara ocupa 4 randuri (taburi rupte pe 2 + controale
   + „Tichet nou"). O comprimam la IDEAL 2 randuri: taburile pe UN rand (cu scroll
   orizontal la nevoie) + controalele pe un rand compact. Desktopul (>600px) e
   neatins. Nimic ascuns; toate tintele raman ≥36px inaltime.
   NB: acest bloc e ULTIMUL din fisier, deci suprascrie corect min-height-urile de
   44px din blocul @media (max-width:900px) de mai sus. */
@media (max-width: 600px) {
    .cs-topbar {
        gap: 8px;
        padding: 8px;
        margin-bottom: 12px;
    }

    /* Cele 3 taburi pe un SINGUR rand; daca nu incap → scroll orizontal, nu wrap. */
    .cs-topbar .cs-tabs {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;               /* Firefox: ascunde bara de scroll */
    }
    .cs-topbar .cs-tabs::-webkit-scrollbar { display: none; }  /* WebKit */

    .cs-topbar .cs-tab {
        flex: 0 0 auto;                      /* nu se comprima; ies din scroll */
        padding: 6px 10px;
        font-size: 13px;
        min-height: 36px;                    /* tinta de atingere confortabila */
        white-space: nowrap;
    }
    .cs-topbar .cs-tab-badge { margin-left: 4px; }

    /* Controalele din dreapta (tenant + prezenta + clopotei + „Tichet nou")
       pe un rand compact, sub taburi. Containerul are style inline; il tintim ca
       „singurul copil direct al topbar-ului care NU e .cs-tabs". */
    .cs-topbar > div:not(.cs-tabs) {
        flex: 1 1 100%;
        gap: 6px !important;                 /* bate gap-ul inline de 8px */
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .cs-topbar .cs-presence {
        padding: 3px 8px;
        gap: 6px;
        font-size: 12px;
    }
    .cs-topbar .cs-presence select { font-size: 12px; }

    .cs-topbar .cs-cue-toggles { gap: 4px; }
    .cs-topbar .cs-cue-btn { width: 32px; height: 32px; }

    /* „Tichet nou" compact: padding mic + font mai mic, dar apasabil (≥36px). */
    .cs-topbar #csNewTicketBtn {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* ═══ Setări → acordeon pe capitole ═══════════════════════════════════════════
   Fiecare capitol e o secțiune pliabilă. Câmpurile/ID-urile rămân neschimbate —
   asta e doar ambalajul vizual (vezi csAccItem în console.js). Colapsarea se face
   cu display:none pe corp: elementele rămân în DOM, deci salvarea (care citește
   prin getElementById) funcționează și când capitolul e închis. */

.cs-settings-shell .cs-acc-intro { margin: 0 0 12px; }

.cs-acc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-acc-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-sm, 8px);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}
.cs-acc-item.cs-acc-open {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.cs-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 0;
    background: var(--gray-50);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--gray-800);
    transition: background var(--transition-fast, 0.15s);
}
.cs-acc-head:hover { background: var(--gray-100); }
.cs-acc-item.cs-acc-open > .cs-acc-head {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
}
.cs-acc-head:focus-visible {
    outline: 2px solid var(--tk-teal-600, #0891b2);
    outline-offset: -2px;
}
.cs-acc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
}
.cs-acc-ico { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.cs-acc-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--gray-500);
    border-bottom: 2px solid var(--gray-500);
    transform: rotate(-45deg);           /* ▸ închis */
    transition: transform var(--transition-fast, 0.15s);
    margin-right: 2px;
}
.cs-acc-item.cs-acc-open > .cs-acc-head .cs-acc-chevron {
    transform: rotate(45deg);            /* ▾ deschis */
}
.cs-acc-body { display: none; }
.cs-acc-item.cs-acc-open > .cs-acc-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}
/* Bara de salvare a setărilor — mereu vizibilă, sub capitole. */
.cs-settings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-acc-item, .cs-acc-head, .cs-acc-chevron { transition: none; }
}

/* ═══ Rapoarte → design + responsive ══════════════════════════════════════════
   Structura HTML e neschimbată (aceleași carduri/clase/gating). Aici doar rafinăm
   ierarhia vizuală și curgerea pe mobil, folosind tokenii existenți. */

/* Antet de card de raport cu accent discret. */
.cs-report-card > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-100);
}
/* Bara de perioadă „card": aliniere curată a filtrelor. */
.cs-period-bar.cs-period-card {
    align-items: flex-end;
    gap: 12px;
}
.cs-period-bar .cs-input,
.cs-period-bar .cs-select { min-width: 0; }
.cs-period-bar .cs-quick-chips { align-self: flex-end; }

/* Grupuri KPI: titlu de grup + tile-uri cu accent pe valoare. */
.cs-stat-card {
    position: relative;
    border-left: 3px solid var(--tk-teal-600, #0891b2);
}
.cs-stat-card.cs-stat-empty { border-left-color: var(--gray-300); }

/* Tabelul pe zile: scroll orizontal deja gestionat de .cs-table-wrap;
   îi dăm un pic de aer sub grupurile de KPI. */
.cs-stats-groups + .cs-table-wrap,
.cs-report-card .cs-table-wrap { margin-top: 12px; }

/* ── Tabletă/telefon mare (≤900px): deja tratat parțial mai sus; completăm. ── */
@media (max-width: 900px) {
    .cs-period-bar.cs-period-card { gap: 10px; }
    .cs-period-bar.cs-period-card label { flex: 1 1 45%; }
    .cs-period-bar.cs-period-card .cs-quick-chips { flex: 1 1 100%; }
    .cs-period-bar.cs-period-card #csStatsApply { flex: 1 1 100%; }
}

/* ── Telefon (≤600px): un singur flux, filtre pe rânduri, KPI 1 coloană. ── */
@media (max-width: 600px) {
    /* Filtrele fiecare pe rândul lui, full-width, ținte de atingere confortabile. */
    .cs-period-bar.cs-period-card { flex-direction: column; align-items: stretch; gap: 10px; }
    .cs-period-bar.cs-period-card label { flex: 1 1 100%; }
    .cs-period-bar.cs-period-card .cs-input,
    .cs-period-bar.cs-period-card .cs-select { width: 100%; }
    .cs-period-bar.cs-period-card .cs-quick-chips { justify-content: space-between; }
    .cs-period-bar.cs-period-card .cs-quick { flex: 1 1 auto; text-align: center; }
    .cs-period-bar.cs-period-card #csStatsApply { width: 100%; }

    /* KPI: pe telefoanele reale (~375px) curg pe 1 coloană; pe ecrane spre 600px
       încă încap 2 fără a se înghesui. */
    .cs-stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

    /* Filtrele din cardul „Echipă" (operator / sursă) tot pe coloană. */
    .cs-report-card .cs-period-bar:not(.cs-period-card) { flex-direction: column; align-items: stretch; }
    .cs-report-card .cs-period-bar:not(.cs-period-card) label { flex: 1 1 100%; }
    .cs-report-card .cs-period-bar:not(.cs-period-card) .cs-select { width: 100%; }

    /* Capitolele de setări: antet mai aerisit, corp cu padding puțin mai mic. */
    .cs-acc-head { padding: 12px; }
    .cs-acc-item.cs-acc-open > .cs-acc-body { padding: 12px; }
    .cs-settings-actions #csSetSave { flex: 1 1 100%; }
}

/* ─── Val 2 D: prezența pe tichet, scurtături, focus tastatură ─────────────── */

/* Banda „⚠️ Alt operator lucrează aici: Ana vizualizează · Mihai scrie…" din
   antetul conversației. Galben discret; devine mai insistentă când cineva scrie. */
.cs-ticket-presence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--warning, #f59e0b);
    border-left-width: 4px;
    border-radius: 8px;
    background: #fffbeb;
    color: var(--gray-800, #1f2937);
    font-size: 12.5px;
    line-height: 1.4;
}
.cs-ticket-presence[hidden] { display: none; }
.cs-ticket-presence.cs-tp-typing { background: #fef3c7; border-color: #d97706; }
.cs-ticket-presence .cs-tp-label { font-weight: 600; }
.cs-ticket-presence .cs-tp-sep { color: var(--gray-400, #9ca3af); }

/* Cardurile de tichet sunt focalizabile (role=button, tabindex=0). */
.cs-ticket-card:focus { outline: none; }
.cs-ticket-card:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: -2px;
}

/* Panoul „?" cu scurtăturile. */
.cs-shortcuts-modal { max-width: 480px; }
.cs-shortcuts-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--gray-500, #6b7280); }
.cs-shortcuts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-shortcuts-table td { padding: 6px 4px; border-bottom: 1px solid var(--gray-100, #f3f4f6); vertical-align: top; }
.cs-shortcuts-table td:first-child { white-space: nowrap; padding-right: 12px; }
.cs-shortcuts-table kbd {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--gray-50, #f9fafb);
    font-family: inherit;
    font-size: 12px;
    text-align: center;
}
/* ─── Linkuri, atașamente, bife, „scrie…" (migrarea 391) ─────────────────── */
.cs-msg-bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.cs-msg.visitor .cs-msg-bubble a { color: var(--tk-teal-600, #0891b2); }
.cs-receipt { text-align: right; margin-top: 2px; line-height: 1; }
.cs-tick { font-size: 11px; letter-spacing: -2px; opacity: .75; white-space: nowrap; }
.cs-tick-read { color: #bae6fd; opacity: 1; font-weight: 700; }
.cs-tick-failed { color: #fecaca; opacity: 1; letter-spacing: 0; }
.cs-att-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; white-space: normal; }
.cs-att { display: inline-block; text-decoration: none !important; }
.cs-att-img img {
    display: block;
    max-width: 260px;
    max-height: 220px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .06);
    min-width: 60px;
    min-height: 40px;
    cursor: zoom-in;
}
.cs-att-file {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .9);
    color: var(--gray-800, #1f2937) !important;
    font-size: 12.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-visitor-typing {
    align-self: flex-start;
    font-size: 12px;
    font-style: italic;
    color: var(--gray-500, #6b7280);
    padding: 0 6px;
}
.cs-conv-main.cs-drop-active { outline: 2px dashed var(--tk-teal-600, #0891b2); outline-offset: -6px; }
#csAttachBtn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Val 2-B: compozitor (ciornă, notă internă, plafon), editare, citare ── */

/* Acțiuni pe mesaj: Citează / Editează (același comportament ca „Șterge") */
.cs-msg-act {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    margin: 0;
    font-size: 11px;
    color: var(--gray-400);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.cs-msg:hover .cs-msg-act,
.cs-msg-act:focus-visible { opacity: 1; }
.cs-msg-act:hover { color: var(--tk-teal-600, #0891b2); text-decoration: underline; }
.cs-msg-act.cs-msg-act-disabled { cursor: help; text-decoration: line-through; }
.cs-msg-act.cs-msg-act-disabled:hover { color: var(--gray-500); }
@media (hover: none) { .cs-msg-act { opacity: .8; } }

.cs-edited-mark {
    font-size: 11px;
    font-style: italic;
    color: var(--gray-400);
    margin-left: 4px;
    cursor: help;
}

/* „✎ ciornă" pe cardul tichetului cu răspuns început și netrimis */
.cs-draft-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--warning-bg, #fef3c7);
    color: #92400e;
    vertical-align: middle;
}

/* ciorna e o NOTĂ internă (rămâne notă la revenire, nu pleacă la client) */
.cs-draft-badge.cs-draft-badge-note {
    border: 1px dashed #d97706;
}

/* Mod „Notă internă": compozitor clar diferențiat (galben + etichetă) */
.cs-note-banner {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #92400e;
    background: #fde68a;
    border-bottom: 1px solid #fcd34d;
}
.cs-note-banner[hidden] { display: none; }
.cs-composer.cs-composer-note {
    border-color: var(--warning, #f59e0b);
    background: #fffbeb;
}
.cs-composer.cs-composer-note:focus-within {
    border-color: var(--warning, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
.cs-composer.cs-composer-note .cs-textarea,
.cs-composer.cs-composer-note .cs-composer-bar { background: #fffbeb; }
.cs-composer.cs-composer-note .cs-send-btn {
    background: var(--warning, #f59e0b);
    border-color: var(--warning, #f59e0b);
    color: #fff;
}

/* Contor de caractere (plafon din messageLimits) */
.cs-char-count {
    font-size: 11px;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
}
.cs-char-count.cs-char-warn { color: #b45309; font-weight: 600; }
.cs-char-count.cs-char-over { color: var(--danger, #dc2626); font-weight: 700; }
.cs-send-btn.cs-send-over { opacity: .6; }
.cs-char-count + .cs-send-btn { margin-left: 8px; }

/* Popup răspunsuri predefinite: selecție cu tastatura + căutare + hint */
.cs-canned-item.active { background: var(--tk-teal-50, #ecfeff); outline: 1px solid var(--tk-teal-600, #0891b2); }
.cs-canned-search { width: 100%; margin-bottom: 6px; }
.cs-canned-hint {
    padding: 4px 6px 0;
    font-size: 10.5px;
    color: var(--gray-400);
    border-top: 1px solid var(--gray-100);
    margin-top: 4px;
}

/* Modalul de editare */
.cs-edit-textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.4;
}