/* ════════════════════════════════════════
   AEK Hub Comments — v1.0
   Αυτόνομο στυλ (δεν εξαρτάται από το theme) στα χρώματα ΑΕΚ.
════════════════════════════════════════ */
.aekc-comments-wrap {
    --aekc-gold: #F5C400;
    --aekc-black: #0A0A0A;
    --aekc-surface: #191919;
    --aekc-surface2: #212121;
    --aekc-border: #2C2C2C;
    --aekc-muted: #8A8A8A;
    --aekc-white: #F5F5F5;
    --aekc-font: 'Roboto Slab', Georgia, serif;
    --aekc-ui: 'Roboto', Arial, sans-serif;

    box-sizing: border-box;
    max-width: 100%;
    margin: 32px 0;
    padding: 22px;
    background: var(--aekc-surface);
    border: 1px solid var(--aekc-border);
    border-radius: 12px;
    font-family: var(--aekc-ui);
    color: var(--aekc-white);
}
.aekc-comments-wrap *,
.aekc-comments-wrap *::before,
.aekc-comments-wrap *::after { box-sizing: border-box; }

.aekc-comments-heading {
    font-family: var(--aekc-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--aekc-white);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--aekc-border);
    position: relative;
}
.aekc-comments-heading::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--aekc-gold);
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -2px;
}

.aekc-no-comments,
.aekc-comments-closed {
    color: var(--aekc-muted);
    font-size: 14px;
    margin: 0 0 18px;
}

/* ── COMMENT LIST ── */
.aekc-comment-list,
.aekc-comment-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aekc-comment-list > .aekc-comment:not(:last-child) {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--aekc-border);
}
.aekc-comment-children {
    margin: 14px 0 0 20px;
    padding-left: 16px;
    border-left: 2px solid var(--aekc-border);
}
.aekc-comment-children > .aekc-comment:not(:last-child) { margin-bottom: 14px; }

.aekc-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.aekc-comment-avatar { flex-shrink: 0; line-height: 0; }
.aekc-avatar-svg { border-radius: 50%; display: block; }
.aekc-comment-body { flex: 1; min-width: 0; }
.aekc-comment-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.aekc-comment-author {
    font-family: var(--aekc-font);
    font-weight: 700;
    font-size: 14px;
    color: var(--aekc-gold);
}
.aekc-comment-date {
    font-size: 12px;
    color: var(--aekc-muted);
}
.aekc-comment-text {
    font-size: 14px;
    line-height: 1.65;
    color: #DADADA;
    word-wrap: break-word;
}
.aekc-comment-text p { margin: 0 0 10px; }
.aekc-comment-text p:last-child { margin-bottom: 0; }
.aekc-comment-text a { color: var(--aekc-gold); text-decoration: underline; }

.aekc-comment-actions { margin-top: 6px; }
.aekc-reply-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--aekc-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--aekc-muted);
    cursor: pointer;
    transition: color .15s;
}
.aekc-reply-btn:hover { color: var(--aekc-gold); }

.aekc-comment.aekc-just-posted {
    animation: aekc-flash 1.6s ease-out;
}
@keyframes aekc-flash {
    0% { background: rgba(245,196,0,.14); }
    100% { background: transparent; }
}

/* ── FORM ── */
.aekc-comment-form-wrap { margin-top: 22px; }
.aekc-reply-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--aekc-surface2);
    border-left: 3px solid var(--aekc-gold);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--aekc-muted);
}
/* Ρητή τήρηση του HTML5 [hidden] — ένα ρητό display:flex παραπάνω αλλιώς
   το ακυρώνει (author CSS νικάει πάντα το UA [hidden]{display:none}). */
.aekc-reply-notice[hidden] { display: none; }
.aekc-reply-notice strong { color: var(--aekc-white); }
#aekc-reply-cancel {
    background: none;
    border: none;
    color: var(--aekc-gold);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.aekc-hp-wrap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.aekc-form-row { margin-bottom: 10px; }
#aekc-author,
#aekc-comment-content {
    width: 100%;
    background: var(--aekc-surface2);
    border: 1px solid var(--aekc-border);
    border-radius: 8px;
    padding: 11px 13px;
    font-family: var(--aekc-ui);
    font-size: 14px;
    color: var(--aekc-white);
    resize: vertical;
    transition: border-color .15s;
}
#aekc-author::placeholder,
#aekc-comment-content::placeholder { color: #6B6B6B; }
#aekc-author:focus,
#aekc-comment-content:focus {
    outline: none;
    border-color: var(--aekc-gold);
}

.aekc-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.aekc-form-msg {
    font-size: 12.5px;
    color: var(--aekc-muted);
    flex: 1;
}
.aekc-form-msg.is-error { color: #E15554; }
.aekc-form-msg.is-pending { color: var(--aekc-gold); }

.aekc-submit-btn {
    background: var(--aekc-gold);
    color: var(--aekc-black);
    font-family: var(--aekc-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    border: none;
    border-radius: 999px;
    padding: 10px 24px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    flex-shrink: 0;
}
.aekc-submit-btn:hover { opacity: .88; }
.aekc-submit-btn:active { transform: scale(.97); }
.aekc-submit-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    .aekc-comment-children { margin-left: 10px; padding-left: 10px; }
}

/* ════════════════════════════════════════
   FLOATING TRIGGERS + DRAWER
   z-index πάνω από το sticky header του theme (z-index:9999).
════════════════════════════════════════ */
:root {
    --aekc-z: 100000;
}

/* ── Mobile: sticky κάτω μπάρα (κρυφή σε desktop) ── */
.aekc-mobile-bar {
    display: none;
    position: fixed;
    left: 0; right: 0;
    /* Πάνω από το υπάρχον .bottom-nav του theme (60px + safe-area) — δεν
       το καλύπτει, κάθεται σαν δεύτερη σειρά από πάνω του. */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: var(--aekc-z);
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #0A0A0A;
    color: #F5C400;
    border-top: 2px solid #F5C400;
    border-radius: 0;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 -4px 18px rgba(0,0,0,.4);
}
.aekc-mobile-bar svg { width: 19px; height: 19px; flex-shrink: 0; }
.aekc-mobile-bar-chevron { font-size: 9px; opacity: .6; margin-left: 2px; }

/* ── Desktop: live-chat launcher κάτω-δεξιά (κρυφός σε mobile) ── */
.aekc-chat-launcher {
    display: none;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: var(--aekc-z);
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #F5C400;
    color: #0A0A0A;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
    transition: transform .15s, box-shadow .15s;
}
.aekc-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.aekc-chat-launcher svg { width: 23px; height: 23px; }
.aekc-chat-launcher-count {
    position: absolute;
    top: -4px; right: -4px;
    background: #0A0A0A;
    color: #F5C400;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #191919;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Desktop: inline πρόσκληση μέσα στο κείμενο του άρθρου, πάνω-πάνω
   (σε mobile κρύβεται — η κάτω μπάρα καλύπτει ήδη αυτόν τον ρόλο) ── */
.aekc-inline-cta {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 22px;
    padding: 13px 16px;
    background: var(--aekc-surface, #191919);
    border: 1px solid var(--aekc-border, #2C2C2C);
    border-left: 3px solid var(--aekc-gold, #F5C400);
    border-radius: 0 10px 10px 0;
    color: var(--aekc-white, #F5F5F5);
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.aekc-inline-cta:hover { background: var(--aekc-surface2, #212121); border-color: var(--aekc-gold, #F5C400); }
.aekc-inline-cta svg { width: 19px; height: 19px; color: var(--aekc-gold, #F5C400); flex-shrink: 0; }
.aekc-inline-cta-arrow { margin-left: auto; color: var(--aekc-gold, #F5C400); flex-shrink: 0; }

/* Εμφάνιση κατάλληλου trigger ανά πλάτος */
@media (max-width: 767px) {
    .aekc-mobile-bar[data-ready] { display: flex; }
}
@media (min-width: 768px) {
    .aekc-chat-launcher[data-ready] { display: flex; }
    .aekc-inline-cta[data-ready] { display: flex; }
}

/* ── Drawer ──
   Σκόπιμα ΔΕΝ βασιζόμαστε σε display:none/block στο wrapper: το display
   δεν κάνει animate, οπότε το πρώτο άνοιγμα θα "πηδούσε" χωρίς transition.
   Αντί γι' αυτό backdrop/panel μένουν πάντα στο DOM με pointer-events:none
   όταν κλειστά — έτσι ΔΕΝ μπλοκάρουν κλικ στην υπόλοιπη σελίδα ενώ είναι
   αόρατα, και animate κανονικά όταν ανοίγουν. */
.aekc-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--aekc-z);
    background: rgba(0,0,0,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.aekc-drawer.is-open .aekc-drawer-backdrop { opacity: 1; pointer-events: auto; }

.aekc-drawer-panel {
    position: fixed;
    z-index: calc(var(--aekc-z) + 1);
    background: #14120A;
    border: 1px solid #2C2C2C;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
.aekc-drawer.is-open .aekc-drawer-panel { pointer-events: auto; }

/* Mobile: bottom-sheet, γεμίζει το κάτω μέρος της οθόνης */
@media (max-width: 767px) {
    .aekc-drawer-panel {
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .aekc-drawer.is-open .aekc-drawer-panel { transform: translateY(0); }
}

/* Desktop: live-chat panel κάτω-δεξιά, χωρίς backdrop (η σελίδα μένει διαδραστική) */
@media (min-width: 768px) {
    .aekc-drawer-backdrop { display: none; }
    .aekc-drawer-panel {
        right: 22px;
        bottom: 22px;
        width: 400px;
        max-width: calc(100vw - 44px);
        height: min(640px, 78vh);
        border-radius: 16px;
        opacity: 0;
        transform: translateY(16px) scale(.97);
        transform-origin: bottom right;
        transition: opacity .2s ease, transform .2s ease;
        pointer-events: none;
    }
    .aekc-drawer.is-open .aekc-drawer-panel {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
}

.aekc-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #2C2C2C;
    flex-shrink: 0;
}
.aekc-drawer-title {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0;
    flex-shrink: 0;
}
.aekc-drawer-sort {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.aekc-sort-btn {
    background: none;
    border: none;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #6B6B6B;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
}
.aekc-sort-btn.is-active { background: rgba(245,196,0,.15); color: #F5C400; }
.aekc-drawer-close {
    background: none;
    border: none;
    color: #8A8A8A;
    font-size: 22px;
    line-height: 1;
    padding: 0 0 0 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.aekc-drawer-close:hover { color: #F5C400; }

.aekc-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Το #comments μπαίνει μέσα στο drawer-body — αφαιρούμε το δικό του
   "κουτί" (margin/background/border) ώστε να ενσωματωθεί καθαρά. */
.aekc-drawer-body .aekc-comments-wrap {
    margin: 0;
    padding: 14px 18px 18px;
    background: transparent;
    border: none;
    border-radius: 0;
}
.aekc-drawer-body .aekc-comments-heading { display: none; } /* ο τίτλος είναι ήδη στο drawer header */
.aekc-drawer-body .aekc-comment-form-wrap {
    position: sticky;
    bottom: 0;
    background: #14120A;
    margin: 14px -18px -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #2C2C2C;
}

body.aekc-drawer-lock { overflow: hidden; }

@media (max-width: 600px) {
    .aekc-comments-wrap { padding: 16px; }
    .aekc-mobile-bar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
}