/* =====================================================================
   SD-HMOOB-AI — GÓI NÂNG CẤP GIAO DIỆN (sd-ui-plus)
   ĐẶT FILE NÀY VÀO: sdhmoobai.click/jsapi/js/fovjs/sd-ui-plus.css

   File này CHỈ THÊM, không sửa gì giao diện gốc:
     1. Giao diện SÁNG (bật bằng nút mặt trời/mặt trăng ở góc trên phải).
     2. Nút micro (nói thay vì gõ).
     3. Nút "Xem thử" + "Tải file" trên khối code.
   Xóa dòng <link ... sd-ui-plus.css> trong index.html là web trở về y như cũ.
===================================================================== */

/* ---------------------------------------------------------------------
   1. GIAO DIỆN SÁNG — chỉ có hiệu lực khi <html data-theme="light">
   Màn đăng nhập và các bảng mua gói/hồ sơ giữ nguyên nền tối như bản gốc.

   BẢNG MÀU "SƯƠNG SỚM": nền KHÔNG dùng trắng tinh (#fff) để đỡ chói, đỡ mỏi mắt.
   Giao diện xếp 3 tầng sáng dần, cùng tông xanh-xám với giao diện tối:
     thanh bên (đậm nhất)  ->  nền chính  ->  thẻ / ô nhập (sáng nhất, nhưng vẫn dịu hơn trắng).
   Muốn sáng hơn / dịu hơn: chỉ cần chỉnh 5 dòng --bg-* và --surface* ngay bên dưới.
--------------------------------------------------------------------- */
html[data-theme="light"]{
    --bg-app:#dbe0ea;
    --bg-main:#e9ecf3;
    --bg-elevated:#f2f4f8;
    --surface:rgba(246,247,251,.72);
    --surface-2:#f3f5f9;
    --surface-hover:rgba(38,48,104,.07);
    --line:rgba(38,48,104,.11);
    --line-2:rgba(38,48,104,.19);
    --text-1:#1b203f;
    --text-2:#343a5e;
    --text-3:#596086;
    --text-4:#838aa9;
    --teal:#0b8f68;
    --cyan:#0b7b9b;
    --violet:#6253d8;
    --pink:#cf4a8c;
    --danger:#d2455e;
    --grad-x:linear-gradient(90deg,#0a86a6,#0b8f68,#6253d8,#0a86a6);
    --grad-soft:linear-gradient(135deg,rgba(11,143,104,.10),rgba(98,83,216,.10));
    /* 3 màu dùng riêng cho giao diện sáng */
    --sdp-side:#e1e5ed;               /* nền thanh bên */
    --sdp-raise:#f4f5f9;              /* bề mặt nổi: ô nhập, menu, nút tròn */
    --sdp-shadow:28,36,84;            /* màu bóng đổ (xanh đậm, không dùng đen) */
    color-scheme:light;
}
html[data-theme="light"] ::selection{background:rgba(11,143,104,.24);color:var(--text-1)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(38,48,104,.20)}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(38,48,104,.34)}
html[data-theme="light"] .ripple{background:rgba(38,48,104,.18)}

/* Thanh bên trái */
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,#e5e8f0,#dee2ec)}
html[data-theme="light"] .sidebar::after{background:linear-gradient(180deg,transparent,rgba(11,123,155,.28),rgba(98,83,216,.28),transparent)}
html[data-theme="light"] .new-chat-btn{color:var(--text-1);background:linear-gradient(135deg,rgba(11,143,104,.13),rgba(98,83,216,.13));border-color:rgba(11,143,104,.34)}
html[data-theme="light"] .new-chat-btn:hover{box-shadow:0 8px 24px rgba(11,143,104,.15)}
html[data-theme="light"] .new-chat-btn kbd{background:rgba(244,245,249,.75)}
html[data-theme="light"] .sidebar-search input{background:rgba(244,245,249,.55)}
html[data-theme="light"] .sidebar-search input:focus{background:var(--sdp-raise);border-color:rgba(11,123,155,.5);box-shadow:0 0 0 4px rgba(11,123,155,.10)}
html[data-theme="light"] .history-item:hover{color:var(--text-1)}
html[data-theme="light"] .history-item.active{color:var(--text-1);background:linear-gradient(90deg,rgba(11,143,104,.16),rgba(98,83,216,.08) 70%,transparent)}
html[data-theme="light"] .account-avatar{background:linear-gradient(135deg,#bcc3df,#9ea6cf);color:#1b203f}
html[data-theme="light"] .account-box.logged-in .account-avatar::after{border-color:var(--sdp-side)}
html[data-theme="light"] .account-dropdown{background:rgba(242,244,248,.98);box-shadow:0 24px 60px rgba(var(--sdp-shadow),.22)}
html[data-theme="light"] .account-item:hover{background:rgba(38,48,104,.06)}
html[data-theme="light"] .sidebar-overlay{background:rgba(28,36,76,.38)}
/* Thẻ "Tải App cho máy tính": bản gốc để chữ trắng nên trên nền sáng không đọc được */
html[data-theme="light"] .download-app-row .da-text b{color:var(--text-1)}
html[data-theme="light"] .download-app-row:hover{border-color:rgba(11,123,155,.5);box-shadow:0 8px 22px rgba(11,123,155,.14)}
/* Thẻ "Nâng cấp lên Pro" giữ nền tối -> dòng mô tả phải dùng chữ sáng, kẻo chìm vào nền */
html[data-theme="light"] .upgrade-pro-btn .up-desc{color:#b4bade}
@media (max-width:768px){
    html[data-theme="light"] .sidebar{box-shadow:none}
    html[data-theme="light"] .sidebar.open{box-shadow:24px 0 60px rgba(var(--sdp-shadow),.28)}
}

/* Khung chính + nền */
html[data-theme="light"] .blob{opacity:.20}
html[data-theme="light"] #starCanvas{display:none}
html[data-theme="light"] .grid-fx{background-image:linear-gradient(rgba(38,48,104,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(38,48,104,.045) 1px,transparent 1px)}
html[data-theme="light"] .spotlight{background:radial-gradient(circle,rgba(11,123,155,.07),transparent 60%)}
html[data-theme="light"] .chat-header{background:rgba(233,236,243,.80)}
html[data-theme="light"] .header-status{color:#097553;background:rgba(11,143,104,.11);border-color:rgba(11,143,104,.3)}
html[data-theme="light"] .user-badge{background:rgba(244,245,249,.90)}
html[data-theme="light"] .user-badge.pro{color:#04120d}
html[data-theme="light"] .user-badge.premium{color:#fff}

/* Tin nhắn */
html[data-theme="light"] .user-row .message-content{background:linear-gradient(135deg,rgba(11,143,104,.16),rgba(98,83,216,.18));border-color:rgba(38,48,104,.11);box-shadow:0 8px 22px rgba(var(--sdp-shadow),.09),inset 0 1px 0 rgba(255,255,255,.45)}
html[data-theme="light"] .user-row .text-wrapper{color:var(--text-1)}
html[data-theme="light"] .collapsed-user-msg::after{background:linear-gradient(transparent,rgba(216,224,239,.97))}
html[data-theme="light"] .toggle-msg-btn{color:var(--text-1);background:rgba(38,48,104,.07)}
html[data-theme="light"] .toggle-msg-btn:hover{background:rgba(38,48,104,.13)}
html[data-theme="light"] .ai-row .text-wrapper h1,
html[data-theme="light"] .ai-row .text-wrapper h2,
html[data-theme="light"] .ai-row .text-wrapper h3,
html[data-theme="light"] .ai-row .text-wrapper h4,
html[data-theme="light"] .ai-row .text-wrapper strong{color:var(--text-1)}
html[data-theme="light"] .ai-row .text-wrapper em{color:#3d4270}
html[data-theme="light"] .ai-row .text-wrapper th{background:rgba(38,48,104,.07);color:var(--text-1)}
html[data-theme="light"] .ai-row .text-wrapper tr:hover td{background:rgba(38,48,104,.035)}
html[data-theme="light"] .ai-row .text-wrapper blockquote{background:linear-gradient(90deg,rgba(98,83,216,.10),transparent)}
html[data-theme="light"] .text-wrapper :not(pre)>code{background:rgba(98,83,216,.11);color:#4a3bbd;border-color:rgba(98,83,216,.22)}
html[data-theme="light"] .thinking-text{background:linear-gradient(90deg,var(--text-4),var(--text-1),var(--text-4));background-size:200% auto;-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .msg-action-btn:hover{color:var(--text-1)}
html[data-theme="light"] .sd-img-wait{background:#dbe0ea;border-color:var(--line-2)}
html[data-theme="light"] .sd-img-wait i{background:linear-gradient(135deg,#0a86a6,#6253d8)}

/* Khối code giữ nền tối (dễ đọc code hơn) -> trả lại bộ màu tối cho riêng khối code */
html[data-theme="light"] .code-block-container{
    --text-3:#8f95bf;--text-4:#5f6594;--line:rgba(140,150,230,.10);--line-2:rgba(140,150,230,.20);--surface-hover:rgba(46,52,98,.5);
    box-shadow:0 14px 32px rgba(var(--sdp-shadow),.18);
}

/* Màn hình chào */
html[data-theme="light"] .welcome-hero h1{color:var(--text-1)}
html[data-theme="light"] .hero-sub .tw{color:var(--text-1)}
html[data-theme="light"] .hero-greet{background:rgba(244,245,249,.72)}
html[data-theme="light"] .hero-logo img{box-shadow:0 18px 40px rgba(var(--sdp-shadow),.26)}
html[data-theme="light"] .suggest-card b{color:var(--text-1)}
html[data-theme="light"] .suggest-card:hover{box-shadow:0 16px 34px rgba(var(--sdp-shadow),.13)}
html[data-theme="light"] .suggest-card:hover .sc-arrow{color:var(--text-1)}
html[data-theme="light"] .sc-violet{color:#6253d8}
html[data-theme="light"] .hero-chip{background:rgba(244,245,249,.55)}
html[data-theme="light"] .hero-chip:hover{color:var(--text-1);background:rgba(11,143,104,.10)}

/* Ô nhập */
html[data-theme="light"] .input-wrapper{background:var(--sdp-raise);box-shadow:0 14px 38px rgba(var(--sdp-shadow),.13),inset 0 1px 0 rgba(255,255,255,.65)}
html[data-theme="light"] .input-wrapper textarea{color:var(--text-1)}
html[data-theme="light"] .upload-btn{background:rgba(38,48,104,.04)}
html[data-theme="light"] .upload-btn:hover{color:var(--text-1)}
html[data-theme="light"] .send-button{background:rgba(38,48,104,.10)}
html[data-theme="light"] .send-button.ready{color:#04120d}
html[data-theme="light"] .send-button.is-stop{background:#1b203f;color:#fff}
html[data-theme="light"] .send-button.is-stop::before{box-shadow:0 0 0 0 rgba(27,32,63,.4)}
html[data-theme="light"] .file-preview .file-item{background:rgba(38,48,104,.05)}
html[data-theme="light"] .file-preview .file-name{color:var(--text-1)}
html[data-theme="light"] .file-preview .remove-file{background:rgba(38,48,104,.10)}
html[data-theme="light"] .scroll-bottom-btn{color:var(--text-1);background:var(--sdp-raise);box-shadow:0 10px 26px rgba(var(--sdp-shadow),.2)}
html[data-theme="light"] .drop-overlay{background:rgba(233,236,243,.88)}

/* ---------------------------------------------------------------------
   NÚT ĐỔI GIAO DIỆN SÁNG / TỐI (ở thanh trên, cạnh huy hiệu tài khoản)
--------------------------------------------------------------------- */
.sdp-theme-btn{width:36px;height:36px;border-radius:11px;display:inline-grid;place-items:center;color:var(--text-3);border:1px solid var(--line);background:transparent;transition:.2s var(--ease);flex-shrink:0}
.sdp-theme-btn:hover{color:var(--text-1);background:var(--surface-hover);border-color:var(--line-2)}
.sdp-theme-btn .sdp-sun{display:none}
html[data-theme="light"] .sdp-theme-btn .sdp-sun{display:block}
html[data-theme="light"] .sdp-theme-btn .sdp-moon{display:none}

/* ---------------------------------------------------------------------
   2. NÚT MICRO
--------------------------------------------------------------------- */
.sdp-mic-btn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--text-3);border:1px solid var(--line);background:transparent;transition:.2s var(--ease)}
.sdp-mic-btn:hover{color:var(--text-1);background:var(--surface-hover);border-color:var(--line-2)}
.sdp-mic-btn .sdp-mic-stop,.sdp-mic-btn .sdp-mic-spin{display:none}
.sdp-mic-btn.is-recording{color:#fff;background:#e5484d;border-color:#e5484d}
.sdp-mic-btn.is-recording::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(229,72,77,.55);animation:sdpMicPulse 1.4s infinite}
.sdp-mic-btn.is-recording .sdp-mic-icon{display:none}
.sdp-mic-btn.is-recording .sdp-mic-stop{display:block}
.sdp-mic-btn.is-busy{pointer-events:none;color:var(--teal)}
.sdp-mic-btn.is-busy .sdp-mic-icon{display:none}
.sdp-mic-btn.is-busy .sdp-mic-spin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid transparent;border-top-color:currentColor;border-right-color:currentColor;animation:sdpSpin .8s linear infinite}
@keyframes sdpMicPulse{to{box-shadow:0 0 0 11px rgba(229,72,77,0)}}
@keyframes sdpSpin{to{transform:rotate(360deg)}}
.sdp-mic-time{display:none;font-size:.74rem;font-weight:600;color:#e5484d;font-variant-numeric:tabular-nums;white-space:nowrap}
.sdp-mic-time.show{display:inline}

/* ---------------------------------------------------------------------
   3. NÚT TRÊN KHỐI CODE: "Xem thử" + "Tải file"
--------------------------------------------------------------------- */
.sdp-code-btn{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--text-3);padding:5px 10px;border-radius:9px;border:1px solid var(--line);background:transparent;transition:.2s var(--ease);white-space:nowrap}
.sdp-code-btn:hover{color:#fff;background:var(--surface-hover);border-color:var(--line-2)}
.sdp-code-btn.sdp-run{color:#7ee2c0;border-color:rgba(23,201,142,.35)}
.sdp-code-btn.sdp-run:hover{color:#04120d;background:#17c98e;border-color:#17c98e}
@media (max-width:520px){.sdp-code-btn span{display:none}.sdp-code-btn{padding:5px 8px}}

/* Cửa sổ xem thử HTML */
.sdp-preview{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(5,6,13,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sdp-preview.show{display:flex;animation:sdpFade .2s ease}
@keyframes sdpFade{from{opacity:0}}
.sdp-preview-box{display:flex;flex-direction:column;width:min(1100px,100%);height:min(780px,100%);border-radius:18px;overflow:hidden;background:#0b0d1c;border:1px solid rgba(140,150,230,.25);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.sdp-preview-bar{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 16px;color:#c9cde8;font-size:.86rem;font-weight:600;border-bottom:1px solid rgba(140,150,230,.16);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.sdp-preview-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sdp-preview-bar button{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;font-size:.78rem;font-weight:600;color:#8f95bf;border:1px solid rgba(140,150,230,.16);background:transparent;transition:.2s}
.sdp-preview-bar button:hover{color:#fff;background:rgba(46,52,98,.5)}
.sdp-preview-bar button.on{color:#04120d;background:#17c98e;border-color:#17c98e}
.sdp-preview-stage{flex:1;min-height:0;display:flex;justify-content:center;background:#e9ecf5}
.sdp-preview-stage iframe{width:100%;height:100%;border:0;background:#fff;transition:width .3s ease}
.sdp-preview-stage.is-phone iframe{width:390px;max-width:100%;box-shadow:0 0 0 1px rgba(40,50,110,.15)}
@media (max-width:640px){.sdp-preview{padding:0}.sdp-preview-box{border-radius:0;height:100%}.sdp-preview-bar .sdp-size{display:none}}
@media (prefers-reduced-motion:reduce){.sdp-mic-btn.is-recording::before,.sdp-mic-btn.is-busy .sdp-mic-spin,.sdp-preview.show{animation:none}}