/* Chat.css — 新增日/夜主題變數並以變數替換顏色
使用方式：在 加上 data-theme="dark" 即啟用深色，或用 JS 切換：
document.documentElement.setAttribute('data-theme', 'dark');
*/
/* ----------------------------- Theme variables ----------------------------- */
:root {
--chat-bg: #f5f0d8;
--chat-panel-bg: #faf5e4;
--chat-alt-bg: #efe8d0;
--chat-border: #d8d0b0;
--chat-border-2: #e5dcc0;
--chat-text: #3a3520;
--chat-muted: #6b6040;
--chat-accent: #c8a030;
--chat-accent-text: #ffffff;
--chat-link: #b08820;
--chat-code-head-bg: #002029;
--chat-response-temp: #e0d8c0;
--chat-extend-bg: #f5f0d8;
--chat-room-bg: #faf5e4;
--chat-room-hover: #fff8d8;
--chat-delete-btn-bg: #faf5e4;
--chat-delete-btn-border: #c8c0a0;
--chat-zoom-overlay: rgba(0, 0, 0, 0.8);
--chat-last-message: #6b6040;
--chat-room-label-bg: #faf5e4;
--chat-room-label-border: #e0d8c0;
--chat-room-name-color: #3a3520;
--chat-parent-label-color: #504828;
--chat-public-span-border: #d4a000;
--chat-public-span-color: #b08820;
--chat-selected-bg: #fff0a0;
--chat-drag-border: #c8a030;
--chat-drag-bg: #fff0a0;
--chat-down-arrow-bg: #e8c040;
--chat-suggestion-bg: #faf5e4;
--chat-suggestion-border: #c8c0a0;
--chat-modal-overlay: rgba(0, 0, 0, 0.5);
--chat-modal-content-bg: #f8f3e0;
--chat-modal-border: #b8b090;
--chat-keyword-item-bg: #e8e0c8;
--chat-open-icon-color: #504828;
--chat-mermaid-marker: #7c9030;
--chat-unread-bg: #d85040;
--chat-window-border: #c8c0a0;
--chat-window-shadow: rgba(60, 50, 20, 0.25);
--chat-sidebar-bg: #faf5e4;
--chat-sidebar-text: #3a3520;
--chat-close-btn-bg: #e8e0c8;
--chat-close-btn-text: #3a3520;
--chat-iframe-header-bg: #f5f0d8;
--chat-readmore-bg: rgba(60, 50, 20, 0.6);
/* bubble / triangle */
--chat-tri-border: #d8d0b0;
--chat-bubble-response-bg: #fffde8;
--chat-bubble-question-bg: #fff8c8;
--chat-ui-state-bg: #f5f0d8;
--chat-ui-tabs-nav-bg: #faf5e4;
--chat-markdown-tr-bg: #f5f0d8;
}
[data-theme="dark"] {
--chat-bg: #121212;
--chat-panel-bg: #1e1e1e;
--chat-alt-bg: #181818;
--chat-border: #333333;
--chat-border-2: #2c2c2c;
--chat-text: #e0e0e0;
--chat-muted: #aaaaaa;
--chat-accent: #1e88e5;
/* Adjusted for dark mode */
--chat-accent-text: #ffffff;
--chat-link: #64b5f6;
--chat-code-head-bg: #28424f;
--chat-response-temp: #2c2c2c;
--chat-extend-bg: #252526;
--chat-room-bg: #1e1e1e;
--chat-room-hover: #2d2d2d;
--chat-delete-btn-bg: #2d2d2d;
--chat-delete-btn-border: #444444;
--chat-zoom-overlay: rgba(0, 0, 0, 0.9);
--chat-last-message: #999999;
--chat-room-label-bg: #1e1e1e;
--chat-room-label-border: #333333;
--chat-room-name-color: #e0e0e0;
--chat-parent-label-color: #cccccc;
--chat-public-span-border: #ffd600;
--chat-public-span-color: #ffd600;
--chat-selected-bg: #2a3d4f;
--chat-drag-border: #555555;
--chat-drag-bg: #2c2c2c;
--chat-down-arrow-bg: #ffd600;
--chat-suggestion-bg: #2d2d2d;
--chat-suggestion-border: #444444;
--chat-modal-overlay: rgba(0, 0, 0, 0.7);
--chat-modal-content-bg: #252526;
--chat-modal-border: #444444;
--chat-keyword-item-bg: #333333;
--chat-open-icon-color: #e0e0e0;
--chat-mermaid-marker: #81c784;
--chat-unread-bg: #ef5350;
--chat-window-border: #444444;
--chat-window-shadow: rgba(0, 0, 0, 0.6);
--chat-sidebar-bg: #1e1e1e;
--chat-sidebar-text: #e0e0e0;
--chat-close-btn-bg: #333333;
--chat-close-btn-text: #e0e0e0;
--chat-iframe-header-bg: #2d2d2d;
--chat-readmore-bg: rgba(255, 255, 255, 0.1);
--chat-tri-border: #444444;
--chat-bubble-response-bg: #2d2d2d;
--chat-bubble-question-bg: #263238;
--chat-ui-state-bg: #2d2d2d;
--chat-ui-tabs-nav-bg: #1e1e1e;
--filter: invert(1);
--chat-markdown-tr-bg: #252526;
}
/* ----------------------------- 原 CSS（僅替換顏色為變數） ----------------------------- */
.chat-container-area {
position: relative;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-color: var(--chat-bg);
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
width: 100%;
padding:0px;
}
.send-message-group {
width: 95%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
z-index: 999;
}
.send-message-group p {
margin-bottom: 0;
}
.chat-message-list-group {
min-height: 500px;
list-style: none;
padding-left: 0px;
padding-right: 0px;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.app-loading {
position: fixed;
top: 50%;
z-index: 9999;
background: transparent;
left: 45%;
}
.app-loading--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.app-loading__icon {
width: 48px;
height: 48px;
}
.chat-message-list-group img {
max-width: 200px;
max-height: 200px;
}
.send-message {
width: 100%;
height: 50px;
min-height: 50px;
max-height: 200px;
line-height: initial;
padding-right: 60px;
border: solid;
border-width: thin;
border-color: var(--chat-border);
overflow-y: auto;
}
/* 設定 placeholder 樣式 */
.placeholder {
color: var(--chat-muted);
position: absolute;
pointer-events: none;
/* 讓 placeholder 不影響點擊事件 */
}
/* Search Bar Area */
.search-chat-room {
padding: 10px;
background-color: var(--chat-panel-bg);
border-bottom: 1px solid var(--chat-border);
}
.search-chat-room input {
width: 100%;
padding: 8px 12px;
border-radius: 20px;
border: 1px solid var(--chat-border-2);
background-color: var(--chat-alt-bg);
color: var(--chat-text);
outline: none;
transition: all 0.2s;
}
.search-chat-room input:focus {
border-color: var(--chat-accent);
background-color: var(--chat-bg);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.chat-card-body {
background: var(--chat-panel-bg);
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.question-message {
/* background-color: antiquewhite; */
}
/* .response-message {} Removed empty rule */
.sidebar {
position: fixed;
display: none;
top: 0; /* Full height */
left: 0px;
width: 300px;
height: 100vh; /* Full height */
background-color: var(--chat-room-bg);
color: var(--chat-sidebar-text);
z-index: 1001; /* Above navbar */
transition: width 0.3s ease, transform 0.3s ease;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
border-right: 1px solid var(--chat-border-2);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.sidebar.collapsed {
width: 70px; /* Collapsed width */
}
/* Hide elements when collapsed */
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .search-chat-room,
.sidebar.collapsed .model-select-wrapper,
.sidebar.collapsed .room-name-label,
.sidebar.collapsed .last-message,
.sidebar.collapsed .unread-count,
.sidebar.collapsed .parent-room-label,
.sidebar.collapsed .ui-tabs-nav li span,
.sidebar.collapsed .home-text {
display: none !important;
}
/* Adjust layout when collapsed */
.sidebar.collapsed .sidebar-header {
padding: 15px 5px;
align-items: center;
}
.sidebar.collapsed .sidebar-top-bar {
flex-direction: column;
width: 100%;
align-items: center;
gap: 15px;
}
.sidebar.collapsed .sidebar-actions {
flex-direction: column;
width: 100%;
align-items: center;
gap: 15px;
}
.sidebar.collapsed .chat-room-area {
width: 100%;
overflow-x: hidden;
}
.sidebar.collapsed .room-list-label {
padding: 15px 5px;
justify-content: center;
align-items: center;
}
.sidebar.collapsed .room-name-flex {
justify-content: center;
width: 100%;
margin: 0;
}
.sidebar.collapsed .room-name-flex .profile-img {
margin-right: 0;
border-width: 1px;
}
.sidebar.collapsed .ui-tabs-nav {
flex-direction: column;
gap: 10px;
padding: 10px 0;
}
.sidebar.collapsed .ui-tabs-nav li {
padding: 0;
border-bottom: none;
border-left: 3px solid transparent;
width: 100%;
}
.sidebar.collapsed .ui-tabs-nav li.ui-tabs-active {
border-bottom: none;
border-left-color: var(--chat-accent);
}
.sidebar.collapsed .ui-tabs-nav li a {
padding: 8px 0;
font-size: 0.8rem; /* Small icon fallback if text hidden */
}
/* Force show icon-like text or actual icons if available in tabs */
.sidebar.collapsed .ui-tabs-nav li a::before {
content: "●"; /* Simple dot or icon placeholder if no icons provided */
font-size: 1.2rem;
display: block;
}
@media screen and (min-width: 575px) {
/* .sidebar {} Removed empty rule */
}
@media screen and (max-width: 575px) {
.sidebar {
display: none;
width: 100%;
border-right: none;
}
.menu-area {
margin-top: 0px !important;
}
.chat-room-footer {
height: 0px !important;
}
}
.sidebar.show {
display: block !important;
}
/* 菜單區域的樣式 */
.menu-area {
position: relative;
width: 100%;
background-color: transparent;
border: none;
padding: 0px;
display: flex;
flex-direction: column;
height: 100%;
}
.menu-area a {
text-decoration: unset;
}
/* 標題和關閉按鈕的樣式 */
/* Modern Sidebar Header */
.sidebar-header {
background-color: var(--chat-panel-bg);
padding: 15px 15px 10px 15px;
border-bottom: 1px solid var(--chat-border-2);
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.sidebar-top-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-title {
color: var(--chat-text);
font-size: 1.25rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.5px;
}
.sidebar-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* Sidebar Toggle Button */
.sidebar-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: transparent;
border: none;
color: var(--chat-muted);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.sidebar-toggle-btn:hover {
background-color: var(--chat-room-hover);
color: var(--chat-text);
}
.toggle-icon-svg {
width: 18px;
height: 18px;
}
.create-chat-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--chat-accent);
border-radius: 50%;
transition: transform 0.2s, background-color 0.2s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.create-chat-btn:hover {
transform: scale(1.05);
background-color: var(--chat-link);
}
.create-chat-icon-svg {
width: 16px;
height: 16px;
color: white; /* Ensure SVG stroke is white */
}
.close-btn {
background-color: transparent;
border: none;
color: var(--chat-muted);
cursor: pointer;
font-size: 24px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%; /* Make circular */
transition: all 0.2s;
}
.close-btn:hover {
background-color: var(--chat-room-hover); /* Subtle background on hover */
color: var(--chat-text);
transform: rotate(90deg); /* Nice interaction */
}
.close-icon-svg {
width: 20px;
height: 20px;
}
/* Modern Search Bar */
.search-chat-room {
padding: 0;
background-color: transparent;
border-bottom: none;
}
.search-wrapper {
position: relative;
width: 100%;
}
.search-chat-room input {
width: 100%;
padding: 10px 16px;
border-radius: 20px;
border: 1px solid var(--chat-border-2);
background-color: var(--chat-alt-bg);
color: var(--chat-text);
outline: none;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.search-chat-room input:focus {
border-color: var(--chat-accent);
background-color: var(--chat-bg);
box-shadow: 0 0 0 3px rgba(200, 160, 48, 0.15); /* Soft accent glow */
}
/* Model Select styling */
.model-select-wrapper {
width: 100%;
}
.model-select {
width: 100%;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--chat-border-2);
background-color: var(--chat-alt-bg);
color: var(--chat-text);
font-size: 0.9rem;
}
.close-btn:hover {
color: var(--chat-text);
}
.toggle-btn {
margin-right: 5px;
}
/* 子菜單的樣式 */
.submenu {
display: none;
list-style: none;
margin: 10px 0 0 0;
padding: 0;
}
.submenu li {
margin: 0;
padding: 5px 5px;
text-align: left;
}
.submenu a {
color: var(--chat-link);
text-decoration: unset;
}
.submenu li:hover {
background-color: var(--chat-alt-bg);
cursor: pointer;
}
.submenu.show {
display: block;
}
.message-options img {
margin-right: 8px;
}
.message-content {
flex-grow: 1;
padding: 10px;
font-size: 14px;
/* white-space: break-spaces;*/
word-wrap: break-word;
overflow: hidden;
max-height: 300px;
}
.message-content-border {
border-style: none none none solid;
border-width: 0.05em;
border-color: var(--chat-border-2);
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.message-options {
margin-left: auto;
}
.message-content-bottom {
padding-left: 20px;
}
.sample-message {
display: none;
}
.sample-room-list-label {
display: none;
}
.chat-star-img {
width: 20px;
height: 20px;
}
.chat-close-img {
width: 15px;
height: 15px;
filter: var(--filter);
}
.chat-copy-img {
width: 15px;
height: 15px;
filter: var(--filter);
}
.chat-read-more-area {
left: 0px;
z-index: 99;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--chat-alt-bg));
width: 100%;
}
.read-more-area:hover {
cursor: pointer;
}
.chat-read-more-text {
display: block;
font-size: 20px;
text-align: center;
font-weight: bold;
}
.sample-read-more {
display: none;
}
.chat-edit-img {
width: 15px;
height: 15px;
filter: var(--filter);
}
.chat-edit-img-area {
right: 30px;
}
.chat-delete-img {
width: 12px;
height: 12px;
filter: var(--filter);
}
.chat-delete-img-area {
right: 10px;
}
.room-sub-label {
display: inline-block;
width: 170px;
}
.sample-favorite-li {
display: none;
}
.card-body {
padding: 0px !important;
}
.message-div {
margin-top: 10px;
padding-top: 10px;
background-color: var(--chat-extend-bg);
}
.message-content-response {
text-decoration: unset;
color: var(--chat-text) !important;
padding-right: 20px;
}
.message-content-response2 {
text-decoration: unset;
color: var(--chat-text) !important;
padding-right: 20px;
}
.message-content-good {
text-decoration: unset;
color: var(--chat-text) !important;
}
.chat-wrapper {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: var(--chat-alt-bg);
}
.chat-wrapper .box1 {
overflow-y: auto;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
position: relative;
background-color: var(--chat-panel-bg);
}
.chat-wrapper .box2 {
display: flex;
flex-direction: column;
background-color: var(--chat-panel-bg);
}
.send-message-div {
display: flex;
position: relative;
flex-direction: column;
width: 99%;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.send-btn {
position: absolute;
right: 5px;
bottom: 5px;
width: 30px;
filter: var(--filter);
}
.chatCount {
right: 0px;
position: absolute;
color: var(--chat-text);
}
.chat-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: var(--chat-panel-bg);
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
height: 100%;
overflow-y: auto;
}
.chat-message-area {
background-color: var(--chat-panel-bg);
overflow-y: auto;
display: flex;
flex-direction: column;
height: 100%;
}
/* 定義動畫 */
@keyframes yellow-glow {
0% {
background-color: #ffcc00;
}
50% {
background-color: #f0f0f0;
}
100% {
background-color: #ffcc00;
}
}
.chat-personal-img {
width: 25px;
height: 25px;
border-radius: 50%;
background-size: cover;
padding: 2px;
border: outset 1px;
}
#gptCheckArea {
display: inline-block;
}
.toggle-btn {
background-color: var(--chat-accent);
color: var(--chat-accent-text);
}
/*label {
color: var(--chat-text);
}*/
.send-message {
background-color: var(--chat-panel-bg);
}
.chatCount {
color: var(--chat-text);
}
/* 測試顏色區結束 */
.ui-resizable {
position: fixed;
}
.code-head {
background-color: var(--chat-code-head-bg);
color: var(--chat-accent-text);
position: relative;
}
.code-title {
display: inline;
}
.copy-button {
position: absolute;
right: 10px;
width: 15px;
height: 15px;
display: inline;
}
.html-button {
width: 15px;
height: 15px;
display: inline;
margin-left: 10px;
}
.html-img {
width: 15px;
height: 15px;
}
.mermaid svg[id^="m"][width][height][viewBox] {
width: 80%;
height: auto;
pointer-events: none;
}
pre.mermaid {
margin-left: 0 !important;
text-align: center;
resize: both;
overflow: auto;
margin-bottom: 2px;
position: relative;
max-height: 600px;
max-width: 100%;
}
pre.mermaid::after {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: var(--chat-mermaid-marker);
position: absolute;
right: 0;
bottom: 0;
}
.hide-code {
display: none;
}
.talk-bubble {
margin: 1px 15px 5px 15px;
position: relative;
height: auto;
border-radius: 10px;
overflow-wrap: anywhere;
}
.question-bubble-color {
background-color: var(--chat-bubble-question-bg);
}
.response-bubble-color {
background-color: var(--chat-bubble-response-bg);
}
/* 右三角/左三角/底部三角等 — 使用變數化顏色 */
.tri-right.border.left-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -40px;
right: auto;
top: -8px;
bottom: auto;
border: 32px solid;
border-color: var(--chat-tri-border) transparent transparent transparent;
}
.tri-right.left-top:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 15px solid;
border-color: var(--chat-bubble-response-bg) transparent transparent transparent;
}
.tri-right.left-top.response-bubble-color:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 10px solid;
border-color: var(--chat-bubble-response-bg) transparent transparent transparent;
}
.tri-right.left-top.question-bubble-color:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 10px solid;
border-color: var(--chat-bubble-question-bg) transparent transparent transparent;
}
/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -40px;
right: auto;
top: 30px;
bottom: auto;
border: 20px solid;
border-color: var(--chat-tri-border) var(--chat-tri-border) transparent transparent;
}
.tri-right.left-in:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -20px;
right: auto;
top: 38px;
bottom: auto;
border: 12px solid;
border-color: var(--chat-bubble-response-bg) var(--chat-bubble-response-bg) transparent transparent;
}
/* Right triangle, placed bottom left side slightly in */
.tri-right.border.btm-left:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -8px;
right: auto;
top: auto;
bottom: -40px;
border: 32px solid;
border-color: transparent transparent transparent var(--chat-tri-border);
}
.tri-right.btm-left:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
right: auto;
top: auto;
bottom: -20px;
border: 22px solid;
border-color: transparent transparent transparent var(--chat-bubble-response-bg);
}
/* Right triangle, placed bottom left slightly in */
.tri-right.border.btm-left-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
right: auto;
top: auto;
bottom: -40px;
border: 20px solid;
border-color: var(--chat-tri-border) transparent transparent var(--chat-tri-border);
}
.tri-right.btm-left-in:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
right: auto;
top: auto;
bottom: -20px;
border: 12px solid;
border-color: var(--chat-bubble-response-bg) transparent transparent var(--chat-bubble-response-bg);
}
/* Right triangle, placed bottom right slightly in */
.tri-right.border.btm-right-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 30px;
bottom: -40px;
border: 20px solid;
border-color: var(--chat-tri-border) var(--chat-tri-border) transparent transparent;
}
.tri-right.btm-right-in:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 38px;
bottom: -20px;
border: 12px solid;
border-color: var(--chat-bubble-response-bg) var(--chat-bubble-response-bg) transparent transparent;
}
/* Right triangle, placed bottom right slightly in */
.tri-right.border.btm-right:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -8px;
bottom: -40px;
border: 20px solid;
border-color: var(--chat-tri-border) var(--chat-tri-border) transparent transparent;
}
.tri-right.btm-right:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: 0px;
bottom: -20px;
border: 12px solid;
border-color: var(--chat-bubble-response-bg) var(--chat-bubble-response-bg) transparent transparent;
}
/* Right triangle, right side slightly down */
.tri-right.border.right-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -40px;
top: 30px;
bottom: auto;
border: 20px solid;
border-color: var(--chat-tri-border) transparent transparent var(--chat-tri-border);
}
.tri-right.right-in:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -20px;
top: 38px;
bottom: auto;
border: 12px solid;
border-color: var(--chat-bubble-response-bg) transparent transparent var(--chat-bubble-response-bg);
}
/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -40px;
top: -8px;
bottom: auto;
border: 32px solid;
border-color: var(--chat-tri-border) transparent transparent transparent;
}
.tri-right.right-top:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -20px;
top: 0px;
bottom: auto;
border: 20px solid;
border-color: var(--chat-bubble-response-bg) transparent transparent transparent;
}
.create-chat-icon {
width: 25px;
height: 25px;
position: absolute;
right: 50px;
top: 12px;
}
.create-chat-img {
width: 25px;
height: 25px;
}
.response-message-temp {
height: 50px;
overflow-y: clip;
background: var(--chat-response-temp);
display: none;
}
.response-options {
margin-left: auto;
padding-right: 10px;
}
.response-content {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.message-line {
width: 2rem;
border-style: none none solid solid;
border-width: 0.05em;
border-color: var(--chat-border-2);
height: 15px;
margin: -10px 0 0 -2em;
position: relative;
left: 0px;
top: 0px;
}
.chat-room-area {
background-color: var(--chat-room-bg);
padding: 0px;
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--chat-border) var(--chat-room-bg);
}
.chat-room-area::-webkit-scrollbar {
width: 6px;
}
.chat-room-area::-webkit-scrollbar-track {
background: transparent;
}
.chat-room-area::-webkit-scrollbar-thumb {
background-color: var(--chat-border);
border-radius: 3px;
}
.chat-room-class {
list-style-type: none;
padding: 0;
}
.child-room-list {
list-style-type: none;
padding-left: 0px;
}
.chat-room-area a:hover {
background-color: var(--chat-room-hover);
}
.attachmentImg {
width: 20px;
height: 20px;
filter: var(--filter);
}
.attachmentArea {
display: inline-block;
position: relative;
}
.attachmentArea input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
display: none;
}
.attachment-temp {
display: none;
}
.delete-btn {
position: absolute;
top: -5px;
right: -5px;
width: 15px;
height: 15px;
cursor: pointer;
background-color: var(--chat-delete-btn-bg);
border-radius: 50%;
border: 1px solid var(--chat-delete-btn-border);
display: flex;
justify-content: center;
align-items: center;
}
.delete-btn svg {
width: 10px;
height: 10px;
}
.attachment-img {
width: 50px;
height: 50px;
}
.attachment-div {
position: relative;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
}
/* 放大圖片 CSS */
.zoom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--chat-zoom-overlay);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.zoom img {
max-width: 90%;
max-height: 90%;
}
.last-message {
display: block;
color: var(--chat-last-message) !important;
font-size: small;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-height: 25px;
}
/* Modern Room List Item */
.room-list-label {
background-color: transparent;
padding: 12px 15px;
border: none;
border-bottom: 1px solid var(--chat-border-2);
margin-bottom: 0;
cursor: pointer;
display: flex; /* Flex is better than Grid here */
flex-direction: column;
gap: 6px;
transition: all 0.2s ease;
position: relative;
border-left: 3px solid transparent;
}
.room-list-label:hover {
background-color: var(--chat-room-hover);
border-left-color: var(--chat-border); /* Subtle hint */
}
.room-list-label.selected {
background-color: var(--chat-selected-bg);
border-left-color: var(--chat-accent);
}
.room-name-grid-row1, .room-name-grid-row2 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.room-name-flex {
display: flex;
align-items: center;
overflow: hidden;
flex-grow: 1;
}
/* Avatar styling */
.room-name-flex .profile-img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
border: 2px solid var(--chat-border-2);
flex-shrink: 0;
}
/* List Typography */
.room-name-label {
pointer-events: none;
color: var(--chat-room-name-color) !important;
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0; /* Reset */
margin-right: auto;
}
.last-message {
display: block;
color: var(--chat-last-message) !important;
font-size: 0.85rem;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-height: 20px;
margin-left: 52px; /* Align with text, skipping avatar */
opacity: 0.8;
}
.room-list-label:hover {
background-color: var(--chat-room-hover);
}
.room-name-grid-row1 {
display: flex;
justify-content: space-between;
}
.room-name-grid-row2 {
display: flex;
justify-content: space-between;
}
.room-name-label {
pointer-events: none;
color: var(--chat-room-name-color) !important;
font-weight: 600;
font-size: 15px;
margin-left: 8px;
}
.group-manage-img {
width: 25px;
height: 25px;
border-radius: 50%;
background-size: cover;
padding: 2px;
border: outset 1px;
right: 20px;
position: absolute;
filter: var(--filter);
}
.create-group-member-img {
width: 25px;
height: 25px;
}
.chat-profile-img,
.profile-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
margin-right: 5px;
border: 1px solid var(--chat-border-2);
}
/* Modern Parent Label (e.g., Favorites) */
.parent-room-label {
color: var(--chat-parent-label-color) !important;
display: flex;
align-items: center;
width: 100%;
padding: 12px 15px;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
background-color: var(--chat-alt-bg); /* Distinct header bg */
border-bottom: 1px solid var(--chat-border-2);
transition: background-color 0.2s;
}
.parent-room-label:hover {
background-color: var(--chat-room-hover) !important;
color: var(--chat-accent) !important;
}
.toggle-button {
font-size: 0.8rem;
margin-right: 8px;
font-weight: bold;
}
.parent-room-label:hover {
background-color: var(--chat-room-hover) !important;
}
/* 設定游標為指標，表示可點擊 */
.toggle-button {
cursor: pointer;
margin-right: 8px;
font-size: 10px;
color: var(--chat-muted);
transition: transform 0.2s;
}
/* Tabs Styling */
/* Modern Tabs */
.ui-tabs .ui-tabs-nav {
background-color: var(--chat-panel-bg); /* Match header */
padding: 10px 15px 0 15px;
border-bottom: 1px solid var(--chat-border-2);
display: flex;
gap: 20px; /* Space between tabs */
margin: 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
flex: none; /* Auto width based on content */
margin: 0;
text-align: center;
border-bottom: 3px solid transparent;
transition: all 0.2s ease;
padding-bottom: 8px;
}
.ui-tabs .ui-tabs-nav li a {
display: block;
padding: 4px 8px;
color: var(--chat-muted);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
outline: none;
width: auto;
transition: color 0.2s;
}
/* Active Tab Styles */
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
border-bottom-color: var(--chat-accent);
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: var(--chat-accent);
}
.ui-tabs .ui-tabs-nav li:hover a {
color: var(--chat-text);
}
.ui-tabs .ui-tabs-panel {
padding: 0px !important;
}
/* Remove default jQuery UI states if they interfere */
.ui-state-default {
background-color: #a9a9a9 !important;
border: none !important;
}
.ui-state-active {
background-color: transparent !important;
border: none !important;
}
.room-list-public-span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 10px;
border-radius: 3px;
border: 1px solid var(--chat-public-span-border);
color: var(--chat-public-span-color);
background-color: transparent;
font-weight: bold;
margin-left: 5px;
}
.group-manage-area {
display: none;
}
.room-list-label.selected {
background-color: var(--chat-selected-bg);
border-left: 3px solid var(--chat-accent);
}
.message-input-drag-over {
border-color: var(--chat-drag-border);
background-color: var(--chat-drag-bg);
}
.down-arrow-img {
width: 40px;
height: 40px;
position: absolute;
right: 25px;
bottom: 100px;
z-index: 9;
cursor: pointer;
filter: invert(1);
background: var(--chat-down-arrow-bg);
border-radius: 20px;
}
/* 快選清單的樣式 */
#suggestionList {
display: none;
border: 1px solid var(--chat-suggestion-border);
max-height: 100px;
overflow-y: auto;
background-color: var(--chat-suggestion-bg);
z-index: 1000;
width: 200px;
}
#suggestionList li {
padding: 5px;
cursor: pointer;
}
#suggestionList li:hover {
background-color: var(--chat-room-hover);
}
/* 模態視窗內容 */
.keyword-modal-content {
background-color: var(--chat-modal-content-bg);
margin: 15% auto;
padding: 20px;
border: 1px solid var(--chat-modal-border);
width: 80%;
}
/* 關閉按鈕 */
.keyword-close {
color: var(--chat-muted);
float: right;
font-size: 28px;
font-weight: bold;
}
.keyword-close:hover,
.keyword-close:focus {
color: var(--chat-text);
text-decoration: none;
cursor: pointer;
}
/* 關鍵字列表樣式 */
#keywordList {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.keyword-item {
background-color: var(--chat-keyword-item-bg);
padding: 5px 10px;
border-radius: 5px;
display: flex;
align-items: center;
}
#chat-room-name-header {
font-weight: bold;
}
.iframe-container {
border: 1px solid var(--chat-border);
margin: 10px 0;
}
.iframe-header {
background-color: var(--chat-iframe-header-bg);
padding: 4px;
text-align: right;
position: relative;
}
.open-new-window-icon {
cursor: pointer;
fill: var(--chat-open-icon-color);
}
.upload-icon {
cursor: pointer;
filter: var(--filter);
}
#htmlCodeModal {
z-index: 9991 !important;
}
.html-code-modal-content {
background-color: var(--chat-modal-content-bg);
margin: 5% auto;
padding: 20px;
border: 1px solid var(--chat-modal-border);
width: 80%;
}
.html-code-close {
color: var(--chat-muted);
float: right;
font-size: 28px;
font-weight: bold;
}
.html-code-close:hover,
.html-code-close:focus {
color: var(--chat-text);
text-decoration: none;
cursor: pointer;
}
/* #htmlCodeModalUrl {} Removed empty rule */
.svg-container-open {
display: inline-flex;
}
.svg-container-upload {
display: inline-flex;
}
/* 設置閱讀更多按鈕的樣式 */
.message-content-read-more {
display: none;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: var(--chat-readmore-bg);
color: var(--chat-accent-text);
padding: 5px 10px;
cursor: pointer;
}
/* 設置模態框的樣式 */
.message-content-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--chat-modal-overlay);
z-index: 200;
}
.message-content-modal-content {
background-color: var(--chat-modal-content-bg);
margin: 15% auto;
padding: 20px;
border: 1px solid var(--chat-modal-border);
width: 80%;
white-space: break-spaces;
}
.message-content-close {
color: var(--chat-muted);
float: right;
font-size: 28px;
font-weight: bold;
}
.message-content-close:hover,
.message-content-close:focus {
color: var(--chat-text);
text-decoration: none;
cursor: pointer;
}
@media (max-width: 768px) {
.message-content-modal-content {
margin: 0;
width: 100%;
border-radius: 0;
white-space: break-spaces;
}
}
.resource-usage {
font-size: small;
}
.preview-button {
display: inline-flex;
margin: 5px;
cursor: pointer;
}
.code-button {
display: inline-flex;
margin: 5px;
cursor: pointer;
}
.unread-count {
background: var(--chat-unread-bg);
color: #fff;
border-radius: 10px;
padding: 2px 6px;
font-size: 11px;
font-weight: 600;
min-width: 18px;
text-align: center;
margin-left: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.chat-loading-img {
width: 200px;
height: 200px;
}
/* 基本樣式設定 */
.chat-room-search-container {
display: inline-flex;
align-items: baseline;
cursor: pointer;
position: absolute;
right: 80px;
}
.chat-room-search-icon {
width: 24px;
height: 24px;
fill: var(--chat-open-icon-color);
transition: opacity 0.3s;
position: absolute;
}
.chat-room-search-bar {
display: none;
margin-left: 0;
padding: 5px;
border: 1px solid var(--chat-suggestion-border);
border-radius: 4px;
position: absolute;
left: -160px;
}
.active .chat-room-search-bar {
display: inline-block;
}
.active .chat-room-search-icon {
opacity: 0;
}
.chat-window {
position: fixed;
top: 50px;
right: 50px;
background-color: var(--chat-panel-bg);
border: 1px solid var(--chat-window-border);
box-shadow: 2px 2px 5px var(--chat-window-shadow);
width: 300px;
height: 700px;
display: none;
z-index: 9999;
flex-direction: column;
}
.ui-state-active a {
color: var(--chat-text) !important;
}
/* ------------------------------------ */
/* 適用於所有由 .ai-markdown 容器生成的表格 */
/* ------------------------------------ */
.ai-markdown table {
width: 100%;
/* 確保表格填滿容器寬度 */
border-collapse: collapse;
/* 合併邊框，避免雙線 */
margin: 15px 0;
/* 上下留白，與周圍內容區隔 */
font-size: 0.95em;
/* 字體稍微縮小，提高可讀性 */
line-height: 1.5;
}
/* ------------------------------------ */
/* 表格頭部 (Header) 樣式 */
/* ------------------------------------ */
.ai-markdown th {
background-color: var(--chat-alt-bg);
/* 淺灰色背景 */
color: var(--chat-text);
font-weight: bold;
padding: 12px 15px;
/* 內邊距 */
text-align: left;
/* 預設左對齊 */
border: 1px solid var(--chat-border);
/* 淺色邊框 */
}
/* ------------------------------------ */
/* 表格數據單元格 (Data Cell) 樣式 */
/* ------------------------------------ */
.ai-markdown td {
padding: 10px 15px;
text-align: left;
/* 預設左對齊 */
border: 1px solid var(--chat-border-2);
/* 更淺的邊框 */
vertical-align: top;
/* 內容頂部對齊 */
}
/* ------------------------------------ */
/* 隔行換色 (Stripe Rows) - 增強可讀性 */
/* ------------------------------------ */
.ai-markdown tbody tr:nth-child(even) {
background-color: var(--chat-markdown-tr-bg);
/* 淺淺的條紋背景 */
}
/* 鼠標懸停效果 (Hover Effect) - 增加互動感 */
.ai-markdown tbody tr:hover {
background-color: var(--chat-selected-bg);
transition: background-color 0.2s ease;
}
/* ------------------------------------ */
/* 響應式處理 (Responsive Design) */
/* ------------------------------------ */
/* 讓表格在小螢幕上可以橫向滾動，防止內容溢出 */
.ai-markdown {
/* 這裡不是直接作用於表格，而是作用於表格的父容器 */
/* 確保表格可以在窄螢幕上滾動 */
overflow-x: auto;
}
/* 將上層容器設定為滾動容器 */
.ai-markdown>table {
display: block;
width: max-content;
/* 讓表格內容決定最小寬度 */
max-width: 100%;
/* 但不允許超出父容器 */
box-sizing: border-box;
/* 確保 padding 和 border 不計入寬度 */
}
/* Token 統計區塊 - 純 CSS 替代原本的模組類別 */
.token-stats {
margin-top: 0.5rem;
border-top: 1px solid #e5e7eb;
padding-top: 0.25rem;
}
.token-badge {
font-size: 0.7rem;
color: #666;
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
display: inline-flex;
gap: 8px;
align-items: center;
}
/* 針對您選取的 opacity 部分，改用純 CSS 屬性 */
.token-label {
opacity: 0.6;
font-style: italic;
}
.token-total {
font-weight: bold;
border-left: 1px solid #d1d5db;
padding-left: 0.5rem;
margin-left: 0.25rem;
}
.sources-list {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 2px 10px;
font-size: 12px;
text-decoration: none;
color: #0056b3;
}
/* Sidebar Footer & Home Button */
.chat-room-footer {
height: auto !important;
padding: 10px 15px;
border-top: 1px solid var(--chat-border-2);
background-color: var(--chat-panel-bg);
flex-shrink: 0;
}
.sidebar-home-btn {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--chat-muted);
font-weight: 600;
padding: 10px;
border-radius: 8px;
transition: all 0.2s;
width: 100%;
}
.sidebar-home-btn:hover {
background-color: var(--chat-room-hover);
color: var(--chat-accent);
}
.home-icon-svg {
width: 20px;
height: 20px;
}
/* Collapsed Footer adjustments */
.sidebar.collapsed .chat-room-footer {
padding: 10px 5px;
}
.sidebar.collapsed .sidebar-home-btn {
justify-content: center;
padding: 10px 0;
}
/* Merged from Chat.inline.css */
.send-message-group {
width: 95%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
z-index: 9999;
padding: 0 8px;
box-sizing: border-box;
flex: 0 0 auto; /* Ensure it doesn't shrink */
}