styles.css

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 8px;
    font-size: 14px;
    background-color: #f4f4f9;
    color: #333;
    min-width: 300px; /* Added responsiveness */
    max-width: 600px; /* Added responsiveness */
}

/* TODO: unused, delete later - kept for possible future header UI */
.header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/* TODO: unused, delete later - kept for possible future header UI */
h1 {
    font-size: 16px;
    margin: 0;
    color: #111;
}

.window-item, .group-item, .tab-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none; /* Prevent accidental text selection when clicking */
}

.window-item:hover, .group-item:hover, .tab-item:hover {
    background-color: #e9e9f0;
}

/* Specific styling for the actual clickable title area, which can also be edited */
.window-item .window-title-area, .group-item .group-title-area {
    flex-grow: 1; /* Allow it to take up space */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.window-item.active-window {
    border: 1px solid #a3c7f7;
    background-color: #e0effc;
}

.window-item .item-title {
    font-weight: bold;
    color: #005fcc;
    flex-grow: 1;
    min-width: 0; /* Allow text-overflow to work */
}

/* Style for editable title */
.editable-title {
    outline: none;
    border-bottom: 1px dotted transparent; /* Transparent dotted line by default */
    padding-bottom: 1px;
}
.editable-title:focus {
    background-color: #fff;
    border-bottom: 1px solid #005fcc; /* Solid line when focused */
}


.tab-item.active-tab {
    background-color: #dbeafe;
    font-weight: bold;
}

.window-list, .group-list, .tab-list, .tab-list-in-group, .tab-list-no-group {
    list-style: none;
    padding-left: 0;
    margin-top: 0; /* Remove default ul margin */
    margin-bottom: 0;
}

/* TODO: .tab-list is currently unused by the JS (we use -in-group / -no-group).
   Keep this rule for now; remove later if you don't add a generic tab-list. */

/* Indentation levels */
.group-list {
    padding-left: 30px; /* Align group headers with ungrouped tabs */
}
.tab-list-in-group {
    padding-left: 30px; /* Tabs inside a group set to 30px per request */
}
.tab-list-no-group {
    padding-left: 30px; /* Tabs not in group, same as group header level */
}


.item-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
}

.group-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Custom open-circle bullets for groups and tabs. Use pseudo-elements so bullets
   are consistently sized and vertically aligned with favicons (16px). */
.tab-item::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.35);
    margin-right: 10px; /* same spacing as favicons */
    flex-shrink: 0;
    box-sizing: border-box;
}

/* If you want the bullet to sit exactly where the favicon sits, reduce favicon's left margin
   (we already use flex layout and matching sizes to align them). */
/* TODO: .group-item .item-icon is unused (group headers use `.group-color-dot`).
   Keep the rule for now in case group markup is reverted. */
.group-item .item-icon,
.tab-item .item-icon {
    /* keep favicon but ensure alignment with the bullet */
    margin-right: 10px;
}

/* Pinned tab marker (middle dot) */
.pinned-marker {
    margin-right: 6px;
    color: rgba(0,0,0,0.6);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Screen-reader only text */
.sr-only {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

/* Collapsible Section Styles */
.toggle-arrow {
    width: 16px;
    height: 16px;
    margin-right: 4px; /* tightened spacing to bring dot closer to arrow */
    display: inline-block;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666666"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Right arrow */
    background-size: cover;
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
}

/* Nudge group header arrow a bit right so it vertically lines up with tab bullets */
.group-item .toggle-arrow {
    margin-left: -2px; /* slight left nudge so arrow centers on the tab bullet */
}

/* Nudge entire group row slightly left to better align with ungrouped favicons */
.group-item {
    transform: translateX(-3px);
}

.toggle-arrow.expanded {
    transform: rotate(90deg); /* Down arrow when expanded */
}

.collapsed {
    display: none;
}