/* Reset everything for widget mode */
    html.widget-mode,
    html.widget-mode body {
      margin: 0 !important;
      padding: 0 !important;
      height: 100vh !important;
      width: 100vw !important;
      overflow: hidden !important;
      border: none !important;
      outline: none !important;
    }


    /* Hide ALL unnecessary elements - comprehensive list */
    html.widget-mode #theSidebar,
    html.widget-mode #menubar,
    html.widget-mode .sidebar,
    html.widget-mode #chaboxToggle,
    html.widget-mode .sidebarMenu2_0a,
    html.widget-mode #settingsCont,
    html.widget-mode .avatarSection,
    html.widget-mode #helpHeader,
    html.widget-mode #startMsg,
    html.widget-mode .agentsBG,
    html.widget-mode #agentsPop,
    html.widget-mode #libraryPop,
    html.widget-mode .modal,
    html.widget-mode .modal-backdrop,
    html.widget-mode #modelContainer,
    html.widget-mode .dropdown-toggle2,
    html.widget-mode #searchContainerHalf,
    html.widget-mode .settingsBtn,
    html.widget-mode #topRightActions,
    html.widget-mode #libraryIcon,
    html.widget-mode #newChatBtn,
    html.widget-mode .main-footer,
    html.widget-mode .navbar,
    html.widget-mode .popover,
    html.widget-mode .toast,
    html.widget-mode .tooltip,
    html.widget-mode #open_settings,
    html.widget-mode .dropdown-menu,
    html.widget-mode #networkCont,
    html.widget-mode #callsCont,
    html.widget-mode #toolsCont,
    html.widget-mode #quota,
    html.widget-mode #injectCont,
    html.widget-mode #embedContents,
    html.widget-mode .agentsCont,
    html.widget-mode #categories,
    html.widget-mode .agents,
    html.widget-mode #network,
    html.widget-mode #bottomBar,
    html.widget-mode #face,
    html.widget-mode .fader,
    html.widget-mode #compareCont,
    html.widget-mode #agentDetails,
    html.widget-mode .loginRow,
    html.widget-mode #userAvatarRow,
    html.widget-mode .listenerpanel,
    html.widget-mode #listenerCont,
    html.widget-mode .voiceControlPanel,
    html.widget-mode #voice-modal,
    html.widget-mode #apiKeyModal,
    html.widget-mode #newKeyModal,
    html.widget-mode #savedKeyModal,
    html.widget-mode #voiceCommandsModal,
    html.widget-mode #copyModal,
    html.widget-mode #downloadModal,
    html.widget-mode #editModal,
    html.widget-mode #languageSelect {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      position: absolute !important;
      left: -9999px !important;
    }

    /* Main wrapper - fill the iframe using Grid */
    html.widget-mode .wrapper {
      margin: 0 !important;
      margin-left: 0 !important;
      padding: 0 !important;
      height: 100% !important;
      width: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      bottom: 0 !important;
      right: 0 !important;
      overflow: hidden !important;
      display: grid !important;
      grid-template-rows: 1fr auto; /* Chat content takes space, input area takes auto */
      grid-template-columns: 100%;
      border: none !important;
      outline: none !important;
      /* background: #1a1a2e !important; */
    }

    /* Chat section - fills the grid row */
    html.widget-mode .chatSection {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      grid-row: 1 / -1; /* Take full height initially */
      border: none !important;
      outline: none !important;
    }

    /* Chatbox fills the section - FORCE VISIBILITY */
    html.widget-mode #chatbox,
    html.widget-mode div#chatbox,
    html.widget-mode div#chatbox.col {
      display: flex !important;
      flex-direction: column !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      padding: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      z-index: 99999 !important;
      visibility: visible !important;
      opacity: 1 !important;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
    }

    /* Chat content area - MUST take full width */
    html.widget-mode #chat_content {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      position: relative !important;
    }

    /* Avatar section must be hidden AND take no space */
    html.widget-mode .avatarSection,
    html.widget-mode .container-panel {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      flex: 0 0 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      overflow: hidden !important;
      visibility: hidden !important;
      position: absolute !important;
      left: -9999px !important;
    }

    /* Message thread - scrollable area */
    html.widget-mode #messagethread {
      flex: 1 1 auto !important;
      padding: 16px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 80px !important; /* Space for input */
      height: 100% !important;
      position: relative !important;
    }

    html.widget-mode #inputMessageCont {
      padding: 16px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      left: 0 !important;
      right: 0 !important;
    }

    /* Input area fixed at bottom */
    html.widget-mode #msgCont,
    html.widget-mode .footer5 {
      position: absolute !important;
      top: unset !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      padding: 8px 10px !important;
      margin: 0 !important;
      border-top: 1px solid rgba(255,255,255,0.1) !important;
      z-index: 100 !important;
    }

    html.widget-mode #msgArea {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
    }

    html.widget-mode #note2 {
      border-radius: 20px !important;
      width: 100% !important;
    }

    html.widget-mode .textareaCont {
      width: 100% !important;
    }

    html.widget-mode .inputWrapper,
    html.widget-mode .textareaCont {
      position: relative !important;
    }

    /* Force ALL chat elements to be visible */
    html.widget-mode .wrapper,
    html.widget-mode .chatSection,
    html.widget-mode #chatbox,
    html.widget-mode #chat_content,
    html.widget-mode #messagethread,
    html.widget-mode #inputMessageCont,
    html.widget-mode #msgCont,
    html.widget-mode .footer5,
    html.widget-mode #msgArea,
    html.widget-mode #note2,
    html.widget-mode .inputWrapper,
    html.widget-mode .textareaCont,
    html.widget-mode #sendAppend {
      visibility: visible !important;
      opacity: 1 !important;
      display: flex !important;
      z-index: 1 !important;
    }

    /* Ensure nothing is covering the content */
    html.widget-mode .wrapper {
      z-index: 1 !important;
    }

    html.widget-mode .chatSection {
      z-index: 10 !important;
    }

    html.widget-mode #chatbox {
      z-index: 20 !important;
    }

    html.widget-mode #chat_content {
      z-index: 30 !important;
    }

    html.widget-mode #msgCont,
    html.widget-mode .footer5 {
      z-index: 40 !important;
      border-top: none !important;
    }

    html.widget-mode #worldid-banner {
      position: absolute;
      bottom: 79px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 45;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px 3px 7px;
      border-radius: 14px;
      background: rgba(0,0,0,0.05);
      border: none;
      cursor: pointer;
      font-size: 11px;
      color: var(--text-300, #888);
      transition: background .15s;
      white-space: nowrap;
    }
    html.widget-mode #worldid-banner:hover {
      background: rgba(0,0,0,0.1);
    }
    html.widget-mode #worldid-banner .wid-label { display: none; }
    html.widget-mode #worldid-badge {
      position: absolute;
      bottom: 79px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 45;
      display: none;
      align-items: center;
      gap: 4px;
      padding: 3px 10px 3px 7px;
      border-radius: 14px;
      background: rgba(34,197,94,0.08);
      border: none;
      font-size: 11px;
      color: #22c55e;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    html.widget-mode #worldid-badge:hover .wid-check { display: none; }
    html.widget-mode #worldid-badge:hover .wid-close { display: inline-block; }
    html.widget-mode #worldid-badge .wid-close { display: none; }
    [data-theme="dark"] #worldid-banner {
      background: rgba(255,255,255,0.07);
    }
    [data-theme="dark"] #worldid-banner:hover {
      background: rgba(255,255,255,0.12);
    }

    /* ====== Widget Message Styling ====== */

    /* Reduce padding in the chat area */
    html.widget-mode #inputMessageCont {
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 auto !important;
      padding: 56px 0px 60px 9px !important;
      box-sizing: border-box !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      position: relative !important;
      border: none !important;
      background: transparent !important;
    }

    /* Theme-aware scrollbar in widget mode */
    html.widget-mode #inputMessageCont::-webkit-scrollbar {
      width: 8px !important;
      background: var(--bg-100) !important;
    }
    html.widget-mode #inputMessageCont::-webkit-scrollbar-track {
      background: var(--bg-100) !important;
      border-radius: 4px !important;
    }
    html.widget-mode #inputMessageCont::-webkit-scrollbar-thumb {
      background: var(--bg-400) !important;
      border-radius: 4px !important;
    }
    html.widget-mode #inputMessageCont::-webkit-scrollbar-thumb:hover {
      background: var(--border-200) !important;
    }

    html.widget-mode #inputMessage {
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
    }

    /* Reduce top padding in message thread */
    html.widget-mode #messagethread {
      padding-top: 0 !important;
      top: 0 !important;
    }

    /* User messages should appear on the right side */
    html.widget-mode .inputMsg,
    html.widget-mode span.inputMsg {
      float: right !important;
      clear: both !important;
      margin: 4px 0 !important;
      max-width: 85% !important;
      display: block !important;
      text-align: left !important;
      padding: 10px 14px !important;
    }

    /* AI messages should appear on the left side */
    html.widget-mode .assistantMsg,
    html.widget-mode .outputMsg {
      float: left !important;
      clear: both !important;
      margin: 4px 0 !important;
      max-width: 85% !important;
      padding: 8px 4px !important;
    }

    /* Dashboard usage notices are account-management UI, not widget content. */
    html.widget-mode #zbUsageLimitPreviewNotice,
    html.widget-mode .zb-usage-limit-preview {
      display: none !important;
    }

    html.widget-mode .zb-widget-chat-controls {
      position: fixed;
      top: 10px;
      right: 12px;
      z-index: 120;
      display: flex;
      gap: 7px;
      align-items: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    html.widget-mode .zb-widget-chat-btn {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(120,120,120,.22);
      background: rgba(255,255,255,.78);
      color: #222;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,.10);
      backdrop-filter: blur(12px);
    }
    html[data-theme="dark"].widget-mode .zb-widget-chat-btn {
      background: rgba(28,28,28,.78);
      color: #f4f4f4;
      border-color: rgba(255,255,255,.12);
    }
    html.widget-mode .zb-widget-history-panel {
      position: fixed;
      top: 50px;
      right: 12px;
      left: 12px;
      z-index: 121;
      display: none;
      max-height: 270px;
      overflow: auto;
      border-radius: 16px;
      border: 1px solid rgba(120,120,120,.18);
      background: rgba(255,255,255,.94);
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
      padding: 8px;
      backdrop-filter: blur(14px);
    }
    html.widget-mode .zb-widget-history-panel.is-open { display: block; }
    html[data-theme="dark"].widget-mode .zb-widget-history-panel {
      background: rgba(22,22,22,.94);
      border-color: rgba(255,255,255,.12);
    }
    html.widget-mode .zb-widget-history-item {
      width: 100%;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: inherit;
      text-align: left;
      padding: 9px 10px;
      cursor: pointer;
      display: block;
    }
    html.widget-mode .zb-widget-history-item:hover {
      background: rgba(120,120,120,.10);
    }
    html.widget-mode .zb-widget-history-item strong {
      display: block;
      font-size: 13px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html.widget-mode .zb-widget-history-item small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      opacity: .6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html.widget-mode .zb-widget-history-empty {
      padding: 16px 14px;
      text-align: center;
      color: rgba(40,40,40,.68);
    }
    html.widget-mode .zb-widget-history-empty strong {
      display: block;
      font-size: 13px;
      font-weight: 750;
      color: rgba(28,28,28,.86);
      margin-bottom: 4px;
    }
    html.widget-mode .zb-widget-history-empty span {
      display: block;
      font-size: 12px;
      line-height: 1.35;
      opacity: .72;
    }
    html[data-theme="dark"].widget-mode .zb-widget-history-empty {
      color: rgba(255,255,255,.68);
    }
    html[data-theme="dark"].widget-mode .zb-widget-history-empty strong {
      color: rgba(255,255,255,.88);
    }

    /* Clear floats after messages */
    html.widget-mode #inputMessage::after {
      content: "";
      display: table;
      clear: both;
    }

    /* Hide action buttons (Copy, Read aloud, etc.) */
    html.widget-mode .msgIcons,
    html.widget-mode .copy-btn,
    html.widget-mode .readAloudBtn,
    html.widget-mode .regenerateBtn,
    html.widget-mode .editMsgBtn,
    html.widget-mode .branchBtn,
    html.widget-mode .msgActions,
    html.widget-mode .message-actions,
    html.widget-mode .assistantMsg .msgFooter,
    html.widget-mode .msgFooterRow,
    html.widget-mode .copyBtnSpan,
    html.widget-mode [class*="copy"],
    html.widget-mode [class*="readAloud"],
    html.widget-mode .modelBadge,
    html.widget-mode .modelName,
    html.widget-mode .msgModel,
    html.widget-mode .msgTimestamp,
    html.widget-mode .timestamp {
      display: none !important;
    }