/* =============================================================================
   Comments Anywhere – Comment Embed Widget
   Renders comments inline (not as a floating dialog).
   Shares comment-item styles with comment-widget.css.
============================================================================= */

/* ── Container ──────────────────────────────────────────────────────────── */
.ce-embed-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.ce-comment-embed {
    /* CSS custom properties – fallback to global design vars, overridable via inline styles */
    --ce-accent:            var(--ce-global-accent, #2271b1);
    --ce-embed-bg:          var(--ce-global-bg, #ffffff);
    --ce-embed-text:        var(--ce-global-text, #1d2327);
    --ce-embed-radius:      var(--ce-global-radius, 12px);
    --ce-submit-bg:         var(--ce-global-submit-bg, var(--ce-global-accent, #2271b1));
    --ce-submit-hover-bg:   var(--ce-submit-bg);
    --ce-submit-text:       var(--ce-global-submit-txt, #ffffff);
    --ce-submit-hover-text: var(--ce-submit-text);
    --ce-submit-radius:     var(--ce-global-submit-rad, 8px);
    --ce-item-bg:           var(--ce-global-card-bg, rgba(0, 0, 0, 0.035));
    --ce-item-own-bg:       var(--ce-accent-alpha-07, rgba(34, 113, 177, 0.07));
    --ce-item-reply-bg:     var(--ce-global-item-reply-bg, rgba(0, 0, 0, 0.025));
    --ce-reply-border:      var(--ce-global-reply-border, rgba(0, 0, 0, 0.1));

    background: var(--ce-embed-bg);
    color: var(--ce-embed-text);
    border-radius: var(--ce-embed-radius);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ce-comment-embed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ce-comment-embed__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    margin: 0;
}

.ce-comment-embed__count-badge {
    font-size: 14px;
    color: var(--ce-local-meta-color, var(--ce-muted-text, #666));
    opacity: 1;
    font-weight: 400;
}

/* ── Comment list ───────────────────────────────────────────────────────── */
.ce-comment-embed__list-wrap {
    flex-shrink: 0;
}

.ce-comment-embed__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Loading / empty / error states (reuse dialog styles) */
.ce-comment-embed .ce-comment-loading,
.ce-comment-embed .ce-comment-empty {
    font-size: 13px;
    color: var(--ce-local-meta-color, var(--ce-muted-text, #666));
    opacity: 1;
    text-align: center;
    padding: 20px 0 12px;
    margin: 0;
}

.ce-comment-embed .ce-comment-error {
    font-size: 13px;
    color: var(--ce-error-text, #ef4444);
    text-align: center;
    padding: 16px 0 8px;
    margin: 0;
}

/* ── Comment items – inherit from comment-widget.css ────────────────────── */
/* .ce-comment-item, .ce-comment-item--reply, .ce-comment-item--own etc.
   are all defined in comment-widget.css and work identically here. */

/* ── User / auth bar ────────────────────────────────────────────────────── */
/* Lives inside .ce-comment-embed__form-footer-left now (next to the
   visibility toggle), not as its own row above the textarea. */
.ce-comment-embed__user-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
}

.ce-comment-embed__user-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ce-comment-embed__username {
    font-weight: 600;
}

.ce-comment-embed__wp-badge {
    font-size: 10px;
    background: #3858e9; /* WordPress brand colour – intentionally fixed */
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
}

.ce-comment-embed__logout {
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--ce-accent, #2271b1) !important;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    transition: opacity 0.15s;
}
.ce-comment-embed__logout:hover { opacity: 0.7; }

.ce-comment-embed__account-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    border-radius: 50%;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .65;
    transition: opacity .15s, background .15s;
}
.ce-comment-embed__account-btn:hover {
    opacity: 1;
    background: var(--ce-tab-hover-bg, rgba(0, 0, 0, .06));
}
.ce-comment-embed__account-btn--wp {
    color: #3858e9;
    opacity: .8;
}

.ce-comment-embed__auth-btn {
    background: none !important;
    border: 1px solid var(--ce-accent, #2271b1) !important;
    color: var(--ce-accent, #2271b1) !important;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.ce-comment-embed__auth-btn:hover {
    opacity: 0.8;
}

/* ── Write form area ────────────────────────────────────────────────────── */
.ce-comment-embed__form-wrap {
    flex-shrink: 0;
}

.ce-comment-embed__reply-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--ce-accent-alpha-08, rgba(34, 113, 177, 0.08));
    border-left: 3px solid var(--ce-accent, #2271b1);
    border-radius: 0 6px 6px 0;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--ce-accent, #2271b1);
    margin-bottom: 8px;
}

.ce-comment-embed__reply-indicator.is-visible {
    display: flex;
}

.ce-comment-embed__reply-cancel {
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.6;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    color: inherit;
    margin-left: auto;
}

.ce-comment-embed__textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--ce-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    padding: 10px 12px;
    font-size: var(--ce-input-font-size, 13px);
    font-family: var(--ce-input-font-family, inherit);
    line-height: 1.5;
    color: inherit;
    background: var(--ce-input-bg, rgba(0, 0, 0, 0.03));
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    display: block;
    min-height: 80px;
}

.ce-comment-embed__textarea:focus {
    outline: none;
    border-color: var(--ce-accent, #2271b1);
    box-shadow: 0 0 0 3px var(--ce-accent-alpha-12, rgba(34, 113, 177, 0.12));
}

/* Honeypot */
.ce-comment-embed__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.ce-comment-embed__form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ce-comment-embed__form-footer-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Visibility dropdown (icon button + popup menu) ───────────────────────
   Uses .ce-comment-embed__account-btn for the toggle's round icon-button
   look, so it reads as one consistent control group with the account icon. */
.ce-comment-embed__vis-dropdown {
    position: relative;
}

.ce-comment-embed__vis-toggle svg { display: block; }

.ce-comment-embed__vis-menu {
    /* [hidden] is a UA-stylesheet rule with the same specificity as this
       class selector – author CSS always wins that tie regardless of
       source order, so setting `display: flex` unconditionally here
       overrode [hidden] and kept the menu visible. Default to `none` and
       only switch to flex when the attribute is absent. */
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    /* Above the textarea/footer (which sit in normal flow) so the popup
       never renders behind them. */
    z-index: 20;
    min-width: 170px;
    /* NOTE: intentionally NOT var(--ce-embed-bg, …) – --ce-embed-bg is
       "transparent" by design (the embed has no dialog chrome of its own),
       so its fallback never kicks in (CSS var() only falls back when the
       variable is unset, not when it resolves to "transparent"). That left
       the menu itself transparent, letting the textarea/placeholder behind
       it show through. Use the opaque global dialog background instead. */
    background: var(--ce-menu-bg, var(--ce-global-bg, #ffffff));
    border: 1px solid var(--ce-border, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
    flex-direction: column;
    gap: 1px;
}

.ce-comment-embed__vis-menu:not([hidden]) {
    display: flex;
}

.ce-comment-embed__vis-option {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 7px 8px;
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.ce-comment-embed__vis-option:hover,
.ce-comment-embed__vis-option.is-active {
    background: var(--ce-tab-hover-bg, rgba(0, 0, 0, .06));
}

.ce-comment-embed__vis-option-icon {
    display: inline-flex;
    opacity: 0.7;
}

.ce-comment-embed__submit {
    background: var(--ce-submit-bg, var(--ce-accent, #2271b1)) !important;
    color: var(--ce-submit-text, #ffffff) !important;
    border: none;
    border-radius: var(--ce-submit-radius, 8px);
    padding: 9px 20px;
    font-size: var(--ce-submit-font-size, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    font-family: var(--ce-submit-font-family, inherit);
    white-space: nowrap;
}
.ce-comment-embed__submit:hover:not(:disabled) {
    background: var(--ce-submit-hover-bg, var(--ce-submit-bg, var(--ce-accent, #2271b1))) !important;
    color: var(--ce-submit-hover-text, var(--ce-submit-text, #ffffff)) !important;
    opacity: 0.85;
}
.ce-comment-embed__submit:active:not(:disabled) { transform: scale(0.97); }
.ce-comment-embed__submit:disabled              { opacity: 0.55; cursor: not-allowed; }

.ce-comment-embed__form-error {
    background: var(--ce-error-bg, rgba(239, 68, 68, 0.08));
    border-left: 3px solid var(--ce-error-text, #ef4444);
    border-radius: 0 6px 6px 0;
    padding: 7px 10px;
    font-size: 14px;
    color: var(--ce-error-text, #dc2626);
    margin-top: 8px;
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ce-comment-embed__textarea,
    .ce-comment-embed__submit {
        transition: none;
    }
}