#dialog-leader label { display:block; }
#dialog-leader input { display:block; }
#dialog-leader input.text { margin-bottom:12px; width:95%; padding: .4em; }
#dialog-leader textarea.text { margin-bottom:12px; width:95%; height:120px; padding: .4em; }
#dialog-leader fieldset { padding:0; border:0; margin-top:10px; }
#dialog-leader h1 { font-size: 1.2em; margin: .6em 0; }

/* Native <dialog> replacement for jQuery UI Dialog (Rupor) */
.native-dialog {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 0;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    color: #2c3e50;
    font-family: inherit;
}
.native-dialog::backdrop {
    background: rgba(0,0,0,0.5);
}
.native-dialog-title {
    margin: 0;
    padding: 14px 20px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
    border-radius: 8px 8px 0 0;
}
.native-dialog .validateTips {
    margin: 0;
    padding: 12px 20px 0;
    min-height: 1.4em;
    color: #555;
    line-height: 1.4;
}
.native-dialog .validateTips.is-highlight {
    background: #fff8d0;
    color: #8a6d3b;
}
.native-dialog fieldset {
    margin: 0 20px;
}
.native-dialog-actions {
    margin: 0;
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #eee;
    background: #fafbfc;
    border-radius: 0 0 8px 8px;
    margin-top: 14px;
}
.native-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 16px;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.native-btn:focus-visible {
    outline: 2px solid #1a6fc4;
    outline-offset: 2px;
}
.native-btn-secondary {
    background: #fff;
    border-color: #ccc;
    color: #333;
}
.native-btn-secondary:hover {
    background: #f5f5f5;
}
.native-btn-danger {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.native-btn-danger:hover {
    background: #a93226;
    border-color: #a93226;
}
#dialog-leader textarea.text.is-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 1px #c0392b inset;
}

/* Rupor hover popover — CSS-only implementation.
   Each <div class="lead-wrapper"> holds an anchor and its popover as
   siblings. The wrapper is position: relative (so the absolutely-
   positioned popover can anchor to it) and the popover shows on
   :hover of the wrapper. No JS popover engine needed — the
   transition is owned entirely by CSS, the anchor/popover pair is
   markup-stable, and hover-tolerance comes for free from CSS :hover
   (the popover stays visible while the cursor is on it, not just
   while it is on the anchor). */
.lead-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.lead-anchor {
    position: relative;
    display: inline-block;
    line-height: 0; /* no extra baseline gap inside the anchor box */
}

/* Popover — hidden by default, appears directly below the anchor.
   left: 50% + translateX(-50%) centres it on the avatar. The
   transform is also used by the show/hide transition, so we keep
   both translates on a single property to avoid overriding each
   other across hover/leave. */
.lead-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1000;
    min-width: 180px;
    max-width: 280px;
    margin-top: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: #2c3e50;
    font: 13px/1.45 'Open Sans', Verdana, Arial, sans-serif;
    line-height: 1.45;
    word-wrap: break-word;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.lead-wrapper:hover .lead-popover,
.lead-popover:hover {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* Up-pointing arrow centred on the anchor — pure CSS, no extra DOM.
   bottom: 100% puts the arrow's bottom edge flush with the popover's
   top; the rotate(45deg) tilts a square into a diamond that pokes up. */
.lead-popover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: -1px;          /* overlap the border so the seam vanishes */
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 1px solid #e1e4e8;
    border-left: 1px solid #e1e4e8;
    transform: translateX(-50%) rotate(45deg);
    transform-origin: 50% 50%;
}

/* Author name sits on top of the popover as a header; message body
   below it with a hairline divider. inline-block on the name so the
   border-bottom spans the message width (it was previously wrapping
   weirdly when the card was narrower than the name). */
.lead-popover-name {
    display: block;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 13px;
    color: #1a6fc4;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lead-popover-msg {
    font-size: 13px;
    line-height: 1.45;
    color: #2c3e50;
    word-wrap: break-word;
    white-space: normal;          /* allow msg to wrap inside the card */
}

/* Inline smiles from set_smiles() — set_smiles emits bare <img> tags
   (no class), so target both the class-less form and the .smile-inline
   class used elsewhere in the messenger / comments chrome. */
.lead-popover img {
    height: 1.2em;
    width: auto;
    vertical-align: -2px;
}

/* ===== Delete button (×) on .lead-anchor =====
   The <form> is rendered server-side for admins / the post author only.
   It's hidden by default and revealed on :hover of the anchor, with a
   small CSS tooltip that says "Вы желаете удалить?". Clicking the × no
   longer submits the form directly — JS intercepts the submit and shows
   a confirm dialog (see #confirm-dialog and rupor.js:showConfirm). */

/* The form is the positioning context for both the button and the
   tooltip. The form sits in the top-right corner of the avatar and
   doesn't affect layout (it's absolutely positioned inside the
   relatively-positioned .lead-anchor). */
.lead-anchor form {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 10;
    margin: 0;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.lead-anchor:hover form,
.lead-anchor form:hover {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* The round red × button. Replaces the previous inline-stripped
   Bootstrap .btn-danger — modern flat gradient matching the site's
   design language (red 400 → red 800 with soft shadow). */
.lead-anchor .leader-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef5350 0%, #c62828 100%);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(198, 40, 40, 0.4);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.lead-anchor .leader-delete-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(198, 40, 40, 0.55);
}
.lead-anchor .leader-delete-btn:focus {
    outline: none;
    box-shadow: 0 4px 10px rgba(198, 40, 40, 0.55), 0 0 0 3px rgba(239, 83, 80, 0.35);
}

/* Tooltip "Вы желаете удалить?" — small dark pill to the LEFT of the
   × button. Reveals when the × is hovered (NOT when the avatar is
   hovered — the tooltip is specifically about the action, not the
   avatar). The arrow points right (back at the ×). */
.leader-delete-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%) translateX(4px);
    background: #2c3e50;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 12;
}
.leader-delete-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #2c3e50;
}
.lead-anchor form:hover .leader-delete-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ===== Popover polish: backdrop blur for "smooth fade" of background =====
   backdrop-filter applies a blur to whatever is BEHIND the popover,
   which gives it a frosted-glass look. Combined with a slightly
   translucent white background, this is the "плавное затухание фона"
   effect requested by the user — the popover content reads cleanly
   while the background softly fades. */
.lead-popover {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.92);
}

/* ===== Confirm dialog (destructive) =====
   Reuses .native-dialog / .native-btn-* from above. Just adds a red
   title color so users immediately recognise this is a destructive
   action (parity with macOS / iOS destructive dialog styling). */
.native-dialog.danger .native-dialog-title {
    color: #c62828;
    border-bottom-color: rgba(198, 40, 40, 0.15);
}
.native-dialog .confirm-message {
    margin: 16px 20px 4px;
    color: #555;
    line-height: 1.5;
    font-size: 14px;
}