@import './userSettings.css';
@import './notifications.css';

/* Reusable Classes */
.cleanBtn {
    border-style: none;
    background-color: transparent;
    padding: 0;
}

.cleanBtn:focus,
.helpCenterBtn:focus,
.getMoreBtn:focus,
.openFullSidebarBtn:focus {
    outline: none;
}

.openFullSidebarBtn svg {
    position: relative;
    top: -0.5px;
}
.grayishBottomBorder {
    border-bottom: 1.5px solid #dde8f7;
}

.justifySpaceBetween {
    display: flex;
    justify-content: space-between;
}

.flexJustifyCenter {
    display: flex;
    justify-content: center;
}

/********* *********/

#sideBar {
    font-family: 'Poppins', sans-serif;
    background: #f7f8f8;
    box-shadow: 2.71px 0px 13.54px -1.8px #00000012;
    border: 1px solid #494f9280;
    width: 280px;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: width 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    overflow: hidden;
}

.openFullSidebarBtn {
    background: black;
    height: 40px;
    width: 40px;
    margin-left: 11px;
    border: 0.7px solid #5b616e;
    border-radius: 50%;
    box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.openFullSidebarBtn:hover path {
    stroke: var(--lightBlue);
}

.topRec {
    padding: 15px 0 0 17px;
    background: var(--white);
    align-items: flex-start;
    height: 56px;
}

#notificationTooltipArea {
    padding-right: 14px;
}

#shrinkSidebarBtn {
    padding-right: 16px;
    cursor: pointer;
}

#shrinkSidebarBtn path {
    fill: #1e1f20;
}

#shrinkSidebarBtn:hover {
    path {
        fill: var(--lightBlue);
    }
}

#bottomItems {
    margin-top: auto;
    background: linear-gradient(to bottom, #f7f8f8, #3777d0);
}

.helpCenterArea {
    margin-bottom: 45px;
}

/*Applying fix height to hr elements could be tricky
https://stackoverflow.com/questions/55554149/why-are-half-of-my-hrs-being-styled-differently-than-the-others */
.helpCenterArea hr {
    border: 0;
    border-top: 1.5px solid #27539226;
    height: 1.5px;
    margin: 0;
    width: calc(100% - 24px);
    margin-left: 12px;
}

.helpCenterBtn {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 12px);
    border: none;
    padding: 5px 11px 7px 14px;
    top: -1px;
    position: relative;
    margin-left: 6px;
    border-radius: 4px;
    height: 56px;
    cursor: pointer;
}

.helpCenterNewTab {
    display: none;
    cursor: pointer;
}

.helpCenterNewTab:hover {
    opacity: 0.5;
}

.helpCenterTooltip {
    background: var(--white);
    border: 1px solid var(--dusty-slate);
    border-radius: 8px;
    box-shadow: 0px 4px 15px -7px rgba(0, 0, 0, 0.1);
    padding: 9.5px 12px;
    color: #1e1f20;
}

.helpBtnInnerContainer {
    display: flex;
    gap: 11.5px;
    align-items: center;
}

.helpBtnInnerContainer span {
    white-space: nowrap;
    font-size: 0.938rem;
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

#sideBar:not(.shrunk) .helpBtnInnerContainer span {
    opacity: 1;
    transform: translateX(0);
    margin-top: 1px;
    font-family: var(--font-family);
}

#sideBar > .row {
    padding: 8px;
}

.userSettingsArea {
    align-items: center;
    padding: 9px 7px 9px 9px;
    height: 56px;
}

.userDetails {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.938rem;
}

.userDetails p {
    margin: 0;
}

#userSettingsMenuArea {
    position: relative;
    padding-right: 12px;
}

#gearImage {
    width: 13px;
    cursor: pointer;

    path {
        fill: #1e1f20;
    }
}

#gearImage:hover path {
    fill: var(--lightBlue);
}

#userSettings .space {
    width: 5px;
}

#dashboardTitle {
    color: var(--activeColor);
    margin-bottom: 30px;
    margin-top: 12px;
    margin-left: 0;
    padding: 4px !important;
}

#dashboardTitle > img {
    margin-left: 8px;
    margin-right: 8px;
}

#dropdowns {
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
}

#dropdowns > div > button {
    height: 56px;
    width: 100%;
    text-align: left;
    border-style: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px 0 17px;
}

#dropdowns > div > button:focus {
    outline: none;
    border-style: none;
}

#dropdowns .sidebarDivider {
    border-top: 1px solid #dde8f7;
    margin: 0 17px;
    visibility: hidden;
}

#dropdowns.sidebarReady .sidebarDivider {
    visibility: visible;
}

#dropdowns .sidebarItemDisabled > button {
    cursor: default;
    pointer-events: none;
    background: transparent !important;
}

#dropdowns .sidebarItemDisabled .iconAndTextContainer {
    opacity: 0.65;
}

#dropdowns .sidebarItemDisabled .mainIcon {
    filter: grayscale(1);
}

#dropdowns .sidebarItemDisabled .iconText,
#sideBar.shrunk #dropdowns .sidebarItemDisabled > button::after {
    color: #8e95a2;
}

#dropdowns .sidebarItemDisabled .betaBadge--soon {
    color: #6b7280;
    background: #e3e4e9;
}

#sideBar.shrunk #dropdowns .sidebarDivider {
    margin: 2px 8px;
}

#dropdowns > div ul {
    max-height: 0vh;
    overflow: hidden;
    list-style-type: none;
    transition: max-height 500ms;
    padding: 0;
    margin: 0;
}

#dropdowns > div.active ul {
    max-height: 30vh;
    margin-top: 4px;
}

.clickableDropdownItem {
    cursor: pointer;
    font-size: 0.875rem;
    margin: 4px;
    padding: 5px 0 5px 15px;
    border-radius: 4px;
    font-weight: 400;
}

.clickableDropdownItem:hover {
    background: #e8e9ed;
}

.clickableDropdownItem.active {
    color: #194be3;
    font-weight: 500;
    background: #d1dff4;
}

body:has(.clickableDropdownItem.active) #userSettingsMenu button.active {
    color: initial;
    background: none;
    font-weight: normal;
}

body:has(.clickableDropdownItem.active)
    #userSettingsMenu
    button.active
    svg:not(#root *)
    path:not(#root *) {
    stroke: var(--nightShade);
}

.clickableDropdownItem:not(.active):hover span {
    color: #1e1f20;
}

#sidebar.shrunk .clickableDropdownItem {
    margin: 4px 3px 4px 3px;
}

#dropdowns > div:not(.sidebarItemDisabled):not(:has(.active)) button:hover {
    background: #e3e4e9;
}

#dropdowns > div.active button {
    background: #d1dff4;
}

#dropdowns > div:has(.active) {
    & button {
        background: #d1dff4;

        & span {
            color: var(--activeColor);
        }

        & .angleImage {
            filter: invert(12%) sepia(91%) saturate(5255%) hue-rotate(230deg)
                brightness(102%) contrast(91%);
        }
    }
}

#dropdowns > div.active .iconText,
#dropdowns > div:has(.active) .iconText {
    color: #194be3;
}

#gridScan .gridScanMainIcon .gridScanDot {
    stroke: #1e1f20;
}

#gridScan.active .gridScanMainIcon .gridScanDot,
#gridScan:has(.active) .gridScanMainIcon .gridScanDot {
    stroke: #194be3;
}

/* Force new background and text/icon color on .clicked */
#dropdowns > div button.clicked {
    background: #e3e4e9 !important;
}

/* Text inside the button (and nested elements) to black */
#dropdowns > div button.clicked span,
#dropdowns > div button.clicked span * {
    color: #000 !important;
    filter: none !important; /* if you want to remove any existing filters on <img> */
}

/* Override the chevron filter on .clicked */
#dropdowns > div button.clicked .angleImage {
    filter: none !important; /* or your desired filter if you want a specific color */
}

.iconAndTextContainer img {
    position: relative;
    width: auto;
    left: -1px;
    height: 24px;
}

.tooltipText {
    background: #1e1f20;
    color: var(--white);
    margin: 0;
    padding: 4px 6px;
    font-size: 12px;
    text-align: center;
    border: 0.5px solid var(--dusty-slate);
    box-shadow: 0px 4px 20px -7px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family);
    font-weight: 400;
}

/* Sidebar text tooltips (SERP, AI Tracker, Citations, Site Audit, Keyword Finder, etc.) — simple opacity fade */
#sideBar .tooltipText.staticTooltip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

#sideBar .tooltipText.staticTooltip.staticTooltipActive {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Grid Scan and GBP dropdown panels — opacity fade only, no inner layout transition */
#sideBar #gridScanTooltipWrapper.staticTooltip,
#sideBar #GMBDropdownULWrapper.staticTooltip {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

#sideBar #gridScanTooltipWrapper.staticTooltip ul,
#sideBar #GMBDropdownULWrapper.staticTooltip ul {
    max-height: 30vh;
    transition: none;
}

#sideBar #gridScanTooltipWrapper.staticTooltipActive,
#sideBar #GMBDropdownULWrapper.staticTooltipActive {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.iconAndTextContainer {
    display: flex;
    align-items: center;
    font-family: var(--font-family);
    gap: 11px;
    font-size: 15px;
    font-weight: 400;
}

.updatePopupAndRightsWrapper {
    padding: 0 10px;
    padding-bottom: 18px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.upgradePopupDiv {
    background: transparent;
    height: 88px;
    width: 260px;
    border: 1.3px solid #275392;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.25);
    padding: 7.5px 10px 12px 0;
    margin-bottom: -3px;
    position: relative;
}

.upgradePopupDiv a {
    z-index: 1;
    align-self: end;
}

.upgradePopupDivShrunk {
    display: none;
    padding: 0;
    background: transparent;
    margin-bottom: 24px;
}

.upgradePopupDivShrunk.specialEdition {
    height: fit-content;
    width: fit-content;
    border: none;
    border-radius: unset;
    box-shadow: none;
}

.upgradePopupDivShrunk.specialEdition svg {
    display: none;
}

.upgradePopupDivShrunk.specialEdition #upgradePopupDivWrapper {
    padding-left: 12px;
}

.upgradePopupDivShrunk > img {
    width: 56px;
    height: 56px;
}

.creditsAmountAndGetMoreBtnContainer {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
}

.rocketship {
    position: absolute;
    height: 98px;
    left: 0;
    top: -20%;
}

.upgradePopupBody {
    display: flex;
    flex-direction: column;
    z-index: 1;
    color: #1e1f20;
}

.creditsBtn {
    display: flex;
    gap: 2px;
    align-items: center;
}

#creditHistoryLinkBtn {
    padding-left: 12px;
    margin-top: -5px;
    cursor: pointer;
}

.creditsLeftText {
    font-size: 13px;
    text-decoration: underline;
    color: var(--nightShade);
    font-weight: 400;
    font-family: var(--font-family);
}

.heatmapCreditsTextAndIcon {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
}

.heatmapCreditsTextAndIcon.minimizedVersion {
    padding-left: 0;
    gap: 2px;
    flex-direction: column;
    margin-left: 12.5px;
}

.heatmapCreditsMinimizedVersion {
    font-weight: 600;
    text-decoration: underline;
    font-size: 12px;
    font-family: var(--font-family);
}

#creditsSpan {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
}

.getMoreBtn {
    background: transparent;
    height: 28px;
    width: 78px;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    z-index: 2;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    font-family: var(--font-family);
    cursor: pointer;
}

.getMoreBtn:hover {
    background: #ffffff1a;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.getMoreBtn.minimizedVersion {
    position: relative;
    /* Hide the original button text */
    color: transparent;
    text-shadow: none;
    font-size: 0.5rem;
    font-weight: 500;
    width: 50px;
    margin-left: 4px;
    height: 30px; /* It's better to give a bit more than 18px */
    margin-top: 8px;
    cursor: pointer;
}

.getMoreBtn.minimizedVersion::before {
    /* "\A" is the line-break character in CSS */
    content: 'Get\A more';
    /* For a line break, we need: */
    white-space: pre;
    /* or pre-line, but pre is usually more reliable for "\A" */

    /* Make each line start on a new line */
    display: block;
    text-align: center;

    color: #fff;
    font-size: 0.5rem;
    line-height: 1.2;

    /* Position the pseudo-element in the center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.copyRightText {
    font-size: 11px;
    color: var(--white);
    font-weight: 400;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    display: inline-block;
    opacity: 1;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.angleImage {
    background-image: url('/assets/0_SIDEBAR/v2/Chevron-Right-Icon.svg');
    background-size: cover;
    aspect-ratio: 1;
    width: 21px;
    transition: transform 300ms ease;
}

#upgradePopupDivWrapper.staticTooltipActive {
    display: flex;
}

#upgradePopupDivWrapper.staticTooltipActive .upgradePopupDiv {
    transform: translateX(15px);
}

#helpCenterAnchorWrapper.staticTooltipActive > svg {
    transform: translateX(4px);
}

#upgradePopupDivWrapper.staticTooltipActive > svg {
    transform: translateX(10px);
}

#upgradePopupDivWrapper .upgradePopupDiv {
    background: linear-gradient(to bottom, #f7f8f8, #3777d0);
}

.tooltipContentContainer {
    background: transparent;
    display: flex;
    align-items: center;
    margin-left: 3px;
}

.tooltipContentContainer .upgradePopupDiv {
    margin-bottom: 0;
}

#liveHeatmapDropdown,
#scheduledHeatmapDropdown {
    display: none;
}

.sidebarInlineDropdownDisabled {
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

#gridScanTooltipWrapper,
#GMBDropdownULWrapper {
    position: fixed;
    pointer-events: none;
}

#sideBar.shrunk #dropdowns > div.active > button::after,
#sideBar.shrunk #dropdowns > div:has(.active) > button::after {
    color: #194be3;
}

#gridScanTooltipWrapper.staticTooltipActive,
#GMBDropdownULWrapper.staticTooltipActive {
    pointer-events: auto;
}

#dropdowns > div.active .angleImage,
#dropdowns > div:has(.active) .angleImage {
    filter: invert(20%) sepia(95%) saturate(3102%) hue-rotate(223deg)
        brightness(96%) contrast(90%);
}

#dropdowns div.staticTooltipActive > ul {
    max-height: 30vh;
    list-style: none;
}

#gridScanTooltipWrapper.staticTooltipActive ul,
#GMBDropdownULWrapper.staticTooltipActive ul {
    max-height: 30vh;
    list-style: none;
}

.staticTooltipHeader {
    font-weight: 500;
    font-size: 14px;
    padding: 6.5px 10px;
    color: var(--nightShade);
}

.staticTooltipDivider {
    margin: 0;
    padding: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

.sidebarTooltipPanel {
    background: var(--white);
    border: 1px solid var(--dusty-slate);
    box-shadow: 0px 4px 15px -7px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.staticTooltipActive .clickableDropdownItem {
    padding: 3px 4px;
    display: flex;
    align-items: center;
}

.dropdownHeaderItem {
    font-weight: 500;
    font-size: 14px;
    padding: 6.5px 10px;
    color: var(--nightShade);
}

.dropdownHeaderDivider {
    border-bottom: 1px solid #ccc;
}

#liveHeatmapDropdownULWrapper ul .clickableDropdownItem:nth-child(2),
#scheduledHeatmapDropdownULWrapper ul .clickableDropdownItem:nth-child(2),
#auditDropdownULWrapper ul .clickableDropdownItem:nth-child(2) {
    border-bottom: none;
}

.staticTooltipActive .clickableDropdownItem:hover {
    color: #194be3;
}

#liveHeatmapDropdownULWrapper.staticTooltipActive,
#scheduledHeatmapDropdownULWrapper.staticTooltipActive,
#auditDropdownULWrapper.staticTooltipActive {
    display: flex;
    align-items: start;
    gap: 8px;
}

#liveHeatmapDropdownULWrapper.staticTooltipActive ul,
#scheduledHeatmapDropdownULWrapper.staticTooltipActive ul,
#auditDropdownULWrapper.staticTooltipActive ul {
    transform: translateX(-15px);
}

#liveHeatmapDropdownULWrapper.staticTooltipActive svg,
#scheduledHeatmapDropdownULWrapper.staticTooltipActive svg,
#auditDropdownULWrapper.staticTooltipActive svg {
    transform: translate(-3px, 10px);
    z-index: 1;
}

#sideBar.shrunk {
    width: 60px;
    border: none;
    border-right: 1px solid var(--icy-mist);
    box-shadow: 3px 0px 15px -2px rgba(0, 0, 0, 0.07);
}

#sideBar.shrunk .updatePopupAndRightsWrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
}

/* Hide only text inside .iconAndTextContainer when #sideBar has .shrunk */
#sideBar.shrunk .iconAndTextContainer .iconText {
    display: none;
}

.iconAndTextContainer span.iconText {
    white-space: nowrap;
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

#sideBar:not(.shrunk) .iconAndTextContainer span.iconText {
    opacity: 1;
    transform: translateX(0);
}

.iconAndTextContainer .betaBadge {
    opacity: 1;
    transform: translateX(0);
}

/* Also hide the little angle icon if you only want icons visible */
#sideBar.shrunk .angleImage {
    display: none;
}

/* Example: Hide certain text when #sideBar is shrunk */
#sideBar.shrunk #gearImage,
#sideBar.shrunk .copyRightText,
#sideBar.shrunk .helpBtnInnerContainer span,
#sideBar.shrunk .helpCenterRightArrow,
#sideBar.shrunk .upgradePopupDiv {
    display: none; /* or however you want to hide them */
}

#sideBar:not(.shrunk) #helpBtnTooltipText,
#sideBar:not(.shrunk) .openFullSidebarBtn,
#sideBar:not(.shrunk) #openFullSidebarBtn {
    display: none;
}

#sideBar.shrunk #userNameAndEmail2 {
    display: block;
}

#sideBar.shrunk #userNameAndEmail {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#userNameAndEmail {
    cursor: pointer;
}
#userNameAndEmail,
#userNameAndEmail2 {
    display: block;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    color: black;
    margin: 0;
}

#userNameAndEmail2 {
    color: #8e95a2;
    font-size: 13px;
    display: none;
    cursor: default;
}

/* Show the "shrunk version" of certain items instead */
#sideBar.shrunk .upgradePopupDivShrunk {
    display: block;
}

/* If you want "notifications" moved or styled differently when shrunk,
   you can absolutely position or transform them based on #sideBar.shrunk */
#sideBar.shrunk #notificationTooltipArea {
    display: flex;
    margin-top: auto;
    padding: 10px;
    height: 56px;
    justify-content: start;
}

#sideBar.shrunk .notificationsAndShrinkBtnWrapper {
    display: none;
}

.notificationsAndShrinkBtnWrapper {
    display: flex;
    align-items: center;
}

#sideBar.shrunk #notificationTooltipArea {
    padding: 9px 0 12px 0;
    margin-bottom: 2px;
    display: flex;
}

/* Hide by default */
#openSidebarBtnWrapper {
    display: none;
}

/* Show when sidebar is shrunk */
#sideBar.shrunk #openSidebarBtnWrapper {
    display: flex;
    position: fixed;
    left: 50px;
}

#sideBar.shrunk .topRec {
    padding-bottom: 11.5px;
}

/* Instead of #notificationTooltipArea.shrunk:hover:not(:has(#notificationsDiv:hover)) { ... } */
#sideBar.shrunk
    #notificationTooltipArea:hover:not(:has(#notificationsDiv:hover)) {
    background: #b9cfef;
}

#sideBar.shrunk #notifications {
    left: 15.5px;
}

.logoImageLink:hover {
    text-decoration: none;
}

.logoImageLink {
    position: relative;
    display: inline-block;
}

.logoImageLinkPromotion {
    display: flex;
}

.logoImageLink img {
    vertical-align: middle;
    border: none;
}

#sideBar .logoImageLink img:nth-of-type(2) {
    position: absolute;
    top: 14px;
    left: 34px;
    transform: translate(0, -50%);
    opacity: 1;
    height: 32px;
    visibility: visible;
    transition: opacity 0.3s ease-in-out 0.5s;
    display: inline-block;
    max-width: unset;
}

#sideBar .logoImageLinkPromotion img:nth-of-type(3) {
    height: 23px !important;
    width: 59px;
    position: absolute;
    top: -8px;
    left: 74px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out 0.5s;
}

#sideBar .logoImageLinkPromotion img:nth-of-type(2) {
    height: 28px !important;
}

.logoImageLinkPromotion img:nth-of-type(1) {
    left: -4px;
}

#sideBar.shrunk .logoImageLink img:nth-of-type(2) {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease-in-out,
        visibility 0s linear 0.3s;
}

#sideBar.shrunk .logoImageLinkPromotion img:nth-of-type(3) {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease-in-out,
        visibility 0s linear 0.3s;
}

#sideBar.shrunk .copyRightText {
    opacity: 0;
}

#sideBar.shrunk .helpCenterBtn {
    width: 100%;
    margin-left: 0;
    border-radius: 0;
}

#sideBar.shrunk .helpCenterArea-line {
    display: none;
}

#sideBar:not(.shrunk) {
    .helpCenterBtn:hover {
        background: #b9cfef;

        .helpCenterNewTab {
            display: block;
        }
    }
}

.helpCenterBtn:hover {
    background: #b9cfef;
}

#sideBar.shrunk .helpCenterBtnSvg {
    position: relative;
    left: 4px;
}

#sideBar.shrunk .helpCenterArea {
    margin-bottom: 12px;
}

#sideBar:not(.shrunk) .helpCenterBtn {
    top: 2px;
}

#sideBar:not(.shrunk) .helpBtnInnerContainer {
    margin-left: -3px;
    margin-top: -2px;
}

.helpCenterArea-line__top {
    position: relative;
    top: 4px;
}

#sideBar.shrunk .iconAndTextContainer {
    align-items: start;
}

#sideBar.shrunk #dropdowns > div[data-shrunk-label] > button {
    position: relative;
    justify-content: center;
    padding: 4px 0 2px;
}

#sideBar.shrunk #dropdowns > div[data-shrunk-label] .iconAndTextContainer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

#sideBar.shrunk #dropdowns > div[data-shrunk-label] > button::after {
    content: attr(data-shrunk-label);
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    line-height: 11px;
    color: #1e1f20;
    font-weight: 500;
    text-align: center;
    pointer-events: none;
}

.logoImageLink img:nth-of-type(1) {
    position: relative;
    width: auto;
    left: -2px;
    top: -2px;
    height: 32px;
}

.iconAndTextContainer {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.iconAndTextContainer .mainIcon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.iconAndTextContainer[data-citations='container'] {
    position: relative;
    padding-left: 32px;
}

.iconAndTextContainer .combinedIcon {
    width: 26px;
    height: 34px;
    left: -3px !important;
}

.iconAndTextContainer[data-citations='container'] img.mainIcon,
.iconAndTextContainer[data-citations='container'] img.citationsCombinedIcon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.iconAndTextContainer[data-citations='container'] img.mainIcon,
.iconAndTextContainer[data-citations='container'] .betaBadge,
.iconAndTextContainer[data-citations='container'] img.citationsCombinedIcon {
    transition:
        opacity 200ms ease,
        transform 200ms ease;
    will-change: opacity, transform;
}

.citationsCombinedIcon {
    position: absolute;
    left: -1px;
    top: -6px;
    z-index: 3;
}

.softHidden {
    opacity: 0;
    transform: scale(0.99);
    pointer-events: none;
}

.iconAndTextContainer .mainIcon {
    position: relative;
    z-index: 1;
}

.iconAndTextContainer .betaBadge {
    position: absolute;
    top: 5px;
    left: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.iconAndTextContainer .betaBadge--serp {
    background: #00f281;
    color: #1e1f20;
}

.iconAndTextContainer .betaBadge--citations {
    background: var(--light-amber);
    color: var(--nightShade);
}

.iconAndTextContainer .betaBadge--llmTracker {
    background: #e3e4e9;
    color: #6b7280;
}

.iconAndTextContainer .betaBadge--aiTracker {
    color: var(--nightShade);
    background: #00f281;
}

#sideBar.shrunk .iconAndTextContainer .betaBadge {
    display: none;
}

#sideBar.shrunk .iconAndTextContainer .betaBadge--serp,
#sideBar.shrunk .iconAndTextContainer .betaBadge--aiTracker,
#sideBar.shrunk .iconAndTextContainer .betaBadge--citations {
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    min-width: 9px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    color: transparent;
    left: calc(50% + 6px);
    top: 5px;
}

#sideBar.shrunk .iconAndTextContainer .betaBadge--aiTracker {
    background: #00f281;
    top: -1px;
}

#sideBar.shrunk .iconAndTextContainer .betaBadge--citations {
    background: var(--light-amber);
    top: 0px;
}

/* Gray 9×9 circle for disabled/soon items in shrunk mode (Site Audit, Keyword Finder, AI Tracker disabled) */
#sideBar.shrunk
    #dropdowns
    .sidebarItemDisabled
    .iconAndTextContainer
    .betaBadge--soon {
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    min-width: 9px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    color: transparent;
    left: calc(50% + 6px);
    top: 5px;
    background: #8e95a2;
}

#serpLink img {
    height: 32px;
}

#sideBar.shrunk #citationsDropdown .iconAndTextContainer img {
    position: relative;
    left: -17px;
    top: 11px;
}

@media (max-width: 991px) {
    #sideBar {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
}

@media (max-aspect-ratio: 1/1) {
    #shrinkSidebarBtn {
        display: none;
    }
}