@import "/UI/Core/Styles/Theme.scss";

DNAPanel {
	position: absolute;
	right: 360px;
	bottom: $safe-zone-y;
	width: 356px;
	pointer-events: none;
	justify-content: flex-end;

	&.hidden {
		display: none;
	}

	.ScannerPanel {
		width: 100%;
		flex-direction: column;
		gap: 10px;
		padding: 14px;
		border-radius: 18px;
		background-color: rgba( 8, 14, 24, 0.9 );
		backdrop-filter: blur( 14px );
		border: 1px solid rgba( 115, 191, 255, 0.18 );
		box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.35 );
		color: white;
	}

	.ScannerHeader {
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.HeaderText {
		flex-direction: column;
		gap: 3px;
	}

	.Eyebrow,
	.SectionLabel {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		opacity: 0.6;
	}

	.Title {
		font-size: 20px;
		font-weight: 900;
		letter-spacing: 0.5px;
	}

	.StatusPill {
		padding: 6px 10px;
		border-radius: 999px;
		font-size: 11px;
		font-weight: 900;
		letter-spacing: 0.8px;
		text-transform: uppercase;
		background-color: rgba( 255, 255, 255, 0.08 );
		color: rgba( 255, 255, 255, 0.95 );

		&.success {
			background-color: rgba( 74, 204, 125, 0.2 );
			color: #b7ffbf;
		}

		&.warning {
			background-color: rgba( 255, 178, 61, 0.2 );
			color: #ffd08a;
		}
	}

	.ScannerSection {
		flex-direction: column;
		gap: 8px;
		padding: 10px 12px;
		border-radius: 14px;
		background-color: rgba( 255, 255, 255, 0.045 );
	}

	.TargetName {
		font-size: 17px;
		font-weight: 800;
		//letter-spacing: 0.2px;
		margin-bottom: 6px;
		flex-shrink: 0;
	}

	.TargetDetail,
	.SampleText,
	.FeedbackText {
		font-size: 13px;
		line-height: 18px;
		white-space: normal;
		width: 100%;
		flex-shrink: 0;
	}

	.TargetDetail {
		min-height: 36px;
		padding-right: 0;
	}

	.SampleText {
		min-height: 18px;
	}

	.SampleSelection {
		font-size: 12px;
		opacity: 0.82;
	}

	.DnaCard {
		flex-direction: column;
		gap: 6px;
		padding-top: 4px;
	}

	.DnaCardHeader {
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: #ffea4d;
	}

	.DnaCard DnaBar {
		height: 58px;
		min-height: 58px;
	}

	.HintRows {
		flex-direction: column;
		gap: 4px;
	}

	.HintRow {
		align-items: center;
		gap: 6px;
		min-height: 24px;

		label {
			font-size: 12px;
			white-space: normal;
			line-height: 1.25;
		}

		InputHint {
			img {
				width: 22px;
				height: 22px;
			}
		}
	}

	.ChargeWrap {
		flex-direction: column;
		gap: 6px;
	}

	.ChargeBar {
		height: 10px;
		border-radius: 999px;
		overflow: hidden;
		background-color: rgba( 255, 255, 255, 0.08 );
	}

	.ChargeFill {
		height: 100%;
		border-radius: 999px;
		background-image: linear-gradient( 90deg, #65d9ff, #2f78ff );
	}

	.ChargeText {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.2px;
	}

	.Feedback.success {
		background-color: rgba( 74, 204, 125, 0.11 );
	}

	.Feedback.warning {
		background-color: rgba( 255, 178, 61, 0.11 );
	}

	.TargetDetail {
		padding-top: 0;
	}

	.SampleSelection {
		line-height: 17px;
	}
}