Update custom.css

custom.css

@@ -1,166 +1,208 @@
-/* ===========================
+/**************************
 WynGPT - custom.css (updated)
-=========================== */
+***************************/
 
 /* === Voice mode button: gradient + blur + glow === */
-[aria-label="Voice mode"]{
-  background: linear-gradient(135deg,#ffffff,#cceeff,#99ddff,#66ccff,#33ccff,#00ccff);
+[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;
+  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% }
 }
-@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;
+.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;
+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.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;
+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: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.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;
+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;
+html.light [role="dialog"], html.light [role="menu"] {
+  background: rgba(255, 255, 255, 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;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, .12);
+  position: relative;
+  z-index: 50 !important;
+}
+html.dark [role="dialog"], html.dark [role="menu"] {
+  background: rgba(255, 255, 255, 0.2) !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"]{
+[role="dialog"] {
   position: fixed !important;
-  top: 50% !important; left: 50% !important;
-  transform: translate(-50%,-50%) !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;
+  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"] *{
+[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;
+[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);
+[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="status"], .toast, [data-sonner-toaster] {
+  position: relative;
+  z-index: 60;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
 }
 
-[role="switch"]{
+/* Switch */
+[role="switch"] {
   position: relative;
-  display:inline-flex; align-items:center; justify-content:flex-start;
-  width: 36px; height: 20px; border-radius:999px;
-  background: rgba(0,0,0,.2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 36px;
+  height: 20px;
+  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:2px; left:2px; width:16px; height:16px;
-  border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
+html.dark [role="switch"] { background: rgba(255, 255, 255, .25); }
+[role="switch"]::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  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); }
-
+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 */
+  background-color: #0099ff !important;
+  box-shadow: 0 0 10px rgba(0, 153, 255, 0.7) !important;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
-[role="switch"][aria-checked="true"]::before{ transform: translateX(16px); }
-
-/* 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;  
-}  
-
+[role="switch"][aria-checked="true"]::before { transform: translateX(16px); }
 
+/* Light mode send button */
+#send-message-button { background-color: #33ccff !important; }
 
+/* Dark mode send button */
+html.dark #send-message-button, :root.dark #send-message-button { background-color: #0099ff !important; }
 
+/* Loading bar + label */
 html:not(:has(#logo))::before,
 html:not(:has(#logo))::after,
-body:not(:has(#logo))::after {
-  content: none !important;
-}
+body:not(:has(#logo))::after { content: none !important; }
 html {
   --bar-w: 220px;
   --bar-h: 8px;
   --bar-bottom: 10%;
-  --track-bg: rgba(255,255,255,0.18);
-  --glow-1: rgba(59,130,246,0.65);
-  --glow-2: rgba(56,189,248,0.45);
+  --track-bg: rgba(255, 255, 255, 0.18);
+  --glow-1: rgba(59, 130, 246, 0.65);
+  --glow-2: rgba(56, 189, 248, 0.45);
 }
 html::before {
   content: "";
@@ -172,7 +214,7 @@ html::before {
   height: var(--bar-h);
   background: var(--track-bg);
   border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
+  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;
@@ -188,21 +230,12 @@ html::after {
   border-radius: 999px;
   pointer-events: none;
   z-index: 10000;
-  background: linear-gradient(90deg,
-    #60a5fa,
-    #3b82f6,
-    #2563eb,
-    #1d4ed8,
-    #3b82f6,
-    #38bdf8,
-    #0ea5e9,
-    #60a5fa);
+  background: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb, #1d4ed8, #3b82f6, #38bdf8, #0ea5e9, #60a5fa);
   background-size: 300% 100%;
   box-shadow: 0 0 10px var(--glow-1), 0 0 18px var(--glow-2);
-  animation:
-    loading-grow 4s cubic-bezier(0.65, 0, 1, 1) forwards,
-    loading-shimmer 1.2s linear infinite,
-    fade-out 1s ease forwards 10s;
+  animation: loading-grow 4s cubic-bezier(0.65, 0, 1, 1) forwards,
+             loading-shimmer 1.2s linear infinite,
+             fade-out 1s ease forwards 10s;
 }
 body::after {
   content: var(--label, "Đang chuẩn bị mọi thứ");
@@ -217,55 +250,39 @@ body::after {
   letter-spacing: 0.2px;
   pointer-events: none;
   z-index: 10001;
-  color: #1f2937;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
   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; }
 
-@keyframes loading-grow {
-  from { width: 0; }
-  to   { width: calc(var(--bar-w) * 0.99); }
-}
-@keyframes loading-shimmer {
-  0%   { background-position: 0% 50%; }
-  100% { background-position: 300% 50%; }
-}
+@keyframes loading-grow { from { width: 0; } to { width: calc(var(--bar-w) * 0.99); } }
+@keyframes loading-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
 @keyframes loading-label {
   0%   { opacity: 1; filter: blur(0px); --label: "Đang chuẩn bị mọi thứ"; }
   9%   { opacity: 0; filter: blur(6px); }
   10%  { --label: "Truy xuất CSDL"; opacity: 0; filter: blur(6px); }
   11.5%{ opacity: 1; filter: blur(0px); }
-
   23%  { opacity: 0; filter: blur(6px); }
   24%  { --label: "Kiểm tra API/MCP"; opacity: 0; filter: blur(6px); }
   25.5%{ opacity: 1; filter: blur(0px); }
-
   29%  { opacity: 0; filter: blur(6px); }
   30%  { --label: "Xây dựng giao diện"; opacity: 0; filter: blur(6px); }
   31.5%{ opacity: 1; filter: blur(0px); }
-
   45%  { opacity: 0; filter: blur(6px); }
   46%  { --label: "Đang kết nối đến AWS"; opacity: 0; filter: blur(6px); }
   47.5%{ opacity: 1; filter: blur(0px); }
-
   68%  { opacity: 0; filter: blur(6px); }
   69%  { --label: "Xác thực user token"; opacity: 0; filter: blur(6px); }
   70.5%{ opacity: 1; filter: blur(0px); }
-
   87%  { opacity: 0; filter: blur(6px); }
   88%  { --label: "Khởi chạy Plugin"; opacity: 0; filter: blur(6px); }
   89.5%{ opacity: 1; filter: blur(0px); }
-
   98%  { opacity: 0; filter: blur(6px); }
   99%  { --label: "Kiểm tra lại lần cuối"; opacity: 0; filter: blur(6px); }
   100% { opacity: 1; filter: blur(0px); }
 }
-@keyframes fade-out {
-  to { opacity: 0; visibility: hidden; }
-}
-
+@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
 @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; }