custom.csss

/**************************
WynGPT - custom.css (final optimized + enlarged settings popup)
***************************/

/* === 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% }
}

/* === Tooltip (Tippy) blur === */
.tippy-box {
  background: rgba(255,255,255,.5) !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,.5) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  color: #fff !important; border: 1px solid rgba(255,255,255,.1) !important;
}

/* ================= 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 (nền blur toàn trang) ================= */
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;
}

/* ================= Cài đặt: POPUP (to hơn, mềm hơn, rõ hơn) ================= */
[role="dialog"] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(1100px, 96vw) !important;
  max-height: 92vh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2.25rem 2.5rem !important;
  border-radius: 20px !important;
  overflow: auto !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html.light [role="dialog"] {
  background: rgba(245, 245, 245, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
html.dark [role="dialog"] {
  background: rgba(20, 20, 20, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Nút Lưu === */
[role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i]) {
  font-size: 0.95rem;
  padding: 0.7rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  background: linear-gradient(90deg, #0099ff, #00ccff);
  border: none;
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 153, 255, 0.6);
  transition: all 0.25s ease;
}
[role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i]):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(0, 153, 255, 0.8);
}
html.dark [role="dialog"] button:is(#save-button, [type="submit"], [aria-label*="Lưu" i]) {
  background: linear-gradient(90deg, #ffffff, #e5e5e5);
  color: #000;
}

/* === Textarea & nội dung === */
[role="dialog"] textarea {
  min-height: 110px !important;
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
}
html.dark [role="dialog"] textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}
[role="dialog"] .font-medium {
  font-size: 0.96rem !important;
  letter-spacing: 0.25px;
}
[role="dialog"] > * {
  margin-bottom: 1.2rem !important;
}

/* ================= Switch (toggle) ================= */
[role="switch"] {
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 36px; height: 20px; border-radius: 999px;
  background: rgba(255,255,255,.2);
  transition: background-color .25s ease, box-shadow .25s ease;
}
html.dark [role="switch"] { background: rgba(255,255,255,.2); }
[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(255,255,255,.25);
  transition: transform .25s ease;
}
html.dark [role="switch"]::before { background: #000; box-shadow: 0 1px 2px rgba(255,255,255,.35); }
[role="switch"][aria-checked="true"] {
  background-color: #0099ff !important;
  box-shadow: 0 0 10px rgba(0,153,255,0.7) !important;
}
[role="switch"][aria-checked="true"]::before { transform: translateX(16px); }

/* === Send button === */
#send-message-button { background-color: #33ccff !important; }
html.dark #send-message-button, :root.dark #send-message-button { background-color: #0099ff !important; }

/* === Sidebar glass === */
#sidebar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8) !important;
}
html.dark #sidebar, :root.dark #sidebar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(13, 13, 13, 0.5) !important;
}