/* ============================================================
   Disaster Alert — 天災停班公告浮層樣式
   結構/樣式/行為分離（2026-06-27）：自 _disaster-alert.blade.php
   inline <style>（L7-115）逐行抽出，外觀完全一致。
   公告即時狀態仍由不快取的 /api/disaster-alert 注入。
   ============================================================ */
.lk-disaster-root{display:none;}
.lk-disaster-root:not(:empty){display:block;}

.lk-disaster-root.is-collapsed{
    position:fixed;
    left:20px;
    right:auto;
    top:auto;
    bottom:20px;
    width:58px;
    height:58px;
    max-height:none;
    overflow:visible;
    z-index:99998;
}

.lk-disaster{
    position:relative;
    display:flex;
    gap:14px;
    padding:18px 48px 16px 20px;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(158deg, rgba(15,23,42,.94) 0%, rgba(30,41,59,.9) 100%);
    border:1px solid rgba(251,191,36,.45);
    box-shadow:0 18px 50px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    color:#fff;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .5s ease, transform .5s ease;
}
@media (min-width:992px){ .lk-disaster{ transform:translateX(26px); } }
.lk-disaster-root.is-on .lk-disaster{ opacity:1; transform:none; }

.lk-disaster__bar{position:absolute;left:0;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,#f59e0b,#dc2626);}

.lk-disaster__close{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
    border:1px solid rgba(255,255,255,.16);background:rgba(15,23,42,.62);
    color:rgba(226,232,240,.82);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.lk-disaster__close:hover{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.42);color:#fff;}
.lk-disaster__close i{font-size:13px;}

.lk-disaster-root.is-collapsed .lk-disaster{display:none;}
.lk-disaster-mini{
    position:relative;
    display:none;
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,#b45309 0%,#dc2626 58%,#7f1d1d 100%);
    box-shadow:0 14px 30px -10px rgba(180,83,9,.62),0 2px 6px rgba(127,29,29,.35);
    place-items:center;
    transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease;
    -webkit-tap-highlight-color:transparent;
}
.lk-disaster-root.is-collapsed .lk-disaster-mini{display:grid;}
.lk-disaster-mini:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 20px 40px -10px rgba(180,83,9,.7);}
.lk-disaster-mini:active{transform:scale(.95);}
.lk-disaster-mini:focus-visible{outline:3px solid #f59e0b;outline-offset:3px;}
.lk-disaster-mini i{position:relative;z-index:1;font-size:25px;line-height:1;display:block;}
.lk-disaster-mini__pulse{
    position:absolute;
    top:3px;
    right:3px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#fbbf24;
    border:2.5px solid #7f1d1d;
}
.lk-disaster-mini__pulse::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:rgba(251,191,36,.55);
    animation:lkDisasterMiniPulse 2s ease-out infinite;
}
@keyframes lkDisasterMiniPulse{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.9);opacity:0}}

.lk-disaster__icon{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;align-self:flex-start;
    background:rgba(245,158,11,.16);color:#fbbf24;font-size:20px;}
.lk-disaster__pulse{position:absolute;inset:0;border-radius:12px;border:2px solid rgba(251,191,36,.6);
    animation:lkDaPulse 2.2s ease-out infinite;}
@keyframes lkDaPulse{0%{transform:scale(.92);opacity:.75}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

.lk-disaster__main{min-width:0;flex:1 1 auto;}
.lk-disaster__head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.lk-disaster__label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
    letter-spacing:.06em;color:#fcd34d;}
.lk-disaster__label::before{content:"";width:7px;height:7px;border-radius:50%;background:#f43f5e;
    animation:lkDaBlink 1.6s infinite;}
@keyframes lkDaBlink{0%{box-shadow:0 0 0 0 rgba(244,63,94,.55)}70%{box-shadow:0 0 0 7px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}
.lk-disaster__demo{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;
    background:rgba(255,255,255,.14);color:#e2e8f0;border:1px solid rgba(255,255,255,.25);}

.lk-disaster__title{margin:0 0 6px;font-size:15.5px;font-weight:800;line-height:1.35;color:#fff;}
.lk-disaster__text{margin:0;font-size:13px;line-height:1.6;color:rgba(241,245,249,.86);}

.lk-disaster__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.lk-disaster__chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
    padding:4px 10px;border-radius:999px;background:rgba(245,158,11,.15);color:#fde68a;
    border:1px solid rgba(245,158,11,.4);}
.lk-disaster__chip i{font-size:10px;opacity:.85;}

.lk-disaster__media{margin-top:12px;border-radius:12px;overflow:hidden;
    background:rgba(2,6,23,.44);border:1px solid rgba(255,255,255,.12);}
.lk-disaster__video,.lk-disaster__image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    background:#020617;}
.lk-disaster__media-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:8px 10px 0;font-size:11px;font-weight:700;color:rgba(226,232,240,.72);}
.lk-disaster__media-meta a{color:#fde68a;text-decoration:none;white-space:nowrap;}
.lk-disaster__media-meta a:hover{color:#fff;}
.lk-disaster__media-note{margin:5px 10px 10px;font-size:11.5px;line-height:1.45;
    color:rgba(226,232,240,.78);}

.lk-disaster__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);}
.lk-disaster__time{font-size:11.5px;color:rgba(226,232,240,.62);}
.lk-disaster__cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
    color:#fde68a;text-decoration:none;}
.lk-disaster__cta:hover{color:#fff;}
.lk-disaster__cta i{transition:transform .15s ease;}
.lk-disaster__cta:hover i{transform:translateX(3px);}

/* 個人化衝擊區塊 */
.lk-disaster__impact{margin-top:12px;padding:11px 13px;border-radius:11px;display:flex;flex-direction:column;gap:3px;
    background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.34);}
.lk-disaster__impact-cap{font-size:11px;font-weight:700;color:#fcd34d;letter-spacing:.02em;
    display:inline-flex;align-items:center;gap:6px;}
.lk-disaster__impact-stats{font-size:13px;color:#fff;line-height:1.4;}
.lk-disaster__impact-stats b{font-size:20px;font-weight:800;color:#fde68a;margin:0 1px;}
.lk-disaster__impact-dot{opacity:.5;margin:0 3px;}
.lk-disaster__impact-link{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:700;color:#fcd34d;
    text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.lk-disaster__impact-link:hover{color:#fff;}
.lk-disaster__impact-link i{font-size:10px;transition:transform .15s ease;}
.lk-disaster__impact-link:hover i{transform:translateX(3px);}
.lk-disaster__none{margin:11px 0 0;font-size:12px;color:rgba(187,247,208,.92);display:flex;align-items:center;gap:6px;}
.lk-disaster__none i{color:#4ade80;}
.lk-disaster__guest{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:12.5px;font-weight:800;
    color:#0b1f4d;background:#fcd34d;padding:8px 15px;border-radius:999px;text-decoration:none;}
.lk-disaster__guest:hover{background:#fde68a;color:#0b1f4d;}
.lk-disaster__guest i{font-size:10px;transition:transform .15s ease;}
.lk-disaster__guest:hover i{transform:translateX(3px);}
.lk-disaster__meta{display:flex;flex-direction:column;gap:1px;}
.lk-disaster__until{font-size:11.5px;color:#fcd34d;font-weight:700;}
.lk-disaster__until i{font-size:10px;margin-right:3px;}

@media (max-width:767px){
    .lk-disaster-root:not(:empty){
        position:fixed;
        left:10px;
        right:10px;
        top:calc(112px + env(safe-area-inset-top, 0px));
        bottom:auto;
        max-height:min(58vh, 430px);
        overflow:auto;
        z-index:1015;
        display:block;
        margin:0;
        scrollbar-width:thin;
    }
    .lk-disaster-root.is-collapsed{
        left:14px;
        right:auto;
        top:auto;
        bottom:84px;
        width:52px;
        height:52px;
        max-height:none;
        overflow:visible;
    }
    .lk-disaster{border-radius:14px;gap:10px;
        padding:12px 42px 12px 12px;
        background:linear-gradient(158deg, rgba(15,23,42,.97), rgba(30,41,59,.95));}
    .lk-disaster__bar{width:auto;left:0;right:0;top:0;bottom:auto;height:4px;}
    .lk-disaster__close{top:8px;right:8px;width:28px;height:28px;}
    .lk-disaster__icon{width:34px;height:34px;border-radius:10px;font-size:15px;}
    .lk-disaster__main{flex:1 1 auto;}
    .lk-disaster__head{gap:6px;margin-bottom:3px;padding-right:2px;}
    .lk-disaster__label{font-size:10.5px;letter-spacing:.03em;}
    .lk-disaster__title{margin-bottom:4px;font-size:14.5px;line-height:1.32;}
    .lk-disaster__text{font-size:12.5px;line-height:1.45;display:-webkit-box;
        -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
    .lk-disaster__chips{gap:5px;margin-top:8px;}
    .lk-disaster__chip{font-size:11px;padding:3px 8px;}
    .lk-disaster__media{margin-top:9px;border-radius:10px;}
    .lk-disaster__video,.lk-disaster__image{aspect-ratio:21/9;}
    .lk-disaster__media-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
        padding:6px 8px 0;font-size:10.5px;line-height:1.35;}
    .lk-disaster__media-meta span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .lk-disaster__media-note{display:none;}
    .lk-disaster__impact{margin-top:8px;padding:8px 10px;}
    .lk-disaster__impact-stats{font-size:12px;}
    .lk-disaster__impact-stats b{font-size:16px;}
    .lk-disaster__none{margin-top:8px;font-size:12px;}
    .lk-disaster__guest{margin-top:8px;padding:7px 12px;font-size:12px;}
    .lk-disaster__foot{margin-top:8px;padding-top:8px;gap:8px;flex-wrap:nowrap;}
    .lk-disaster__time,.lk-disaster__until{font-size:10.5px;}
    .lk-disaster__cta{font-size:12px;white-space:nowrap;}
    .lk-disaster-mini{width:52px;height:52px;}
    .lk-disaster-mini i{font-size:22px;}
}

@media (prefers-reduced-motion: reduce){
    .lk-disaster{transition:none;opacity:1;transform:none;}
    .lk-disaster__pulse,.lk-disaster__label::before,.lk-disaster-mini__pulse::after{animation:none;}
    .lk-disaster-mini{transition:none;}
}

/* Desktop/tablet alert should fit as a fixed panel, not as an inner scrollbox. */
@media (min-width:992px){
    .lk-disaster-root:not(.is-collapsed):not(:empty){
        position:fixed;
        left:clamp(18px,4vw,64px);
        right:auto;
        top:clamp(56px,6vh,78px);
        bottom:auto;
        width:min(760px,calc(100vw - 128px));
        max-height:none;
        overflow:visible;
        scrollbar-width:none;
        z-index:1015;
    }
    .lk-disaster-root:not(.is-collapsed):not(:empty)::-webkit-scrollbar{display:none;}

    .lk-disaster-root:not(.is-collapsed) .lk-disaster{
        max-height:calc(100vh - 92px);
        box-sizing:border-box;
    }

    .lk-disaster-root:not(.is-collapsed) .lk-disaster__text{line-height:1.5;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media{margin-top:10px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__video,
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__image{max-height:min(32vh,300px);}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media-note{font-size:11px;line-height:1.4;}
}

@media (min-width:992px) and (max-height:860px){
    .lk-disaster-root:not(.is-collapsed):not(:empty){top:clamp(44px,5vh,64px);}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster{
        padding:14px 44px 14px 18px;
        gap:12px;
        max-height:calc(100vh - 72px);
    }
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__icon{width:38px;height:38px;border-radius:11px;font-size:17px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__head{margin-bottom:3px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__title{margin-bottom:4px;font-size:15px;line-height:1.3;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__text{font-size:12.5px;line-height:1.42;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__chips{margin-top:8px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media{margin-top:8px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__video,
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__image{max-height:min(28vh,250px);}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media-meta{padding:6px 9px 0;font-size:10.5px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media-note{display:none;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__impact{margin-top:9px;padding:9px 11px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__foot{margin-top:9px;padding-top:8px;}
}

@media (min-width:768px) and (max-width:991px){
    .lk-disaster-root:not(.is-collapsed):not(:empty){
        position:fixed;
        left:clamp(24px,7vw,72px);
        right:auto;
        top:clamp(54px,6vh,78px);
        bottom:auto;
        width:min(760px,calc(100vw - 128px));
        max-height:none;
        overflow:visible;
        scrollbar-width:none;
        z-index:1015;
    }
    .lk-disaster-root:not(.is-collapsed):not(:empty)::-webkit-scrollbar{display:none;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster{
        padding:14px 44px 14px 18px;
        gap:12px;
        max-height:calc(100vh - 92px);
        box-sizing:border-box;
    }
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__icon{width:38px;height:38px;border-radius:11px;font-size:17px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__title{margin-bottom:4px;font-size:15px;line-height:1.3;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__text{font-size:12.5px;line-height:1.42;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__chips{margin-top:8px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media{margin-top:8px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__video,
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__image{aspect-ratio:16/9;max-height:min(30vh,260px);}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media-meta{padding:6px 9px 0;font-size:10.5px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__media-note{display:none;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__impact{margin-top:9px;padding:9px 11px;}
    .lk-disaster-root:not(.is-collapsed) .lk-disaster__foot{margin-top:9px;padding-top:8px;}
}