:root {
  /*using fallback colors for zen colors*/
  --browser-primary-color: var(--zen-primary-color, #8ae3be);
  --browser-themed-toolbar-bg: var(--zen-themed-toolbar-bg, #333333);

  --acrylic-bg: light-dark(rgb(250, 250, 250), rgb(24, 24, 27));
  --acrylic-background: rgba(36, 37, 39, 0.6) !important;
  --acrylic-backdrop: saturate(2.5) !important;
  --acrylic-border: 0.5px solid rgba(127, 127, 127, 0.3);
  --acrylic-shadow: 0 8px 32px color-mix(in srgb, var(--browser-primary-color) 15%, transparent 85%);
  --acrylic-radius: 8px;
  --acrylic-glass-bg: color-mix(in srgb, var(--acrylic-bg) 40%, transparent 60%);
  --acrylic-glass-blur: blur(50px);
  --acrylic-glass-border: 1.5px solid
    color-mix(in srgb, var(--browser-primary-color) 20%, transparent 80%);

  --browse-bot-primary-bg: light-dark(
    color-mix(in srgb, var(--browser-primary-color) 90%, white 10%),
    color-mix(in srgb, var(--browser-primary-color) 70%, black 30%)
  );
  --browse-bot-primary: light-dark(
    color-mix(in srgb, var(--browser-primary-color) 50%, black 50%),
    color-mix(in srgb, var(--browser-primary-color) 50%, white 50%)
  );
  --browse-bot-error: #f31260;
  --browse-bot-error-bg: light-dark(#fdd0df, #610726);
  --browse-bot-success: #17c964;
  --browse-bot-success-bg: light-dark(#d1f4e0, #095028);
  --browse-bot-warning: #f5a524;
  --browse-bot-warning-bg: light-dark(#fdedd3, #62420e);
}

browser {
  will-change: transform;
}

@keyframes initial-animation {
  from {
    top: 0;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-10px);
  }

  to {
    top: 20px;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes glass-disappear {
  0% {
    backdrop-filter: blur(10px);
    opacity: 1;
  }

  99% {
    backdrop-filter: blur(10px);
    opacity: 0.1;
  }

  100% {
    backdrop-filter: none;
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media -moz-pref("extension.browse-bot.enabled") {
  @media -moz-pref("extension.browse-bot.context-menu-enabled") {
    #browse-bot-context-menu-item {
      --menu-image: url("chrome://browser/skin/trending.svg");
    }
  }

  findbar,
  .browse-bot-settings-modal {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    menulist,
    select {
      flex-grow: 1 !important;
      padding: 8px 12px !important;
      font-size: 14px !important;
      transition: all 0.2s ease !important;
      border: 2px solid color-mix(in srgb, var(--browser-primary-color) 30%, transparent 70%) !important;
      background: var(--acrylic-glass-bg) !important;
      backdrop-filter: var(--acrylic-glass-blur) brightness(0.8);

      &:focus {
        outline: none !important;
        border: 2px solid var(--browser-primary-color) !important;
      }
    }
    menupopup {
      --panel-background: var(--acrylic-bg) !important;
    }
    input[type="number"] {
      padding: 8px 0px !important;
      max-width: 50px !important;
    }
    button {
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
      background-color: var(--browse-bot-primary-bg) !important;
      border: none !important;
      min-width: 60px !important;
      font-size: 14px !important;

      outline: none !important;

      &:hover {
        background-color: color-mix(
          in srgb,
          var(--browse-bot-primary-bg) 80%,
          black 20%
        ) !important;
      }

      &:active {
        transform: translateY(0);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
    }

    menulist {
      padding: 4px !important;
    }
  }

  findbar {
    padding-inline-start: 0px !important;
    padding-inline-end: 5px !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box;
    position: fixed;
    top: 35px;
    right: 15px;
    width: 500px;
    max-width: 800px !important;
    min-width: 300px !important;
    height: unset !important;
    border-radius: var(--acrylic-radius) !important;
    box-shadow: var(--acrylic-shadow) !important;
    background: var(--acrylic-glass-bg) !important;
    backdrop-filter: var(--acrylic-backdrop) var(--acrylic-glass-blur);
    z-index: 9999;
    opacity: 1;
    @media -moz-pref("extension.browse-bot.solid-bg") {
      background: var(--acrylic-bg) !important;
      backdrop-filter: none !important;
    }

    &:is([hidden="true"]) {
      visibility: inherit !important;
      pointer-events: none !important;
      opacity: 0 !important;
      top: 0 !important;
      animation: glass-disappear 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      animation-fill-mode: forwards !important;
      filter: blur(5px);
      transform: translateY(-10px);
    }

    .findbar-resize-handle {
      /* background: red; */
      width: 3px;
      height: calc(100% - 1px);
      position: absolute;
      right: 0;

      @media not -moz-pref("extension.browse-bot.dnd-enabled") {
        display: none !important;
      }
    }

    @media -moz-pref("extension.browse-bot.position", "top-right") {
      top: 35px;
      right: 15px;

      .findbar-resize-handle {
        left: 0;
        cursor: w-resize;
      }
    }

    @media -moz-pref("extension.browse-bot.position", "top-left") {
      top: 35px;
      left: 15px;

      .findbar-resize-handle {
        right: 0;
        cursor: e-resize;
      }
    }

    @media -moz-pref("extension.browse-bot.position", "bottom-right") {
      bottom: 15px;
      right: 15px;
      top: unset;

      .findbar-resize-handle {
        left: 0;
        cursor: w-resize;
      }
    }

    @media -moz-pref("extension.browse-bot.position", "bottom-left") {
      bottom: 15px;
      left: 15px;
      top: unset;

      .findbar-resize-handle {
        right: 0;
        cursor: e-resize;
      }
    }

    .findbar-closebutton,
    .clear-chat-btn,
    .settings-btn,
    .findbar-collapse-btn {
      width: 28px !important;
      height: 28px !important;
      appearance: none !important;
      outline: none !important;
      border: none !important;
      border-radius: 5px !important;
      transition: all 0.2s ease !important;
      display: inline-flex !important;
      justify-content: center !important;
      align-content: center !important;
      background-color: transparent !important;
      -moz-context-properties: fill !important;
      fill: light-dark(black, white) !important;
      /* border: 1px solid red !important; */

      label {
        display: none !important;
      }

      &:hover {
        background: var(--tab-hover-background-color) !important;
        border: none !important;
      }

      &:active {
        scale: 0.9 !important;
      }
    }

    .findbar-closebutton {
      position: absolute !important;
      top: 7px !important;
      right: 0 !important;
      transition: background-color 0.2s ease !important;
    }

    &.ai-expanded {
      .findbar-container {
        display: none !important;
      }

      @media not -moz-pref("extension.browse-bot.minimal") {
        .findbar-closebutton {
          top: 0px !important;
        }

        .ai-chat-header {
          margin-right: 34px !important;
          position: relative !important;

          .findbar-collapse-btn {
            position: absolute !important;
            right: 0 !important;
            top: 50% !important;
            transform: translateY(-50%);
          }

          &::before {
            width: calc(100% + 90px) !important;
          }
        }
      }

      #findbar-expand {
        display: none;
      }
    }

    .findbar-container {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      margin-bottom: 5px !important;
      flex-wrap: wrap;
      height: auto !important;
      row-gap: 10px;

      & > :first-child {
        width: 100% !important;
        margin-top: 8px !important;
        padding-bottom: 10px !important;
        position: relative;
        padding-right: 30px !important;

        &::before {
          content: "";
          width: 18px !important;
          min-width: 18px !important;
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M10.5 2c.58 0 1.15.058 1.699.17a1 1 0 1 1-.398 1.96a6.5 6.5 0 1 0 5.069 7.671a1 1 0 1 1 1.96.398a8.5 8.5 0 0 1-1.457 3.303l-.197.26l3.652 3.652a1 1 0 0 1-1.32 1.498l-.094-.084l-3.652-3.652A8.5 8.5 0 1 1 10.5 2M19 1a1 1 0 0 1 .898.56l.048.117l.13.378a3 3 0 0 0 1.684 1.8l.185.07l.378.129a1 1 0 0 1 .118 1.844l-.118.048l-.378.13a3 3 0 0 0-1.8 1.684l-.07.185l-.129.378a1 1 0 0 1-1.844.117l-.048-.117l-.13-.378a3 3 0 0 0-1.684-1.8l-.185-.07l-.378-.129a1 1 0 0 1-.118-1.844l.118-.048l.378-.13a3 3 0 0 0 1.8-1.684l.07-.185l.129-.378A1 1 0 0 1 19 1m0 3.196a5 5 0 0 1-.804.804q.448.355.804.804q.355-.448.804-.804A5 5 0 0 1 19 4.196" /></svg>') !important;
          background-repeat: no-repeat;
          margin-top: 6px;
          margin-right: 15px;
        }

        .findbar-textbox {
          background: none !important;
          padding: 0 !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          box-shadow: none !important;
          width: 100% !important;
          border: none !important;

          &:focus {
            outline: none !important;
          }
        }

        toolbarbutton {
          width: 28px !important;
          height: 28px !important;
          justify-content: center !important;
          align-content: center !important;
          margin-left: 6px !important;
          border-radius: 4px !important;
          font-weight: 600 !important;
          transition: scale 0.2s ease !important;
          opacity: 1 !important;

          &[disabled="true"] {
            opacity: 0 !important;
          }

          label {
            display: none !important;
          }

          &:hover {
            background: var(--tab-hover-background-color) !important;
          }

          &:active {
            scale: 0.9 !important;
          }
        }
      }

      checkbox,
      label,
      description {
        margin-left: 8px !important;
        margin-right: 8px !important;
      }

      .findbar-label {
        display: none !important;
        flex-basis: 100% !important;

        &[status="notfound"] {
          display: block !important;
          width: 30px !important;
          max-width: 30px !important;
          margin: auto !important;
        }
      }

      .findbar-label:before {
        display: none !important;
      }

      .found-matches {
        display: block !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-top: 12px !important;
        flex-basis: 0 !important;
        margin: auto !important;
        padding-right: 12px !important;

        &[hidden="true"] {
          display: none !important;
        }
      }

      .findbar-find-status:is([data-l10n-id]) {
        display: flex;
      }

      .checkbox-label {
        font-size: 12px !important;
        font-weight: 500 !important;
      }

      #findbar-ask {
        margin-right: 5px !important;
        min-width: 20px !important;
        font-size: 12px !important;
        overflow: visible !important;
      }
    }

    .browse-bot-setup,
    .browse-bot-chat {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .ai-chat-header {
      height: 30px;
      display: flex;
      flex-direction: row;
      align-items: center !important;
      gap: 4px !important;
      padding-left: 8px !important;

      * {
        z-index: 2 !important;
      }

      .findbar-drag-handle {
        position: absolute !important;
        width: 100% !important;
        height: 30px !important;
        cursor: move !important;
        /* background-color: green !important; */
        z-index: 1 !important;

        @media not -moz-pref("extension.browse-bot.dnd-enabled") {
          display: none !important;
        }
      }

      &::before {
        content: "";
        position: absolute !important;
        top: 34px !important;
        left: 0 !important;
        width: 100% !important;
        border-top: 1px solid rgba(127, 127, 127, 0.3) !important;
      }
    }

    .browse-bot-setup {
      .ai-setup-content {
        text-align: center;
        padding: 15px !important;
        padding-top: 30px !important;

        h3 {
          margin: 9px 0 8px 0 !important;
          font-size: 22px !important;
          font-weight: 700 !important;
        }

        p {
          margin: 0 0 12px 0 !important;
          font-size: 15px !important;
          line-height: 1.4 !important;
        }
      }

      .provider-selection-group {
        padding: 16px 0px !important;
        display: flex !important;
        align-content: center !important;
        justify-content: center !important;
        gap: 4px !important;

        > label {
          font-size: 15px !important;
          padding-top: 14px !important;
        }

        #provider-selector {
          max-height: 40px !important;
          flex-basis: 0 !important;
          display: flex !important;
        }
      }

      .api-key-input-group {
        display: flex;
        gap: 8px;

        input {
          flex-grow: 1 !important;
        }

        button {
          cursor: pointer;
          font-weight: 600;
          transition: all 0.2s ease;
          position: relative;
          overflow: hidden;
          background-color: var(--browse-bot-primary-bg) !important;
          border: none !important;
          min-width: 60px !important;
          font-size: 17px !important;

          outline: none !important;

          &:hover {
            transform: translateY(-1px);
          }

          &:active {
            transform: translateY(0);
          }

          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
          }
        }
      }

      .api-key-links {
        margin-top: 12px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        button {
          background: none;
          border: none;
          text-decoration: underline;
          cursor: pointer;
          padding: 4px 8px;
          font-size: 12px;
          border-radius: 4px;
          transition: all 0.2s ease;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .browse-bot-chat {
      .ai-chat-messages {
        max-height: 320px;
        padding: 10px 2px 0 2px !important;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        scrollbar-width: thin;
        scrollbar-color: inherit transparent;

        &:empty {
          display: none !important;

          & ~ .ai-chat-input-group {
            padding-top: 4px !important;

            /* When there are no messages, the parent .browse-bot-chat should not have a header or separator line */
            &::after {
              display: none;
            }
          }
        }
      }

      .chat-message {
        max-width: 85%;
        padding: 1px 5px;
        border-radius: 10px;
        word-wrap: break-word;
        font-size: 14px;
        position: relative;
      }

      .chat-message-user {
        align-self: flex-end;
        background: var(--browse-bot-primary-bg);
        color: var(--tab-selected-textcolor);
        border-bottom-right-radius: 4px;
        padding: 4px 8px !important;
        font-weight: 500;
      }

      .chat-message-ai {
        max-width: 100% !important;
        align-self: flex-start;
      }

      .chat-message-error {
        align-self: flex-start;
        background: var(--browse-bot-error-bg);
        color: var(--browse-bot-error);
      }

      .ai-chat-input-group {
        display: flex;
        gap: 10px;
        align-items: center !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-bottom: 3px !important;

        &:after {
          content: "";
          position: absolute !important;
          bottom: 57px !important;

          @media -moz-pref("extension.browse-bot.minimal") {
            bottom: 32px !important;
          }

          left: 0% !important;
          width: 100% !important;
          border-top: 1px solid rgba(127, 127, 127, 0.3) !important;
        }

        textarea {
          flex-grow: 1 !important;
          display: flex !important;
          align-items: center !important;
          border-radius: 8 !important;
          padding: 0 !important;
          min-height: 20px !important;
          max-height: 160px !important;
          height: 50px !important;
          resize: none !important;
          border: none !important;
          background: none !important;
          /* color: var(--tab-selected-textcolor) !important; */
          font-size: 14px !important;
          transition: all 0.2s ease !important;
          --focus-outline: none !important;
          --focus-outline-inset: 0 !important;

          /* &::placeholder { */
          /*   color: var(--toolbox-textcolor-inactive) !important; */
          /* } */
        }

        .send-btn {
          margin-left: auto !important;
          border: none !important;
          background-color: var(--browse-bot-primary-bg) !important;
          padding: 3px !important;
          display: inline-flex !important;
          color: var(--browse-bot-primary) !important;
          align-self: end !important;
          min-width: 30px !important;
          min-height: 30px !important;

          &:active:not(:disabled) {
            transform: translateY(0);
          }

          &:disabled {
            background: color-mix(in srgb, var(--browse-bot-primary-bg) 30%, black 70%);
            cursor: not-allowed;
            opacity: 0.6;
          }
        }
      }

      .chat-message-loading {
        align-self: flex-start;
        background: transparent;
        color: transparent;
        width: 85% !important;

        .message-content {
          animation: pulse 1.5s ease-in-out infinite;
          background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--browse-bot-primary-bg) 20%, transparent 80%),
            transparent
          );
          background-size: 200% 100%;
          animation: shimmer 2s infinite;
        }
      }
    }

    .citation-link {
      /* To-do: Style This*/
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.7em !important;
      height: 1.7em !important;
      font-size: 0.75em !important;
      font-weight: 700 !important;
      cursor: pointer;
      margin: 1px 3px;
      vertical-align: middle;
      padding: 0.3px !important;
      background: color-mix(in srgb, var(--browse-bot-primary-bg) 40%, transparent 60%) !important;
    }

    #findbar-expand {
      padding: 4px !important;
      position: relative;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      border-radius: 4px;
      /* background: var(--browse-bot-primary); */
      font-weight: 600;
      border: none !important;
      width: 100% !important;

      &:active {
        transform: translateY(0);
      }
    }

    @media -moz-pref("extension.browse-bot.minimal") {
      width: 420px;
      min-height: 36px !important;
      align-items: center !important;
      flex-direction: column !important;
      overflow: visible !important;

      #findbar-expand {
        display: none !important;
      }

      .findbar-closebutton {
        top: 1px !important;
      }

      .findbar-container {
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
        height: 32px !important;
        width: 100% !important;

        & > :first-child {
          border-bottom: 0 !important;
          width: calc(100% - 33px) !important;
          padding-right: 3px !important;

          &::before {
            margin-top: 5px !important;
          }
        }

        hbox[anonid="findbar-textbox-wrapper"] {
          margin: 0 !important;
          padding: 0 !important;
        }

        checkbox {
          display: none !important;
        }
      }

      .findbar-closebutton {
        top: -30px !important;
        opacity: 0 !important;

        &:hover {
          opacity: 1 !important;
        }
      }

      .ai-chat-header {
        width: 100% !important;
        top: -30px !important;
        position: absolute !important;
        transition: all 0.2s ease !important;

        &::after {
          content: "";
          position: absolute !important;
          border-radius: var(--acrylic-radius) !important;
          background: var(--acrylic-glass-bg) !important;
          backdrop-filter: var(--acrylic-backdrop) var(--acrylic-glass-blur);
          @media -moz-pref("extension.browse-bot.solid-bg") {
            background: var(--acrylic-bg) !important;
            backdrop-filter: none !important;
          }

          border-bottom-right-radius: 0 !important;
          border-bottom-left-radius: 0 !important;
          opacity: 0 !important;
          top: 0px !important;
          width: 140px !important;
          height: 100% !important;
          position: absolute !important;
          right: 10px !important;
          transition: all 0.2s ease !important;
          /* border: 1px red solid !important; */
        }

        &::before {
          display: none !important;
        }

        .findbar-drag-handle {
          width: 20px !important;
          opacity: 0 !important;
          background: var(--acrylic-glass-bg) !important;
          backdrop-filter: var(--acrylic-backdrop) var(--acrylic-glass-blur);
          border-radius: 4px !important;
          display: flex !important;
          justify-content: center !important;
          align-content: center !important;
          position: relative !important;

          @media -moz-pref("extension.browse-bot.solid-bg") {
            background: var(--acrylic-bg) !important;
            backdrop-filter: none !important;
          }
          &::after {
            content: url("chrome://browser/skin/zen-icons/drag-indicator.svg") !important;
            -moz-context-properties: fill !important;
            fill: light-dark(black, white) !important;
            padding-top: 6px !important;
          }

          @media not -moz-pref("extension.browse-bot.dnd-enabled") {
            display: none !important;
          }
        }

        .clear-chat-btn,
        .settings-btn,
        .findbar-collapse-btn {
          position: absolute !important;
          z-index: 2 !important;
          opacity: 0 !important;
        }

        .findbar-collapse-btn {
          right: 50px !important;
        }

        .clear-chat-btn {
          right: 84px !important;
        }

        .settings-btn {
          right: 116px !important;
        }
      }

      &:has(.findbar-closebutton:hover),
      &:has(.findbar-drag-handle:active),
      &:has(.ai-chat-header:hover) {
        .clear-chat-btn,
        .settings-btn,
        .findbar-collapse-btn,
        .findbar-closebutton,
        .findbar-drag-handle,
        .ai-chat-header::after {
          opacity: 1 !important;
        }
      }

      &:not(.ai-expanded) {
        .ai-chat-header {
          display: none !important;
        }

        .findbar-closebutton {
          display: inline-flex !important;
          top: 1px !important;
          opacity: 1 !important;
        }

        .findbar-container {
          padding: 0 35px 0 10px !important;
        }
      }

      &.ai-expanded {
        .ai-chat-input-group {
          padding-left: 3px !important;

          &::before {
            width: 18px !important;
            min-width: 18px !important;
            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.107 5.448c.598-1.75 3.016-1.803 3.725-.159l.06.16l.807 2.36a4 4 0 0 0 2.276 2.411l.217.081l2.36.806c1.75.598 1.803 3.016.16 3.725l-.16.06l-2.36.807a4 4 0 0 0-2.412 2.276l-.081.216l-.806 2.361c-.598 1.75-3.016 1.803-3.724.16l-.062-.16l-.806-2.36a4 4 0 0 0-2.276-2.412l-.216-.081l-2.36-.806c-1.751-.598-1.804-3.016-.16-3.724l.16-.062l2.36-.806A4 4 0 0 0 8.22 8.025l.081-.216zM11 6.094l-.806 2.36a6 6 0 0 1-3.49 3.649l-.25.091l-2.36.806l2.36.806a6 6 0 0 1 3.649 3.49l.091.25l.806 2.36l.806-2.36a6 6 0 0 1 3.49-3.649l.25-.09l2.36-.807l-2.36-.806a6 6 0 0 1-3.649-3.49l-.09-.25zM19 2a1 1 0 0 1 .898.56l.048.117l.35 1.026l1.027.35a1 1 0 0 1 .118 1.845l-.118.048l-1.026.35l-.35 1.027a1 1 0 0 1-1.845.117l-.048-.117l-.35-1.026l-1.027-.35a1 1 0 0 1-.118-1.845l.118-.048l1.026-.35l.35-1.027A1 1 0 0 1 19 2" /></svg>') !important;
          }

          textarea {
            height: 20px !important;
            position: relative !important;
          }

          .send-btn {
            padding: 1px !important;
            min-width: 24px !important;
            min-height: 24px !important;
          }
        }
      }
    }
  }

  #ai-settings-modal-overlay,
  .tool-confirmation-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);

    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .browse-bot-settings-modal {
    position: relative;
    width: 500px;
    min-width: 500px;
    max-width: 90vw;
    height: 80vh;
    padding: 20px 0px 0px 20px;
    border-radius: var(--acrylic-radius) !important;
    box-shadow: var(--acrylic-shadow) !important;
    background: var(--acrylic-glass-bg) !important;
    backdrop-filter: var(--acrylic-backdrop) var(--acrylic-glass-blur);
    flex-direction: column;
    gap: 14px;

    @media -moz-pref("extension.browse-bot.solid-bg") {
      background: var(--acrylic-bg) !important;
      backdrop-filter: none !important;
    }
    .ai-settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(127, 127, 127, 0.3);
      margin-right: 18px !important;
      margin-bottom: 5px;

      h3 {
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
      }

      div {
        display: flex;
        gap: 10px;
      }
    }

    .ai-settings-content {
      overflow-y: auto !important;
      scrollbar-width: thin;
      scrollbar-color: inherit transparent;
      height: calc(100% - 40px) !important;
      padding-right: 18px !important;

      .settings-section {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 15px;
        border: 1px solid rgba(127, 127, 127, 0.3);
        margin: 10px 0px !important;

        h4 {
          margin: 0 0 10px 0 !important;
          font-size: 16px !important;
          color: var(--browse-bot-primary) !important;
          border-bottom: 1px solid rgba(127, 127, 127, 0.3);
          padding-bottom: 8px;
        }

        .setting-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          border-bottom: 1px dotted rgba(127, 127, 127, 0.3);

          &:last-child {
            border-bottom: none;
          }

          label {
            font-size: 14px !important;
            flex-grow: 1;
            margin-right: 10px;
          }

          input[type="checkbox"] {
            transform: scale(1.2);
            margin-right: 5px;
          }
        }
      }

      .settings-accordion {
        padding-top: 0 !important;
        transition: max-height 0.3s ease !important;
        max-height: 500px !important;
        overflow: hidden !important;

        .accordion-header {
          cursor: pointer;
          padding-top: 8px !important;
          position: relative;

          &::after {
            content: url("chrome://global/skin/icons/arrow-up.svg") !important;
            -moz-context-properties: fill !important;
            fill: light-dark(black, white) !important;
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            transition: transform 0.1s ease-in-out;
          }
        }

        &[data-expanded="false"] {
          max-height: 22px !important;

          .accordion-header::after {
            transform: translateY(-50%) rotate(270deg);
          }
        }
      }
    }

    .provider-settings-group {
      margin-top: 15px;
      padding-top: 10px;
      border-top: 1px solid rgba(127, 127, 127, 0.3);

      .provider-header-group {
        display: flex !important;
        gap: 10px !important;
        justify-content: space-between !important;
        padding-bottom: 6px !important;

        h5 {
          margin: 0 0 10px 0 !important;
          font-size: 15px !important;
          color: var(--tab-selected-textcolor) !important;
        }
      }
    }

    #citations-god-mode-warning {
      display: none;
      color: red;
      margin-bottom: 10px;
    }

    &:has(#pref-extension\.browse-bot\.citations-enabled:checked)
      :has(#pref-extension\.browse-bot\.god-mode:checked) {
      #citations-god-mode-warning {
        display: block !important;
      }
    }

    .setting-item:has(#pref-extension\.browse-bot\.conform-before-tool-call),
    .setting-item:has(#pref-max-tool-calls) {
      display: none;
    }

    :has(#pref-extension\.browse-bot\.god-mode:checked) {
      .setting-item:has(#pref-extension\.browse-bot\.conform-before-tool-call),
      .setting-item:has(#pref-max-tool-calls) {
        display: flex;
      }
    }
  }

  .tool-confirmation-content {
    padding: 20px;
    text-align: center;
    position: relative;
    width: 300px;
    min-width: 200px;
    max-width: 90vw;
    border-radius: var(--acrylic-radius) !important;
    box-shadow: var(--acrylic-shadow) !important;
    background: var(--acrylic-glass-bg) !important;
    backdrop-filter: var(--acrylic-backdrop) var(--acrylic-glass-blur);
    @media -moz-pref("extension.browse-bot.solid-bg") {
      background: var(--acrylic-bg) !important;
      backdrop-filter: none !important;
    }

    p {
      margin-bottom: 15px;
      font-size: 16px;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      .right-side-buttons {
        display: flex !important;
        gap: 10px !important;
      }
      button {
        padding: 7px 14px;
        margin: 0 !important;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;

        &.confirm-tool {
          background-color: var(--browse-bot-success);
          color: white;
        }

        &.cancel-tool {
          color: white;
          background-color: var(--browse-bot-error);
        }
      }
    }
  }
}
