.et-article-engagement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 48px;
    border-top: 1px solid var(--et-blog-line);
    border-bottom: 1px solid var(--et-blog-line);
    padding: 15px 2px;
    font-family: var(--et-blog-sans);
}
.et-article-engagement > div { display: flex; gap: 8px; align-items: center; }
.et-article-engagement form { margin: 0; }
.et-article-engagement button,
.et-article-engagement a {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--et-blog-muted);
    padding: 8px 12px;
    font: 600 12px/1 var(--et-blog-sans);
    text-decoration: none;
    cursor: pointer;
}
.et-article-engagement button:hover,
.et-article-engagement a:hover { background: var(--et-blog-soft); color: var(--et-blog-ink); }
.et-article-engagement button > span,
.et-article-engagement a > span { font-size: 22px; line-height: 1; }
.et-article-engagement button > b,
.et-article-engagement a > b { color: var(--et-blog-ink); font-size: 12px; }
.et-article-engagement button > i,
.et-article-engagement a > i { font-style: normal; }
.et-article-engagement .is-liked { color: #d83c64; }
.et-article-engagement .is-liked > b { color: #d83c64; }

.et-response-shell[hidden] { display: none !important; }
.et-response-shell { position: fixed; z-index: 1900; inset: 0; font-family: var(--et-blog-sans); }
.et-response-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(5, 10, 16, .46);
    opacity: 0;
    cursor: default;
    backdrop-filter: blur(2px);
    transition: opacity .2s ease;
}
.et-response-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: min(470px, 100vw);
    height: 100dvh;
    overflow: hidden;
    border-left: 1px solid var(--et-blog-line);
    outline: 0;
    background: var(--et-blog-card);
    color: var(--et-blog-ink);
    box-shadow: -25px 0 70px rgba(0, 0, 0, .19);
    transform: translateX(102%);
    transition: transform .22s ease;
}
.et-response-shell.is-open .et-response-backdrop { opacity: 1; }
.et-response-shell.is-open .et-response-drawer { transform: translateX(0); }
body.et-responses-open { overflow: hidden; }

.et-response-drawer-head {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    border-bottom: 1px solid var(--et-blog-line) !important;
    background: color-mix(in srgb, var(--et-blog-card) 95%, transparent) !important;
    padding: 17px 22px !important;
    color: var(--et-blog-ink) !important;
    backdrop-filter: blur(14px);
}
.et-response-drawer-head > div { display: grid; gap: 4px; }
.et-response-drawer-head span { color: var(--et-blog-accent-dark); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.et-response-drawer-head h2 { margin: 0; font: 800 22px/1.1 var(--et-blog-sans); letter-spacing: -.025em; }
.et-response-drawer-head h2 b { color: var(--et-blog-muted); font-size: 13px; }
.et-response-drawer-head > button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--et-blog-soft); color: var(--et-blog-ink); font-size: 25px; cursor: pointer; }
.et-response-drawer-body { height: 100%; overflow-y: auto; padding: 108px 22px 42px; overscroll-behavior: contain; }

.et-response-composer {
    display: grid;
    gap: 9px;
    margin: 0 0 26px;
    border: 1px solid var(--et-blog-line);
    border-radius: 14px;
    background: var(--et-blog-card);
    padding: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}
.et-response-composer > label { font-size: 12px; font-weight: 850; }
.et-response-composer textarea,
.et-response-reply-form textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--et-blog-ink);
    padding: 3px 0;
    font: 400 15px/1.55 var(--et-blog-sans);
    box-sizing: border-box;
}
.et-response-composer textarea::placeholder,
.et-response-reply-form textarea::placeholder { color: var(--et-blog-muted); }
.et-response-composer > footer,
.et-response-reply-form > div {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--et-blog-muted) !important;
}
.et-response-composer > footer > span { margin-right: auto; font-size: 10px; }
.et-response-composer > footer button,
.et-response-reply-form > div button {
    border: 0;
    border-radius: 999px;
    background: var(--et-blog-accent);
    color: #171717;
    padding: 9px 15px;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}
.et-response-reply-form > div button:first-child { background: transparent; color: var(--et-blog-muted); }
.et-response-composer button:disabled,
.et-response button:disabled { opacity: .55; cursor: wait; }

.et-response-signin { margin-bottom: 26px; border: 1px solid var(--et-blog-line); border-radius: 14px; background: var(--et-blog-soft); padding: 20px; text-align: center; }
.et-response-signin > span { color: #d83c64; font-size: 25px; }
.et-response-signin h3 { margin: 7px 0 4px; font-size: 17px; }
.et-response-signin p { margin: 0 auto 15px; color: var(--et-blog-muted); font-size: 12px; line-height: 1.55; }
.et-response-signin a { display: inline-flex; border-radius: 999px; background: var(--et-blog-accent); color: #171717; padding: 9px 14px; font-size: 11px; font-weight: 850; text-decoration: none; }

.et-response-list { display: grid; }
.et-response-empty { display: grid; place-items: center; min-height: 220px; color: var(--et-blog-muted); text-align: center; }
.et-response-empty[hidden] { display: none; }
.et-response-empty > span { font-size: 33px; }
.et-response-empty h3 { margin: 8px 0 4px; color: var(--et-blog-ink); font-size: 18px; }
.et-response-empty p { margin: 0; font-size: 12px; }
.et-response-thread { border-top: 1px solid var(--et-blog-line); }
.et-response-thread:last-child { border-bottom: 1px solid var(--et-blog-line); }
.et-response { padding: 22px 0; }
.et-response > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
}
.et-response > header > a { display: flex; gap: 10px; align-items: center; color: var(--et-blog-ink); text-decoration: none; }
.et-response > header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.et-response > header a > span { display: grid; gap: 2px; }
.et-response > header b { font-size: 12px; }
.et-response > header time { color: var(--et-blog-muted); font-size: 10px; }
.et-response > header form { margin: 0; }
.et-response > header form button { border: 0; background: transparent; color: var(--et-blog-muted); padding: 3px 0 8px 12px; letter-spacing: 1px; cursor: pointer; }
.et-response > p { margin: 13px 0; color: var(--et-blog-ink); font-size: 14px; line-height: 1.62; white-space: pre-line; overflow-wrap: anywhere; }
.et-response > footer {
    display: flex !important;
    align-items: center;
    gap: 15px;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--et-blog-muted) !important;
}
.et-response > footer form { margin: 0; }
.et-response > footer button,
.et-response > footer a { display: inline-flex; gap: 5px; align-items: center; border: 0; background: transparent; color: var(--et-blog-muted); padding: 4px 0; font: 650 10px/1 var(--et-blog-sans); text-decoration: none; cursor: pointer; }
.et-response > footer button:hover,
.et-response > footer a:hover { color: var(--et-blog-ink); }
.et-response > footer button > span,
.et-response > footer a > span { font-size: 18px; }
.et-response > footer button.is-liked { color: #d83c64; }
.et-response > footer button > b,
.et-response > footer a > b { font-size: 10px; }
.et-response-reply-form { margin: 10px 0 0 48px; border-left: 2px solid var(--et-blog-accent); background: var(--et-blog-soft); padding: 11px 12px; }
.et-response-reply-form[hidden] { display: none; }
.et-response-reply-form textarea { min-height: 70px; font-size: 13px; }
.et-response-replies { margin-left: 46px; border-left: 2px solid var(--et-blog-line); padding-left: 16px; }
.et-response-replies[hidden] { display: none; }
.et-response.is-reply { padding: 17px 0; }
.et-response.is-reply > header img { width: 31px; height: 31px; }
.et-response.is-reply > p { font-size: 13px; }

@media (max-width: 640px) {
    .et-article-engagement { margin-top: 38px; padding: 12px 0; }
    .et-article-engagement button,
    .et-article-engagement a { min-height: 38px; padding: 7px 9px; }
    .et-article-engagement button > i,
    .et-article-engagement a > i { display: none; }
    .et-response-drawer {
        top: auto;
        bottom: 0;
        width: 100%;
        height: min(92dvh, 840px);
        border-top: 1px solid var(--et-blog-line);
        border-left: 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(103%);
    }
    .et-response-shell.is-open .et-response-drawer { transform: translateY(0); }
    .et-response-drawer-head { min-height: 76px; border-radius: 20px 20px 0 0; padding: 14px 18px !important; }
    .et-response-drawer-head h2 { font-size: 20px; }
    .et-response-drawer-body { padding: 94px 18px max(34px, env(safe-area-inset-bottom)); }
    .et-response-replies { margin-left: 22px; padding-left: 13px; }
    .et-response-reply-form { margin-left: 0; }
}

@media print {
    .et-article-engagement,
    .et-response-shell { display: none !important; }
}


.et-response header .adb-blog-avatar { width:38px;height:38px; }
/* Isolate the EpisodeTime response controls from AsianDB's general form reset. */
body.adb-blog .et-response-composer { display:grid; gap:9px; margin:0 0 26px; border:1px solid var(--et-blog-line)!important; border-radius:14px!important; background:var(--et-blog-card)!important; padding:15px!important; box-shadow:0 8px 24px rgba(0,0,0,.05)!important; }
body.adb-blog .et-response-composer textarea,body.adb-blog .et-response-reply-form textarea { min-height:92px; border:1px solid var(--et-blog-line)!important; border-radius:6px!important; background:var(--et-blog-card)!important; padding:10px!important; color:var(--et-blog-ink); }
body.adb-blog .et-response-composer footer button { border-radius:5px!important; }
body.adb-blog .et-response-signin { border:1px solid var(--et-blog-line)!important; border-radius:14px!important; }
body.adb-blog .et-response-shell :focus-visible { outline:2px solid var(--et-blog-accent-dark); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){.et-response-drawer,.et-response-backdrop{transition:none}}