/* ============================================
   航班查詢問答機器人 flight-bot.css
   無障礙：對比符合 AA、焦點可見、prefers-reduced-motion
   ============================================ */

.fbot-toggle {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary, #005f73);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.fbot-toggle:hover { background: var(--primary-dark, #0a4a58); }
.fbot-toggle:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }

.fbot-panel {
    position: fixed;
    bottom: 5.5rem;
    left: 2rem;
    z-index: 1200;
    width: min(400px, calc(100vw - 2rem));
    max-height: min(560px, calc(100vh - 8rem));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fbot-panel[hidden] { display: none; }

.fbot-header {
    background: linear-gradient(135deg, var(--primary-dark, #0a4a58), var(--primary, #005f73));
    color: #fff;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fbot-header h2 { margin: 0; font-size: 1.05rem; }
.fbot-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}
.fbot-close:hover { background: rgba(255, 255, 255, 0.2); }
.fbot-close:focus-visible { outline: 2px solid #ffb703; outline-offset: 2px; }

.fbot-log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f5f8fa;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    .fbot-log { scroll-behavior: auto; }
}

.fbot-msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 12px; line-height: 1.55; font-size: 0.93rem; }
.fbot-msg.user { align-self: flex-end; background: var(--primary, #005f73); color: #fff; border-bottom-right-radius: 4px; }
.fbot-msg.bot  { align-self: flex-start; background: #fff; color: #212529; border: 1px solid #e2e8ec; border-bottom-left-radius: 4px; }
.fbot-msg.bot a { color: var(--primary, #005f73); text-decoration: underline; }

/* 航班卡片 */
.fbot-flight {
    background: #fff;
    border: 1px solid #dfe7ea;
    border-left: 4px solid var(--primary, #005f73);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin-top: 0.45rem;
    font-size: 0.88rem;
}
.fbot-flight.cancelled { border-left-color: #c0392b; background: #fdf3f3; }
.fbot-flight .fno { font-weight: 700; font-size: 0.95rem; }
.fbot-flight .cs { color: #6c757d; font-size: 0.78rem; }
.fbot-flight .row { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 2px; }
.fbot-flight .st-green { color: #146c43; font-weight: 600; }
.fbot-flight .st-red { color: #b02a37; font-weight: 600; }
.fbot-flight .st-yellow { color: #997404; font-weight: 600; }

/* 快捷問題 */
.fbot-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1rem; background: #f5f8fa; border-top: 1px solid #e2e8ec; }
.fbot-chip {
    border: 1px solid var(--primary, #005f73);
    background: #fff;
    color: var(--primary, #005f73);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.fbot-chip:hover, .fbot-chip:focus-visible { background: var(--primary, #005f73); color: #fff; outline-offset: 2px; }

/* 輸入列 */
.fbot-inputrow { display: flex; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid #e2e8ec; background: #fff; }
.fbot-input {
    flex: 1;
    border: 2px solid #cfd8dc;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    min-height: 44px;
}
.fbot-input:focus { border-color: var(--primary, #005f73); outline: none; box-shadow: 0 0 0 3px rgba(0, 95, 115, 0.15); }
.fbot-send {
    background: var(--primary, #005f73);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
    min-height: 44px;
    min-width: 44px;
    font-size: 1rem;
    cursor: pointer;
}
.fbot-send:hover { background: var(--primary-dark, #0a4a58); }
.fbot-send:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }

@media (max-width: 480px) {
    .fbot-toggle { left: 1rem; bottom: 1rem; padding: 0.65rem 1rem; }
    .fbot-panel { left: 1rem; right: 1rem; width: auto; bottom: 4.5rem; }
}

@media print {
    .fbot-toggle, .fbot-panel { display: none !important; }
}