.comments-drawer { --bs-offcanvas-width: 480px; color: var(--text-primary); }
.comment-filters[hidden], .comment-filter-toggle[hidden] { display: none !important; }
.comment-filter-toggle { white-space: nowrap; }
.call-comments { min-width: 0; color: var(--text-primary, #333); }
.comment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-tabs { display: flex; flex-wrap: wrap; }
.comment-card { overflow-wrap: anywhere; }
.comment-card-top { display: flex; }
.comment-reason-badge { display: inline-block; border-radius: 6px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-meta { line-height: 1.6; }
.comment-empty { text-align: center; padding: 28px 12px; color: var(--text-secondary); }
.comment-empty i { display: block; font-size: 1.8rem; color: var(--primary-color); margin-bottom: 10px; }
.comment-position-row { flex-wrap: wrap; }
.comment-feedback:not(:empty) { border-radius: 8px; background: #f5f3ff; overflow-wrap: anywhere; }
.comment-feedback.is-error { color: #912323; background: #fff0f0; }
.comments-inline { min-width: 0; }
.comment-launch .comment-count { color: inherit; font-size: .875rem; font-weight: 600; }
.comment-launch, .comment-launch:hover, .comment-launch:focus, .comment-launch:active { color: #6366F1; background: transparent; border: 0; box-shadow: none; }
.comment-launch { display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; }
.comment-launch.has-comments { color: #EF4444; }
/* Stay out of body's flex layout even before Popper sets its inline position.
   Otherwise inserting a tooltip briefly narrows the page, wraps the filters
   and makes browser scroll anchoring move the comment button away. */
.comment-tooltip { position: fixed; top: 0; left: 0; pointer-events: none; overflow-anchor: none; }
.comment-launch[hidden] { display: none; }
.comment-page-title { gap: 12px; flex-wrap: wrap; }
.comment-header-link { flex-shrink: 0; }
.comments-inline { scroll-margin-top: 16px; }
.comments-inline:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }
.comment-reason-settings .reason-order-duplicate { color: #b42318; font-size: .75rem; display: block; }
@media (max-width: 991.98px) {
    .comments-inline { scroll-margin-top: 8px; }
}

.dialog-card .col-md-3:has(.comment-launch) { flex-wrap: wrap; gap: 6px; }
.comment-card details summary { list-style: none; cursor: pointer; border-radius: 6px; padding: 4px 8px; }
.comment-card details .btn { display: block; width: 100%; text-align: left; }
.comment-reason-settings td:first-child { overflow-wrap: anywhere; min-width: 130px; }
.comment-reason-settings .table { font-size: .875rem; }
.call-comments :focus-visible, .comment-launch:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
@media (max-width: 767.98px) {
    .comments-drawer { --bs-offcanvas-width: 100vw; }
    .call-comments .btn, .comment-launch, .comments-drawer .btn-close, .comment-reason-settings .btn { min-height: 44px; min-width: 44px; }
    .dialog-card .btn.btn-sm.comment-launch { min-width: 44px; min-height: 44px; }
    .comment-reason-settings .table-responsive { overflow: visible; }
    .comment-reason-settings .table-responsive::after { display: none; }
    .comment-reason-settings .table { min-width: 0 !important; }
    .comment-reason-settings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .comment-reason-settings tbody { display: block; }
    .comment-reason-settings tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
    .comment-reason-settings tbody td { border: 0; padding: 0; min-width: 0; }
    .comment-reason-settings tbody td:first-child { grid-column: 1 / -1; font-weight: 500; margin-bottom: 8px; }
    .comment-reason-settings tbody td:nth-child(2)::before { content: 'Порядок: '; color: var(--text-secondary); }
    .comment-reason-settings tbody td:last-child { grid-column: 1 / -1; margin-top: 6px; }
    .comment-reason-settings tbody td:last-child .btn { width: 100%; }
}

/* Reference layout: scoped to the shared comments component and its drawer. */
.comments-drawer, .call-comments {
    --comment-accent: #7042e8;
    --comment-muted: #7c819a;
    --comment-line: #efedf6;
    --comment-soft: #f7f5fa;
    --comment-lilac: #f0eaff;
}
.comments-drawer.offcanvas-end { top: 16px; right: 16px; bottom: 16px; height: auto; border: 1px solid #e6e2ef; border-radius: 18px; box-shadow: var(--box-shadow, 0 16px 48px #30224d24); overflow: hidden; }
.comments-drawer .offcanvas-header { padding: 20px; gap: 12px; border: 0; flex-shrink: 0; align-items: flex-start; }
.comment-call-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px 12px; min-width: 0; flex: 1; }
.comment-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #e8efff; color: #526ef4; font-size: 12px; font-weight: 500; }
.comment-avatar[data-tone="1"] { background: var(--comment-lilac); color: var(--comment-accent); }
.comment-avatar[data-tone="2"] { background: #e6f4ef; color: #277762; }
.comment-operator-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--comment-lilac); color: var(--comment-accent); }
.comment-call-identity { min-width: 0; }
.comments-drawer .offcanvas-title { font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.comment-call-identity p { margin: 2px 0 0; color: var(--comment-muted); font-size: 13px; overflow-wrap: anywhere; }
.comment-call-badges { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.comment-call-badges span { padding: 5px 9px; background: var(--comment-soft); border-radius: 7px; color: #465475; font-size: 12px; }
.comments-drawer .btn-close { flex-shrink: 0; width: 32px; height: 32px; padding: 0; margin: -4px -4px 0 0; background-size: 9px; opacity: .5; }
.comment-audio-unavailable { margin: 0; padding: 12px 20px; color: var(--comment-muted); font-size: 12px; }
.comments-drawer .offcanvas-body { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.call-comments { display: flex; flex-direction: column; min-height: 0; width: 100%; font-size: 13px; }
.comment-toolbar { flex-shrink: 0; margin: 0; border-bottom: 1px solid var(--comment-line); padding: 0 20px; min-height: 46px; }
.comment-tabs { gap: 20px; }
.comment-tabs .btn { padding: 13px 0; border: 0; border-radius: 0; background: none; color: var(--comment-muted); font-size: 14px; }
.comment-tabs .btn.active { color: #171323; background: none; box-shadow: inset 0 -2px var(--comment-accent); font-weight: 500; }
.comment-tabs [data-local-count] { color: var(--comment-muted); font-weight: 400; }
.comment-toolbar > .btn { color: var(--comment-muted); background: transparent; border: 0; }
.comment-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7b0c2 transparent; padding: 16px 20px 0; flex: 1 1 auto; }
.comments-inline .card-body { padding: 0; }
.comments-inline .comment-scroll { max-height: 420px; flex: 0 1 auto; }
.comments-is-empty .comment-scroll { display: none; }
.comment-card { display: flex; align-items: flex-start; gap: 10px; border: 0; padding: 0; margin: 0 0 14px; background: none; border-radius: 0; }
.comment-card-content { flex: 1; min-width: 0; }
.comment-card-top { align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 5px; }
.comment-author { color: #171323; font-weight: 600; font-size: 12px; overflow-wrap: anywhere; }
.comment-meta { color: var(--comment-muted); font-size: 11px; }
.comment-bubble { border-radius: 0 12px 12px 12px; background: var(--comment-soft); padding: 11px 13px; }
.comment-badges { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.comment-reason-badge { font-size: 11px; font-weight: 500; line-height: 1.5; padding: 3px 8px; background: #eee6ff; color: #7042b9; overflow-wrap: anywhere; }
.comment-reason-badge[data-tone="1"] { background: #fff1d9; color: #956019; }
.comment-reason-badge[data-tone="2"] { background: #e2f2fa; color: #226594; }
.comment-timestamp, .comment-anchor, .comment-anchor-chip { border: 0; border-radius: 6px; background: var(--comment-lilac); color: var(--comment-accent); font-size: 11px; }
.comment-timestamp { padding: 3px 8px; font-family: ui-monospace, monospace; }
.comment-body { margin: 8px 0 0; font-size: 13px; line-height: 1.65; }
.comment-card-actions { display: flex; gap: 12px; align-items: center; margin-top: 3px; }
.comment-edit { padding: 2px 0; border: 0; background: transparent; color: var(--comment-muted); font-size: 12px; }
.comment-card-actions details { position: relative; }
.comment-card-actions details summary { padding: 2px 8px; color: var(--comment-muted); }
.comment-card-actions details[open] { min-width: 0; }
.comment-card-actions details .btn { position: absolute; z-index: 2; top: 100%; right: 0; min-width: 100px; background: white; box-shadow: 0 4px 16px #30224d20; }
.comment-feedback { flex-shrink: 0; }
.comment-feedback:empty { display: none; }
.comment-feedback:not(:empty) { margin: 10px 20px 0; padding: 8px 10px; font-size: 12px; }
.comment-composer, .call-comments.comments-is-empty .comment-composer { flex-shrink: 0; margin: 0; padding: 16px 20px 20px; border: 0; border-top: 1px solid var(--comment-line); }
.call-comments.comments-is-empty .comment-composer { border-top: 0; }
.comment-reason-picker { display: block; margin: 0; padding: 10px 12px 0; border: 1px solid #e6dff0; border-bottom: 0; border-radius: 12px 12px 0 0; }
.comment-reason-picker .form-select { width: 100%; max-width: 100%; margin: 0; padding: 5px 30px 5px 8px; font-size: 12px; background-color: var(--comment-soft); color: #615579; border: 0; border-radius: 6px; text-overflow: ellipsis; }
.comment-text-label { display: block; margin: 0; border-inline: 1px solid #e6dff0; }
.comment-composer textarea.form-control { resize: none; min-height: 90px; max-height: 180px; border: 0; border-radius: 0; padding: 12px 14px; margin: 0; font-size: 13px; box-shadow: none; }
.comment-composer textarea::placeholder { color: #93909e; }
.comment-composer-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid #e6dff0; border-top: 0; border-radius: 0 0 12px 12px; padding: 6px 10px 10px; }
.comment-position-row { display: flex; margin: 0; margin-right: auto; gap: 0; }
.comment-anchor { padding: 6px 8px; }
.comment-anchor-chip { display: inline-flex; align-items: center; padding-left: 8px; white-space: nowrap; }
.comment-anchor-chip .btn { padding: 4px 6px; min-width: 26px; color: inherit; font-size: 16px; }
.comment-length { color: var(--comment-muted); font: 10px/1.4 ui-monospace, monospace; white-space: nowrap; }
.comment-composer-footer > .btn-primary { background: var(--comment-accent); border-color: var(--comment-accent); border-radius: 9px; font-size: 13px; padding: 9px 12px; }
.comment-cancel { color: var(--comment-muted); font-size: 12px; margin-top: 6px; }
.call-comments [data-comment-readonly] { padding: 14px 20px; margin: 0; }
.call-comments [hidden], .comments-drawer [hidden] { display: none !important; }
.comments-drawer :focus-visible, .call-comments :focus-visible { outline: 2px solid var(--comment-accent); outline-offset: 2px; }
/* These controls use a soft keyboard-only background instead of focus rings. */
.call-comments .comment-reason-picker .form-select:focus,
.call-comments .comment-composer textarea.form-control:focus { outline: none !important; box-shadow: none !important; }
.comments-keyboard-navigation .call-comments .comment-reason-picker .form-select:focus,
.comments-keyboard-navigation .call-comments .comment-composer textarea.form-control:focus { background-color: #eee7fb; }
@keyframes comment-marker-flash {
    0%, 100% { background-color: var(--comment-soft); }
    25% { background-color: #e3d5ff; }
}
.comment-bubble.is-marker-highlighted { animation: comment-marker-flash 2s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .comment-bubble.is-marker-highlighted { animation: none; background-color: #e3d5ff; }
}
@media (max-width: 767.98px) {
    .comments-drawer.offcanvas-end { inset: 0 0 0 auto; height: 100%; height: 100dvh; width: 100%; border: 0; border-radius: 0; }
    .comments-drawer .offcanvas-header { padding: 16px; }
    .comments-drawer .offcanvas-body { padding: 0; }
    .comment-toolbar { padding-inline: 16px; }
    .comment-scroll { padding: 16px 16px 0; }
    .comment-composer, .call-comments.comments-is-empty .comment-composer { padding: 12px 14px 16px; }
    .comment-tabs .btn { padding-inline: 0; }
    .comment-anchor-chip .btn { min-width: 44px; }
    .call-comments summary { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .comment-reason-picker .form-select { min-height: 44px; }
    .comment-composer textarea.form-control { min-height: 76px; }
    .comment-composer-footer { gap: 6px; }
    .comment-composer-footer .comment-length { margin-right: auto; }
}
@media (max-width: 359.98px) {
    .comment-composer-footer .comment-position-row { flex-basis: 100%; }
}

@media (max-height: 600px) {
    .comments-drawer .offcanvas-body { display: block; overflow-y: auto; }
    .comments-drawer .comment-scroll { max-height: 200px; flex: none; }
}