/* Shared soft feedback surfaces. Text stays opaque over a gently blurred surface. */
:root {
    --feedback-surface: rgba(248, 250, 255, .88);
    --feedback-text: #24334b;
    --feedback-border: rgba(122, 145, 180, .25);
    --feedback-shadow: 0 8px 28px rgba(36, 51, 75, .10);
    --feedback-accent: #446bba;
    --help-surface: rgba(248, 250, 255, .82);
    --help-border: rgba(122, 145, 180, .20);
    --help-shadow: 0 4px 16px rgba(36, 51, 75, .08);
}

body.theme-dark {
    --feedback-surface: rgba(24, 35, 53, .90);
    --feedback-text: #e3eaf5;
    --feedback-border: rgba(155, 177, 210, .23);
    --feedback-shadow: 0 8px 28px rgba(0, 8, 24, .20);
    --feedback-accent: #9cbcf4;
    --help-surface: rgba(24, 35, 53, .88);
    --help-border: rgba(155, 177, 210, .20);
    --help-shadow: 0 4px 16px rgba(0, 8, 24, .18);
}

.feedback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .75rem;
    color: var(--feedback-tone, var(--feedback-accent));
    background: color-mix(in srgb, currentColor 9%, transparent);
    vertical-align: middle;
}
.feedback-icon svg { display: block; width: 1.35rem; height: 1.35rem; overflow: visible; }
.feedback-icon-motion {
    transform-origin: center;
    animation: feedback-icon-hint 1.6s ease-in-out 2;
}
.feedback-icon[data-feedback-kind="success"] { --feedback-tone: #2b8165; }
.feedback-icon[data-feedback-kind="warning"] { --feedback-tone: #956515; }
.feedback-icon[data-feedback-kind="danger"] { --feedback-tone: #b45262; }
body.theme-dark .feedback-icon[data-feedback-kind="success"] { --feedback-tone: #8bceb4; }
body.theme-dark .feedback-icon[data-feedback-kind="warning"] { --feedback-tone: #e1c17c; }
body.theme-dark .feedback-icon[data-feedback-kind="danger"] { --feedback-tone: #eca0ae; }
.feedback-icon[data-feedback-kind="success"] .feedback-icon-motion,
.feedback-icon[data-feedback-kind="share"] .feedback-icon-motion {
    stroke-dasharray: 1;
    animation-name: feedback-icon-draw;
}
.feedback-icon[data-feedback-kind="launch"] .feedback-icon-motion { animation-name: feedback-icon-launch; }
.feedback-icon[data-feedback-kind="settings"] .feedback-icon-motion { animation-name: feedback-icon-adjust; }
.feedback-icon[data-feedback-kind="danger"] .feedback-icon-motion { animation-name: feedback-icon-attention; }
.feedback-icon[data-feedback-kind="help"] .feedback-icon-motion { animation-name: feedback-icon-glow; }

@keyframes feedback-icon-hint { 0%, 65%, 100% { transform: translateY(0); } 30% { transform: translateY(-1.5px); } }
@keyframes feedback-icon-draw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes feedback-icon-launch { 0%, 70%, 100% { transform: translate(0, 0); } 35% { transform: translate(1px, -1px); } }
@keyframes feedback-icon-adjust { 0%, 70%, 100% { transform: translateX(0); } 35% { transform: translateX(2px); } }
@keyframes feedback-icon-attention { 0%, 50%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 35% { transform: rotate(5deg); } }
@keyframes feedback-icon-glow { 0%, 100% { opacity: .65; } 40%, 70% { opacity: 1; } }
@keyframes feedback-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.notify-dialog {
    min-height: 0;
    background: var(--feedback-surface);
    color: var(--feedback-text);
    border-color: var(--feedback-border);
    border-radius: 16px;
    box-shadow: var(--feedback-shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.notify-dialog-header {
    background: transparent;
    border-color: var(--feedback-border);
    padding-block: .6rem;
}
.notify-dialog-title { font-weight: 600; font-size: .85rem; }
.notify-dialog-body { gap: .5rem; }
.notify-dialog .notify-item {
    background: color-mix(in srgb, var(--feedback-surface) 64%, transparent);
    color: var(--feedback-text);
    border: 1px solid var(--feedback-border);
    border-radius: 12px;
    box-shadow: none;
    padding: .8rem;
    animation: feedback-enter .22s ease-out;
}
.notify-dialog .notify-item-text { line-height: 1.5; align-self: center; }
.notify-dialog .notify-item > .btn-close { flex: 0 0 auto; opacity: .65; margin-top: .2rem; }
.notify-dialog .notify-item > .btn-close:hover { opacity: 1; }
.notify-dialog .notify-item[data-closing="true"] { animation: none; }

@media (hover: none), (pointer: coarse) {
    .notify-dialog .btn-close {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 0;
        background-position: center;
        background-size: 12px;
    }
    .notify-dialog .notify-item > .btn-close { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-icon-motion,
    .notify-dialog .notify-item { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    :root, body.theme-dark { --feedback-surface: var(--bg-elevated); }
    .notify-dialog, .notify-dialog .notify-item { background: var(--feedback-surface); backdrop-filter: none; }
}
@media (forced-colors: active) {
    .feedback-icon { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
    .notify-dialog, .notify-dialog .notify-item { background: Canvas; color: CanvasText; border-color: CanvasText; }
}