#hf-chat {
  --hf-glass: rgba(255, 255, 255, .64);
  --hf-glass-strong: rgba(248, 249, 251, .78);
  --hf-glass-border: rgba(255, 255, 255, .72);
  --hf-glass-shadow: 0 4px 14px rgba(20, 25, 35, .055);
  --hf-blue: #069bf1;
}

html:has(#hf-chat) { background: #fff !important; overflow: hidden !important; }
body:has(#hf-chat) { margin: 0 !important; background: #fff !important; color: #0d0d0d !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", sans-serif !important; overflow: hidden !important; }
body:has(#hf-chat) #wpadminbar { display: none !important; }
@media screen and (max-width: 768px) {
  body:has(#hf-chat) #mobile-footer-menu.mobile-footer-menu-v2 {
    border-color: rgba(255, 255, 255, .45) !important;
    background: rgba(142, 146, 151, .52) !important;
    box-shadow: 0 6px 18px rgba(38, 42, 46, .10) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
  }
  body:has(#hf-chat) #mobile-footer-menu .mobile-footer-v2-item { color: #fff; }
  body:has(#hf-chat) #mobile-footer-menu .mobile-footer-v2-item.is-active,
  body:has(#hf-chat) #mobile-footer-menu .mobile-footer-v2-item[aria-current="page"] { color: #fff; }
}
#hf-chat, #hf-chat * { box-sizing: border-box; }
#hf-chat { position: fixed; inset: 0; z-index: 19; height: var(--chat-height, 100dvh); background: #fff; font-size: 16px; line-height: 1.5; }
#hf-chat button, #hf-chat input, #hf-chat textarea { font: inherit; color: inherit; letter-spacing: 0; }
#hf-chat button { cursor: pointer; border: 0; background: none; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; -webkit-tap-highlight-color: transparent; }
#hf-chat button:disabled { opacity: .45; cursor: wait; }
#hf-chat button:focus-visible, #hf-chat a:focus-visible { outline: 2px solid var(--hf-blue); outline-offset: 3px; }
#hf-chat .bi { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 24px; line-height: 1; }

#hf-chat .circle,
#hf-chat .mode-tabs,
#hf-chat #composer,
#hf-chat dialog {
  border: 1px solid var(--hf-glass-border);
  background: var(--hf-glass);
  box-shadow: var(--hf-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

#hf-chat .circle { position: relative; width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; transition: transform 100ms ease-out, background-color 160ms ease; }
#hf-chat .circle { background: var(--hf-glass); box-shadow: 0 3px 12px rgba(20, 28, 40, .05); }
#hf-chat .circle:active { background-color: rgba(235,237,240,.86); box-shadow: 0 2px 8px rgba(20,28,40,.05); }
#hf-chat [data-action="menu"] .bi::before { content: ""; width: 20px; height: 12px; background: linear-gradient(currentColor,currentColor) left top / 20px 2px no-repeat, linear-gradient(currentColor,currentColor) left bottom / 13px 2px no-repeat; }
#hf-chat .circle:active, #hf-chat .composer-tools button:active, #hf-chat .mode-tabs button:active { transform: scale(.96); }

#hf-chat .chat-sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #fff; transition: transform .32s cubic-bezier(.22, 1, .36, 1), border-radius .32s; }
#hf-chat .chat-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 15px) 20px 12px; flex-shrink: 0; background: linear-gradient(180deg, rgba(255,255,255,.96) 70%, rgba(255,255,255,0)); }
#hf-chat .mode-tabs { position: absolute; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 999px; isolation: isolate; background: rgba(255,255,255,.58); box-shadow: 0 3px 12px rgba(20,28,40,.05); }
#hf-chat .mode-tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border-radius: 999px; background: rgba(226,229,234,.76); box-shadow: 0 2px 5px rgba(25,34,45,.05); transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
#hf-chat .mode-tabs:has([data-mode="work"][aria-selected="true"])::before { transform: translateX(100%); }
#hf-chat .mode-tabs button { position: relative; z-index: 1; width: 70px; min-height: 40px; padding: 7px 12px; border-radius: 999px; font-size: 15px; font-weight: 400; transition: transform 100ms ease-out; }
#hf-chat .mode-tabs button::after { content: ""; position: absolute; inset: -2px 0; }
#hf-chat .mode-tabs button[aria-selected="true"] { color: #111; font-weight: 400; }
#hf-chat .mode-tabs:has(button:active) { box-shadow: 0 2px 8px rgba(20,28,40,.05); }

#hf-chat #messages { flex: 1; width: 100%; max-width: 800px; align-self: center; overflow: auto; overscroll-behavior: contain; padding: 25px 20px 16px; }
#hf-chat .message { margin: 0 0 24px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.8; }
#hf-chat .message.user { width: fit-content; max-width: 85%; margin-left: auto; padding: 11px 17px; border: 0; border-radius: 22px; background: #f1f2f4; }
#hf-chat .message.assistant { padding: 4px 0; }
#hf-chat .message-copy { white-space: pre-wrap; overflow-wrap: anywhere; }
#hf-chat .generated-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
#hf-chat .generated-images a { display: block; overflow: hidden; border-radius: 16px; background: #f0f1f3; }
#hf-chat .generated-images img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

#hf-chat .composer-dock { flex-shrink: 0; width: 100%; max-width: 800px; align-self: center; padding: 0 14px calc(env(safe-area-inset-bottom) + 94px); transition: padding .2s ease; }
#hf-chat #status { min-height: 0; margin: 0 10px 7px; color: #73777d; text-align: center; font-size: 12px; line-height: 1.5; }
#hf-chat #status:empty { display: none; }
#hf-chat #composer { position: relative; padding: 14px 9px 7px; border-radius: 26px; background: rgba(255,255,255,.68); box-shadow: 0 4px 16px rgba(20,25,35,.055); }
#hf-chat #composer:focus-within { box-shadow: 0 4px 16px rgba(20,25,35,.06), 0 0 0 2px rgba(0,155,250,.15); }
#hf-chat textarea { position: relative; z-index: 1; display: block; width: 100%; min-height: 36px; max-height: 150px; padding: 0 5px 8px; resize: none; border: 0 !important; border-radius: 0; outline: none !important; box-shadow: none !important; background: transparent !important; font-size: 17px; line-height: 1.45; }
#hf-chat textarea::placeholder { color: #8f9297; }
#hf-chat .composer-tools { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
#hf-chat .composer-tools button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: transform 100ms ease-out, background .15s ease; }
#hf-chat .composer-tools button:hover { background: rgba(255,255,255,.56); }
#hf-chat .tools-right { display: flex; align-items: center; gap: 9px; }
#hf-chat .quota-button { color: #078de0; }
#hf-chat #send { width: 34px; height: 34px; margin: 5px; color: #fff; background: #009bfa; box-shadow: none; }
#hf-chat #send::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
#hf-chat.keyboard-open .composer-dock { padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
body:has(#hf-chat.keyboard-open) #mobile-footer-menu { display: none !important; }

#hf-chat .chat-sidebar { position: absolute; inset: 0 auto 0 0; width: 75%; max-width: 330px; padding: calc(env(safe-area-inset-top) + 18px) 22px calc(env(safe-area-inset-bottom) + 94px); display: flex; flex-direction: column; overflow: hidden; background: #fbfbfc; }
#hf-chat.sidebar-open .chat-sheet { transform: translateX(min(75vw, 330px)); border-radius: 38px 0 0 38px; box-shadow: -6px 0 20px rgba(25,30,40,.08); overflow: hidden; }
#hf-chat .sidebar-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
#hf-chat .sidebar-heading strong { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
#hf-chat .side-links { display: flex; flex-direction: column; gap: 3px; }
#hf-chat .side-links button { height: 44px; display: flex; align-items: center; gap: 13px; text-align: left; font-size: 16px; border-radius: 14px; transition: background .15s ease, transform 100ms ease-out; }
#hf-chat .side-links button:active { transform: scale(.98); background: rgba(255,255,255,.62); }
#hf-chat .circle > .bi { position: relative; z-index: 1; width: 25px; height: 25px; font-size: 22px; }
#hf-chat .side-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#hf-chat .side-icon .remote-dot { fill: #19bf86; stroke: #fbfbfc; stroke-width: 1.1; }
#hf-chat .recent-label { margin: 25px 0 13px; font-size: 16px; font-weight: 550; }
#hf-chat #history { flex: 1; min-height: 0; overflow: auto; }
#hf-chat #history button { display: block; width: 100%; padding: 10px 8px; overflow: hidden; border-radius: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
#hf-chat #history button.active { background: rgba(255,255,255,.58); font-weight: 600; }
#hf-chat .side-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
#hf-chat .new-chat { display: flex; align-items: center; min-height: 44px; gap: 9px; padding: 10px 18px; color: #fff; border-radius: 999px; background: linear-gradient(145deg, #16adff, #008feb); box-shadow: 0 3px 8px rgba(0,149,238,.15); }
#hf-chat .new-chat:active { transform: scale(.97); }
#hf-chat .new-chat .bi { font-size: 20px; }
#hf-chat #history-search { width: 100%; margin: 0 0 8px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.86); border-radius: 14px; outline: none; background: rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(40,45,52,.05); font-size: 14px; }
#hf-chat .sheet-shade { display: none; position: absolute; inset: 0 0 0 min(75vw, 330px); z-index: 4; }
#hf-chat.sidebar-open .sheet-shade { display: block; }

#hf-chat dialog { width: calc(100% - 36px); max-width: 430px; padding: 22px; color: #151515; border-radius: 25px; }
#hf-chat dialog::backdrop { background: rgba(25,28,35,.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#hf-chat .dialog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#hf-chat .dialog-top h2 { margin: 0; font-size: 20px; letter-spacing: -.015em; }
#hf-chat #dialog-body p { margin: 12px 0; color: #62666d; font-size: 15px; }
#hf-chat #dialog-body button, #hf-chat #dialog-body a { display: block; width: 100%; margin-top: 12px; padding: 12px; text-align: center; border-radius: 15px; background: rgba(235,237,240,.72); }
#hf-chat #dialog-body .login { color: #fff; background: linear-gradient(145deg, #20b4ff, #088ee8); }
#hf-chat #dialog-body .allowance { margin-top: 0; color: #3c424a; }
#hf-chat .model-field { display: block; margin-top: 13px; }
#hf-chat .model-field > span { display: block; margin: 0 0 7px; color: #262a30; font-size: 13px; font-weight: 600; }
#hf-chat .model-field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(202,205,210,.72); border-radius: 13px; outline: none; background: rgba(255,255,255,.72); color: #191b1f; font-size: 15px; }
#hf-chat .model-field select:focus { border-color: rgba(0,155,250,.7); box-shadow: 0 0 0 2px rgba(0,155,250,.12); }
#hf-chat #dialog-body .setting-note { margin: 10px 0 0; color: #737980; font-size: 13px; }
#hf-chat #dialog-body .save-model { margin-top: 18px; color: #fff; background: linear-gradient(145deg, #18adff, #038ee9); }
#hf-chat .history-empty { padding: 12px 0; color: #92969c; font-size: 14px; }

@media (min-width: 769px) {
  #hf-chat .chat-sidebar { padding-bottom: 20px; }
  #hf-chat .chat-header { padding: 20px 30px; }
  #hf-chat .composer-dock { padding-bottom: 20px; }
  #hf-chat.sidebar-open .chat-sheet { right: 330px; transform: translateX(330px); border-radius: 0; }
  #hf-chat.sidebar-open .sheet-shade { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hf-chat .mode-tabs::before, #hf-chat .composer-dock { transition: none; }
  #hf-chat .chat-sheet { transition: opacity 180ms ease; }
  #hf-chat .circle, #hf-chat .composer-tools button, #hf-chat .mode-tabs button { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #hf-chat .circle, #hf-chat .mode-tabs, #hf-chat #composer, #hf-chat dialog { background: #f8f8f9; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #hf-chat .circle, #hf-chat .mode-tabs, #hf-chat #composer, #hf-chat dialog { border-color: #a7a7aa; background: rgba(255,255,255,.95); }
}