/* ADD CUSTOM CSS TO THE PAGE - THIS AFFECTS ALL DEVICES */
*#dm *.dmBody a.span.textonly
{
	color:rgb(255,255,255) !important;
}
*#dm *.dmBody div.dmform-error
{
	font-style:normal !important;
}
*#dm *.dmBody div.dmforminput textarea
{
	font-style:italic !important;
}
*#dm *.dmBody div.dmforminput *.fileUploadLink
{
	font-style:italic !important;
}
*#dm *.dmBody div.checkboxwrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody div.radiowrapper span
{
	font-style:italic !important;
}
*#dm *.dmBody nav.u_1144820115
{
	color:black !important;
}

/*
    Duda 強化版樣式 (最終部署版 v3 - 新增語言選單樣式)
*/
body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

/* 強化浮動按鈕的顯示層級 */
#toggleChatbot {
    position: fixed !important;
    z-index: 99998 !important;
}

/* Chatbot 容器的開啟/關閉動畫 */
#chatbotContainer {
    position: fixed !important;
    z-index: 99999 !important;
    transition: transform 0.3s ease-in-out !important;
}

#chatbotContainer.open {
    transform: translateY(0) !important;
}

/* 美化滾動條 */
#chatbox::-webkit-scrollbar,
.settings-area::-webkit-scrollbar { 
    width: 8px; 
}
#chatbox::-webkit-scrollbar-track,
.settings-area::-webkit-scrollbar-track { 
    background: transparent; 
}
#chatbox::-webkit-scrollbar-thumb,
.settings-area::-webkit-scrollbar-thumb { 
    background-color: #d1d5db; border-radius: 4px; 
}
#chatbox::-webkit-scrollbar-thumb:hover,
.settings-area::-webkit-scrollbar-thumb:hover { 
    background-color: #9ca3af; 
}

/* 訊息泡泡的淡入動畫 */
.message-bubble { opacity: 0; transform: translateY(10px); animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* 設定區域的收合動畫與響應式滾動 */
.settings-area { 
    max-height: 0; 
    overflow: hidden;
    opacity: 0; 
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; 
}
.settings-area.open { 
    max-height: 50vh;
    opacity: 1; 
    overflow-y: auto;
}

/* 訊息複製按鈕 */
.copy-button { opacity: 0; transition: opacity 0.2s ease-in-out; cursor: pointer; }
.message-container:hover .copy-button { opacity: 1; }

/* 打字中... 的動畫效果 */
.typing-indicator span { height: 8px; width: 8px; margin: 0 2px; background-color: #9ca3af; display: inline-block; border-radius: 100%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* 創意度滑塊 (Temperature slider) 的樣式 */
#temperature { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #e5e7eb; outline: none; opacity: 0.7; transition: opacity .2s; border-radius: 9999px; }
#temperature:hover { opacity: 1; }
#temperature::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #3b82f6; cursor: pointer; border-radius: 50%; }
#temperature::-moz-range-thumb { width: 20px; height: 20px; background: #3b82f6; cursor: pointer; border-radius: 50%; }

/* 快取切換開關樣式 */
input:checked ~ .dot { transform: translateX(100%); background-color: #3b82f6; }
input:checked ~ .block { background-color: #a3bffa; }

/* 即時對話框中的表格樣式 */
.markdown-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
.markdown-table th, 
.markdown-table td { border: 1px solid #dee2e6; padding: 8px 12px; text-align: left; }
.markdown-table thead th { background-color: #f8f9fa; font-weight: 600; }
.markdown-table tbody tr:nth-child(odd) { background-color: #f8f9fa; }

/* 設定區域的通用元件樣式 */
.setting-select, .setting-textarea {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: #374151;
    line-height: 1.5;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.setting-select:focus, .setting-textarea:focus {
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.setting-button-sm {
    padding: 0.25rem 0.75rem;
    color: white;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.setting-button-sm:hover {
    opacity: 0.8;
}

/* "繼續生成" 按鈕樣式 */
.continue-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: white;
    background-color: #2563eb;
    cursor: pointer;
    transition: background-color 0.2s;
}
.continue-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* 工具列按鈕樣式 */
.control-btn { 
    padding: 0.5rem; 
    color: #6b7280; 
    position: relative; 
    transition: color 0.2s;
}
.control-btn:hover { 
    color: #3b82f6; 
}
.control-btn.active { 
    color: #2563eb; 
}

/* 語言指示點 */
.lang-indicator { 
    position: absolute; 
    top: 0.25rem; 
    right: 0.25rem; 
    display: block; 
    width: 0.5rem; 
    height: 0.5rem; 
    background-color: #3b82f6; 
    border-radius: 9999px; 
}

/* 下拉式選單樣式 */
.dropdown-menu { 
    transform-origin: top right; 
    position: absolute; 
    right: 0; 
    margin-top: 0.5rem; 
    width: 12rem; 
    border-radius: 0.375rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
    background-color: white; 
    --tw-ring-color: rgba(0, 0, 0, 1);
    --tw-ring-opacity: 0.05;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    z-index: 100; 
}
.dropdown-menu:focus { 
    outline: 2px solid transparent; 
    outline-offset: 2px; 
}
.dropdown-item { 
    display: block; 
    padding: 0.5rem 1rem; 
    font-size: 0.875rem; 
    line-height: 1.25rem; 
    color: #374151; 
}
.dropdown-item:hover { 
    background-color: #f3f4f6; 
}
.dropdown-item.active { 
    background-color: #dbeafe; 
    font-weight: 600; 
}