#backgroundFrames {
    display: none;
}
header {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 35px);
    z-index: 1000;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    z-index: 1000;
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 1;
}

header.window-background {
    opacity: 0.6;
}

header.focus-mode {
    background: transparent;
}

header.focus-mode .header-drag-handle {
    right: 47px !important;
}

.header-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    pointer-events: auto;
    z-index: 1;
}

.sidebar-right {
    position: fixed;
    top: 35px;
    right: 0;
    width: 27px;
    height: calc(100vh - 35px);
    z-index: 1000;
    pointer-events: auto;
    transition: transform 190ms 300ms cubic-bezier(.78,-0.01,.34,1.04), opacity 0.05s ease 0.45s, box-shadow 0.05s ease 0.45s;
    background-color: rgba(0, 0, 0, 0.802);
    backdrop-filter: blur(7px);
    transform: translateX(18px);
    border-left: 1px solid transparent;
    /* opacity: 0; */
}
.sidebar-right:not(:hover) .sidebar-button > svg, .sidebar-right:not(:hover) .sidebar-divider{
    opacity: 0;
    transition: opacity 0.05s ease 0.45s;
}
.sidebar-right:not(:hover) .sidebar-button:not(.sidebar-nav-button), .sidebar-right:not(:hover) .sidebar-button.active:not(.sidebar-nav-button) {
    border: 1px solid transparent;
    background: transparent;
    transition: border 0.05s ease 0.45s, background 0.05s ease 0.45s;
}

.sidebar-right:hover, :global(.sidebar-right.hover-xe) {
    box-shadow: 0 0 13px 7px #0000003c;
    transform: translateX(0px);
    transition: transform 190ms 0ms cubic-bezier(.78,-0.01,.34,1.04), opacity 0.05s ease 0.45s, box-shadow 0.05s ease 0.45;
    transition-delay: 0.1s;
    opacity: 1;
}

.sidebar-right:hover .sidebar-button > svg, .sidebar-right:hover .sidebar-divider, :global(.sidebar-right.hover-xe) .sidebar-button > svg, :global(.sidebar-right.hover-xe) .sidebar-divider {
    opacity: 1;
    transition: opacity 0.05s ease;
    transition-delay: 0.1s;
}

.sidebar-right:hover .sidebar-button:not(.sidebar-nav-button), .sidebar-right:hover .sidebar-button.active:not(.sidebar-nav-button), :global(.sidebar-right.hover-xe) .sidebar-button:not(.sidebar-nav-button), :global(.sidebar-right.hover-xe) .sidebar-button.active:not(.sidebar-nav-button) {
    transition: border 0.05s ease, background 0.05s ease;
    transition-delay: 0.1s;
}

.sidebar-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #ffffff17 12%, #ffffff17 95%, transparent 100%), rgba(0, 0, 0, 0.802);
    background-size: 1px 100%, 100% 100%;
    background-position: left center, center;
    background-repeat: no-repeat, no-repeat;
    opacity: 0;
    transition: opacity 0.05s ease 0.45s;
}

/* .sidebar-right.sidebar-right-hovered::before */
.sidebar-right:hover::before, :global(.sidebar-right.hover-xe::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    bottom: 0;
    width: 1px;
    transition: opacity 0.05s ease 0.1s;
    opacity: 1;
}

.sidebar-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.sidebar-button {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s ease;
    padding: 0;
    backdrop-filter: blur(4px);
    border: 1px solid transparent;
}

.sidebar-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.sidebar-button.active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-divider {
    width: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 6px 0;
}

.drag-handle-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 100vh;
    z-index: 999;
    pointer-events: auto;
}

.drag-handle-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 999;
    pointer-events: auto;
}

.tab-wrapper {
    position: relative;
    -webkit-app-region: no-drag;
    z-index: 1;
    top: 6px;
    left: 110px;
}

.tab-wrapper.overflowing-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.tab-wrapper.overflowing-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.tab-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-app-region: no-drag;
    position: relative;
    z-index: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    height: 100%;
    user-select: none;
}

ul::-webkit-scrollbar {
    display: none;
}
.favicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    /* FIXME: lanes favicon has white corners!!! */
}

.favicon:hover {
    transform: scale(1.1);
}

.favicon:hover::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    border-radius: 6px;
    z-index: -1;
    animation: shine 0.6s ease-out;
}

@keyframes shine {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.favicon-placeholder {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favicon-placeholder:hover {
    transform: scale(1.1);
    opacity: 0.8;
    background-color: rgba(255, 255, 255, 0.1);
}

.favicon-placeholder.globe {
    color: #666;
}

.favicon-placeholder.new-tab {
    color: #888;
}

.favicon-placeholder svg {
    width: 14px;
    height: 14px;
}
.favicon-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.favicon-button:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

.favicon-button .favicon {
    pointer-events: auto;
}

.favicon-button .favicon:hover {
    transform: none;
}

.favicon-button .favicon:hover::before {
    display: none;
}

.favicon-wrapper {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
}

.tab-container {
    user-select: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    padding: 4px;
    list-style: none;
    transition: border-color 0.3s ease, width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease, flex-basis 0.2s ease;
    border-radius: 8px;
    background-color: rgb(255 255 255 / 7%);
    min-width: 130px;
    max-width: 200px;
    flex: 0 1 200px; /* Don't grow, can shrink from 200px basis */
    -webkit-app-region: no-drag;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    border: 1px solid hsl(0deg 0% 100% / 2%);
}
.tab-container:hover, .tab-container.hovered, .tab-container.menu-open {
    background-color: rgb(255 255 255 / 9%);
    border: 1px solid hsl(0deg 0% 100% / 3%);
}
.tab-container.active {
    background-color: rgb(255 255 255 / 14%);
    border: 1px solid hsl(0deg 0% 100% / 4%);
}
.tab-container.active:hover, .tab-container.active.hovered, .tab-container.active.menu-open {
    background-color: rgb(255 255 255 / 17%);
    border: 1px solid hsl(0deg 0% 100% / 5%);
}
.tab-container .tab {
    user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: hsl(0 0% 35% / 1);
    overflow: hidden;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    position: relative;
}
.tab-container.active .tab {
    color: #c6c6c6;
}
.tab-container.active .favicon-wrapper {
    opacity: 0.85;
}

.tab-container:hover .favicon-wrapper, .tab-container.hovered .favicon-wrapper, .tab-container.menu-open .favicon-wrapper {
    opacity: 1;
}
.tab-container:hover .tab, .tab-container.hovered .tab, .tab-container.menu-open .tab {
    color: #fff;
}
.tab-container .tab span {
    overflow: hidden;
}
.tab-loading-spinner {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    z-index: 2;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tab-title {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    mask: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    -webkit-mask: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    margin-left: 4px;
    line-height: 1.2;
    margin-top: -1px;
}

/* Remove extra margin when favicon-wrapper is present (since gap already provides spacing) */
.favicon-wrapper + .tab-title {
    margin-left: 0;
}

.close-btn {
    background: none;
    border: none;
    color: #717171;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 20px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    margin-top: -2px;
    margin-right: -3px;
    flex-shrink: 0;
    overflow: hidden;
}

.close-btn:hover {
    background-color: #2a2a2a;
    color: #fff;
    padding: 0 4px;
}

.tab-container:hover .close-btn, .tab-container.hovered .close-btn, .tab-container.menu-open .close-btn {
    opacity: 1;
    width: 20px;
    padding: 0 4px;
    padding-bottom: 1px;
}


/* Shared base class for header icon buttons */
.header-icon-button {
    position: fixed;
    top: 8px;
    width: 32px;
    height: 30px;
    padding-bottom: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 10000;
    user-select: none;
    -webkit-app-region: no-drag;
    color: white;
}

.header-icon-button > svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.focus-mode .focus-mode-icon > svg {
    opacity: 0.34;
}
/* 
header.focus-mode:hover  .focus-mode-icon > svg {
    opacity: 0.7;
} */

.header-icon-button:hover > svg {
    opacity: 1;
}

.view-mode-icon {
    right: 90px;
}

.focus-mode-icon {
    right: 4px;
}

.dev-menu-icon {
    position: fixed;
    top: 8px;
    width: 32px;
    height: 30px;
    padding-bottom: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 10000;
    user-select: none;
    -webkit-app-region: no-drag;
    color: white;
}



.dev-menu {
    z-index: 10010;
    font-family: 'Inter', sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 17px;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    min-width: 180px;
    max-width: 200px;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transform: translateY(-8px) scale(0.96);
    overflow: hidden;
}

.dev-menu-icon:hover .dev-menu {
    transform: translateY(0) scale(1);
}

.dev-menu:hover {
    transform: translateY(0) scale(1) !important;
}

.dev-menu-header {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dev-menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.dev-menu-item:last-of-type {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.dev-menu-item:hover {
    background: rgb(255 255 255 / 8%);
}

.dev-menu-item span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.dev-menu-item span:nth-child(2) {
    flex: 1;
}

.dev-menu-icon-item {
    width: 16px;
    height: 16px;
    opacity: 0.9;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.dev-menu-icon.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.settings-menu-icon {
    right: 47px;
}

.settings-menu {
    z-index: 10010;
    font-family: 'Inter', sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 17px;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    min-width: 180px;
    max-width: 200px;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transform: translateY(-8px) scale(0.96);

    z-index: 10000;
    overflow: hidden;
}

.settings-menu-icon:hover .settings-menu {
    transform: translateY(0) scale(1);
}

.settings-menu:hover {
    transform: translateY(0) scale(1) !important;
}

.menu-header {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.menu-item:last-of-type {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.menu-item:hover {
    background: rgb(255 255 255 / 8%);
}

.menu-item span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.menu-item:hover span {
    color: rgba(255, 255, 255, 0.8);
}

.menu-item.active span {
    color: rgba(255, 255, 255, 0.8);
}

.menu-item span:nth-child(2) {
    flex: 1;
}

.menu-item span:not(.menu-icon-item) {
    padding-top:2px;
}

.menu-icon-item {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.menu-item:hover .menu-icon-item {
    opacity: 0.9;
}

.menu-item.active .menu-icon-item {
    opacity: 0.9;
}

/* .settings-menu-header {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
} */

/* .settings-menu-item {
    padding: 8px 12px 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
} */

/* .settings-menu-item:last-of-type {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.settings-menu-item:hover {
    background: rgb(255 255 255 / 8%);
} */


/* .settings-menu-item.active:hover {
    background: rgb(255 255 255 / 8%);
} */

.settings-menu-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 8px 0;
    flex-shrink: 0;
}

/* .settings-menu-item span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: center;
}

.settings-menu-item span:nth-child(2) {
    flex: 1;
} */

/* .settings-menu-icon-item {
    width: 16px;
    height: 16px;
    opacity: 0.9;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
} */

.toggle-indicator {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 10px;
}

.view-mode-icon.hidden,
.new-tab-button.hidden,
.trash-icon.hidden,
.tab-wrapper.hidden,
.settings-menu-icon.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.view-mode-menu {
    z-index: 10010;
    font-family: 'Inter', sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 17px;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    min-width: 160px;
    max-width: 180px;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transform: translateY(-8px) scale(0.96);

    z-index: 10000;
    overflow: hidden;
}

.view-mode-icon:hover .view-mode-menu {
    transform: translateY(0) scale(1);
}

.view-mode-menu:hover {
    transform: translateY(0) scale(1) !important;
}

/* .view-mode-menu-header {
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
} */


/* 
.view-mode-menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.view-mode-menu-item:last-of-type {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
} */



.view-mode-menu-item:hover,
.trash-menu-item:hover,
.trash-menu-clear:hover {
    background: rgb(255 255 255 / 8%);
}
/* 
.view-mode-menu-item.active {
    background: rgb(255 255 255 / 5%);
}

.view-mode-menu-item.active:hover {
    background: rgb(255 255 255 / 10%);
}

.view-mode-menu-item span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.view-mode-menu-item span:nth-child(2) {
    flex: 1;
} */
/* 
.view-mode-icon-item {
    width: 16px;
    height: 16px;
    opacity: 0.9;
    flex-shrink: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
} */

.checkmark {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 10px;
}

.controlled-frame-container {
  height: 100vh;
  position: absolute;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 9px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  gap: 9px;
  /* -webkit-app-region: drag;
  app-region: drag; */
  -webkit-app-region: no-drag;
  /* top: 38px; */
  bottom: 0;
  scrollbar-width: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding: 9px;
  transition: width 0.3s ease;
  width: calc(100% - var(--space-taken, 0px));
  left: var(--left-pinned-width, 0px);
}

.controlled-frame-container.window-controls-overlay {
    height: calc(100vh - 35px);
}

.controlled-frame-container::-webkit-scrollbar {
  display: none;
}

.browser-frame {
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

:global(.frame) {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    overflow: hidden;
    flex: 0 0 auto;
    -webkit-app-region: no-drag;
    user-select: none;
    transition: width 0.3s ease, border-color 0.3s ease;
}

:global(.frame-wrapper) {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    width: calc(100vw - var(--space-taken, 0px) - 18px);
    height: calc(100vh - 18px);
    overflow: visible;
}
/* @media (min-width: 1800px) {
    :global(.tab-group .frame) {
        max-width: 1400px !important;
    }

    :global(.tab-group .link-preview), :global(.tab-group .url-display) {
        max-width: calc(1400px - 20px) !important;
    }
} */

:global(.tab-group .active .frame){
    border: 1px solid #74747466;
}

.has-right-pins :global(.frame-wrapper) {
    width: calc(100vw - var(--space-taken, 0px) - 18px - 9px);
}

.has-left-pins :global(.frame-wrapper) {
    width: calc(100vw - var(--space-taken, 0px) - 9px);
    padding-left: 9px;
}

.has-left-pins.has-right-pins :global(.frame-wrapper) {
    width: calc(100vw - var(--space-taken, 0px) - 18px);
    padding-left: 9px;
}

/* .controlled-frame-container.sidebar-open :global(.frame) {
    width: calc(100vw - (320px * var(--sidebar-count)) - 18px);
}

.controlled-frame-container.sidebar-open {
    width: calc(100% - (320px * var(--sidebar-count)));
    transition: width 0.3s ease;
} */

:global(.frame.window-controls-overlay) {
    height: calc(100vh - 52px);
}

:global(.frame.no-pointer-events) {
    pointer-events: none;
    user-select: none;
}

.controlled-frame-container.scrolling {
    scroll-behavior: auto;
}

.tab-hovercard {
    position: fixed;
    transform: translateX(-50%);
    z-index: 10006;
    pointer-events: all;
    opacity: 0;
    animation: hovercard-fade-in 0.2s ease-out forwards;
    -webkit-app-region: no-drag;
    user-select: none;
}

.tab-hovercard.trash-item {
    transform: translateY(-50%);
    animation: hovercard-fade-in 0.2s ease-out forwards;
}

@keyframes hovercard-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.hovercard-content {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.2);
    width: 320px;
    max-width: 90vw;
    margin-top: 8px;
}

.hovercard-info {
    padding: 16px;
    font-family: 'Inter', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible;
}

.hovercard-info:last-child {
    border-bottom: none;
}

.hovercard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hovercard-text {
    flex: 1;
    min-width: 0;
}

.hovercard-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hovercard-url {
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.5;
}

.partition-dropdown {
    position: relative;
    flex-shrink: 0;
}

.partition-button {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.partition-dropdown:hover .partition-button {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.partition-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    min-width: 140px;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10007;
    overflow: hidden;
    transform: translateY(-8px) scale(0.95);
}

.partition-dropdown:hover .partition-menu {
    transform: translateY(0) scale(1);
}

.partition-menu:hover {
    transform: translateY(0) scale(1) !important;
}



.partition-menu-header {
    padding: 6px 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

.partition-menu-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    user-select: none;
}

.partition-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.partition-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.8;
}

.w-3 {
    width: 12px;
}

.h-3 {
    height: 12px;
}

.hovercard-screenshot {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0 0 12px 12px;
}

.hovercard-screenshot img,
.hovercard-screenshot :global(img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tab-container.tab-placeholder {
    opacity: 0;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.02);
    border: none;
    transition:
        width 0.15s ease-in-out,
        min-width 0.15s ease-in-out,
        max-width 0.15s ease-in-out,
        flex-basis 0.15s ease-in-out;
}

.tab-container.tab-placeholder.collapsing {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden;
    transition:
        width 0.15s ease-in-out,
        min-width 0.15s ease-in-out,
        max-width 0.15s ease-in-out,
        flex-basis 0.15s ease-in-out;
}


.tab-spacer {
    height: 25px;
    flex: 1 0 120px; /* Grow to fill space, don't shrink below 220px */
    -webkit-app-region: drag;
    z-index: 1;
}

/* .spacer-drag-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    -webkit-app-region: drag;
    cursor: move;
    pointer-events: auto;
    z-index: 2;
}
.spacer-scroll-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    -webkit-app-region: no-drag;
    pointer-events: auto;
    z-index: 1;
} */

.new-tab-button {
    position: fixed;
    top: 7px;
    width: 28px;
    height: 25px;
    margin-right: 5px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, visibility 0.2s ease, border 0.2s ease;
    z-index: 10000;
    user-select: none;
    -webkit-app-region: no-drag;
    border: 1px solid transparent;
    z-index: 100;
    padding-bottom: 2px;
    transform: translateX(20px);
}

.new-tab-button.visible {
    opacity: 0.7;
    visibility: visible;
    transform: translateX(0);
}

.new-tab-button.visible:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.inline-new-tab-button {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    padding: 4px;
    padding-bottom: 6px;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, border 0.2s ease;
    border-radius: 6px;
    width: 28px;
    height: 25px;
    flex-shrink: 0;
    -webkit-app-region: no-drag;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    user-select: none;
    opacity: 0.7;
    margin-top: 1px;
}

.inline-new-tab-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.inline-new-tab-button:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* .inline-new-tab-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
} */

.inline-new-tab-button .new-tab-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.3s ease;
}

.inline-new-tab-button:hover .new-tab-icon {
    color: rgba(255, 255, 255, 1);
}

.context-menu {
    position: fixed;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: visible;
    font-family: 'Inter', sans-serif;
    animation: context-menu-appear 0.15s ease-out;
    -webkit-app-region: no-drag;
    white-space: nowrap;
}

@keyframes context-menu-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
}

.context-menu-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
}

.context-menu-item:first-child:not(.context-menu-item-left):not(.context-menu-item-right) {
    border-radius: 8px 8px 0 0;
}

.context-menu-item:last-child:not(.context-menu-item-left):not(.context-menu-item-right) {
    border-radius: 0 0 8px 8px;
}

.context-menu-item-row:first-child .context-menu-item-left {
    border-radius: 8px 0 0 0;
}

.context-menu-item-row:first-child .context-menu-item-right {
    border-radius: 0 8px 0 0;
}

.context-menu-item-row:last-child .context-menu-item-left {
    border-radius: 0 0 0 8px;
}

.context-menu-item-row:last-child .context-menu-item-right {
    border-radius: 0 0 8px 0;
}

.context-menu-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

.context-menu-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 4px 0;
}

.context-menu-item-row {
    display: flex;
    width: 100%;
}

.context-menu-item-left,
.context-menu-item-right {
    flex: 1;
    border-radius: 0;
}

.context-menu-item-left {
    border-right: 1px solid transparent;
}

.context-menu-item-left:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    border-right: 1px solid transparent;
}

.context-menu-item-right:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
}

.context-menu-item.has-submenu {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu-arrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
}

.context-menu-item.has-submenu:hover .submenu-arrow {
    color: rgba(255, 255, 255, 0.8);
}

.context-submenu {
    position: absolute;
    left: calc(100% + 4px);
    top: -1px;
    min-width: 180px;
    background: rgba(0, 0, 0, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: all 0.12s ease-out;
    z-index: 10003;
    pointer-events: auto;
    white-space: nowrap;
}

.context-menu-item.has-submenu:hover .context-submenu,
.context-submenu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Extend hover area to prevent submenu from disappearing */
.context-menu-item.has-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    background: transparent;
    z-index: 10002;
}

.context-submenu-item {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
    position: relative;
    white-space: nowrap;
}

.context-submenu-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
    color: rgba(255, 255, 255, 0.95);
}

.context-submenu-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: rgba(59, 130, 246, 0.9);
}

.context-submenu-item.active:hover {
    background: rgba(59, 130, 246, 0.12);
    color: rgba(59, 130, 246, 1);
}

.context-submenu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.context-submenu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.partition-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.8;
}

.context-submenu-item .checkmark {
    margin-left: auto;
    color: rgba(59, 130, 246, 0.8);
    font-weight: bold;
    font-size: 14px;
}

.context-menu-scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10001;
}

.drag-enabled {
    -webkit-app-region: drag;
}

.frame-title-bar {
    position: fixed;
    top: -35px;
    /* left: 9px; */
    height: 34px;
    /* width: calc(100% - 18px);
    background: #111111ef; */

    left: 0px;
    border: 1px solid #000000c9;
    right: 0px;
    box-sizing: border-box;
    background: #000000b9;

    backdrop-filter: blur(16px);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.1s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s, top 0.1s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s, box-shadow 0.1s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-family: 'Inter', sans-serif;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    margin-top: 10px;
}

.frame-title-bar.window-controls-overlay {
    top: 0;
}

.frame-title-bar:hover,
.frame-title-bar.editing-url {
    top: -10px;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.11s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s, top 0.11s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s, box-shadow 0.11s cubic-bezier(0.25, 0.45, 0.94, 1) 0.3s;
    box-shadow: 0 6px 35px 5px rgb(0 0 0 / 36%);
}

.frame-title-bar.window-controls-overlay:hover,
.frame-title-bar.window-controls-overlay.editing-url {
    top: 28px;
}

.frame-header-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.frame-header-url-container {
    flex: 1;
    min-width: 0;
    margin: 0 8px;
}

.frame-header-url {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 400;
    user-select: none;
    cursor: default;
}

.url-display-button {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    cursor: default;
    border-radius: 4px;
}

.url-edit-form {
    width: 100%;
}

.url-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 400;
    outline: none;
}

.url-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.url-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.frame-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.frame-button {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.frame-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.frame-button.frame-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: rgba(255, 255, 255, 1);
}

.w-4 {
    width: 14px;
}

.h-4 {
    height: 14px;
}
.trash-menu svg {
    color: rgba(255, 255, 255, 0.6);
}

.new-tab-button .new-tab-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.3s ease;
}

.new-tab-button.visible:hover .new-tab-icon {
    color: rgba(255, 255, 255, 1);
}

.controlled-frame-container {
    width: calc(100% - var(--space-taken, 0px));
    left: var(--left-pinned-width, 0px);
    transition: width 0.1s ease-out, left 0.1s ease-out;
}

.controlled-frame-container.has-left-pins {
    left: calc(var(--left-pinned-width, 0px) - 18px);
    width: calc(100% - var(--space-taken, 0px) + 9px);
}

.controlled-frame-container.has-tab-sidebar {
    left: calc(var(--left-pinned-width, 0px) + var(--tab-sidebar-width, 0px));
    width: calc(100% - var(--space-taken, 0px));
}

.controlled-frame-container.has-left-pins.has-tab-sidebar {
    left: calc(var(--left-pinned-width, 0px) + var(--tab-sidebar-width, 0px) - 18px);
    width: calc(100% - var(--space-taken, 0px) + 9px);
}

.pinned-frames-left {
    position: fixed;
    top: 50px; /* Start below tab bar, aligned with main frames */
    left: 0;
    width: var(--left-pinned-width, 0px);
    height: calc(100vh - 52px); /* Account for tab bar height */
    padding: 9px 8px 9px 9px; /* Add 8px right padding */
    display: flex;
    flex-direction: row;
    gap: 9px;
    align-items: flex-end;
    overflow: visible;
    z-index: 1;
    transition: width 0.1s ease-out, left 0.1s ease-out;
    border-radius: 0 8px 8px 0; /* Round right corners to match frames */
}

.pinned-frames-left.has-tab-sidebar {
    left: var(--tab-sidebar-width, 0px);
}



.pinned-frames-right {
    overflow: visible;
    position: fixed;
    top: 50px;
    right: var(--sidebar-width, 0px);
    width: var(--right-pinned-width, 0px);
    height: calc(100vh - 52px); /* Account for tab bar height */
    padding: 9px 9px 9px 0;
    border-radius: 8px 0 0 8px; /* Round left corners to match frames */
    display: flex;
    flex-direction: row;
    gap: 9px;
    align-items: flex-end;
    overflow: hidden;
    z-index: 1;
    transition: width 0.1s ease-out, right 0.1s ease-out;
    overflow: visible;
}

.pinned-frames-left.window-controls-overlay {
    height: calc(100vh - 35px);
    top: 35px;
}
.pinned-frames-right.window-controls-overlay {
    height: calc(100vh - 35px);
    top: 35px;
}

.has-right-pins.controlled-frame-container {
    padding-right: 18px;
}
.has-left-pins.controlled-frame-container {
    padding-left: 18px;
}

.pinned-frames-left :global(.frame),
.pinned-frames-right :global(.frame) {
    height: calc(100vh - 72px); /* Account for tab bar (52px) + padding (18px) */
    /* border: 1px solid #ffffff12; */
    border: none;
    /* border-radius: 8px;
    overflow: hidden; */
    flex-shrink: 0;
    transition: width 0.3s ease;
    border-radius: 8px;
    box-shadow: 0px 0px 9px 4px #00000040;
    overflow: visible;
    /* border: 1px solid #111111; */
}

.pinned-frames-left.window-controls-overlay :global(.frame),
.pinned-frames-right.window-controls-overlay :global(.frame) {
    height: calc(100vh - 54px);
    margin-bottom: 1px;
}

.pinned-frames-left :global(.frame) {
    width: calc((var(--left-pinned-width, 0px) - 8px - 9px * var(--left-pinned-count, 1)) / var(--left-pinned-count, 1)); /* Account for 9px left + 8px right padding + gaps */
}

.pinned-frames-right :global(.frame) {
    width: calc((var(--right-pinned-width, 0px) - 9px * var(--right-pinned-count, 1)) / var(--right-pinned-count, 1));
}

.sidebar-container {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width, 330px);
    /* width: calc(320px * var(--sidebar-count, 1)); */
    height: 100vh;
    z-index: 500;
    display: flex;
    flex-direction: row;
}

.sidebar-container.window-controls-overlay {
    top: 38px;
    height: calc(100vh - 46px);
}

.sidebar-panel {
    width: calc(var(--sidebar-width) / var(--sidebar-count, 1));
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

/* Only animate new panels sliding in */
.sidebar-panel.new-panel {
    transform: translateX(100%);
    animation: slide-in-panel 0.15s ease-out forwards;
}

.sidebar-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -1px;
    width: 1px;
    height: calc(100vh + 20px);
    background: linear-gradient(to bottom, transparent 0%, #ffffff17 12%, #ffffff17 95%, transparent 100%), rgba(0, 0, 0, 0.802);
    background-size: 1px 100%, 100% 100%;
    background-position: left center, center;
    background-repeat: no-repeat, no-repeat;
    opacity: 1;
    z-index: 10;
}

.sidebar-container.window-controls-overlay .sidebar-panel::before {
    top: 0px;
    height: calc(100vh - 50px);
}

@keyframes slide-in-panel {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.sidebar-button.active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Disable transitions during window resize for performance */
.controlled-frame-container.no-transitions {
    transition: none !important;
    scroll-behavior: auto !important;
}

.controlled-frame-container.no-transitions :global(.frame) {
    transition: none !important;
}

.pinned-frames-left.no-transitions,
.pinned-frames-right.no-transitions {
    transition: none !important;
}

.pinned-frames-left.no-transitions :global(.frame),
.pinned-frames-right.no-transitions :global(.frame) {
    transition: none !important;
}

/* Resize handles for pinned frames */
.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: col-resize;
    z-index: 1000;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: auto;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.resize-handle:hover,
.resize-handle.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Position naturally at the right edge of left pinned frames */
.pinned-frames-left .resize-handle-right {
    right: 2px;
}

/* Position naturally at the left edge of right pinned frames */
.pinned-frames-right .resize-handle-left {
    left: -6px;
}

/* Position naturally at the left edge of sidebar container */
.sidebar-container .resize-handle-left {
    left: -7px;
}

/* Disable pointer events on frames during resize */
.resizing-pinned-frames :global(.frame),
.resizing-pinned-frames :global(iframe),
.resizing-pinned-frames :global(.controlled-frame) {
    pointer-events: none !important;
}

.controlled-frame-container.resizing-pinned-frames :global(.frame),
.controlled-frame-container.resizing-pinned-frames :global(iframe),
.controlled-frame-container.resizing-pinned-frames :global(.controlled-frame) {
    pointer-events: none !important;
}

/* Disable transitions during resize for immediate response */
.resizing-pinned-frames,
.controlled-frame-container.resizing-pinned-frames {
    transition: none !important;
}

/* Disable frame width transitions during resize */
.resizing-pinned-frames :global(.frame),
.controlled-frame-container.resizing-pinned-frames :global(.frame) {
    transition: none !important;
}

/* Disable pinned frame container transitions during resize */
.pinned-frames-left.resizing-pinned-frames,
.pinned-frames-right.resizing-pinned-frames {
    transition: none !important;
}

.sidebar-container.no-transitions {
    transition: none !important;
}

.sidebar-container.no-transitions .sidebar-panel {
    transition: none !important;
    animation: none !important;
}

/* Disable all sidebar-related animations during window resize */
.no-transitions .sidebar-panel.new-panel {
    animation: none !important;
    transform: translateX(0) !important;
}

.no-transitions .sidebar-panel::before {
    transition: none !important;
}

/* Disable all sidebar and panel transforms during resize */
.no-transitions .sidebar-panel {
    transform: translateX(0) !important;
}

/* Disable any width-related transitions on sidebar containers */
.sidebar-container.no-transitions {
    width: var(--sidebar-width, 320px) !important;

    /* width: calc(320px * var(--sidebar-count, 1)) !important; */

}

/* Ensure panels stay in correct position when transitioning out of resize mode */
.sidebar-panel {
    transform: translateX(0);
}

.no-transitions .sidebar,
.no-transitions .sidebar * {
    transition: none !important;
    animation: none !important;
}

.url-display {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    z-index: 10;
    opacity: 0;
    transform: translateY(0);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    user-select: none;
    pointer-events: none;
    margin-top: -8px;
}

.url-display.visible {
    animation: url-display-fade-in-out 1.8s ease-out forwards;
}

@keyframes url-display-fade-in-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* Reading mode styles */
.reading-mode {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    min-height: calc(100vh - 40px);
}

.reading-mode .url-display {
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 20;
}

.frame.reading-mode {
    background: #fafafa;
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.controlled-frame-container :global(.frame.reading-mode) {
    background: #fafafa;
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.content-area-scrim {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    pointer-events: all;
    background: transparent;
}

header.window-controls-overlay + .content-area-scrim {
    top: 40px;
}

.tab-divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 16px;
    flex-shrink: 0;
    margin: 0 4px;
}

.tab-divider-vertical {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}

:global(.frame > *) {
    border-radius: 8px;
    overflow: hidden;
}


:global(.frame-wrapper > * ) {
    border: 1px solid #ffffff12;
    border-radius: 8px;
    overflow: hidden;
}

/* Shared hover menu behavior */
.hover-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity 0.15s ease 0.3s, visibility 0.15s ease 0.3s, transform 0.15s ease 0.3s;
}

.hover-menu.menu-force-close,
.hover-menu.menu-force-close:hover,
.hover-menu-button:hover .hover-menu.menu-force-close,
.hover-menu-button.menu-show-delay:hover .hover-menu.menu-force-close {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

.hover-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease !important;
}

.hover-menu-button:hover .hover-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

header:hover .hover-menu {
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease !important;
}

:global(.hover-menu-button > svg) {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

:global(.hover-menu-button:hover > svg) {
    opacity: 1;
}

/* Special case for view-mode-icon which uses {@html} */
.view-mode-icon svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.view-mode-icon:hover svg {
    opacity: 1;
}

.microphone-indicator {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 7px;
    height: 7px;
    background: rgba(34, 197, 94, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: microphone-pulse 2s ease-in-out infinite;
}

.microphone-indicator svg {
    width: 5px;
    height: 5px;
    color: rgba(255, 255, 255, 0.7);
}

@keyframes microphone-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.overlay-open controlledframe {
    pointer-events: none;
}