/**
 * Amigo Threads — extras: keyboard-shortcut modal + key-focus + new-posts pill
 */

/* Keyboard focus ring on the active feed item (J/K) */
.amg-comm .amg-comm-item.is-keyfocus > .amg-comm-card,
.amg-comm .amg-comm-item.is-keyfocus {
    outline: 2px solid var(--accent, #ffba00);
    outline-offset: -2px;
    border-radius: 12px;
}

/* Shortcuts modal — built dynamically, scoped to .amg-comm */
#amg-comm-shortcuts-modal { display: block; position: fixed; inset: 0; z-index: 100200; }
#amg-comm-shortcuts-modal .amg-comm-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .45);
    animation: amg-fade-in .15s ease-out;
}
#amg-comm-shortcuts-modal .amg-comm-modal__content {
    position: relative;
    max-width: 380px;
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .2);
    animation: amg-modal-pop .18s ease-out;
}
#amg-comm-shortcuts-modal .amg-comm-modal__close {
    position: absolute; top: 8px; right: 12px;
    background: transparent; border: none;
    font-size: 28px; line-height: 1; color: #666; cursor: pointer;
}
#amg-comm-shortcuts-modal .amg-comm-modal__title {
    margin: 0 0 16px; font-size: 18px; font-weight: 700;
}
.amg-comm-kbd-list { display: flex; flex-direction: column; gap: 8px; }
.amg-comm-kbd-row { display: flex; align-items: center; gap: 12px; }
.amg-comm-kbd {
    display: inline-block; min-width: 32px;
    padding: 4px 8px;
    font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    color: #111;
}
.amg-comm-kbd-row span { font-size: 14px; color: #374151; }

@keyframes amg-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes amg-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(.96) }
    to   { opacity: 1; transform: translateY(0) scale(1) }
}

/* New-posts pill (Threads-style "X нових постів" banner) */
.amg-comm-newposts-pill {
    position: fixed;
    top: 16px; left: 50%;
    transform: translate(-50%, -120%);
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent, #ffba00);
    color: #111;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700; font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    z-index: 1500;
    opacity: 0;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.amg-comm-newposts-pill[hidden] { display: none; }
.amg-comm-newposts-pill.is-show {
    transform: translate(-50%, 0);
    opacity: 1;
}
.amg-comm-newposts-pill:hover { filter: brightness(.95); }
.amg-comm-newposts-pill:active { transform: translate(-50%, 0) scale(.98); }
.amg-comm-newposts-pill svg { display: block; }

/* Make room below sticky header on desktop */
@media (min-width: 768px) {
    .amg-comm-newposts-pill { top: 80px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .amg-comm-newposts-pill { transition: opacity .15s ease; transform: translate(-50%, 0); }
    #amg-comm-shortcuts-modal .amg-comm-modal__overlay,
    #amg-comm-shortcuts-modal .amg-comm-modal__content { animation: none; }
}