/* ==========================================================================
   Цитирование комментариев
   ========================================================================== */

/* Панель действий в шапке комментария
   ------------------------------------------------------------------------ */

.comment-header .comment__citation-actions {
    --cca-bg: rgba(0, 0, 0, .05);
    --cca-border: rgba(0, 0, 0, .1);
    --cca-fg: #6b7078;
    --cca-fg-hover: #1f2225;
    --cca-hover-bg: rgba(0, 0, 0, .08);

    display: inline-flex;
    gap: 1px;
    margin-left: 6px;
    padding: 2px;
    border: 1px solid var(--cca-border);
    border-radius: 6px;
    background: var(--cca-bg);
    vertical-align: middle;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s, visibility .12s;
}

.comment-body:hover .comment__citation-actions,
.comment-header .comment__citation-actions:focus-within {
    opacity: 1;
    visibility: visible;
}

@media (prefers-color-scheme: dark) {
    .comment-header .comment__citation-actions {
        --cca-bg: rgba(255, 255, 255, .06);
        --cca-border: rgba(255, 255, 255, .1);
        --cca-fg: #a8acb3;
        --cca-fg-hover: #f2f3f5;
        --cca-hover-bg: rgba(255, 255, 255, .12);
    }
}

.comment-header .comment__citation-actions__item,
.comment-header .comment__citation-actions__item:hover,
.comment-header .comment__citation-actions__item:focus {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--cca-fg);
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.comment-header .comment__citation-actions__item:hover {
    background: var(--cca-hover-bg);
    color: var(--cca-fg-hover);
}

.comment-header .comment__citation-actions__item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.comment-header .comment__citation-actions__item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.comment-header .comment__citation-actions__item .dashicons-format-quote {
    transform: scaleX(-1);
}

/* Блок цитаты
   ------------------------------------------------------------------------ */

.comment-quote {
    position: relative;
    margin: 10px 0;
    padding: 10px 14px 10px 16px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-left: 3px solid #b0b4b9;
    border-radius: 6px;
    background: rgba(0, 0, 0, .03);
    line-height: 1.5;
}

.comment-quote__meta {
    margin: 0 0 2px;
    font-size: .95em;
    color: rgba(0, 0, 0, .5);
}

.comment-quote__date {
    margin-left: 8px;
    color: rgba(0, 0, 0, .4);
}

.comment-quote p {
    margin: 0 0 4px;
    word-break: break-word;
}

.comment-quote p:last-child {
    margin-bottom: 0;
}

html[theme="dark"] .comment-quote {
    border-color: rgba(255, 255, 255, .12);
    border-left-color: #c8cbd0;
    background: rgba(255, 255, 255, .05);
}

html[theme="dark"] .comment-quote__meta {
    color: rgba(255, 255, 255, .55);
}

html[theme="dark"] .comment-quote__date {
    color: rgba(255, 255, 255, .45);
}

/* При сохранении у строки автора вырезается класс — узнаём её по дате.
   Отдельными правилами, чтобы браузеры без :has() не отбросили основные. */
.comment-quote > p:has(> .comment-quote__date) {
    margin: 0 0 2px;
    font-size: .95em;
    color: rgba(0, 0, 0, .5);
}

html[theme="dark"] .comment-quote > p:has(> .comment-quote__date) {
    color: rgba(255, 255, 255, .55);
}

.comment-quote[data-comment-id] {
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.comment-quote[data-comment-id]:hover {
    background: rgba(0, 0, 0, .06);
    border-left-color: #8a8f96;
}

html[theme="dark"] .comment-quote[data-comment-id]:hover {
    background: rgba(255, 255, 255, .09);
}

.comment-quote--missing {
    animation: comment-quote-shake .4s;
}

@keyframes comment-quote-shake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.comment-body.comment-quote-target,
#comment-1.comment-quote-target {
    animation: comment-quote-highlight 1.6s ease-out;
}

@keyframes comment-quote-highlight {
    from { background: rgba(120, 160, 240, .18); }
    to   { background: transparent; }
}
/* Плашка «Цитировать» у выделенного текста
   ------------------------------------------------------------------------ */

.comment-citation-popover,
.comment-citation-popover:hover,
.comment-citation-popover:focus {
    position: absolute;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #1f2225;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    color: #fff;
    font: 500 14px/1.2 Inter, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* На телефонах — крупнее, под палец */
@media (pointer: coarse) {
    .comment-citation-popover,
    .comment-citation-popover:hover,
    .comment-citation-popover:focus {
        padding: 10px 18px 10px 14px;
        border-radius: 999px;
        font-size: 16px;
    }
}

/* Если над выделением нет места — внизу экрана, над панелью браузера */
.comment-citation-popover.is-docked,
.comment-citation-popover.is-docked:hover,
.comment-citation-popover.is-docked:focus {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.comment-citation-popover[hidden] {
    display: none;
}

.comment-citation-popover:hover {
    background: #34383d;
}

.comment-citation-popover:focus-visible {
    outline: 2px solid #2f6bff;
    outline-offset: 2px;
}

.comment-citation-popover .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    transform: scaleX(-1);
}

html[theme="dark"] .comment-citation-popover {
    background: #f2f3f5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    color: #1f2225;
}

html[theme="dark"] .comment-citation-popover:hover {
    background: #dcdee2;
}

/* Подсказка у неактивной кнопки «Цитировать» в панели редактора
   ------------------------------------------------------------------------ */

.comment-citation-hint {
    position: absolute;
    z-index: 1000;
    box-sizing: border-box;
    max-width: min(320px, calc(100vw - 32px));
    padding: 8px 12px;
    border-radius: 8px;
    background: #1f2225;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    color: #fff;
    font: 400 14px/1.4 Inter, sans-serif;
    text-align: left;
    pointer-events: none;
}

.comment-citation-hint[hidden] {
    display: none;
}

html[theme="dark"] .comment-citation-hint {
    background: #f2f3f5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    color: #1f2225;
}