/* CommentComposer — shared B/I/U token toolbar + emoji popover editor.
   Lives outside Blazor scoped CSS (like comments.css / wysiwyg-markers.css)
   so it styles the same way regardless of which page hosts the component;
   both App.Web's App.razor and App (MAUI)'s index.html link it alongside
   comments.css. */

.comment-composer {
    display: flex;
    flex-direction: column;
    gap: var(--os-space-sm);
    min-width: 0;
    position: relative;
}

.comment-composer__quote-chip {
    min-width: 0;
}

.comment-composer__toolbar {
    display: flex;
    align-items: center;
    gap: var(--os-space-xs);
}

.comment-composer__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--os-radius-sm);
    background: transparent;
    color: var(--os-text-secondary);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1;
    transition: background var(--os-transition-fast, 120ms);
}

.comment-composer__tool:hover:not(:disabled) {
    background: var(--os-surface-variant);
    color: var(--os-text-primary);
}

.comment-composer__tool:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.comment-composer__underline-glyph {
    text-decoration: underline;
}

.comment-composer__tool-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.comment-composer__input {
    width: 100%;
    min-width: 0;
    resize: vertical;
    font-family: inherit;
}

.comment-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-sm);
    min-width: 0;
}

.comment-composer__count {
    color: var(--os-text-tertiary);
    font-size: var(--os-font-size-sm, 0.8125rem);
    flex: 0 0 auto;
}

.comment-composer__actions {
    display: flex;
    align-items: center;
    gap: var(--os-space-sm);
    min-width: 0;
}

/* Transparent full-viewport button behind the emoji popover — clicking
   anywhere outside the popover closes it, no click-outside JS needed. */
.comment-composer__emoji-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: none;
    background: transparent;
    padding: 0;
    cursor: default;
}

.comment-composer__emoji-pop {
    position: absolute;
    /* Open UPWARD (bottom edge pinned to the top of the composer), not
       downward. The composer is always a bottom-anchored input — the reader's
       fixed comments panel puts it flush against the viewport bottom, and the
       story-detail box sits at the end of the comment list — so a `top: 100%`
       downward popover spilled below the viewport/page and only its top edge
       peeked through. There is always content (the comment list) above the
       composer, so upward has room. The emoji button lives in the toolbar at
       the top of the composer, so the picker appears right above it. */
    bottom: 100%;
    left: 0;
    z-index: 41;
    margin-bottom: var(--os-space-xs);
    padding: var(--os-space-sm);
    width: min(320px, 100%);
    max-width: 100%;
    /* Never let the picker itself exceed the space above the composer — if it
       ever would (a shorter viewport, or a longer emoji set), scroll inside it
       instead of clipping. */
    max-height: min(60vh, 320px);
    overflow-y: auto;
    background: var(--os-glass-bg-strong);
    border: 1px solid var(--os-glass-border);
    border-radius: var(--os-radius-lg);
    box-shadow: var(--os-glass-highlight), var(--os-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
}

@supports (backdrop-filter: blur(1px)) {
    .comment-composer__emoji-pop {
        backdrop-filter: blur(var(--os-glass-blur, 16px));
        -webkit-backdrop-filter: blur(var(--os-glass-blur, 16px));
    }
}

.comment-composer__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: var(--os-radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    transition: background var(--os-transition-fast, 120ms);
}

.comment-composer__emoji:hover {
    background: var(--os-surface-variant);
}