.vibe-editor.svelte-1s2fnws {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		background: var(--background-fill-primary);
		border-left: 1px solid var(--border-color-primary);
		display: flex;
		flex-direction: column;
		z-index: 100;
		box-shadow: var(--shadow-drop-lg);
		overflow: hidden;
	}

	.resize-handle.svelte-1s2fnws {
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 100%;
		cursor: col-resize;
		background: transparent;
		border: none;
		border-left: 2px solid transparent;
		transition: border-color 0.2s ease;
		z-index: 101;
		padding: 0;
	}

	.resize-handle.svelte-1s2fnws:hover {
		border-left-color: var(--color-accent);
	}

	.resize-handle.svelte-1s2fnws:active {
		border-left-color: var(--color-accent);
		background: rgba(var(--color-accent-soft), 0.1);
	}

	.tab-header.svelte-1s2fnws {
		display: flex;
		border-bottom: 1px solid var(--border-color-primary);
		background: var(--background-fill-secondary);
	}

	.tab-button.svelte-1s2fnws {
		flex: 1;
		padding: 12px 16px;
		background: transparent;
		border: none;
		border-bottom: 2px solid transparent;
		font-size: 14px;
		font-weight: 500;
		color: var(--body-text-color-subdued);
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.tab-button.svelte-1s2fnws:hover {
		color: var(--body-text-color);
		background: var(--background-fill-primary);
	}

	.tab-button.active.svelte-1s2fnws {
		color: var(--color-accent);
		border-bottom-color: var(--color-accent);
		background: var(--background-fill-primary);
	}

	.tab-content.svelte-1s2fnws {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.code-content.svelte-1s2fnws {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 16px;
		gap: 12px;
		overflow: hidden;
	}

	.code-editor-container.svelte-1s2fnws {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 0; /* Allow flex child to shrink below content size */
	}

	.update-code-button.svelte-1s2fnws {
		background: var(--button-primary-background-fill);
		color: var(--button-primary-text-color);
		border: none;
		border-radius: var(--button-large-radius);
		padding: 8px 16px;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.2s;
		align-self: flex-start;
		width: 100%;
	}

	.update-code-button.updating.svelte-1s2fnws {
		background: var(--button-secondary-background-fill);
		color: var(--button-secondary-text-color);
	}

	.update-code-button.svelte-1s2fnws:hover {
		background: var(--button-primary-background-fill-hover);
	}

	.update-code-button.updating.svelte-1s2fnws:hover {
		background: var(--button-secondary-background-fill);
	}

	.deploy-to-spaces-button.svelte-1s2fnws {
		background: var(--button-secondary-background-fill);
		color: var(--button-secondary-text-color);
		border: none;
		border-radius: var(--button-large-radius);
		padding: 8px 16px;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.2s;
		align-self: flex-start;
		width: 100%;
	}

	.deploy-to-spaces-button.svelte-1s2fnws:hover {
		background: var(--button-secondary-background-fill-hover);
	}

	.button-content.svelte-1s2fnws {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		font-weight: 200;
	}

	.spaces-logo.svelte-1s2fnws {
		width: 1em;
		height: 1em;
		vertical-align: middle;
		display: inline-block;
		margin-right: -3px;
	}

	.message-history.svelte-1s2fnws {
		flex: 1;
		overflow-y: auto;
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		position: relative;
	}

	.message-item.svelte-1s2fnws {
		position: relative;
		padding: 12px;
		border-radius: var(--radius-md);
		border: 1px solid var(--border-color-primary);
		word-wrap: break-word;
		line-height: 1.4;
		border-color: var(--border-color-primary);
	}

	.user-message.svelte-1s2fnws {
		margin-left: 20px;
		padding: 12px 64px 12px 12px;
	}

	.bot-message.svelte-1s2fnws {
		margin-right: 20px;
	}

	.message-content.svelte-1s2fnws {
		display: block;
	}

	.message-text.svelte-1s2fnws {
		color: var(--body-text-color);
		word-wrap: break-word;
		line-height: 1.4;
		flex: 1;
	}

	.undo-button.svelte-1s2fnws {
		position: absolute;
		top: 8px;
		right: 8px;
		background: var(--button-secondary-background-fill);
		color: var(--button-secondary-text-color);
		border: 1px solid var(--border-color-primary);
		border-radius: var(--radius-sm);
		padding: var(--button-small-padding);
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
	}

	.undo-button.svelte-1s2fnws:active {
		transform: translateY(0);
	}

	.no-messages.svelte-1s2fnws {
		text-align: center;
		color: var(--body-text-color-subdued);
		font-style: italic;
		padding: 24px;
	}

	.input-section.svelte-1s2fnws {
		padding: 16px;
		border-top: 1px solid var(--border-color-primary);
		background: var(--background-fill-secondary);
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.prompt-input.svelte-1s2fnws {
		width: 100%;
		min-height: 80px;
		background: var(--input-background-fill);
		border: 1px solid var(--border-color-primary);
		border-radius: var(--input-radius);
		padding: 12px;
		resize: vertical;
		outline: none;
		font-family: inherit;
		font-size: 14px;
		color: var(--body-text-color);
	}

	.prompt-input.svelte-1s2fnws:focus {
		border-color: var(--color-accent);
	}

	.submit-button.svelte-1s2fnws {
		background: var(--button-primary-background-fill);
		color: var(--button-primary-text-color);
		border: none;
		border-radius: var(--button-large-radius);
		padding: 10px 20px;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.submit-button.svelte-1s2fnws:hover:not(:disabled) {
		background: var(--button-primary-background-fill-hover);
	}

	.submit-button.svelte-1s2fnws:disabled {
		background: var(--button-secondary-background-fill);
		color: var(--button-secondary-text-color);
		cursor: not-allowed;
	}

	.powered-by.svelte-1s2fnws {
		text-align: right;
		font-size: 12px;
		color: var(--body-text-color-subdued);
	}

	.diff-stats.svelte-1s2fnws {
		margin-left: 8px;
		display: inline-flex;
		gap: 4px;
		font-size: 11px;
		font-weight: 600;
	}

	.diff-stats.svelte-1s2fnws .added:where(.svelte-1s2fnws) {
		color: #22c55e;
	}

	.diff-stats.svelte-1s2fnws .removed:where(.svelte-1s2fnws) {
		color: #ef4444;
	}

	.starter-queries-container.svelte-1s2fnws {
		position: absolute;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px;
		gap: 12px;
		width: calc(100% - 32px);
		max-width: 500px;
	}

	.starter-queries.svelte-1s2fnws {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--spacing-md);
		width: 100%;
	}

	.starter-query-button.svelte-1s2fnws {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: var(--spacing-lg);
		border: none;
		border-radius: var(--radius-lg);
		background-color: var(--block-background-fill);
		cursor: pointer;
		transition: all 150ms ease-in-out;
		width: 100%;
		gap: var(--spacing-sm);
		border: var(--block-border-width) solid var(--block-border-color);
		transform: translateY(0px);
		text-align: left;
		line-height: 1.4;
		word-wrap: break-word;
		white-space: normal;
		font-size: var(--text-md);
	}

	.starter-query-button.svelte-1s2fnws:hover {
		transform: translateY(-2px);
		background-color: var(--color-accent-soft);
	}

	.starter-query-button.svelte-1s2fnws:active {
		transform: translateY(0);
	}