/* ticket-extras.css — citations, réactions et actions sur les messages de ticket (scripts/ticket-extras.js).
   Sélecteurs préfixés par :is(#ticket-widget, #chat) : le widget client remet tout à zéro avec
   `#ticket-widget * { all: unset }`, seule une spécificité d'ID passe par-dessus. Le widget a lui
   aussi un #chat : ce qui diffère entre widget et page staff passe par .tx-widget / .tx-admin,
   posées par ticket-extras.js (opts.variant). */

:is(#ticket-widget, #chat) {
    --tx-accent: var(--chat-primary, var(--primary-color, #38b1ed));
    --tx-surface: var(--chat-secondary, var(--secondary-bg, #1e293b));
    --tx-border: var(--chat-border, var(--border-color, rgba(255, 255, 255, .12)));
    --tx-muted: var(--chat-text-muted, var(--text-muted, #9ca3af));
}

:is(#ticket-widget, #chat) .tx-msg { position: relative; }

/* ── Citation (au-dessus du texte) ── */
:is(#ticket-widget, #chat) .tx-quote {
    display: flex; flex-direction: column; gap: 1px; box-sizing: border-box;
    max-width: 100%; min-width: 0; padding: 5px 9px; margin: 0 0 4px;
    border-inline-start: 3px solid var(--tx-accent); border-radius: 8px;
    background: rgba(255, 255, 255, .06); color: inherit;
    font-size: 11.5px; line-height: 1.3; text-align: start; cursor: pointer;
}
:is(#ticket-widget, #chat) .tx-quote:hover { background: rgba(255, 255, 255, .1); }
:is(#ticket-widget, #chat) .tx-quote:disabled { cursor: default; font-style: italic; }
:is(#ticket-widget, #chat) .tx-quote-name { display: block; font-weight: 600; color: var(--tx-accent); }
:is(#ticket-widget, #chat) .tx-quote-text {
    display: block; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tx-muted);
}
:is(#ticket-widget, #chat) .tx-admin.support .tx-quote { background: rgba(0, 0, 0, .18); border-inline-start-color: rgba(255, 255, 255, .7); }
:is(#ticket-widget, #chat) .tx-admin.support :is(.tx-quote-name, .tx-quote-text) { color: rgba(255, 255, 255, .92); }

/* ── Boutons « répondre / réagir » : au survol, coin intérieur de la bulle ── */
:is(#ticket-widget, #chat) .tx-actions {
    position: absolute; top: -12px; z-index: 3; display: flex; gap: 2px; padding: 2px;
    border-radius: 999px; background: var(--tx-surface); border: 1px solid var(--tx-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
:is(#ticket-widget, #chat) :is(.tx-widget.user, .tx-admin.support) > .tx-actions { left: 4px; }
:is(#ticket-widget, #chat) :is(.tx-widget.support, .tx-admin.user) > .tx-actions { right: 4px; }
:is(#ticket-widget, #chat) .tx-msg:hover > .tx-actions,
:is(#ticket-widget, #chat) .tx-actions:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: none) {
    :is(#ticket-widget, #chat) .tx-actions { opacity: .8; pointer-events: auto; }
}
:is(#ticket-widget, #chat) .tx-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--tx-muted); background: transparent;
}
:is(#ticket-widget, #chat) .tx-act:hover, :is(#ticket-widget, #chat) .tx-act:focus-visible { color: var(--tx-accent); background: rgba(255, 255, 255, .08); outline: none; }
:is(#ticket-widget, #chat) .tx-act svg { width: 14px; height: 14px; min-width: 14px; min-height: 14px; }

/* ── Choix d'une réaction ── */
:is(#ticket-widget, #chat) .tx-picker {
    position: absolute; top: calc(100% + 4px); z-index: 4; display: flex; gap: 2px; padding: 4px;
    border-radius: 999px; background: var(--tx-surface); border: 1px solid var(--tx-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
:is(#ticket-widget, #chat) :is(.tx-widget.user, .tx-admin.support) .tx-picker { left: 0; }
:is(#ticket-widget, #chat) :is(.tx-widget.support, .tx-admin.user) .tx-picker { right: 0; }
:is(#ticket-widget, #chat) .tx-picker-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--chat-text, var(--text-secondary, #e5e7eb)); background: transparent;
    transition: transform .12s ease, background .12s ease;
}
:is(#ticket-widget, #chat) .tx-picker-btn:hover, :is(#ticket-widget, #chat) .tx-picker-btn:focus-visible { transform: scale(1.15); background: rgba(255, 255, 255, .08); color: var(--tx-accent); outline: none; }
:is(#ticket-widget, #chat) .tx-picker-btn svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }

/* ── Réactions sous la bulle ── */
:is(#ticket-widget, #chat) .tx-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
:is(#ticket-widget, #chat) .tx-chip {
    display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px;
    border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 600; line-height: 1;
    color: var(--chat-text, var(--text-secondary, #e5e7eb));
    background: rgba(255, 255, 255, .06); border: 1px solid var(--tx-border);
}
:is(#ticket-widget, #chat) .tx-chip:hover { border-color: var(--tx-accent); }
:is(#ticket-widget, #chat) .tx-chip.is-mine { border-color: var(--tx-accent); background: color-mix(in srgb, var(--tx-accent) 18%, transparent); }
:is(#ticket-widget, #chat) .tx-chip:disabled { cursor: default; }
:is(#ticket-widget, #chat) .tx-chip svg { width: 13px; height: 13px; min-width: 13px; min-height: 13px; }
:is(#ticket-widget, #chat) .tx-admin.support .tx-chip { color: #fff; background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .3); }

/* ── Surlignage du message cité ── */
@keyframes tx-flash { 0%, 60% { box-shadow: 0 0 0 2px var(--tx-accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
:is(#ticket-widget, #chat) .message.tx-flash { animation: tx-flash 1.6s ease-out; border-radius: 12px; }

/* ── Bandeau « Replying to » au-dessus du champ de saisie ── */
:is(#ticket-widget, #chat, .tx-scope) .tx-composer:not(.is-open), .tx-composer:not(.is-open) { display: none; }
#ticket-widget .tx-composer.is-open, .tx-composer.is-open {
    display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    margin: 0 10px 6px; padding: 6px 6px 6px 10px; border-radius: 8px;
    border-inline-start: 3px solid var(--tx-accent, var(--primary-color, #38b1ed));
    background: rgba(255, 255, 255, .06); font-size: 12px; line-height: 1.3;
}
#ticket-widget .tx-composer-txt, .tx-composer-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#ticket-widget .tx-composer-label, .tx-composer-label { display: block; font-size: 10.5px; color: var(--tx-muted, var(--text-muted, #9ca3af)); }
#ticket-widget .tx-composer .tx-quote-name, .tx-composer .tx-quote-name { display: block; font-weight: 600; color: var(--tx-accent, var(--primary-color, #38b1ed)); }
#ticket-widget .tx-composer .tx-quote-text, .tx-composer .tx-quote-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tx-muted, var(--text-muted, #9ca3af)); }
#ticket-widget .tx-composer-x, .tx-composer-x {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer; background: transparent; border: 0;
    color: var(--tx-muted, var(--text-muted, #9ca3af));
}
#ticket-widget .tx-composer-x:hover, .tx-composer-x:hover { background: rgba(255, 255, 255, .1); }
#ticket-widget .tx-composer-x svg, .tx-composer-x svg { width: 14px; height: 14px; min-width: 14px; min-height: 14px; }

@media (prefers-reduced-motion: reduce) {
    :is(#ticket-widget, #chat) .message.tx-flash { animation: none; box-shadow: 0 0 0 2px var(--tx-accent); }
}