df-messenger {
    display: none;
    z-index: 999;
    position: fixed;

    width: 300px;
    height: 50vh;
    right: 20px;
    bottom: 20px;
    /* 若要過場淡入淡出，可視需要在外層自行切換 class 來控制透明度 */
    transition: opacity 0.1s ease-in-out;
    opacity: 1;

    /* 尺寸與圓角、陰影（對應 .chat-container） */
    --df-messenger-chat-width: 300px;
    --df-messenger-border-radius: 10px;
    /* 某些版本未提供 box-shadow 變數，直接套用在宿主元素 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  /* Dialogflow Messenger 官方 CSS 變數自訂（CX） */
  df-messenger {
    /* 視窗/背景 */
    --df-messenger-chat-background: #ffffff;
    --df-messenger-chat-border-radius: 10px;
    --df-messenger-chat-window-height: 50vh;
    /* 標題列（對應 .chat-header） */
    --df-messenger-titlebar-background: linear-gradient(45deg, #15abc6, #8c50ec);
    --df-messenger-titlebar-font-color: #ffffff;

    /* 訊息間距（對應 .user-message/.ai-message margin） */
    --df-messenger-message-spacing: 10px;

    /* 機器人訊息泡泡（對應 .ai-message .message-box） */
    --df-messenger-message-bot-background: #f1f0f0;
    /* 若版本支援個別圓角，設定 bot/user 對應圓角；否則可退而求其次用共用圓角 */
    --df-messenger-message-bot-border-radius: 0 10px 10px 10px;

    /* 使用者訊息泡泡（對應 .user-message .message-box） */
    --df-messenger-message-user-background: linear-gradient(45deg, #aae7e9, #d3f2fe);
    --df-messenger-message-user-border-radius: 10px 0 10px 10px;

    /* 內文文字顏色（可搭配你的主題） */
    --df-messenger-font-color: #222222;

    /* 輸入列（對應 .chat-input 與 input:focus 狀態） */
    --df-messenger-input-background: #ffffff;
    --df-messenger-input-font-color: #222222;
    --df-messenger-input-border: 1px solid #ccc;
    --df-messenger-input-border-radius: 5px;
    /* 聚焦態：對應你的 --field-main 與 --field-bg-focus 主題變數 */
    --df-messenger-input-focus-border-color: var(--field-main);
    --df-messenger-input-focus-background-color: var(--field-bg-focus);

    /* 發送按鈕/互動按鈕（對應 .chat-input button） */
    --df-messenger-button-background: var(--btn-sec);
    --df-messenger-button-background-hover: var(--btn-sec-hover);
    --df-messenger-button-font-color: #ffffff;
    --df-messenger-button-border-radius: 5px;

    /* 智能回覆 chip（若有用，可對齊風格） */
    --df-messenger-chip-background: #f1f9ff;
    --df-messenger-chip-font-color: #222222;
    --df-messenger-chip-border-radius: 16px;

    --df-messenger-input-border: 0px;
    --df-messenger-input-box-border: 8px;

    --df-messenger-send-icon-color: var(--btn-sec);
  }
  df-messenger.active {
    display: block;
  }
  /* 若要更細的陰影或邊框控制（某些 CSS 變數未涵蓋），可用容器影子或 :host 樣式覆蓋 */
  df-messenger .df-chat-wrapper,
  df-messenger .df-messenger-wrapper {
    /* 保底陰影（不同版本封裝可能略有差異） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px; /* 與 --df-messenger-border-radius 對齊 */
    background: #fff;    /* 與 --df-messenger-chat-background 對齊 */
  }
  @keyframes opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }