html.doccare-overlay {
    --doccare-titlebar-height: env(titlebar-area-height, 0px);
}

.doccare-titlebar:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 1100;
    box-sizing: border-box;
    margin-left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    height: var(--doccare-titlebar-height);
    background: #123269;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    overflow: hidden;
    -webkit-app-region: drag;
    app-region: drag;
}

.doccare-titlebar-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 12px/1.2 system-ui, sans-serif;
}

.doccare-overlay .main-wrapper > .header,
.doccare-overlay .dch-header {
    top: var(--doccare-titlebar-height);
}

.doccare-overlay .main-wrapper .sidebar {
    top: calc(60px + var(--doccare-titlebar-height));
}

.doccare-connection {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: 600 12px/1.4 system-ui, sans-serif;
    pointer-events: none;
    flex: 0 0 auto;
    white-space: nowrap;
}

.doccare-connection-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.doccare-connection-bars i {
    width: 3px;
    height: 4px;
    border-radius: 1px;
    background: currentColor;
}

.doccare-connection-bars i:nth-child(2) { height: 7px; }
.doccare-connection-bars i:nth-child(3) { height: 10px; }
.doccare-connection[data-state="online"] { color: #166534; }
.doccare-connection[data-state="slow"] { color: #854d0e; }
.doccare-connection[data-state="down"] { color: #991b1b; }
.doccare-connection[data-state="slow"] i:not(:first-child),
.doccare-connection[data-state="down"] i { opacity: .35; }