Update custom.css

custom.css

@@ -1,140 +1,3 @@
-/* ===========================
-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 {
@@ -161,6 +24,8 @@ html::before {
   box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
   pointer-events: none;
   z-index: 9999;
+  animation: fade-out 1s ease forwards;
+  animation-delay: 10s;
 }
 html::after {
   content: "";
@@ -175,10 +40,13 @@ html::after {
   background: linear-gradient(90deg, #60a5fa, #3b82f6, #38bdf8, #4f46e5, #60a5fa);
   background-size: 200% 100%;
   box-shadow: 0 0 10px var(--glow-1), 0 0 18px var(--glow-2);
-  animation: loading-grow 5s cubic-bezier(0.65, 0, 1, 1) forwards, loading-shimmer 2s linear infinite;
+  animation:
+    loading-grow 4s cubic-bezier(0.65, 0, 1, 1) forwards,
+    loading-shimmer 2s linear infinite,
+    fade-out 1s ease forwards 10s;
 }
 body::after {
-  content: var(--label, "Đang xác minh bạn không phải Bot");
+  content: var(--label, "Đang chuẩn bị mọi thứ...");
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
@@ -192,7 +60,7 @@ body::after {
   z-index: 10001;
   color: #1f2937;
   text-shadow: 0 1px 2px rgba(0,0,0,0.45);
-  animation: loading-label 5s cubic-bezier(0.65, 0, 1, 1) forwards;
+  animation: loading-label 4s cubic-bezier(0.65, 0, 1, 1) forwards, fade-out 1s ease forwards 10s;
 }
 html.dark body::after { color: #ffffff; }
 html.light body::after { color: #1f2937; }
@@ -211,16 +79,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"; opacity: 0; }
+  24% { --label: "Kiểm tra API/MCP server"; 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: "Đang kết nối đến AWS"; opacity: 0; }
+  46% { --label: "Xử lý dữ liệu"; opacity: 0; }
   47.5% { opacity: 1; }
   68% { opacity: 0; }
-  69% { --label: "Khởi động Ollama"; opacity: 0; }
+  69% { --label: "Kích hoạt Tensorflow"; opacity: 0; }
   70.5% { opacity: 1; }
   87% { opacity: 0; }
   88% { --label: "Kiểm tra lại lần cuối"; opacity: 0; }
@@ -229,18 +97,10 @@ html.light body::after { color: #1f2937; }
   99% { --label: "Đang đợi trình duyệt phản hồi"; opacity: 0; }
   100% { opacity: 1; }
 }
-@media (prefers-reduced-motion: reduce) {
-  html::after { animation: loading-grow 5s linear forwards; }
-  body::after { animation: none; }
+@keyframes fade-out {
+  to { opacity: 0; visibility: hidden; }
 }
-
-/* 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;  
-}  
+@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; }
+}