/*
 * ByCarl Core — Support CSS
 * Styles spécifiques à l'onglet Support (tickets + thread).
 */

/* ── Badges statuts tickets ──────────────────────────────── */
.bycarl-badge--status-open        { background: #EEF2FF; color: #3730A3; }
.bycarl-badge--status-in_progress { background: #FEF9C3; color: #854D0E; }
.bycarl-badge--status-resolved    { background: #DCFCE7; color: #14532D; }
.bycarl-badge--status-closed      { background: #F3F4F6; color: #374151; }

.bycarl-badge--priority-low     { background: #F0FDF4; color: #15803D; }
.bycarl-badge--priority-normal  { background: #EEF2FF; color: #3730A3; }
.bycarl-badge--priority-high    { background: #FEF3C7; color: #92400E; }
.bycarl-badge--priority-urgent  { background: #FEE2E2; color: #991B1B; }

/* ── Cards tickets ───────────────────────────────────────── */
.bycarl-tickets-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bycarl-ticket-card {
    border: 1px solid var(--bycarl-border);
    border-left: 3px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius);
    padding: 1rem 1.25rem;
    background: var(--bycarl-white);
    transition: box-shadow var(--bycarl-transition), border-color var(--bycarl-transition),
                transform var(--bycarl-transition);
    cursor: pointer;
}
.bycarl-ticket-card:hover {
    border-color: var(--bycarl-primary);
    border-left-color: var(--bycarl-primary);
    box-shadow: var(--bycarl-shadow-md);
    transform: translateY(-1px);
}

/* Couleur de la bordure gauche selon statut */
.bycarl-ticket-card[data-status="open"]        { border-left-color: #4F6AF0; }
.bycarl-ticket-card[data-status="in_progress"] { border-left-color: #F59E0B; }
.bycarl-ticket-card[data-status="resolved"]    { border-left-color: #10B981; }
.bycarl-ticket-card[data-status="closed"]      { border-left-color: #D1D5DB; }

.bycarl-ticket-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.bycarl-ticket-card__meta {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
}
.bycarl-ticket-card__id,
.bycarl-ticket-card__date {
    font-size: .75rem;
    color: var(--bycarl-text-muted);
    white-space: nowrap;
}
.bycarl-ticket-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.bycarl-ticket-card__subject {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bycarl-text);
}

/* ── Thread de ticket ────────────────────────────────────── */
.bycarl-ticket-thread-wrap { margin-top: 1.25rem; }

.bycarl-thread {
    border: 1px solid var(--bycarl-border);
    border-radius: var(--bycarl-radius);
    background: var(--bycarl-white);
    box-shadow: var(--bycarl-shadow);
    overflow: hidden;
}
.bycarl-thread__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--bycarl-border);
    background: var(--bycarl-bg-2);
    flex-wrap: wrap;
}
.bycarl-thread__title-block {
    flex: 1 1 0;
    min-width: 0;
}
.bycarl-thread__title {
    margin: 0 0 .375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bycarl-text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.bycarl-thread__badges {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
}
.bycarl-thread__id {
    font-size: .75rem;
    color: var(--bycarl-text-muted);
}

/* Fil de messages */
.bycarl-thread__messages {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 480px;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.bycarl-thread__empty {
    text-align: center;
    color: var(--bycarl-text-muted);
    padding: 2rem 0;
    margin: 0;
    font-size: .9rem;
    font-style: italic;
}

/* Bulles */
.bycarl-bubble {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    max-width: 80%;
}
.bycarl-bubble--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.bycarl-bubble--theirs { align-self: flex-start; }

.bycarl-bubble__avatar { flex-shrink: 0; }
.bycarl-bubble__avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.bycarl-bubble__avatar--mine img {
    border: 2px solid var(--bycarl-primary);
}

.bycarl-bubble__content {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.bycarl-bubble__author {
    font-size: .72rem;
    font-weight: 600;
    color: var(--bycarl-text-muted);
    margin-left: .25rem;
}
.bycarl-bubble__text {
    padding: .5625rem .875rem;
    border-radius: 1rem;
    font-size: .875rem;
    line-height: 1.55;
    word-break: break-word;
}
.bycarl-bubble--theirs .bycarl-bubble__text {
    background: var(--bycarl-bg-2);
    border: 1px solid var(--bycarl-border);
    border-bottom-left-radius: .25rem;
    color: var(--bycarl-text);
}
.bycarl-bubble--mine .bycarl-bubble__text {
    background: var(--bycarl-primary);
    color: #fff;
    border-bottom-right-radius: .25rem;
}
.bycarl-bubble__time {
    font-size: .68rem;
    color: var(--bycarl-text-muted);
    padding: 0 .25rem;
    opacity: .8;
}
.bycarl-bubble--mine .bycarl-bubble__time { text-align: right; }

/* Formulaire réponse */
.bycarl-thread__reply {
    border-top: 1px solid var(--bycarl-border);
    padding: 1rem 1.375rem;
    background: var(--bycarl-bg-2);
}
.bycarl-thread__reply-input { margin-bottom: .75rem; }
.bycarl-thread__reply-actions { display: flex; justify-content: flex-end; }

/* Notice ticket clos */
.bycarl-thread__closed-notice {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.375rem;
    background: #F0FDF4;
    border-top: 1px solid #BBF7D0;
    color: #065F46;
    font-size: .875rem;
    border-radius: 0 0 var(--bycarl-radius) var(--bycarl-radius);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .bycarl-bubble { max-width: 92%; }
    .bycarl-thread__messages { padding: .875rem; }
    .bycarl-ticket-card__body { flex-direction: column; align-items: flex-start; }
}