no-copy-frontend/src/app/styles/header.scss

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	background: white;
	padding: 20px 30px;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	.header-action {
		display: flex;
		align-items: center;
		gap: 15px;

		.icon-btn {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: #f8f9fa;
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
			position: relative;

			&:hover {
				background: #e9ecef;
				transform: translateY(-2px);
			}
		}
	}


	.search-bar {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 20px;
		padding: 10px 20px;
		width: 300px;
		transition: all 0.3s;

		input {
			border: none;
			outline: none;
			flex: 1;
			margin-left: 10px;
			font-size: 14px;
			background: transparent;
		}
	}

	.notification-wrapper,
	.user-menu,
	.tokens-balance {
		position: relative;
	}

	.tokens-balance {
		margin-right: 15px;
	}

	.tokens-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
		background: white;
		color: #6366f1;
		border: 2px solid #6366f1;
		padding: 8px 12px;
		border-radius: 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
		font-size: 12px;
		font-weight: 600;
		min-width: 110px;
	}

	.tokens-count {
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	.tokens-label {
		font-weight: 500;
		opacity: 0.9;
	}

	.notification-dropdown,
	.user-dropdown {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		background: white;
		border-radius: 12px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
		min-width: 320px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1000;

		&.show {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	.notification-dropdown {
		.notification-header {
			padding: 15px 20px;
			border-bottom: 1px solid #f3f4f6;
			display: flex;
			justify-content: space-between;
			align-items: center;

			h4 {
				margin: 0;
				font-size: 16px;
				font-weight: 600;
				color: #1f2937;
			}

			.notification-count {
				font-size: 12px;
				color: #6366f1;
				font-weight: 500;
			}
		}

		.notification-list {
			max-height: 400px;
			overflow-y: auto;
		}

		.notification-item {
			display: flex;
			gap: 12px;
			padding: 15px 20px;
			border-bottom: 1px solid #f9fafb;
			transition: background-color 0.2s;
			cursor: pointer;
		}

		.notification-title {
			display: block;
			font-size: 15px;
			font-weight: 700;
			color: #1f2937;
			margin-bottom: 6px;
		}

		.notification-icon {
			font-size: 24px;
			flex-shrink: 0;
		}

		.notification-text {
			font-size: 13px;
			color: #4b5563;
			margin-bottom: 4px;
			font-weight: 500;
		}

		.notification-time {
			font-size: 12px;
			color: #9ca3af;
		}

		.notification-footer {
			padding: 12px 20px;
			border-top: 1px solid #f3f4f6;
			text-align: center;

			.notification-link {
				color: #6366f1;
				font-size: 14px;
				font-weight: 500;
				text-decoration: none;
			}
		}
	}

	.user-menu {
		.user-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: linear-gradient(45deg, #6366f1, #8b5cf6);
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s;
		}

		.user-dropdown {
			min-width: 280px;
		}

		.user-info-header {
			padding: 20px;
			border-bottom: 1px solid #f3f4f6;
			display: flex;
			gap: 15px;
			align-items: center;
		}

		.user-avatar-large {
			width: 50px;
			height: 50px;
			background: linear-gradient(135deg, #6366f1, #8b5cf6);
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 20px;
			flex-shrink: 0;
		}

		.user-details {
			flex: 1;
			min-width: 0;
		}

		.user-name {
			font-weight: 600;
			font-size: 15px;
			color: #1f2937;
			margin-bottom: 4px;
		}

		.user-email {
			font-size: 13px;
			color: #6b7280;
			margin-bottom: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.user-subscription {
			display: inline-block;
		}

		.user-menu-items {
			padding: 10px 0;
		}

		.user-menu-item {
			display: flex;
			align-items: center;
			padding: 12px 20px;
			text-decoration: none;
			color: #374151;
			transition: background-color 0.2s;

			svg {
				width: 18px;
				height: 18px;
				margin-right: 12px;
			}
		}

		.subscription-badge {
			display: inline-block;
			padding: 4px 10px;
			border-radius: 12px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.user-menu-footer {
			border-top: 1px solid #f3f4f6;
			padding: 10px 0;
		}

		.user-menu-logout {
			display: flex;
			align-items: center;
			padding: 12px 20px;
			text-decoration: none;
			color: #dc2626;
			transition: background-color 0.2s;

			svg {
				width: 18px;
				height: 18px;
				margin-right: 12px;
			}
		}
	}
}