:host {
	display: block;
	width: 100%;

	.participant-name-input-container {
		width: 100%;

		.input-wrapper {
			display: flex;
			align-items: center;
			background: var(--ov-surface-color, #f8f9fa);
			border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
			border-radius: var(--pv-surface-radius, 10px);
			padding: 0;
			transition: all 0.2s ease;
			position: relative;
			overflow: hidden;

			// &:focus-within {
			// 	border-color: var(--ov-primary-action-color, #4285f4);
			// 	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
			// }

			.input-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48px;
				height: 56px;
				background: var(--ov-secondary-action-color, #f0f0f0);
				color: var(--ov-text-secondary-color, #666);
				font-size: 20px;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				flex-shrink: 0;
			}

			.name-input-field {
				flex: 1;
				height: 56px;
				padding: 0 16px;
				border: none;
				outline: none;
				background: var(--ov-surface-color, #f8f9fa);
				font-size: 16px;
				font-weight: 500;
				color: var(--ov-text-surface-color, #666);

				&::placeholder {
					color: var(--ov-text-secondary-color, #666);
					font-weight: 400;
				}

				&:disabled {
					color: var(--ov-disabled-text-color, #999);
					cursor: not-allowed;
				}
			}
		}

		&.error .input-wrapper {
			border-color: var(--ov-error-color, #d32f2f);
			box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);

			.input-icon {
				background: rgba(211, 47, 47, 0.1);
				color: var(--ov-error-color, #d32f2f);
			}
		}
	}
}
