/* ===== 临时提示 toast ===== */
.transient-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--accent);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: var(--font-compact-title);
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    z-index: 10000;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    max-width: 90vw;
}
.transient-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Preserve the existing toast placement when promoted to the native top layer. */
.transient-toast[popover] {
    top: auto;
    right: auto;
    margin: 0;
    width: max-content;
    box-sizing: border-box;
    overflow: visible;
    border: 0;
}

.transient-toast[popover].is-unchanged {
    border: 1px solid var(--border-strong);
}

.transient-toast::backdrop {
    background: transparent;
    pointer-events: none;
}

.transient-toast.is-error {
    background: var(--danger);
}

.transient-toast.is-unchanged {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
}

.transient-toast.is-dismissible {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 10px;
    pointer-events: auto;
}

.transient-toast-copy {
    min-width: 0;
}

.transient-toast-dismiss {
    display: grid;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    color: inherit;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.transient-toast-dismiss:hover {
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.transient-toast-dismiss svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.transient-toast-dismiss:focus-visible {
    box-shadow: 0 0 0 2px currentColor;
}

/* 按钮和可点击卡片不显示浏览器额外的焦点外圈；表单控件仍保留聚焦反馈。 */
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

dialog:focus,
dialog:focus-visible,
dialog[open]:focus,
dialog[open]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

dialog {
    opacity: 0;
    transform: translateY(7px) scale(.988);
    transition:
        opacity 180ms ease,
        transform 180ms cubic-bezier(.2, .72, .2, 1);
}

dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

dialog[open].is-closing {
    opacity: 0;
    transform: translateY(7px) scale(.988);
    pointer-events: none;
}

dialog::backdrop {
    opacity: 0;
    transition: opacity 180ms ease;
}

dialog[open]::backdrop {
    opacity: 1;
}

dialog[open].is-closing::backdrop {
    opacity: 0;
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: translateY(7px) scale(.988);
    }
    dialog[open]::backdrop {
        opacity: 0;
    }
}

:is(
    .font-size-menu,
    .nav-options-menu,
    .schedule-create-options,
    .account-switcher-popover,
    .mobile-search-bar
) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 140ms ease,
        transform 140ms cubic-bezier(.2, .72, .2, 1),
        display 140ms allow-discrete;
}

:is(
    .font-size-menu,
    .nav-options-menu,
    .schedule-create-options,
    .account-switcher-popover,
    .mobile-search-bar
)[hidden] {
    opacity: 0;
    transform: translateY(-4px) scale(.985);
}

@starting-style {
    :is(
        .font-size-menu,
        .nav-options-menu,
        .schedule-create-options,
        .account-switcher-popover,
        .mobile-search-bar
    ):not([hidden]) {
        opacity: 0;
        transform: translateY(-4px) scale(.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog,
    dialog::backdrop,
    :is(
        .font-size-menu,
        .nav-options-menu,
        .schedule-create-options,
        .account-switcher-popover,
        .mobile-search-bar
    ) {
        transition: none;
    }
    .health-log-layout,
    .health-log-sidebar-filter,
    .health-log-list {
        transition: none;
    }
}

/* ===== 统一按钮组件层 =====
   新页面可直接使用 button-* 类；现有类名作为兼容别名纳入同一套规则。 */
:root {
    --button-height: 36px;
    --button-height-small: 30px;
    --button-radius: var(--radius-pill);
    --button-padding: 0 14px;
    --button-padding-small: 0 10px;
    --button-font-size: var(--font-secondary);
    --button-font-size-small: var(--font-caption);
}

:is(.button-primary, .editor-primary-button) {
    display: inline-flex;
    min-height: var(--button-height);
    align-items: center;
    justify-content: center;
    padding: var(--button-padding);
    border: 1px solid var(--accent);
    border-radius: var(--button-radius);
    color: #ffffff;
    background: var(--accent);
    cursor: pointer;
    font-size: var(--button-font-size);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* 编辑弹窗中的保存/确认按钮采用紧凑尺寸，与相邻的取消按钮保持一致。 */
.editor-primary-button {
    min-height: var(--button-height-small);
    padding: var(--button-padding-small);
    font-size: var(--button-font-size-small);
}

.add-circle-button,
#metric-editor-add.add-circle-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 32px;
    padding: 0;
    border-radius: var(--radius-round) !important;
}

.add-circle-button > span {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    overflow: hidden;
    font-size: 0;
}

.add-circle-button > span::before,
.add-circle-button > span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    border-radius: var(--radius-pill);
    background: #fff;
    transform: translate(-50%, -50%);
}

.add-circle-button > span::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.editor-secondary-button.add-circle-button > span::before,
.editor-secondary-button.add-circle-button > span::after {
    background: currentColor;
}

:is(.button-secondary, .editor-secondary-button, .text-button, .source-button, .report-card-action, .schedule-edit-button, .symptom-resolve-button) {
    display: inline-flex;
    min-height: var(--button-height-small);
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-small);
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--button-font-size-small);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

:is(.button-secondary, .editor-secondary-button, .text-button, .source-button, .report-card-action, .schedule-edit-button, .symptom-resolve-button):hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.report-source-attachment {
    min-height: 0;
    padding: 5px 9px 5px 7px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-micro);
    font-weight: 400;
    opacity: 1;
    transition:
        color 0.16s ease,
        border-color 0.16s ease,
        background-color 0.16s ease;
}

.report-source-attachment:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    filter: none;
    opacity: 1;
}

.report-source-attachment::before,
.report-source-attachment > span {
    color: inherit;
    opacity: 1;
}

.report-source-attachment > span {
    line-height: 1.35;
}

.report-source-attachment::before {
    background-color: currentColor;
}

:is(.button-danger, .editor-delete-button, .editor-danger-button, .file-delete-button, .symptom-change-delete-button) {
    display: inline-flex;
    min-height: var(--button-height-small);
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-small);
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--button-font-size-small);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

:is(.button-danger, .editor-delete-button, .editor-danger-button, .file-delete-button, .symptom-change-delete-button):not(.editor-trash-button) {
    gap: 6px;
}

:is(.button-danger, .editor-delete-button, .editor-danger-button, .file-delete-button, .symptom-change-delete-button):not(.editor-trash-button)::before {
    width: 10.5px;
    height: 10.5px;
    flex: none;
    background: currentColor;
    content: "";
    -webkit-mask: url("assets/delete-icon.svg") center / contain no-repeat;
    mask: url("assets/delete-icon.svg") center / contain no-repeat;
}

:is(.button-danger, .editor-delete-button, .editor-danger-button, .file-delete-button, .symptom-change-delete-button):hover:not(:disabled) {
    border-color: var(--danger);
    color: #ffffff;
    background: var(--danger);
    filter: none;
}

:is(.button-link, .file-link, .file-name-preview-link, .file-report-link, .alert-metric-link, .alert-report-link) {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-underline-offset: 3px;
}

:is(.button-link, .file-link, .file-name-preview-link, .file-report-link, .alert-metric-link, .alert-report-link):hover:not(:disabled) {
    color: var(--accent);
    text-decoration: underline;
}

/* 文件和报告类控件使用自身的 hover 配色，避免全局亮度滤镜影响图标遮罩或文字可见性。 */
:is(.source-button, .report-card-action, .file-link, .file-name-preview-link, .file-report-link):hover:not(:disabled) {
    filter: none;
    opacity: 1;
}

:is(.button-icon, .dialog-close, .editor-trash-button, .font-size-toggle, .mobile-search-toggle, .nav-options-btn) {
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.editor-trash-button {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-round);
    place-items: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    transition:
        color 0.16s ease,
        border-color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
}

.editor-trash-button::before {
    display: block;
    width: 12px;
    height: 12px;
    background: currentColor;
    content: "";
    -webkit-mask: url("assets/delete-icon.svg") center / contain no-repeat;
    mask: url("assets/delete-icon.svg") center / contain no-repeat;
}

.editor-trash-button:hover:not(:disabled) {
    border-color: var(--danger);
    color: #ffffff;
    background: var(--danger);
}

.editor-trash-button:active:not(:disabled) {
    transform: scale(0.94);
}

.editor-trash-button:focus-visible {
    outline: none;
    box-shadow: none;
}

/* 圆形图标按钮用颜色反馈 hover，避免位移造成跳动或与相邻控件错位。 */
:is(
    .add-circle-button,
    #ai-chat-attach,
    #ai-chat-send,
    .ai-chat-scroll-latest,
    .mobile-back-to-top,
    .dialog-close,
    .editor-trash-button,
    .font-size-toggle,
    .mobile-search-toggle,
    .settings-order-actions button
):hover {
    transform: none !important;
}

#tab-overview #ai-chat-send.ai-chat-stop::before {
    width: var(--font-caption);
    height: var(--font-caption);
    border: 0;
    border-radius: 2.5px;
    background: currentColor;
    animation: none;
    -webkit-mask: none;
    mask: none;
}

#tab-overview #ai-chat-send {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

#tab-overview #ai-chat-send::before {
    position: relative;
    z-index: 2;
    opacity: 1;
}

#tab-overview #ai-chat-send::after {
    content: none;
}

#tab-overview #ai-chat-send .ai-chat-send-cloud {
    position: absolute;
    z-index: 1;
    top: 24%;
    left: 24%;
    width: 54%;
    height: 50%;
    border-radius: var(--radius-round);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.56) 0%,
        rgba(218, 255, 243, 0.31) 24%,
        rgba(168, 231, 210, 0.11) 48%,
        transparent 74%
    );
    opacity: 0;
    filter: blur(3.6px);
    pointer-events: none;
    will-change: transform, opacity;
}

#tab-overview #ai-chat-send .ai-chat-send-cloud.cloud-a {
    animation: ai-chat-send-cloud-a 10.8s ease-in-out infinite;
}

#tab-overview #ai-chat-send .ai-chat-send-cloud.cloud-b {
    width: 46%;
    height: 44%;
    background: radial-gradient(
        ellipse at center,
        rgba(235, 255, 248, 0.48) 0%,
        rgba(189, 243, 225, 0.25) 26%,
        rgba(142, 217, 192, 0.085) 51%,
        transparent 75%
    );
    animation: ai-chat-send-cloud-b 14.6s -6.2s ease-in-out infinite;
}

#tab-overview #ai-chat-send:is(:disabled, .ai-chat-stop) .ai-chat-send-cloud {
    opacity: 0;
    animation-play-state: paused;
}

@keyframes ai-chat-send-cloud-a {
    0%,
    7% {
        opacity: 0;
        transform: translate3d(-72%, -34%, 0) scale(.94);
    }
    16% {
        opacity: .82;
        transform: translate3d(-68%, -30%, 0) scale(1.03, .97);
    }
    31% {
        opacity: .55;
        transform: translate3d(-60%, -24%, 0) scale(.98, 1.04);
    }
    39%,
    47% {
        opacity: 0;
        transform: translate3d(-57%, -20%, 0) scale(1);
    }
    48% {
        opacity: 0;
        transform: translate3d(82%, 54%, 0) scale(.96);
    }
    58% {
        opacity: .74;
        transform: translate3d(78%, 50%, 0) scale(1.02, .98);
    }
    72% {
        opacity: .46;
        transform: translate3d(70%, 44%, 0) scale(.98, 1.03);
    }
    81%,
    100% {
        opacity: 0;
        transform: translate3d(66%, 40%, 0) scale(1);
    }
}

@keyframes ai-chat-send-cloud-b {
    0%,
    18% {
        opacity: 0;
        transform: translate3d(68%, -48%, 0) scale(.96);
    }
    27% {
        opacity: .68;
        transform: translate3d(64%, -43%, 0) scale(1.04, .96);
    }
    42% {
        opacity: .38;
        transform: translate3d(57%, -37%, 0) scale(.98, 1.03);
    }
    50%,
    63% {
        opacity: 0;
        transform: translate3d(53%, -34%, 0) scale(1);
    }
    64% {
        opacity: 0;
        transform: translate3d(-48%, 72%, 0) scale(.95);
    }
    74% {
        opacity: .72;
        transform: translate3d(-44%, 68%, 0) scale(1.02, .98);
    }
    87% {
        opacity: .42;
        transform: translate3d(-38%, 61%, 0) scale(.98, 1.03);
    }
    94%,
    100% {
        opacity: 0;
        transform: translate3d(-35%, 58%, 0) scale(1);
    }
}

#tab-overview #ai-chat-send .ai-chat-send-label {
    position: relative;
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    #tab-overview #ai-chat-send .ai-chat-send-cloud {
        display: none;
        animation: none;
    }
}

:is(.button-pill, .load-more-button, .ai-chat-history-control) {
    display: inline-flex;
    min-height: var(--button-height-small);
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-small);
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--button-font-size-small);
    font-weight: 500;
    line-height: 1;
}

#metric-load-more {
    color: var(--text-muted);
    font-weight: 400;
}

.ai-chat-messages .ai-chat-history-control {
    width: fit-content;
    max-width: calc(100% - 24px);
    align-self: center;
    margin-right: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

:is(.button-pill, .load-more-button, .ai-chat-history-control):hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

:is(.filter-chip, .category-tag, .metric-chip, .ai-chat-source) {
    transition:
        color 0.16s ease,
        border-color 0.16s ease,
        background-color 0.16s ease,
        transform 0.16s ease;
}

:is(.filter-chip, .category-tag, .metric-chip, .ai-chat-source):hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

/* Rise from the bottom anchor; avatar layout stays fixed within the menu. */
.account-switcher-popover {
    transform-origin: left bottom;
    transform: translateY(0) scale(1);
    transition:
        opacity 140ms ease,
        transform 140ms cubic-bezier(.2, .72, .2, 1),
        display 140ms allow-discrete;
}
.account-switcher-popover[hidden] { transform: translateY(4px) scale(.985); }
@starting-style {
    .account-switcher-popover:not([hidden]) { transform: translateY(4px) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
    .account-switcher-popover { transition: none; }
    .account-switcher-popover[hidden],
    .account-switcher-popover:not([hidden]) { transform: none; }
}