/* Reading workspace. The quote card itself keeps its original layout. */
html.qw-ui body.qw-detail-page {
    --qw-reader-width: clamp(320px, 27vw, 400px);
    overflow-x: hidden;
    overflow-x: clip;
}
.qw-detail-workspace {
    width: 100%; min-width: 0; margin-left: 0;
    transition: width 280ms var(--qw-ease), margin-left 280ms var(--qw-ease), transform 280ms var(--qw-ease);
}
.ai-reader-open .qw-detail-workspace {
    width: calc(100% - var(--qw-reader-width) - var(--qw-reader-drag, 0px)); margin-left: calc(var(--qw-reader-width) + var(--qw-reader-drag, 0px));
}
html.qw-ui body.qw-detail-page #aiFloatContainer {
    display: block !important; position: fixed;
    left: 0 !important; top: calc(var(--qw-header-height) + 16px);
    bottom: calc(var(--qw-bottom-inset) + 16px) !important;
    width: 0; z-index: 90 !important;
}
html.qw-ui body.qw-detail-page #aiFloatBtn {
    display: flex !important; flex-direction: column; gap: 12px;
    position: absolute; left: 0; top: 30%; width: 58px; height: 152px;
    padding: 14px 8px; border: 1px solid var(--qw-line); border-left: 0;
    border-radius: 0 var(--qw-radius-panel) var(--qw-radius-panel) 0 !important;
    color: var(--qw-accent); background: var(--qw-menu-glass);
    backdrop-filter: blur(var(--qw-menu-blur)); -webkit-backdrop-filter: blur(var(--qw-menu-blur));
    box-shadow: var(--qw-shadow-float); transition: opacity 180ms, transform 180ms;
}
html.qw-ui body.qw-detail-page #aiFloatBtn:hover { transform: translateX(4px); }
html.qw-ui body.qw-detail-page.ai-reader-open #aiFloatBtn { opacity: 0; visibility: hidden; pointer-events: none; }
html.qw-ui body.qw-detail-page #aiChatWindow {
    inset: 0 auto 0 0; width: var(--qw-reader-width); height: 100%; max-height: none;
    border-radius: 0 var(--qw-radius-panel) var(--qw-radius-panel) 0;
    transform: translateX(-100%); transition: transform 280ms var(--qw-ease), opacity 180ms, visibility 180ms;
    background: var(--qw-glass); backdrop-filter: blur(var(--qw-menu-blur));
    -webkit-backdrop-filter: blur(var(--qw-menu-blur));
}
html.qw-ui body.qw-detail-page #aiChatWindow.show { transform: translateX(var(--qw-reader-drag, 0px)); }
/* Comments share the site's surfaces, spacing, type and rounded icon family. */
.qw-ui .comment-editor-label { display: block; margin: 0 0 10px; color: var(--qw-muted); }
.qw-ui .comment-text-input { display: block; width: 100%; padding: 14px 16px; min-height: 128px; resize: vertical; line-height: 1.7; }
.qw-ui .comment-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.qw-ui .comment-form-actions .char-count { margin-left: auto; }
.qw-ui .comment-upload { display: inline-flex; align-items: center; gap: 6px; }
.qw-ui .comment-login-prompt { border: 1px solid var(--qw-line); background: var(--qw-surface-soft); }
.qw-ui .comment-avatar { background: var(--qw-accent-soft); color: var(--qw-accent); box-shadow: none; }
.qw-ui .comment-user { flex-wrap: wrap; gap: 8px; }
.qw-ui .comment-item:hover .comment-avatar { transform: none; }
.qw-ui .comment-content { overflow-wrap: anywhere; }
.qw-ui .comment-content :is(blockquote,mark) { background: var(--qw-accent-soft); }
.qw-ui .comment-actions { flex-wrap: wrap; gap: 6px; }
.qw-ui .comment-action-btn.liked { color: var(--qw-accent); background: var(--qw-accent-soft); }
.qw-ui .comment-delete-btn { opacity: 1; }
.qw-ui .comment-replies { border-left: 0; padding: 12px 16px; background: var(--qw-surface-soft); border-radius: var(--qw-radius-control); }
.qw-ui .reply-form { min-width: 0; }
.qw-ui .reply-form textarea { min-width: 0; }
.qw-ui .reply-form button { border-radius: var(--qw-radius-control); background: var(--qw-accent); }
.qw-ui #commentsNotice { color: var(--qw-danger); }
.qw-ui #commentsNotice:empty { display: none; }
.qw-ui #primaryText::before,.qw-ui #primaryText::after { content: none; }

@media (max-width: 1100px) {
    .ai-reader-open .qw-detail-workspace { width: 100%; margin-left: 0; transform: translateX(calc(var(--qw-reader-width) + var(--qw-reader-drag, 0px))); }
    .ai-reader-open .qw-detail-workspace { pointer-events: none; }
}
@media (max-width: 600px) {
    html.qw-ui body.qw-detail-page { --qw-reader-width: min(360px, calc(100vw - 48px)); }
    html.qw-ui body.qw-detail-page #aiFloatContainer { top: calc(var(--qw-header-height) + 12px); bottom: calc(var(--qw-bottom-inset) + 12px) !important; }
    html.qw-ui body.qw-detail-page #aiFloatBtn { width: 48px; height: 140px; }
    .qw-ui .comments-section { padding: 20px 16px; }
    .qw-ui :is(.comment-content,.comment-actions,.comment-replies,.reply-toggle-btn,.reply-form) { margin-left: 0; }
    .qw-ui .comment-time { width: 100%; padding-left: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .qw-detail-workspace,html.qw-ui body.qw-detail-page #aiChatWindow { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.qw-ui body.qw-detail-page :is(#aiFloatBtn,#aiChatWindow) { background: var(--qw-surface); }
}

/* Side drawer: the edge grip pushes the reader back, including touch/pen gestures. */
html.qw-ui body.qw-detail-page #aiDrawerHandle {
    display: flex; align-items: center; justify-content: center; position: absolute;
    left: calc(var(--qw-reader-width) + var(--qw-reader-drag, 0px) - 1px); top: 42%;
    width: 32px; height: 100px; min-height: 44px; padding: 0; z-index: 2;
    border: 1px solid var(--qw-line); border-left: 0; border-radius: 0 16px 16px 0;
    background: var(--qw-menu-glass); color: var(--qw-accent); box-shadow: var(--qw-shadow-card);
    backdrop-filter: blur(var(--qw-menu-blur)); -webkit-backdrop-filter: blur(var(--qw-menu-blur));
    cursor: ew-resize; touch-action: pan-y; user-select: none;
    opacity: 0; visibility: hidden; transition: left 280ms var(--qw-ease), opacity 180ms, visibility 180ms;
}
html.qw-ui body.qw-detail-page.ai-reader-open #aiDrawerHandle { opacity: 1; visibility: visible; }
html.qw-ui body.qw-detail-page #aiChatWindow .ai-chat-header { touch-action: pan-y; cursor: grab; }
.ai-reader-dragging :is(.qw-detail-workspace,#aiChatWindow,#aiDrawerHandle) { transition: none !important; }

/* A shared controls row may wrap; the quote always begins below it. */
.qw-ui .quote-main-card .card-controls {
    position: absolute; inset: 1.2rem 1.5rem auto; display: flex; flex-wrap: wrap;
    align-items: flex-start; justify-content: space-between; gap: 16px 24px; z-index: 10;
}
.qw-ui .quote-main-card .card-controls :is(.card-floating-tags,.card-floating-actions) {
    position: static !important; inset: auto !important; width: auto; max-width: 100%;
    display: flex; flex-wrap: wrap; padding: 0 !important;
}
.qw-ui .quote-main-card .card-text-side { min-width: 0; padding-top: calc(var(--qw-detail-controls-bottom, 64px) + 40px); }
.qw-ui .quote-main-card .meta-item { align-items: baseline; min-width: 0; max-width: 100%; }
.qw-ui .quote-main-card .meta-label { flex: 0 0 auto; white-space: nowrap; }
.qw-ui .quote-main-card .meta-value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .qw-ui .quote-main-card .card-controls { position: relative; inset: auto; padding: 16px; }
    .qw-ui .quote-main-card .card-text-side { padding-top: 32px !important; }
}
@media (prefers-reduced-motion: reduce) { html.qw-ui body.qw-detail-page #aiDrawerHandle { transition: none; } }