Update custom.css

custom.css

@@ -1,3 +1,140 @@
+/* ===========================
+WynGPT - custom.css (updated)
+=========================== */
+
+/* === Voice mode button: gradient + blur + glow === */
+[aria-label="Voice mode"]{
+  background: linear-gradient(135deg,#ffffff,#cceeff,#99ddff,#66ccff,#33ccff,#00ccff);
+  background-size: 600% 600%;
+  animation: blendShift 16s ease-in-out infinite;
+  color:#fff;border:none;
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 0 20px rgba(0,204,255,.4),0 0 40px rgba(0,204,255,.3),0 0 60px rgba(0,204,255,.2);
+  transition:.3s; position:relative; z-index:1;
+}
+@keyframes blendShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+
+/* === Send button === */
+/*
+#send-message-button{ background:#33ccff !important; }
+html.dark #send-message-button, :root.dark #send-message-button{ background:#0099ff !important; }
+*/
+
+/* === Tooltip (Tippy) blur === */
+.tippy-box{
+  background:rgba(255,255,255,.1) !important;
+  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
+  color:#000 !important; border:1px solid rgba(0,0,0,.1) !important;
+}
+html.dark .tippy-box, :root.dark .tippy-box{
+  background:rgba(0,0,0,.1) !important;
+  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
+  color:#fff !important; border:1px solid rgba(255,255,255,.1) !important;
+}
+
+/* ================= (Sidebar styles REMOVED as requested) ================= */
+
+/* ================= Khung nhập tin nhắn ================= */
+html.light #message-textarea{
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  background: rgba(255,255,255,.5) !important; color:#000 !important;
+  border:1px solid rgba(0,0,0,.1); border-radius:8px;
+}
+html.dark #message-textarea, :root.dark #message-textarea{
+  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+  background: rgba(0,0,0,.35) !important; color:#fff !important;
+  border:1px solid rgba(255,255,255,.1); border-radius:8px;
+}
+
+/* ================= Popup / Menu ================= */
+html:has([role="dialog"][data-state="open"]), html:has([role="menu"][data-state="open"]) { position:relative; }
+html.light:has([role="dialog"][data-state="open"])::before,
+html.light:has([role="menu"][data-state="open"])::before{
+  content:""; position:fixed; inset:0; z-index: 40;
+  background: rgba(255,255,255,.1);
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  pointer-events:none;
+}
+html.dark:has([role="dialog"][data-state="open"])::before,
+html.dark:has([role="menu"][data-state="open"])::before{
+  content:""; position:fixed; inset:0; z-index: 40;
+  background: rgba(0,0,0,.18);
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+  pointer-events:none;
+}
+
+/* Popup/menu mờ ĐẬM hơn với màu blur mới */
+html.light [role="dialog"], html.light [role="menu"],
+html.dark [role="dialog"], html.dark [role="menu"]{
+  background: rgba(23,23,23,0.5) !important;
+  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
+  color: inherit !important;
+  border-radius:12px; overflow:hidden;
+  border:1px solid rgba(255,255,255,.12);
+  position:relative; z-index: 50 !important;
+}
+
+/* ================= Cài đặt: POPUP (center, bigger) ================= */
+[role="dialog"]{
+  position: fixed !important;
+  top: 50% !important; left: 50% !important;
+  transform: translate(-50%,-50%) !important;
+  width: min(960px, 96vw) !important;
+  max-height: 90vh !important; height: auto !important;
+  margin:0 !important; max-width:none !important;
+  border-radius:16px !important;
+  overflow: auto !important;
+}
+
+/* Không blur các phần con bên trong dialog */
+[role="dialog"] *{
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  background-color: transparent;
+}
+
+/* Nút LƯU */
+[role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i], [aria-label*="Save" i], [data-action="save"], [data-testid*="save" i], [id*="save" i], [class*="save" i]){
+  border-radius: 10px; padding: .55rem 1rem; font-weight:600;
+  border:1px solid rgba(0,0,0,.8);
+  background:#000; color:#fff;
+  transition: transform .12s ease, opacity .2s ease;
+}
+[role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i], [aria-label*="Save" i], [data-action="save"], [data-testid*="save" i], [id*="save" i], [class*="save" i]):hover{ opacity:.9 }
+[role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i], [aria-label*="Save" i], [data-action="save"], [data-testid*="save" i], [id*="save" i], [class*="save" i]):active{ transform: translateY(1px) }
+html.dark [role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i], [aria-label*="Save" i], [data-action="save"], [data-testid*="save" i], [id*="save" i], [class*="save" i]){
+  background:#fff; color:#000; border-color: rgba(255,255,255,.85);
+}
+
+/* Toast/thông báo luôn rõ */
+[role="status"], .toast, [data-sonner-toaster]{
+  position:relative; z-index:60;
+  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
+}
+
+[role="switch"]{
+  position: relative;
+  display:inline-flex; align-items:center; justify-content:flex-start;
+  width: 42px; height: 24px; border-radius:999px;
+  background: rgba(0,0,0,.2);
+  transition: background-color .25s ease, box-shadow .25s ease;
+}
+html.dark [role="switch"]{ background: rgba(255,255,255,.25); }
+
+[role="switch"]::before{
+  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
+  border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
+  transition: transform .25s ease;
+}
+html.dark [role="switch"]::before{ background:#000; box-shadow:0 1px 2px rgba(0,0,0,.35); }
+
+[role="switch"][aria-checked="true"] {
+  background-color: #0099ff !important; /* xanh dương */
+  box-shadow: 0 0 10px rgba(0, 153, 255, 0.7) !important; /* đổ bóng xanh */
+  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* mượt khi chuyển */
+}
+[role="switch"][aria-checked="true"]::before{ transform: translateX(18px); }
+
 html:not(:has(#logo))::before,
 html:not(:has(#logo))::after,
 body:not(:has(#logo))::after {
@@ -46,7 +183,7 @@ html::after {
     fade-out 1s ease forwards 10s;
 }
 body::after {
-  content: var(--label, "Đang chuẩn bị mọi thứ...");
+  content: var(--label, "Đang chuẩn bị mọi thứ");
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
@@ -79,16 +216,16 @@ html.light body::after { color: #1f2937; }
   10% { --label: "Truy xuất CSDL"; opacity: 0; }
   11.5% { opacity: 1; }
   23% { opacity: 0; }
-  24% { --label: "Kiểm tra API/MCP server"; opacity: 0; }
+  24% { --label: "Kiểm tra API"; opacity: 0; }
   25.5% { opacity: 1; }
   29% { opacity: 0; }
   30% { --label: "Xây dựng giao diện"; opacity: 0; }
   31.5% { opacity: 1; }
   45% { opacity: 0; }
-  46% { --label: "Xử lý dữ liệu"; opacity: 0; }
+  46% { --label: "Đang kết nối đến AWS"; opacity: 0; }
   47.5% { opacity: 1; }
   68% { opacity: 0; }
-  69% { --label: "Kích hoạt Tensorflow"; opacity: 0; }
+  69% { --label: "Khởi động Ollama"; opacity: 0; }
   70.5% { opacity: 1; }
   87% { opacity: 0; }
   88% { --label: "Kiểm tra lại lần cuối"; opacity: 0; }
@@ -103,4 +240,15 @@ html.light body::after { color: #1f2937; }
 @media (prefers-reduced-motion: reduce) {
   html::after { animation: loading-grow 4s linear forwards, fade-out 1s ease forwards 10s; }
   body::after { animation: fade-out 1s ease forwards 10s; }
-}
+}
+
+/* Light mode */  
+#send-message-button {  
+  background-color: #33ccff !important;  
+}  
+
+/* Dark mode */  
+html.dark #send-message-button,  
+:root.dark #send-message-button {  
+  background-color: #0099ff !important;  
+}