Update custom.css

custom.css

@@ -3,206 +3,171 @@ 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;
-}
-@keyframes blendShift {
-  0% { background-position: 0% 50% }
-  50% { background-position: 100% 50% }
-  100% { background-position: 0% 50% }
+  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;
+.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"] {
-  background: rgba(255, 255, 255, 0.2) !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(0, 0, 0, .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;
+html.dark [role="dialog"], html.dark [role="menu"]{
+  background: rgba(23,23,23,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;
+  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;
 }
 
-/* Switch */
-[role="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;
-  box-shadow: 0 0 10px rgba(0, 153, 255, 0.7) !important;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  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(16px); }
+[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;  
+}  
+
 
-/* 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: "";
@@ -214,7 +179,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;
@@ -230,12 +195,21 @@ 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ứ");
@@ -250,39 +224,55 @@ body::after {
   letter-spacing: 0.2px;
   pointer-events: none;
   z-index: 10001;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+  color: #1f2937;
+  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; }