/* ============================================================================
   The Expert — stylesheet
   Loaded after crm-enhancement-suite.css. Everything here is namespaced to the
   expert feature so it cannot bleed into the existing agent/admin dashboard.
   ========================================================================== */

/* ── Lead statuses introduced by the expert workflow ─────────────────────── */

.status-pending-expert { background: #8e6ec8; color: #fff; }
.status-processing     { background: var(--warning-color); color: #fff; }
.status-processed      { background: var(--success-color); color: #fff; }

.status-dot.pending-expert { background: #8e6ec8; }
.status-dot.processing     { background: var(--warning-color); }
.status-dot.processed      { background: var(--success-color); }

.lead-status-btn.status-pending-expert { background: #8e6ec8; color: #fff; }
.lead-status-btn.status-processing     { background: var(--warning-color); color: #fff; }
.lead-status-btn.status-processed      { background: var(--success-color); color: #fff; }

.lsf-item[data-status="pending-expert"] .lsf-dot { background: #8e6ec8; }
.lsf-item[data-status="processing"] .lsf-dot     { background: var(--warning-color); }
.lsf-item[data-status="processed"] .lsf-dot      { background: var(--success-color); }

/* ── "Request Expert" button in the lead information header ──────────────── */

/* Sits in the lead-title row, immediately to the right of the status badge.
   It is deliberately NOT absolutely positioned: .lead-title is a flex row with
   justify-content: space-between, so an absolute box pinned to the top-right of
   .lead-header lands straight on top of the status badge. As a normal flex
   child it is pushed to the right edge by the same space-between, which is
   where we want it, without overlapping anything. */
.lead-header-actions {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-left: 12px;
}

.request-expert-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #8e6ec8;
    border: 1px solid #8e6ec8;
    color: #fff;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.request-expert-btn:hover {
    filter: brightness(1.08);
}

.request-expert-btn:disabled,
.request-expert-btn.is-pending {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
    cursor: default;
    filter: none;
}

.request-expert-btn.is-processing {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: #fff;
    cursor: default;
}

.request-expert-btn.is-processed {
    background: var(--success-color);
    border-color: var(--success-color);
    color: #fff;
    cursor: default;
}

/* ── Expert dashboard: the New / Processing / Processed sub-tabs ─────────── */

.expert-subtabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 6px;
    margin-bottom: 24px;
    width: fit-content;
}

.expert-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.expert-subtab:hover {
    background: var(--gray-100);
}

.expert-subtab.active {
    background: var(--primary-color);
    color: var(--white);
}

.expert-subtab .expert-subtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 11px;
    font-weight: 700;
}

.expert-subtab.active .expert-subtab-count {
    background: rgba(255, 255, 255, 0.28);
    color: var(--white);
}

/* ── Expert-only "Take Lead" column in the leads table ───────────────────── */

.take-lead-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--white);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.take-lead-btn:hover {
    filter: brightness(1.08);
}

.take-lead-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.take-lead-cell .taken-by {
    font-size: 12px;
    color: var(--gray-600);
    white-space: nowrap;
}

.take-lead-cell .taken-by i {
    color: var(--success-color);
    margin-right: 4px;
}

/* ── Redacted (privacy-protected) values shown to the expert ─────────────── */

.expert-redacted {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--gray-400);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.3px;
    cursor: not-allowed;
    user-select: none;
}

.expert-redacted i {
    font-size: 10px;
}

/* ── System (auto-generated) comments in the lead chat ───────────────────── */

.comment-item.system-comment {
    background: var(--gray-50);
    border-left: 3px solid var(--primary-color);
    border-radius: 0;
}

.comment-item.system-comment .comment-meta {
    color: var(--gray-500);
    font-weight: 600;
}

.comment-item.system-comment .comment-text {
    color: var(--gray-700);
    font-size: 13px;
}

.comment-item.system-comment[data-system-type="expert-taken"] {
    border-left-color: var(--warning-color);
}

.comment-item.system-comment[data-system-type="expert-processed"] {
    border-left-color: var(--success-color);
}

.comment-item.system-comment[data-system-type="expert-requested"] {
    border-left-color: #8e6ec8;
}

.comment-item.system-comment[data-system-type="offer-email"] {
    border-left-color: var(--info-color);
}

.system-comment-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
}

.system-comment-options {
    margin: 6px 0 0 0;
    padding-left: 16px;
}

.system-comment-options li {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.6;
}

.system-comment-tunnel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--info-color);
    text-decoration: none;
    word-break: break-all;
}

.system-comment-tunnel:hover {
    text-decoration: underline;
}

/* ── Read-only state (expert, after the lead is marked processed) ────────── */

.expert-readonly-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-200);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--gray-600);
}

.expert-readonly-banner i {
    color: var(--success-color);
}

/* Expert dashboard hides everything that isn't the leads workflow */
body.expert-mode .nav-item[data-tab="clients"],
body.expert-mode .nav-item[data-tab="sales"],
body.expert-mode .nav-item[data-tab="statistics"],
body.expert-mode #createLeadHeaderBtn,
body.expert-mode #leadStatusFilter {
    display: none !important;
}
/* ── Request Lead: control bar + modal (urgency-based assignment) ────────── */
.expert-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.expert-control-bar .expert-subtabs { margin-bottom: 0; }

.expert-request-lead-btn {
    border-radius: 20px;
    padding: 9px 18px;
    font-size: 14px;
}

.expert-request-lead-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 4000;
}
.expert-request-lead-modal .modal-content {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.2));
    width: 100%;
}
.expert-request-lead-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}
.expert-request-lead-modal .modal-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
}
.expert-request-lead-modal .modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--gray-500);
}
.expert-request-lead-modal .modal-body { padding: 22px 20px; }
.expert-request-lead-modal .modal-footer { padding: 14px 20px 20px; }

.expert-request-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    margin: 0 0 8px;
}
.expert-request-hint {
    font-size: 13px;
    color: var(--gray-600);
    margin: 0 0 8px;
}
.expert-request-limit {
    font-size: 13px;
    font-weight: 600;
    color: var(--danger-color, #dc2626);
    margin: 6px 0 0;
    min-height: 16px;
}

/* ── "Take a Lead" modal: search-by-id bar ──────────────────────────────── */
.expert-take-search {
    display: flex;
    gap: 8px;
    margin: 6px 0 14px;
}
.expert-take-search input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.expert-take-search input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.expert-take-search .btn-secondary {
    white-space: nowrap;
}

/* ── "Take a Lead" modal button styling (#4) ────────────────────────────── */
.expert-request-lead-modal .modal-footer .btn-primary,
.expert-request-lead-modal .modal-footer .btn-secondary,
.expert-take-search .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
}
.expert-request-lead-modal .modal-footer .btn-primary,
.expert-take-search .btn-secondary {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}
.expert-request-lead-modal .modal-footer .btn-primary:hover:not(:disabled),
.expert-take-search .btn-secondary:hover:not(:disabled) {
    filter: brightness(1.08);
}
.expert-request-lead-modal .modal-footer .btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-200);
}
.expert-request-lead-modal .modal-footer .btn-secondary:hover {
    background: var(--gray-200);
}
.expert-request-lead-modal .btn-primary:disabled,
.expert-take-search .btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

/* Agent-side "Cancel Request" button next to a pending expert request (#5) */
.request-expert-btn.cancel-expert-btn {
    background: var(--white);
    border: 1px solid var(--danger-color, #dc2626);
    color: var(--danger-color, #dc2626);
}
.request-expert-btn.cancel-expert-btn:hover:not(:disabled) {
    background: var(--danger-color, #dc2626);
    color: #fff;
    filter: none;
}
/* ── REQ 5: live "is typing…" indicator in the lead chat ─────────────────── */
.lead-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 2px 8px;
    padding: 6px 12px;
    background: var(--gray-50, #f8f9fa);
    border-radius: 14px;
    font-size: 12px;
    font-style: italic;
    color: var(--gray-600);
    width: fit-content;
    max-width: 100%;
    animation: ltFadeIn 0.15s ease-out;
}

.lead-typing-indicator i {
    color: var(--primary-color);
    font-style: normal;
}

.lead-typing-indicator .lt-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-typing-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 10px;
}

.lead-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gray-500, #8892a0);
    display: inline-block;
    animation: ltTypingBounce 1.2s infinite ease-in-out both;
}

.lead-typing-dots span:nth-child(1) { animation-delay: -0.24s; }
.lead-typing-dots span:nth-child(2) { animation-delay: -0.12s; }
.lead-typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes ltTypingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes ltFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Unread incoming chat messages (expert ↔ requesting agent) ───────────── */
.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 12px;
    background: var(--danger-color, #dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    vertical-align: middle;
    animation: chatUnreadPop 0.2s ease-out;
}

.chat-unread-badge i {
    font-size: 7px;
    animation: chatUnreadBlink 1s infinite ease-in-out;
}

.comment-item.chat-unread {
    position: relative;
    animation: chatUnreadFlash 1.4s ease-out;
    border-left: 3px solid var(--primary-color);
}

.comment-item.chat-unread::after {
    content: "NEW";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--primary-color);
    background: var(--gray-50, #f8f9fa);
    padding: 1px 6px;
    border-radius: 8px;
}

@keyframes chatUnreadPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes chatUnreadBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes chatUnreadFlash {
    0%   { background: rgba(47, 74, 97, 0.14); }
    100% { background: transparent; }
}