/* farbar-ai-features/info-demo.css
   /features/「資訊展示」tab 的三層線上體驗（W5 看板卡 #1086）。
   區塊骨架比照 .multi-screen-section（白底、置中、同寬）。主體是一張置中的 1080×1920 直式頻道畫面
   （.info-demo-screen，寬 min(100%, 480px)），天氣／時鐘／跑馬燈三個 bundle 以百分比絕對定位蓋在底圖卡片上；
   設定是從區塊側邊延伸的泡泡 <dialog>（桌機）／底部 showModal()（≤768px），不佔版面；
   入口是畫面上方的提示＋三顆按鈕（借 eyeboom-showcase.css 的 .showcase-tab）。 */

/* 第三個 tab 的圖示底色（比照 .eyeboom-icon／.multiscreen-icon；active 時由 .feature-tab.active .tab-icon 覆蓋成主色） */
.info-icon {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.info-demo-section {
    scroll-margin-top: calc(var(--nav-height) + 40px);
    padding: 0 var(--container-padding) calc(80px * var(--scale));
    max-width: var(--features-max-width);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.info-demo-tagline {
    color: #1a1a2e;
    font-size: calc(28px * var(--scale));
    font-weight: 500;
    margin-bottom: calc(24px * var(--scale));
}

/* :not([hidden])：display:inline-block 不可蓋掉 UA 的 [hidden]{display:none}，否則資料包正常時提示也會露出 */
.info-demo-unavailable:not([hidden]) {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: calc(12px * var(--scale)) calc(20px * var(--scale));
    display: inline-block;
    margin-bottom: calc(24px * var(--scale));
}

/* 版面：畫面置中；設定卡是泡泡，不佔版面 */
.info-demo-layout {
    display: flex;
    justify-content: center;
    text-align: left;
}

.info-demo-stage-wrap {
    position: relative;
    width: min(100%, 480px);
}

/* 頻道畫面：底圖 1080×1920 直式，三個區塊以百分比絕對定位（座標見 info-demo-config.js INFO_SCREEN） */
.info-demo-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 1080 / 1920;
    background: #0b1a2a url("/farbar-ai-features/images/info-demo-screen.webp") center / 100% 100% no-repeat;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(6, 22, 26, 0.28);
    container-type: inline-size;
}

.info-demo-slot {
    position: absolute;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #cbd5e1;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-demo-slot-frame,
.info-demo-slot-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.info-demo-slot iframe {
    border: 0;
    background: transparent;
}

/* 整個區塊都可點（透明點擊層蓋在 iframe 上）：hover／focus／對應按鈕 hover／開啟中 → 亮框；不放任何標籤 */
.info-demo-slot-hit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.info-demo-slot-hit:hover,
.info-demo-slot-hit:focus-visible,
.info-demo-slot.is-active .info-demo-slot-hit,
.info-demo-slot.is-hover .info-demo-slot-hit {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 4px rgba(31, 200, 171, 0.25);
    outline: none;
}

/* 第一次切到本 tab：三個區塊外框依序呼吸發光兩下，提示可點（info-demo.js 加 is-pulse，動畫結束後移除） */
@keyframes infoDemoPulse {
    0%, 100% { border-color: transparent; box-shadow: 0 0 0 0 rgba(31, 200, 171, 0); }
    50% { border-color: var(--primary-teal); box-shadow: 0 0 0 6px rgba(31, 200, 171, 0.35); }
}

.info-demo-slot.is-pulse .info-demo-slot-hit {
    animation: infoDemoPulse 1.1s ease-in-out 2;
    animation-delay: var(--pulse-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .info-demo-slot.is-pulse .info-demo-slot-hit {
        animation: none;
    }
}

/* 靜態覆蓋圖：時鐘白卡右側整塊（324×342）換成資訊看板概念圖，右側圓角對齊底圖卡片 */
.info-demo-static {
    position: absolute;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.info-demo-static--clock-side {
    left: 64.815%;
    top: 10.781%;
    width: 30.185%;
    height: 17.917%;
    border-radius: 0 2.6cqw 2.6cqw 0;
}

/* 時鐘：白卡左側（右側是概念圖覆蓋圖）；圓角只做左側，對齊底圖卡片 */
.info-demo-slot--clock {
    left: 5.093%;
    top: 10.781%;
    width: 59.722%;
    height: 17.917%;
    border-radius: 2.6cqw 0 0 2.6cqw;
}

/* 天氣：整張天氣卡 */
.info-demo-slot--weather {
    left: 4.815%;
    top: 30.000%;
    width: 90.278%;
    height: 21.979%;
    border-radius: 2.6cqw;
}

/* 跑馬燈：底部 NEWS 條、橙色標籤右側到畫面右緣 */
.info-demo-slot--marquee {
    left: 16.481%;
    top: 93.958%;
    width: 83.519%;
    height: 6.042%;
    display: block;
}

/* 跑馬燈 iframe 以 1920×N 真實尺寸渲染，info-demo.js 依區塊寬設 transform scale（高度比例與區塊相同，剛好填滿） */
.info-demo-marquee-scaler {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.info-demo-marquee-frame {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

.info-demo-marquee-frame iframe {
    width: auto;
    height: auto;
}

/* 設定入口在畫面上方：提示與按鈕借用 eyeboom-showcase.css 的 .showcase-eyebrow／.showcase-tabs／.showcase-tab
   （與 EyEBooM tab「主打商品／促銷公告」同款、同斷點），開啟中的按鈕由 info-demo.js 加 active（= .showcase-tab.active）；
   這裡只補顏色與和畫面的間距 */
.info-demo-quick {
    text-align: center;
}

.info-demo-side-hint {
    color: #666;
}

.info-demo-quick-row {
    margin-bottom: calc(32px * var(--scale));
}

/* 常駐狀態列（天氣示意資料／非即時資料）：預設 hidden；:not([hidden]) 才給樣式，避免蓋掉 UA 的 [hidden]{display:none} */
.info-demo-notice:not([hidden]) {
    display: inline-block;
    margin: calc(-16px * var(--scale)) auto calc(16px * var(--scale));
    padding: calc(8px * var(--scale)) calc(16px * var(--scale));
    border: 1px solid #fcd34d;
    border-radius: 999px;
    background: #fffbeb;
    color: #b45309;
    font-size: calc(14px * var(--scale));
    line-height: 1.5;
}

/* 泡泡：絕對定位在 .info-demo-stage-wrap 內，三種模式（邊由 info-demo-config.js chooseBubbleSide 決定、位置由 bubbleGeometry 算好寫入 CSS 變數）：
   is-right：貼畫面右緣外 16px，top 對齊區塊中心（夾在畫面範圍內），尾巴在左緣 --tail-y 處指向區塊；
   is-left ：貼畫面左緣外 16px（時鐘 data-side="left" 偏好），尾巴在右緣；
   is-below：兩側都不夠寬時改放區塊下方，尾巴在上緣 --tail-x 處。 */
.info-demo-dialog {
    position: absolute;
    z-index: 5;
    margin: 0;
    width: 320px;
    max-width: none;
    padding: calc(16px * var(--scale)) calc(20px * var(--scale)) calc(20px * var(--scale));
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    color: inherit;
    box-shadow: 0 12px 32px rgba(6, 22, 26, 0.16);
    inset: auto;
}

.info-demo-dialog:not([open]) {
    display: none;
}

.info-demo-dialog.is-right {
    left: calc(100% + 16px);
    top: var(--bubble-top, 0px);
    transform-origin: 0 var(--tail-y, 50%);
}

.info-demo-dialog.is-left {
    right: calc(100% + 16px);
    top: var(--bubble-top, 0px);
    transform-origin: 100% var(--tail-y, 50%);
}

.info-demo-dialog.is-below {
    left: 0;
    right: 0;
    width: auto;
    top: var(--bubble-top, 0px);
    transform-origin: var(--tail-x, 50%) 0;
}

/* 尾巴：旋轉 45° 的小方塊，露出兩邊框線與泡泡接合 */
.info-demo-dialog::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.info-demo-dialog.is-right::before {
    left: -9px;
    top: var(--tail-y, 50%);
    transform: translateY(-50%) rotate(45deg);
}

.info-demo-dialog.is-left::before {
    right: -9px;
    top: var(--tail-y, 50%);
    transform: translateY(-50%) rotate(225deg);
}

.info-demo-dialog.is-below::before {
    top: -9px;
    left: var(--tail-x, 50%);
    transform: translateX(-50%) rotate(135deg);
}

/* 從尾巴那端長出來 */
@keyframes infoDemoBubbleIn {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

.info-demo-dialog.is-left[open],
.info-demo-dialog.is-right[open],
.info-demo-dialog.is-below[open] {
    animation: infoDemoBubbleIn 0.16s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .info-demo-dialog.is-left[open],
    .info-demo-dialog.is-right[open],
    .info-demo-dialog.is-below[open] {
        animation: none;
    }
}

.info-demo-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(12px * var(--scale));
}

.info-demo-dialog-head h4 {
    margin: 0;
    color: #1a1a2e;
    font-size: calc(18px * var(--scale));
    font-weight: 600;
}

.info-demo-dialog-close {
    width: 32px;
    height: 32px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.info-demo-dialog-close:hover {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.info-demo-controls {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--scale));
}

.info-demo-controls label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
    font-size: calc(14px * var(--scale));
    font-weight: 500;
}

.info-demo-controls select,
.info-demo-controls input[type="text"] {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 15px;
}

.info-demo-controls select:focus-visible,
.info-demo-controls input:focus-visible,
.info-demo-controls button:focus-visible {
    outline: 2px solid var(--primary-teal);
    outline-offset: 2px;
}

.info-demo-controls input[type="color"] {
    width: 64px;
    height: 42px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.info-demo-controls [hidden] {
    display: none !important;
}

/* 同一列放類型下拉＋顏色／按鈕／填充：下拉平分寬度，顏色固定 64px，按鈕與填充依內容寬 */
.info-demo-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.info-demo-row > select {
    flex: 1 1 0;
    min-width: 0;
}

.info-demo-row > input[type="color"] {
    flex: 0 0 64px;
}

.info-demo-row > .info-demo-row-fit {
    flex: 0 0 auto;
    width: auto;
}

.info-demo-controls .info-demo-btn {
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 14px;
    min-height: 42px;
    white-space: nowrap;
    cursor: pointer;
}

.info-demo-controls .info-demo-btn:hover {
    border-color: var(--primary-teal);
    color: var(--primary-teal);
}

.info-demo-hint {
    min-height: 1.2em;
    margin: 0;
    color: #b45309;
    font-size: 13px;
}

@media (max-width: 768px) {
    .info-demo-screen {
        max-width: 420px;
        margin: 0 auto;
    }

    /* 手機：設定卡以 showModal() 從底部滑出（頂層，不受祖先 transform 影響），畫面留在上方可見；backdrop 淡淡壓暗 */
    .info-demo-dialog::backdrop {
        background: rgba(6, 22, 26, 0.35);
    }

    .info-demo-dialog[open] {
        position: fixed;
        top: auto; /* UA 對 dialog 預設 inset 0，不清掉 top 會被釘在頂部 */
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        z-index: 60;
        max-height: 70vh;
        overflow: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(6, 22, 26, 0.25);
        transform-origin: center bottom;
        animation: none;
    }

    .info-demo-dialog[open]::before {
        display: none;
    }
}