/* ========== Sync — Header Avatar + Account Dropdown ========== */

/* Pulse animation for syncing state */
@keyframes syncPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ---- Ghost sign-in button (header, signed-out state) ---- */
.header-sign-in-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, #57534e);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 280ms cubic-bezier(0.16,1,0.3,1), color 280ms cubic-bezier(0.16,1,0.3,1);
    white-space: nowrap;
}
.header-sign-in-btn:hover {
    background: rgba(140,133,120,0.06);
    color: var(--text-primary, #2C2C2C);
}
.header-sign-in-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ---- Avatar wrapper + button (header, signed-in state) ---- */
.header-avatar-wrapper {
    position: relative;
}
.header-avatar-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 280ms cubic-bezier(0.16,1,0.3,1);
}
.header-avatar-btn:hover {
    opacity: 0.85;
}
.header-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EDE8E0;
    border: 1.5px solid rgba(201, 169, 110, 0.25);
    color: #8C7A5E;
    font-size: 13px;
    font-weight: 600;
    font-family: Inter, system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

/* Sync dot on avatar */
.header-avatar-sync-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--card-surface, #FAFAF7);
    pointer-events: none;
    transition: background 0.3s ease;
}
.header-avatar-sync-dot.synced {
    background: rgba(163, 177, 138, 0.9);
}
.header-avatar-sync-dot.syncing,
.header-avatar-sync-dot.connecting {
    background: #C9A96E;
    animation: syncPulse 1.2s ease-in-out infinite;
}
.header-avatar-sync-dot.error {
    background: #c97d6e;
}
.header-avatar-sync-dot.none {
    display: none;
}

/* ---- Account dropdown ---- */
.header-account-dropdown {
    position: fixed;
    display: none;
    width: 240px;
    background: var(--card-surface, #FAFAF7);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    padding: 12px 0;
    z-index: 1000;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}
.header-account-dropdown.open {
    display: block;
    animation: dropdownFadeIn 180ms cubic-bezier(0.16,1,0.3,1);
    pointer-events: auto;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.header-dropdown-user {
    padding: 4px 16px 8px;
}
.header-dropdown-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #2C2C2C);
    line-height: 1.3;
}
.header-dropdown-email {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary, #8C8578);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-dropdown-divider {
    height: 1px;
    background: rgba(201, 169, 110, 0.10);
    margin: 4px 0;
}
.header-dropdown-sync-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text-tertiary, #8C8578);
}
.header-dropdown-sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.header-dropdown-sync-dot.synced {
    background: rgba(163, 177, 138, 0.9);
}
.header-dropdown-sync-dot.syncing,
.header-dropdown-sync-dot.connecting {
    background: #C9A96E;
    animation: syncPulse 1.2s ease-in-out infinite;
}
.header-dropdown-sync-dot.error {
    background: #c97d6e;
}

.header-dropdown-action {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary, #57534e);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
.header-dropdown-action:hover {
    background: rgba(201, 169, 110, 0.06);
    color: var(--text-primary, #2C2C2C);
    transform: none;
    box-shadow: none;
}

/* Reset progress moved to settings sidebar (css/browse-sidebar.css) */

/* ---- Mobile: compact sign-in & avatar ---- */
@media (max-width: 768px) {
  .header-sign-in-btn {
    padding: 6px;
    gap: 0;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    justify-content: center;
  }
  .header-sign-in-btn .sign-in-label {
    display: none;
  }
  .header-sign-in-btn svg {
    width: 17px;
    height: 17px;
  }

  .header-avatar-btn {
    width: 30px;
    height: 30px;
  }
  .header-avatar-circle {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .header-avatar-sync-dot {
    width: 7px;
    height: 7px;
    bottom: 0;
    right: 0;
    border-width: 1.5px;
  }

  .header-account-dropdown {
    width: min(260px, calc(100vw - 24px));
  }
}