/**
 * External Link Guard - 訪客頁外連離站確認框
 *
 * 骨架複用 confirm-modal.css（overlay / card / icon / 按鈕），
 * 本檔只補特化：目標網址框、警訊行、比對中提示、危險態強調。
 */

/* 系統層防詐 UI：不得吃分享頁擁有者主題。
   分享頁 applyThemeColors() 會依頁面背景明暗把 :root 的 --text-primary /
   --text-secondary 蓋成淺色（深底頁用），落在本 modal 的白底卡片上就變
   白字白底（標題、描述、「留在本站」鈕、網址 hostname 全部消失）。
   這裡在 modal 範圍把兩個 token 釘回淺色主題值（同 variables.css 的
   neutral 色階來源），確保警語在任何擁有者主題下都可讀。 */
.elg-modal {
    --text-primary: var(--neutral-900, #0F172A);
    --text-secondary: var(--neutral-600, #475569);
}

/* 目標網址框：hostname 放大突顯，完整網址次要顯示、可換行不撐版 */
.elg-url-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 4px);
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
}

.elg-url-host {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    word-break: break-all;
}

.elg-url-full {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    word-break: break-all;
    max-height: 3.6em;
    overflow-y: auto;
}

/* 本地啟發式警訊（punycode / IP 網址） */
.elg-warnings:empty {
    display: none;
}

.elg-warning-line {
    margin: 0 0 var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-warning);
    color: var(--warning-dark, var(--warning));
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    text-align: left;
    line-height: var(--leading-normal);
}

/* 安全提醒（中性態顯示，升級後隱藏） */
.elg-hint {
    margin: 0 0 var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
}

/* 黑名單比對中 */
.elg-checking {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.elg-checking::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--space-2xs, 4px);
    border: 2px solid var(--border-color);
    border-top-color: var(--text-tertiary);
    border-radius: var(--radius-full);
    animation: elg-spin 0.8s linear infinite;
    vertical-align: -1px;
}

@keyframes elg-spin {
    to { transform: rotate(360deg); }
}

/* 危險態（reported / dns_blocked）：網址框轉紅色語彙 */
.elg-modal--danger .elg-url-box {
    background: var(--bg-error-subtle);
    border-color: var(--error);
}

.elg-modal--danger .elg-url-host {
    color: var(--error);
}

@media (prefers-reduced-motion: reduce) {
    .elg-checking::before {
        animation: none;
    }
}