@charset 'UTF-8';

/* =========================================================
   ダイアログ・トースト（ブラウザ標準の alert / confirm の置き換え）
   js/dialog.js が生成する要素のスタイル
   ========================================================= */

:root {
    --dlg-danger: #DC2626;
    --dlg-danger-soft: rgba(220, 38, 38, 0.1);
    --dlg-success: #00768F;
    --dlg-success-soft: rgba(18, 181, 214, 0.14);
    --dlg-warn: #B7791F;
    --dlg-warn-soft: rgba(226, 188, 72, 0.2);
}

[data-theme="dark"] {
    --dlg-danger: #F87171;
    --dlg-danger-soft: rgba(248, 113, 113, 0.14);
    --dlg-success: #4FD1EA;
    --dlg-success-soft: rgba(18, 181, 214, 0.16);
    --dlg-warn: #E9CF7A;
    --dlg-warn-soft: rgba(226, 188, 72, 0.16);
}

/* ---------- 確認・お知らせモーダル ---------- */
.app-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(17, 20, 23, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: appDialogFade 0.18s ease;
}

.app-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    padding: 28px 28px 24px;
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(17, 20, 23, 0.28);
    animation: appDialogPop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.app-dialog-icon .material-symbols-outlined {
    width: 26px;
    overflow: hidden;
    font-size: 26px;
}

.app-dialog--danger .app-dialog-icon {
    background: var(--dlg-danger-soft);
    color: var(--dlg-danger);
}

.app-dialog--error .app-dialog-icon {
    background: var(--dlg-danger-soft);
    color: var(--dlg-danger);
}

.app-dialog-title {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.app-dialog-message {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.app-dialog-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.app-dialog-btn--secondary {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.app-dialog-btn--secondary:hover {
    background: var(--surface-2);
}

.app-dialog-btn--primary {
    border: none;
    background: var(--ink);
    color: var(--ink-contrast, #fff);
}

.app-dialog-btn--danger {
    border: none;
    background: #DC2626;
    color: #fff;
}

.app-dialog-btn--primary:hover,
.app-dialog-btn--danger:hover {
    opacity: 0.88;
}

@keyframes appDialogFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes appDialogPop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- トースト（画面の隅に数秒表示） ---------- */
.app-toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 380px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.app-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 12px 14px 14px;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(17, 20, 23, 0.16);
    overflow: hidden;
    pointer-events: auto;
    animation: appToastIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-toast.is-leaving {
    animation: appToastOut 0.18s ease forwards;
}

.app-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.app-toast-icon .material-symbols-outlined {
    width: 19px;
    overflow: hidden;
    font-size: 19px;
}

.app-toast--success .app-toast-icon {
    background: var(--dlg-success-soft);
    color: var(--dlg-success);
}

.app-toast--error {
    border-color: rgba(220, 38, 38, 0.28);
}

.app-toast--error .app-toast-icon {
    background: var(--dlg-danger-soft);
    color: var(--dlg-danger);
}

.app-toast--warning .app-toast-icon {
    background: var(--dlg-warn-soft);
    color: var(--dlg-warn);
}

.app-toast-body {
    flex: 1;
    min-width: 0;
    padding-top: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.app-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    font-size: 12px;
    cursor: pointer;
}

.app-toast-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* 残り時間のバー */
.app-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent);
    opacity: 0.6;
    transform-origin: left center;
    animation: appToastProgress linear forwards;
}

.app-toast--error .app-toast-progress {
    background: var(--dlg-danger);
}

.app-toast--warning .app-toast-progress {
    background: #E2BC48;
}

.app-toast:hover .app-toast-progress {
    animation-play-state: paused;
}

@keyframes appToastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes appToastOut {
    to { opacity: 0; transform: translateX(16px); }
}

@keyframes appToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-dialog-overlay,
    .app-dialog,
    .app-toast,
    .app-toast.is-leaving {
        animation: none;
    }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
    .app-dialog {
        padding: 24px 20px 20px;
        border-radius: 20px;
    }

    .app-dialog-title {
        font-size: 17px;
    }

    .app-dialog-actions > .app-dialog-btn {
        flex: 1;
    }

    /* 下部のメニューと重ならないよう、トーストは上部（ヘッダーの下）に出す */
    .app-toast-stack {
        top: 76px;
        right: 12px;
        left: 12px;
        bottom: auto;
        width: auto;
        max-width: none;
        flex-direction: column-reverse;
    }

    @keyframes appToastIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: none; }
    }
}