/* EW Deep Search Promo — right-edge slide-out flag. v1.0.2 */

.ew-dsp {
    --ew-dsp-accent: #c0392b;
    --ew-dsp-accent-dark: #a33024;
    position: fixed;
    top: 38%;
    right: 0;
    z-index: 99990;
    display: flex;
    align-items: flex-start;
    transform: translateX(0);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 320px;
    /* The empty area left of the tab must not block clicks on the page. */
    pointer-events: none;
}

/* Pre-reveal: the whole flag (tab + panel) is parked off the right edge. */
.ew-dsp.ew-dsp--hidden {
    transform: translateX(100%);
}

/* The tab is always pinned to the right edge and visible once revealed. */
.ew-dsp__tab {
    pointer-events: auto;
    flex: 0 0 46px;
    width: 46px;
    background: var(--ew-dsp-accent);
    color: #fff;
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    box-shadow: -3px 3px 14px rgba(0, 0, 0, .22);
    font: inherit;
    /* Sits above the panel so the panel tucks behind it when collapsed. */
    position: relative;
    z-index: 2;
    order: 2;
}

.ew-dsp__tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ew-dsp__tab svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Gentle one-time attention pulse on the tab. */
.ew-dsp.ew-dsp--pulse .ew-dsp__tab {
    animation: ew-dsp-pulse 1.4s ease-in-out 2;
}

@keyframes ew-dsp-pulse {
    0%, 100% { box-shadow: -3px 3px 14px rgba(0, 0, 0, .22); }
    50%      { box-shadow: -3px 3px 0 4px rgba(192, 57, 43, .35); }
}

/* The message panel slides out to the LEFT of the tab. Collapsed = tucked behind the tab. */
.ew-dsp__panel {
    order: 1;
    pointer-events: none;
    width: 274px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-right: none;
    box-shadow: -6px 6px 22px rgba(0, 0, 0, .16);
    padding: 16px 18px 16px 16px;
    position: relative;
    z-index: 1;
    border-radius: 8px 0 0 8px;
    /* Hidden by default: pushed right (behind the tab) and faded out. */
    transform: translateX(calc(100% + 46px));
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

/* Open: panel slides into place next to the tab. */
.ew-dsp.ew-dsp--open .ew-dsp__panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.ew-dsp__close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.ew-dsp__close:hover { color: #444; }

.ew-dsp__headline {
    margin: 2px 24px 6px 0;
    font-size: 17px;
    font-weight: 800;
    color: #222;
    line-height: 1.25;
}

.ew-dsp__subline {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #555;
    line-height: 1.4;
}

.ew-dsp__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ew-dsp-accent);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 6px;
    transition: background .15s ease;
}
.ew-dsp__cta:hover { background: var(--ew-dsp-accent-dark); color: #fff; }
.ew-dsp__cta svg { width: 16px; height: 16px; }

/* Mobile: smaller footprint, kept in the upper half (clears the bottom chapter-nav widgets). */
@media (max-width: 600px) {
    .ew-dsp {
        top: 22%;
        max-width: 88vw;
    }
    .ew-dsp__panel { width: min(74vw, 260px); }
    .ew-dsp__tab { flex-basis: 42px; width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .ew-dsp, .ew-dsp__panel { transition: none; }
    .ew-dsp.ew-dsp--pulse .ew-dsp__tab { animation: none; }
}