/* static/css/chatbot.css */

/* 1. 懸浮按鈕容器 */
/* static/css/chatbot.css */

/* 1. 懸浮按鈕容器 */
.chatbot-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 130px;
    /* 根據您的圖片大小調整 */
    height: 130px;
    z-index: 9999;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 移除這裡的任何背景設定 */
}

.chatbot-trigger:hover {
    transform: scale(1.1) translateY(-5px);
    /* 懸浮時稍微放大並飄浮 */
}

/* 機器人頭像 (移除圓框，保留圖片切換邏輯) */
.bot-avatar {
    width: 100%;
    height: 100%;
    position: relative;

    /* === 關鍵修改：移除圓框與背景 === */
    border-radius: 0;
    /* 移除圓角 */
    border: none;
    /* 移除邊框 */
    box-shadow: none;
    /* 移除方框陰影 */
    background: transparent;
    /* 背景透明 */
    overflow: visible;
    /* 允許圖片不被裁切 */
}

/* 讓圖片本身發光，而不是框框發光 (Cyberpunk 風格) */
.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 保持圖片比例，不要拉伸 */
    transition: opacity 0.3s, filter 0.3s;
    position: absolute;
    top: 0;
    left: 0;

    /* 給圖片加一點霓虹光暈 */
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.6));
}

.chatbot-trigger:hover .bot-avatar img {
    /* 滑鼠移上去光暈變強 */
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.9));
}

/* 狀態切換邏輯 (保持不變) */
.bot-avatar .img-active {
    opacity: 0;
}

.chatbot-trigger.active .bot-avatar .img-normal {
    opacity: 0;
}

.chatbot-trigger.active .bot-avatar .img-active {
    opacity: 1;
}

/* 狀態切換邏輯 */
.bot-avatar .img-active {
    opacity: 0;
}

.chatbot-trigger.active .bot-avatar .img-normal {
    opacity: 0;
}

.chatbot-trigger.active .bot-avatar .img-active {
    opacity: 1;
}

.chat-window {
    position: fixed;
    bottom: 150px;
    right: 30px;
    width: min(90vw, 380px);
    height: min(80vh, 550px);
    max-height: calc(100vh - 200px);
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--neon-cyan);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    transform-origin: bottom right;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9998;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

.chat-window.open {
    transform: scale(1);
    opacity: 1;
}

/* 小高度螢幕 */
@media (max-height: 700px) {
    .chat-window {
        bottom: 80px;
        height: 70vh;
    }
}

@media (max-height: 600px) {
    .chat-window {
        bottom: 60px;
        width: 95vw;
        right: 10px;
    }
}

/* 手機 / 極小裝置 */
@media (max-width: 480px),
(max-height: 480px) {
    .chat-window {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        transform-origin: center;
    }
}


/* Header */
.chat-header {
    padding: 15px;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent);
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--neon-cyan);
    font-family: var(--font-tech);
}

/* Body */
/* static/css/chatbot.css */

/* --- 1. 修改 Chat Body (確保 Flex 排版) --- */
.chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    /* 關鍵：開啟 Flexbox */
    flex-direction: column;
    /* 關鍵：垂直排列 */
    gap: 15px;
    font-size: 0.9rem;
}

/* --- 2. 修改 訊息氣泡 (左右對齊邏輯) --- */
.message {
    max-width: 80%;
    /* 限制最大寬度，避免太寬 */
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    animation: fadeIn 0.3s ease;
    /* 加入淡入動畫 */
}

/* 使用者 (靠右) */
.message.user {
    align-self: flex-end;
    /* 關鍵：靠右對齊 */
    background: rgba(0, 243, 255, 0.2);
    /* 青色背景 */
    color: #fff;
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-bottom-right-radius: 2px;
    /* 讓右下角變尖，像氣泡 */
    text-align: left;
    /* 文字本身靠左比較好讀 */
}

/* 機器人 (靠左) */
.message.bot {
    align-self: flex-start;
    /* 關鍵：靠左對齊 */
    background: rgba(255, 255, 255, 0.08);
    /* 深灰背景 */
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom-left-radius: 2px;
    /* 讓左下角變尖 */
}

/* 淡入動畫 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3. 新增 打字中動畫 (三個點) --- */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    /* 稍微調整內距 */
    min-height: 24px;
}

.typing-indicator span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--neon-cyan);
    /* 使用你的霓虹青色 */
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
    box-shadow: 0 0 5px var(--neon-cyan);
    /* 加一點光暈符合風格 */
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 圖片顯示樣式 */
.chat-image-container {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--neon-purple);
}

.chat-image-container img {
    width: 100%;
    display: block;
}

.download-btn {
    display: block;
    width: 100%;
    padding: 6px;
    background: var(--neon-purple);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: background 0.3s;
}

.download-btn:hover {
    background: #d46cff;
}

/* Footer (Input) */
/* static/css/chatbot.css */

/* 修改 Footer: 讓內容底部對齊，這樣當輸入框變高時，發送按鈕會停在底部 */
.chat-footer {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
    align-items: flex-end;
    /* 關鍵：讓按鈕保持在底部 */
    background: rgba(10, 15, 30, 0.95);
    /* 確保背景不透明，蓋住後面的內容 */
}

/* 修改 Input 為 Textarea 樣式 */
.chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #fff;
    padding: 12px 15px;
    /* 稍微增加內距 */
    border-radius: 20px;
    /* 保持圓潤風格 */
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;

    /* 關鍵屬性 */
    resize: none;
    /* 禁止使用者手動拉大小 */
    overflow: hidden;
    /* 預設隱藏卷軸 */
    min-height: 46px;
    /* 設定最小高度 (約一行的高度) */
    max-height: 150px;
    /* 設定最大高度 (超過約 5-6 行後出現卷軸) */
    transition: border-color 0.3s, box-shadow 0.3s;
    /* 高度變化不由 transition 控制，以免打字時抖動 */
}

.chat-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* 當內容超過 max-height 時，顯示自定義卷軸 */
.chat-input::-webkit-scrollbar {
    width: 4px;
}

.chat-input::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 2px;
}

.chat-send {
    background: transparent;
    border: none;
    color: var(--neon-cyan);
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.chat-send:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px var(--neon-cyan);
}

/* 打字中動畫 */
.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--text-dim);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
    margin: 0 2px;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

/* static/css/chatbot.css 加入以下內容 */

/* 媒體卡片容器 */
.chat-media-card {
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--neon-purple);
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.chat-media-card:hover {
    box-shadow: 0 0 10px rgba(188, 19, 254, 0.3);
}

/* 圖片預覽 */
.media-preview img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
    display: block;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* HTML 圖表圖示區 */
.html-icon {
    text-align: center;
    color: var(--neon-cyan);
    padding: 10px;
}

.html-icon .material-icons {
    font-size: 40px;
}

.media-info {
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* 按鈕群組 */
.media-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: all 0.2s;
}

/* 下載按鈕 */
.action-btn.download {
    background: var(--neon-purple);
    color: #fff;
}

.action-btn.download:hover {
    background: #d46cff;
    box-shadow: 0 0 8px var(--neon-purple);
}

/* 開啟新分頁按鈕 */
.action-btn.new-tab {
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
}

.action-btn.new-tab:hover {
    background: rgba(0, 243, 255, 0.1);
}

/* 路徑高亮文字 */
.path-highlight {
    color: var(--text-dim);
    font-family: monospace;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

/* static/css/chatbot.css */

/* --- 表格容器 (支援橫向捲動) --- */
.table-container {
    width: 100%;
    overflow-x: auto;
    /* 內容太寬時顯示卷軸 */
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* 自訂卷軸樣式 (Chrome/Safari) */
.table-container::-webkit-scrollbar {
    height: 6px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 3px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

/* --- Cyberpunk 表格樣式 --- */
.cyber-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: rgba(10, 15, 30, 0.6);
    /* 半透明深色背景 */
    color: #e0f7ff;
    white-space: nowrap;
    /* 禁止文字自動換行，保持整齊 */
}

/* 表頭 */
.cyber-table thead tr {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.2), rgba(0, 102, 255, 0.2));
    border-bottom: 2px solid var(--neon-cyan);
}

.cyber-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: bold;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
    position: sticky;
    top: 0;
}

/* 表格內容 */
.cyber-table td {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 偶數行變色 (斑馬紋) */
.cyber-table tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* 滑鼠懸停效果 */
.cyber-table tbody tr:hover {
    background-color: rgba(0, 243, 255, 0.1);
    cursor: default;
}

/* --- 底部註解與 SQL --- */
.table-footer {
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    font-style: italic;
    text-align: right;
}

.sql-code {
    font-size: 0.75rem;
    color: #555;
    margin-top: 8px;
    font-family: monospace;
    opacity: 0.7;
}

/* 程式碼執行區塊容器 */
.code-execution-block {
    margin: 1rem 0;
    border-radius: 8px;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.2);
    overflow: hidden;
}

.code-execution-block details {
    margin: 0;
}

.code-execution-block summary {
    padding: 0.75rem 1rem;
    background: rgba(0, 243, 255, 0.1);
    cursor: pointer;
    font-size: 0.9rem;
    color: #7da0b0;
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    transition: all 0.3s ease;
    user-select: none;
}

.code-execution-block summary:hover {
    background: rgba(0, 243, 255, 0.15);
    color: #00f3ff;
}

.code-execution-block pre {
    margin: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    overflow-x: auto;
}

.code-execution-block code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e0f7ff;
    white-space: pre;
}

/* ============================================
   程式碼執行區塊
   ============================================ */
.code-execution-block {
    margin: 1rem 0;
    border-radius: 8px;
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.2);
    overflow: hidden;
}

.code-execution-block details {
    margin: 0;
}

.code-execution-block summary {
    padding: 0.75rem 1rem;
    background: rgba(0, 243, 255, 0.1);
    cursor: pointer;
    font-size: 0.9rem;
    color: #7da0b0;
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    transition: all 0.3s ease;
    user-select: none;
}

.code-execution-block summary:hover {
    background: rgba(0, 243, 255, 0.15);
    color: #00f3ff;
}

.code-execution-block pre {
    margin: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    overflow-x: auto;
}

.code-execution-block code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e0f7ff;
    white-space: pre;
}

/* ============================================
   計算結果區塊
   ============================================ */
.calc-result {
    margin: 0.5rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.calc-result-success {
    background: linear-gradient(135deg, rgba(10, 255, 0, 0.08), rgba(0, 100, 50, 0.12));
    border: 1px solid rgba(10, 255, 0, 0.3);
}

.calc-result-error {
    background: linear-gradient(135deg, rgba(255, 50, 50, 0.08), rgba(100, 0, 0, 0.12));
    border: 1px solid rgba(255, 50, 50, 0.3);
}

.calc-result-empty {
    background: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
}

.calc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-icon {
    font-size: 1.1rem;
}

.calc-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.calc-result-success .calc-title {
    color: #7fff7f;
}

.calc-result-error .calc-title {
    color: #ff7f7f;
}

.calc-body {
    padding: 0.75rem 1rem;
}

.calc-output {
    margin: 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #facc15;
    background: transparent;
    white-space: pre-wrap;
}

.calc-error {
    margin: 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: #ff9999;
    white-space: pre-wrap;
}

/* =========================================
   CYBER HUD CHAT WINDOW (Gemini Style)
   ========================================= */

/* 1. 主視窗容器：玻璃擬態 + 切角外框 */
.chat-window.cyber-hud {
    /* 繼承原本定位 */
    position: fixed;
    bottom: 150px;
    right: 30px;
    width: 400px;
    /* 稍微加寬以容納特效 */
    height: 600px;

    /* 視覺風格 */
    background: rgba(10, 15, 30, 0.85);
    /* 深色半透明 */
    backdrop-filter: blur(12px);
    /* 毛玻璃 */
    border: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 243, 255, 0.05);

    /* 切角造型 (右下角切掉一塊) */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%);

    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 隱藏溢出的掃描線 */
    z-index: 9998;

    /* 進場動畫 */
    transform-origin: bottom right;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 2. 背景動效 (HUD Grid & Scanline) */
.hud-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    pointer-events: none;
}

.hud-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, transparent, var(--neon-cyan), transparent);
    opacity: 0.3;
    animation: hudScan 4s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes hudScan {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* 3. 裝飾性角落 (HUD Corners) */
.hud-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--neon-cyan);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 2;
}

.hud-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.hud-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

/* 左下角不動，右下角因為有 clip-path，我們做一點偏移 */
.hud-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

/* 4. Header 優化 */
.chat-header {
    height: 50px;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.1), transparent);
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-green);
    animation: blink 2s infinite;
}

.header-title {
    font-family: var(--font-tech);
    color: var(--neon-cyan);
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: bold;
}

.control-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: 0.2s;
}

.control-btn:hover {
    color: var(--neon-cyan);
    transform: rotate(90deg);
    /* 重新整理按鈕旋轉效果 */
}

.control-btn.close:hover {
    color: var(--neon-red);
    transform: scale(1.1);
}

/* 5. 訊息氣泡優化 (Tech Style) */
.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    max-width: 85%;
    position: relative;
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: msgFadeIn 0.3s ease-out;
}

@keyframes msgFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 機器人訊息 (左側 - Tech Block) */
.message.bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--neon-purple);
    border-radius: 0 10px 10px 0;
    color: var(--text-main);
}

.message.bot::before {
    content: '';
    /* 裝飾性小方塊 */
    position: absolute;
    top: 0;
    left: -3px;
    width: 3px;
    height: 10px;
    background: #fff;
}

/* 使用者訊息 (右側 - Neon Bubble) */
.message.user {
    align-self: flex-end;
    background: rgba(0, 243, 255, 0.15);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #fff;
    /* 切角設計 */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}

.msg-meta {
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-top: 5px;
    font-family: var(--font-mono);
    opacity: 0.6;
    text-align: right;
}

/* 6. 輸入區優化 (Command Line Style) */
.chat-footer {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 243, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-container {
    flex: 1;
    position: relative;
}

/* 修改 .cyber-input 樣式以支援 textarea */
.cyber-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0, 243, 255, 0.3);
    padding: 10px 5px;
    /* 稍微調整內距 */
    color: #fff;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;

    /* === Textarea 專用設定 === */
    resize: none;
    /* 隱藏右下角的縮放手柄 */
    overflow-y: hidden;
    /* 隱藏垂直捲軸 (由 JS 控制高度) */
    min-height: 40px;
    /* 設定最小高度 */
    max-height: 120px;
    /* 設定最大高度，超過才出捲軸 */
    line-height: 1.5;
    /* 設定行高，讓文字閱讀舒適 */
    display: block;
    /* 確保區塊顯示 */
}

/* 輸入框聚焦時的動效 (保持不變) */
.cyber-input:focus {
    border-bottom-color: var(--neon-cyan);
    background: linear-gradient(to top, rgba(0, 243, 255, 0.05), transparent);
}

/* 讓 footer 能夠適應輸入框變高 (重要) */
.chat-footer {
    /* 原本的樣式保持不變，確認有 align-items: flex-end 或 center */
    align-items: flex-end;
    /* 讓按鈕沉在底部，當輸入框變高時比較好看 */
}

/* 輸入框聚焦時的動效 */
.cyber-input:focus {
    border-bottom-color: var(--neon-cyan);
    background: linear-gradient(to top, rgba(0, 243, 255, 0.05), transparent);
}

.input-border-anim {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--neon-purple);
    transition: width 0.4s ease;
}

.cyber-input:focus+.input-border-anim {
    width: 100%;
    box-shadow: 0 0 10px var(--neon-purple);
}

.cyber-send-btn {
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.cyber-send-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 15px var(--neon-cyan);
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* 手機版適配 */
/* static/css/chatbot.css 最下方 */

@media (max-width: 768px) {
    .chat-window {
        width: 90%;
        right: 5%;
        /* 手機版按鈕比較小，視窗可以稍微低一點，或是保持 140px 但限制高度 */
        bottom: 140px;
        height: 60vh;
        /* 限制高度為螢幕的 60%，避免擋住上方 */
    }
}