/* ==========================================================================
   1. WORDPRESS TICKET LIST (Post Listing Page)
   ========================================================================== */

.column-cd_lifecycle { width: 150px; }
.column-cd_activity { width: 140px; }

/* Replaces the old dedicated "Read Status" and "Presence" columns —
   PostList::add_row_flags() surfaces both via the display_post_states
   filter instead, right next to the title, unconditionally visible
   (unlike .row-actions, which wp-admin keeps off-screen until hover). */
.cd-row-new-response {
    background: #2563eb;
    color: #fff;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    animation: cd-pulse 2s infinite;
}
.cd-badge-presence { margin-left: 6px; }

.cd-badge-overdue {
    background: #fee2e2;
    color: #b91c1c;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: fit-content;
}
.cd-badge-overdue + .cd-badge-overdue { margin-top: 4px; }

.post-type-chat_ticket table.wp-list-table tbody tr.cd-ticket-unread { background: #eff6ff; }
.post-type-chat_ticket table.wp-list-table tbody tr.cd-ticket-unread:hover { background: #dbeafe; }
.post-type-chat_ticket table.wp-list-table tbody tr.cd-ticket-unread th.check-column,
.post-type-chat_ticket table.wp-list-table tbody tr.cd-ticket-unread td { background: transparent; }

@keyframes cd-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.cd-status-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
}

.cd-badge-final {
    margin-left: 4px;
    color: #8c8f94;
    font-size: 10px;
    vertical-align: middle;
}

/* List-row counterpart to #cd-presence-banner on the detail page — same
   amber "presence" accent, escalating to a pulsing red "replying" look
   (same cd-pulse animation as .cd-row-new-response, just its own red
   rather than that badge's blue) once someone's actually typing, since
   that's the actual duplicate-reply risk this exists to surface. */
.cd-badge-presence {
    background: #fef3c7;
    color: #92400e;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
}
.cd-badge-presence-replying {
    background: #d63638;
    color: #fff;
    animation: cd-pulse 2s infinite;
}

.cd-activity-text { font-weight: 600; color: #555; font-size: 12px; }
.cd-activity-none { color: #ccd0d4; }

/* ==========================================================================
   2. MAIN CHAT HUB (Ticket View)
   ========================================================================== */

/* This targets ONLY the ticket editor page */
.post-type-chat_ticket #wpbody .cd-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    position: relative;
}

.cd-bento-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 0;
    color: #1e293b;
    /* No overflow:hidden here on purpose — TinyMCE's floating toolbars
       (e.g. the "insert link" popup) are absolutely positioned relative to
       the editor and get clipped/misplaced by a clipping ancestor. Corners
       are rounded per-section below instead. */
}

.cd-bento-card h3,
.cd-bento-card h2 {
    color: #0f172a;
}

/* Two-column layout: conversation + sidebar */
.cd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
    width: 100%;
}

.cd-main { min-width: 0; }

.cd-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 40px;
}

.cd-aside .cd-bento-card { padding: 16px 18px; }

.cd-aside h4 {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.cd-info-list { margin: 0; }
.cd-info-list .cd-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.cd-info-list .cd-info-row:last-child { border-bottom: none; }
.cd-info-list dt { color: #64748b; font-weight: 500; }
.cd-info-list dd { margin: 0; color: #1e293b; font-weight: 600; text-align: right; word-break: break-word; }

.cd-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cd-history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}
.cd-history-list li:last-child { border-bottom: none; }
.cd-history-list a {
    font-size: 13px;
    color: #4f46e5;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-history-list a:hover { text-decoration: underline; }
.cd-history-list .cd-status-tag { flex-shrink: 0; }

.cd-control-card select,
#cd-tags-input { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.cd-control-card select:last-child { margin-bottom: 0; }

.cd-notify-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #64748b;
    margin-top: 10px;
    cursor: pointer;
}

.cd-control-card .cd-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 5px;
}

.cd-field-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 10px;
}

.cd-watcher-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cd-watcher-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}
.cd-remove-watcher {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.cd-remove-watcher:hover { color: #dc2626; }

/* select already gets height:36px from ".cd-control-card select" above
   (the shared control-sizing block), but that block only covers text/
   password/email/number inputs and selects — not <button>/<a class=button>
   — so the "Add"/"Merge" button next to it was left at its native/WP-core
   button height instead, visibly shorter than its neighbor. Pin both
   explicitly here so the row lines up regardless of what else changes
   those shared rules. */
.cd-watcher-add-row,
.cd-merge-row {
    display: flex;
    gap: 6px;
}
.cd-watcher-add-row select,
.cd-merge-row input {
    flex: 1;
    min-width: 0;
}
.cd-watcher-add-row select,
.cd-merge-row input,
.cd-watcher-add-row .button,
.cd-merge-row .button {
    height: 36px;
    box-sizing: border-box;
}

/* Amber "caution" theme, distinct from the neutral cards around it —
   merging is the one irreversible action in this sidebar (everything
   else here — reassigning, adding a watcher, changing status — can be
   undone by just doing it again). The tint is a passive visual cue on
   top of the active confirm() dialog the merge button itself triggers,
   not a replacement for it. */
.cd-merge-card {
    background: #fffbeb;
    border-color: #fde68a;
}
.cd-merge-card h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
}
.cd-merge-card h4::before {
    content: '⚠';
    font-size: 12px;
    line-height: 1;
}
.cd-merge-card .cd-field-hint { color: #b45309; }
/* #cd-merge-target-number isn't inside .cd-settings-wrap, so it doesn't
   pick up the shared input-appearance block above (border-radius/padding/
   font-size) the way .cd-settings-wrap's own number inputs do — it was
   rendering as a bare native number input. Full appearance defined here
   instead of just a border-color override. */
.cd-merge-row input {
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
}
.cd-merge-row input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    outline: none;
}
#cd-merge-btn {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}
#cd-merge-btn:hover {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}

.cd-header {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
}

.cd-header-subject {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
}

.cd-header-ticket-no {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.cd-status-pill {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* background + text color are set inline per-status (see AdminUI::render()) */
}

/* ==========================================================================
   3. CHAT HISTORY & BUBBLES
   ========================================================================== */

.cd-history {
    height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.cd-empty-state {
    margin: auto;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    max-width: 240px;
}
.cd-empty-state .cd-empty-icon { font-size: 28px; display: block; margin-bottom: 8px; }

.cd-log-entry {
    align-self: center;
    max-width: 90%;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11px;
    text-align: center;
}
.cd-log-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 6px;
    vertical-align: middle;
}
.cd-log-time { color: #b0b8c4; margin-left: 4px; }

.cd-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 80%;
    margin-bottom: 18px;
}

.cd-message.cd-agent { align-self: flex-end; flex-direction: row-reverse; }
.cd-message.cd-customer { align-self: flex-start; }

.cd-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.cd-agent .cd-avatar { background: #4f46e5; }
.cd-customer .cd-avatar { background: #64748b; }
.cd-note .cd-avatar { background: #b45309; }

/* Internal notes: agent-only, never emailed — visually distinct amber tint
   so they're never mistaken for a message actually sent to the customer. */
.cd-message.cd-note { align-self: center; max-width: 90%; }
.cd-message.cd-note .cd-message-body { align-items: flex-start; }
.cd-message.cd-note .cd-bubble { background: #fffbeb; border: 1px solid #fde68a; }
.cd-note-badge {
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.cd-message-body { display: flex; flex-direction: column; min-width: 0; }
.cd-agent .cd-message-body { align-items: flex-end; }
.cd-customer .cd-message-body { align-items: flex-start; }

.cd-message-head {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-message-head .cd-author { font-weight: 600; color: #475569; }

.cd-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    color: #1e293b;
    max-width: 100%;
}

.cd-agent .cd-bubble { background: #eef2ff; border: 1px solid #e0e7ff; border-top-right-radius: 4px; }
.cd-customer .cd-bubble { background: #ffffff; border: 1px solid #e2e8f0; border-top-left-radius: 4px; }

.cd-content p { margin: 0 0 10px 0; }
.cd-content p:last-child { margin-bottom: 0; }
.cd-content ul, .cd-content ol { margin: 8px 0 8px 22px; }

.cd-delivery-failed {
    font-size: 10px;
    font-weight: 700;
    color: #b91c1c;
    background: #fee2e2;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.cd-retry-delivery {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: #b91c1c;
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
}
.cd-retry-delivery:hover { background: #991b1b; }
.cd-retry-delivery:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   4. ATTACHMENTS & COMPOSER
   ========================================================================== */

.cd-file-grid { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.05); display: flex; flex-wrap: wrap; gap: 8px; }
.cd-file-card { background: rgba(0,0,0,0.06); padding: 4px 10px; border-radius: 4px; text-decoration: none !important; color: #075e54 !important; font-size: 11px; font-weight: 600; }

/* Small removable tag for staged attachments */
.cd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid #e2e8f0;
}
.cd-tag-remove {
    cursor: pointer;
    color: #dc2626;
    font-weight: bold;
}

.cd-tag-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.cd-composer {
    background: #ffffff;
    padding: 16px 20px 18px;
    border-radius: 0 0 12px 12px;
}

.cd-composer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
    display: block;
}

.cd-composer-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: -2px 0 8px;
}

.cd-mention {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
}

/* Inline "/" (Quick Chat) and "@" (mention) menu — one shared floating
   list, positioned under whichever field is active. See the
   inline-autocomplete block in admin-script.js. */
.cd-autocomplete-menu {
    position: absolute;
    z-index: 100000;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
    max-height: 220px;
    min-width: 160px;
    max-width: 320px;
    overflow-y: auto;
}
.cd-ac-item {
    padding: 8px 12px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-ac-item.is-active,
.cd-ac-item:hover {
    background: #eef2ff;
    color: #4338ca;
}

/* Scoped to this banner specifically (not .notice generally) — wp-admin's
   own CSS already styles .notice.notice-warning natively there, but the
   Agent Portal is a plain frontend page with none of that loaded, so
   without this the collision-detection banner would render as bare
   unstyled text when shown outside wp-admin. Mimics wp-admin's own look
   so it's consistent in both places rather than replacing it. */
#cd-presence-banner .notice {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #dba617;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 1px 12px;
    margin: 0 0 10px;
}
#cd-presence-banner .notice p {
    margin: 0.5em 0;
}

.cd-actions {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Final state: any status marked as final in settings (e.g. closed) */
.cd-final-state .cd-history { opacity: 0.7; }
.cd-final-state .cd-composer { filter: grayscale(1); opacity: 0.45; pointer-events: none; }
.cd-final-state .cd-composer .button { cursor: not-allowed; }
/* Internal notes are agent-only and never emailed, so they stay usable even
   when the reply composer above is locked out for a final-state ticket. */
.cd-final-state .cd-note-composer { filter: none; opacity: 1; pointer-events: auto; }

.cd-note-composer textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #1e293b;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}
.cd-note-composer textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
}

/* Inline notice within the ticket hub */
.cd-inline-notice {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 4px solid #d63638;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-size: 13px;
}
.cd-inline-notice.cd-inline-notice-info {
    border-left-color: #2271b1;
}
.cd-inline-notice strong {
    margin-right: 6px;
}

.cd-history::-webkit-scrollbar { width: 6px; }
.cd-history::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.cd-history::-webkit-scrollbar-track { background: #f1f5f9; }

/* IMAP test panel (inside sidebar card) */
.cd-test-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #334155;
    flex-wrap: wrap;
}
.cd-test-panel strong { flex-shrink: 0; }
#cd-status { flex: 1; font-weight: 600; }

/* Extra spacing under TinyMCE reply editor */
#wp-cdreplyeditor-wrap {
    margin-bottom: 10px;
}

@media (max-width: 1100px) {
    .cd-layout { grid-template-columns: 1fr; }
    .cd-aside { position: static; }
}

/* ==========================================================================
   5. SETTINGS PAGE: STATUS & NOTIFICATIONS
   ========================================================================== */

.cd-settings-wrap .cd-status-table {
    margin-top: 10px;
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
}

.cd-settings-wrap .cd-status-table th,
.cd-settings-wrap .cd-status-table td {
    vertical-align: middle;
}

.cd-settings-wrap .cd-status-table th:nth-child(1),
.cd-settings-wrap .cd-status-table td:nth-child(1) {
    width: 14%;
}

.cd-settings-wrap .cd-status-table th:nth-child(2),
.cd-settings-wrap .cd-status-table td:nth-child(2) {
    width: 22%;
}

.cd-settings-wrap .cd-status-table th:nth-child(3),
.cd-settings-wrap .cd-status-table td:nth-child(3) {
    width: 12%;
}

.cd-settings-wrap .cd-status-table th:nth-child(4),
.cd-settings-wrap .cd-status-table td:nth-child(4),
.cd-settings-wrap .cd-status-table th:nth-child(5),
.cd-settings-wrap .cd-status-table td:nth-child(5) {
    width: 12%;
}

.cd-settings-wrap .cd-status-table th:nth-child(6),
.cd-settings-wrap .cd-status-table td:nth-child(6),
.cd-settings-wrap .cd-status-table th:nth-child(7),
.cd-settings-wrap .cd-status-table td:nth-child(7) {
    width: 12%;
}

.cd-settings-wrap .cd-status-table input[type="text"].regular-text {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.cd-settings-wrap .cd-status-table .cd-color-input {
    width: 50px;
    height: 30px;
    padding: 0;
}

/* Simple overlay confirm for status removal */
.cd-status-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.cd-status-confirm-dialog {
    background: #fff;
    border-radius: 6px;
    padding: 20px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 380px;
    width: 90%;
}

.cd-status-confirm-message {
    margin-bottom: 15px;
    font-size: 13px;
}

.cd-status-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cd-settings-wrap .cd-status-table td label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.cd-settings-wrap .cd-status-table .button.cd-remove-status-row {
    width: 100%;
    text-align: center;
}

.cd-settings-wrap form {
    margin-top: 15px;
}

.cd-settings-wrap .cd-status-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: #fff;
    color: #1e293b;
}

.cd-settings-wrap .cd-status-table thead th {
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
}

.cd-settings-wrap .cd-status-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.cd-settings-wrap .cd-status-table tbody tr:nth-child(odd) {
    background: #fff;
}

.cd-settings-wrap .cd-status-table tbody tr:hover {
    background: #f1f5f9;
}

@media (max-width: 900px) {
    .cd-settings-wrap .cd-status-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .cd-settings-wrap .cd-status-table table {
        min-width: 700px;
    }
}

/* ==========================================================================
   6. CREATE TICKET FORM (shared by the wp-admin "Add New Ticket" screen
      and the frontend agent portal's create-ticket view)
   ========================================================================== */

.cd-create-ticket-form { background: #fff; border: 1px solid #ccd0d4; padding: 30px; max-width: 1000px; margin-top: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.cd-form-row { display: flex; gap: 25px; margin-bottom: 5px; flex-wrap: wrap; }
.cd-form-group { flex: 1; min-width: 200px; margin-bottom: 25px; }
.cd-form-group label { display: block; font-weight: 700; margin-bottom: 10px; color: #1d2327; font-size: 13px; text-transform: uppercase; }
.cd-form-group input[type="text"],
.cd-form-group input[type="email"],
.cd-form-group input[type="number"],
.cd-form-group input[type="date"],
.cd-form-group input[type="url"],
.cd-form-group select {
    width: 100%;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-form-group textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1e293b;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-form-group input[type="text"]:focus,
.cd-form-group input[type="email"]:focus,
.cd-form-group input[type="number"]:focus,
.cd-form-group input[type="date"]:focus,
.cd-form-group input[type="url"]:focus,
.cd-form-group select:focus,
.cd-form-group textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
}
.cd-form-actions { margin-top: 30px; padding-top: 20px; border-top: 1px solid #dcdcde; display: flex; gap: 10px; }

/* Suggestion dropdown under the customer-email field — same floating-panel
   look as .cd-screen-options-panel (rounded, soft shadow, indigo accent)
   rather than the plain square/flat-shadow box this used to be. */
.cd-email-wrapper { position: relative; }

.cd-email-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 6px;
    box-sizing: border-box;
}

.cd-email-suggestions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.cd-email-suggestions-item:hover { background: #f8fafc; }

.cd-email-suggestions-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.cd-email-suggestions-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cd-email-suggestions-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-email-suggestions-email {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Connections panel status badges (Settings page) */
.cd-conn-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
}
.cd-conn-ok { background: #dcfce7; color: #15803d; }
.cd-conn-missing { background: #fee2e2; color: #b91c1c; }

.cd-template-table th[colspan] {
    background: #f8fafc;
    color: #334155;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.03em;
    padding: 10px 14px;
}
.cd-template-table textarea { font-family: Consolas, Monaco, monospace; font-size: 12px; }

/* Automation Rules (Settings > Automation) has more columns than a typical
   settings table fits comfortably — scroll horizontally rather than
   squeezing every dropdown unreadably narrow. */
.cd-automation-table-wrap { overflow-x: auto; }
.cd-automation-table { min-width: 760px; }

.cd-automation-reference-table code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

/* ==========================================================================
   7. SHARED FORM CONTROLS
   Consistent look for text/select/textarea inputs across the ticket hub,
   the Settings page, and the frontend portal (all three load this file).
   ========================================================================== */

/* Deliberately NOT scoped to .cd-bento-card or .cd-portal-shell as a whole —
   both contain a TinyMCE editor as a descendant (the reply composer / new
   ticket editor), and TinyMCE's own floating UI (e.g. the "insert link"
   popup's URL field) is type="text" too. A blanket selector on those
   ancestors re-styles TinyMCE's internal chrome by accident. Every selector
   below names only our own fields specifically. */

.cd-control-card select,
#cd-tags-input,
.cd-settings-wrap input[type="text"],
.cd-settings-wrap input[type="password"],
.cd-settings-wrap input[type="email"],
.cd-settings-wrap input[type="number"],
.cd-settings-wrap select,
.cd-settings-wrap textarea {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #1e293b;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Single-line controls only — forcing a fixed height on textarea would
   collapse its rows, so it's excluded here and keeps its padding-driven
   height from the block above. Every other control on the same page
   (text/password/email/number inputs and selects, wp-admin native ones
   included) is pinned to the same height so nothing sits taller/shorter
   than its neighbor in the same table row. */
.cd-control-card select,
#cd-tags-input,
.cd-settings-wrap input[type="text"],
.cd-settings-wrap input[type="password"],
.cd-settings-wrap input[type="email"],
.cd-settings-wrap input[type="number"],
.cd-settings-wrap select {
    height: 36px;
}

.cd-control-card select:focus,
#cd-tags-input:focus,
.cd-settings-wrap input[type="text"]:focus,
.cd-settings-wrap input[type="password"]:focus,
.cd-settings-wrap input[type="email"]:focus,
.cd-settings-wrap input[type="number"]:focus,
.cd-settings-wrap select:focus,
.cd-settings-wrap textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
}

.cd-control-card select,
.cd-settings-wrap select {
    cursor: pointer;
}

.cd-settings-wrap input::placeholder,
.cd-settings-wrap textarea::placeholder,
#cd-tags-input::placeholder,
.cd-note-composer textarea::placeholder {
    color: #94a3b8;
}

/* Custom ticket fields (Settings > Custom Fields). A class selector rather
   than an ancestor+type selector like the ones above — TinyMCE's own
   floating popups never carry this class, so it's safe without the narrow-
   selector gymnastics the rest of this section needs. Excludes checkboxes,
   which already get styled by the .cd-control-card input[type=checkbox]
   rule below since this card also carries the cd-control-card class. */
.cd-cf-input:not([type="checkbox"]) {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #1e293b;
    background: #ffffff;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input.cd-cf-input:not([type="checkbox"]) { height: 36px; }
textarea.cd-cf-input { resize: vertical; font-family: inherit; }
.cd-cf-input:not([type="checkbox"]):focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
}
.cd-cf-input::placeholder { color: #94a3b8; }

.cd-settings-wrap input[type="checkbox"],
.cd-control-card input[type="checkbox"],
.cd-portal-login-card input[type="checkbox"] {
    accent-color: #4f46e5;
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

/* Toggle-switch look, used in both wp-admin and the portal (this file loads
   in both) for any checkbox marked .cd-toggle — the .cd-toggle class opts a
   specific checkbox in; plain checkboxes above are unaffected. */
input[type="checkbox"].cd-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 38px;
    height: 22px;
    min-width: 38px;
    flex-shrink: 0;
    background-color: #cbd5e1;
    background-image: none;
    border: none;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease;
}
input[type="checkbox"].cd-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    /* WP admin's own core CSS has a generic input[type=checkbox]:checked::before
       rule (it centers a native dashicon checkmark glyph via negative margin:
       -.1875rem 0 0 -.25rem). We never declared margin on this pseudo-element
       at all, so that was the only rule setting it — nothing here to lose a
       specificity fight against, it just applied unopposed. Reset it
       explicitly; this is why only the checked/ON state was misaligned. */
    margin: 0;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.2s ease;
    pointer-events: none;
}
/* Belt-and-suspenders: some browsers (older Safari especially) don't fully
   suppress native checkbox theming in the :checked state even with
   appearance:none, letting a native checkmark/background bleed through
   and visually clash with the custom thumb below — force it off explicitly. */
input[type="checkbox"].cd-toggle:checked {
    background-color: #4f46e5;
    background-image: none;
}
input[type="checkbox"].cd-toggle:checked::before {
    margin: 0;
    left: 18px;
}
input[type="checkbox"].cd-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

/* Square checkmark checkbox — used for row/bulk selection (Portal ticket
   table's select-all + per-row checkboxes), as opposed to .cd-toggle's
   pill/switch look which is for on-off settings, not multi-select. */
input[type="checkbox"].cd-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    min-width: 17px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"].cd-checkbox:hover { border-color: #94a3b8; }
input[type="checkbox"].cd-checkbox:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}
input[type="checkbox"].cd-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"].cd-checkbox:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.cd-settings-wrap .cd-status-table .cd-color-input {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================================================
   8. SETTINGS TABS (Connections, Email Templates)
   ========================================================================== */

.cd-settings-tabs {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
}

/* A sub-tab-group (Connections/Email Templates) nesting inside a main tab
   panel shouldn't get its own card chrome or top margin stacked on top of
   the main panel's — it reads as one section, not a card-in-a-card. */
.cd-tab-panel .cd-settings-tabs {
    margin-top: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.cd-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 0 18px;
    padding: 0;
}

.cd-tab-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin: 0 0 -1px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: none;
}
.cd-tab-btn:hover { color: #1e293b; background-color: transparent; }
.cd-tab-btn:focus,
.cd-tab-btn:focus-visible { box-shadow: none; outline: none; }
.cd-tab-btn.is-active { color: #4f46e5; border-bottom-color: #4f46e5; background-color: transparent; }

/* Nested sub-tabs read as a level down from the main tabs above them. */
.cd-tab-panel .cd-tab-btn { font-size: 12px; padding: 8px 14px; }

.cd-tab-panel { display: none; }

/* ==========================================================================
   Charts (Charts:: — donut, bars, funnel, stat cards). Shared by the
   wp-admin Reports page and the Agent Portal Dashboard, both of which load
   this stylesheet already.
   ========================================================================== */

.cd-reports-daterange {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 16px 0 20px;
}
.cd-reports-daterange label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.cd-reports-daterange input[type="date"],
.cd-reports-daterange .button {
    height: 34px;
    box-sizing: border-box;
    line-height: 32px;
}
.cd-reports-daterange input[type="date"] {
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    line-height: normal;
}

.cd-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.cd-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.cd-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
}
.cd-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cd-stat-card-good .cd-stat-value { color: #16a34a; }
.cd-stat-card-warning .cd-stat-value { color: #dc2626; }

/* stat_card() renders an <a> instead of a <div> when given a URL (Portal
   Dashboard cards that link into a ticket-list view) — same look either
   way, plus a hover cue that only makes sense for the clickable version. */
a.cd-stat-card {
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.cd-stat-card:hover {
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

.cd-reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.cd-reports-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
    overflow-x: auto;
}

/* Full width (its own row, regardless of viewport) for the By Agent
   table — it's grown to 11 columns (ticket counts, on-time rates, and
   the avg first-response/resolution/CSAT performance metrics), too many
   to share row space with the single-metric donut/bar panels beside it
   without every column getting uncomfortably cramped. */
.cd-reports-panel-span3 { grid-column: 1 / -1; }
.cd-reports-panel h2 {
    margin: 0 0 4px;
    font-size: 14px;
}
.cd-reports-panel .description { margin: 0 0 12px; }

.cd-reports-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.cd-reports-panel-head h2 { margin: 0 0 4px; }
.cd-reports-panel-export {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    white-space: nowrap;
}
.cd-reports-panel-export:hover { text-decoration: underline; }

.cd-chart-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}

/* Donut */
.cd-chart-donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cd-chart-donut-svg circle { transition: stroke-dasharray 0.3s ease; }
.cd-chart-donut-total {
    font-size: 22px;
    font-weight: 700;
    fill: #1e293b;
}
.cd-chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #334155;
}
.cd-chart-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}
.cd-chart-pct { color: #94a3b8; }

/* Horizontal bars */
.cd-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cd-chart-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 10px;
}
.cd-chart-bar-label {
    font-size: 12px;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-chart-bar-track {
    display: block;
    height: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}
.cd-chart-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.cd-chart-bar-count {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
}

/* Funnel — same label/track/count grid as .cd-chart-bar-row above, so
   percentage widths scale freely without a min-width fighting them (that
   was the earlier bug: text baked into the colored bar needed a
   min-width to stay legible, which clamped every small-but-real stage to
   the same size and flattened the funnel shape entirely). */
.cd-chart-funnel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cd-chart-funnel-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 10px;
}
.cd-chart-funnel-label {
    font-size: 12px;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-chart-funnel-track {
    display: flex;
    justify-content: center;
    height: 22px;
    background: #f8fafc;
    border-radius: 4px;
    overflow: hidden;
}
.cd-chart-funnel-bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.cd-chart-funnel-count {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
}

.cd-reports-export-btn { margin-left: 4px; }

.cd-agent-report-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0;
}
.cd-agent-report-table th,
.cd-agent-report-table td {
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
}
.cd-agent-report-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.cd-agent-report-table thead th:first-child { border-top-left-radius: 8px; }
.cd-agent-report-table thead th:last-child { border-top-right-radius: 8px; }
.cd-agent-report-table tbody td { border-bottom: 1px solid #f1f5f9; color: #1e293b; }
.cd-agent-report-table tbody tr:last-child td { border-bottom: none; }
.cd-agent-report-table tbody tr:hover td { background: #f8fafc; }
.cd-agent-report-table tbody td:first-child { font-weight: 600; }
.cd-agent-report-warning {
    color: #dc2626;
    font-weight: 700;
}

.cd-tab-panel.is-active { display: block; }