:root {
	--surface-2: #EEF0F7;
	--text-2: #626A7F;
	--text-3: #747D91;
	--accent-container: #EEECFD;
	--radius-plate: 15px;
	--radius-item: 13px;
	--radius-chip: 12px;
	--radius-bubble-tail: 4px;
	--pad-row-x: 16px;
	--pad-plate-y: 13px;
	--pad-item-y: 6px;
	--fs-title: 19px;
	--fw-medium: 600;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #141720;
		--surface-1: #1D222E;
		--surface-2: #272E3D;
		--border: #343D50;
		--text-2: #B1B9CB;
		--text-3: #98A3B8;
		--accent-container: #302B4B;
	}
}

:root[data-theme="dark"] {
	--bg: #141720;
	--surface-1: #1D222E;
	--surface-2: #272E3D;
	--border: #343D50;
	--text-2: #B1B9CB;
	--text-3: #98A3B8;
	--accent-container: #302B4B;
}

[dir="rtl"] .icon-auto-mirror { transform: scaleX(-1); }
#workspace { display: contents; }
.workspace-divider { display: none; }
body.is-resizing-workspace, body.is-resizing-workspace * { cursor: col-resize !important; user-select: none !important; }
.workspace-brand { display: none; }
.workspace-empty { align-items: center; justify-content: center; color: var(--text-1); }
.workspace-empty .empty-state { max-width: 390px; margin: auto; text-align: center; }
.workspace-empty h2 { margin-top: 18px; font-size: 22px; }
.workspace-empty p { margin-top: 12px; color: var(--text-2); line-height: 1.7; }

#screen-groups > .topbar { min-height: 92px; gap: 8px; }
#groups-title-icon { display: none; }
#groups-titles h1 { font-size: 27px; line-height: 1.25; font-weight: 650; letter-spacing: -.8px; }
#groups-summary { margin-top: 6px; color: var(--text-2); }
:is(#groups-list, #cards-list) > .plate { margin-bottom: var(--gap-plate); }
:is(#groups-list, #cards-list) .plate-open { min-height: 80px; padding-top: 13px; padding-bottom: 13px; }
:is(#groups-list, #cards-list) .plate-title { display: block; white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
:is(#groups-list, #cards-list) .plate-caption { margin-top: 5px; color: var(--text-2); }
.plate-striped::before { width: 3px; top: 15px; bottom: 15px; border-radius: 0 3px 3px 0; }
.plate.is-current { background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.group-chip { border-radius: var(--radius-chip); }
.group-chip.is-small { width: 36px; height: 36px; border-radius: 11px; }
.group-chip.is-small .icon { width: 18px; height: 18px; }
.group-lonely { margin: 0; padding-inline: 16px; min-height: 45px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.group-fab { display: inline-flex; gap: 9px; width: auto; min-width: 56px; padding: 0 18px; border-radius: 18px; font-size: var(--fs-button); font-weight: 600; }
.group-fab .icon { width: 22px; height: 22px; }

.list-topbar { min-height: 86px; gap: 8px; }
.list-title { display: -webkit-box; white-space: normal; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-title); font-weight: 650; line-height: 1.3; letter-spacing: -.4px; }
.list-subtitle { margin-top: 5px; }
.list-tabs { margin-bottom: 16px; }
.list-tabs .tab.is-active { background: var(--accent-container); }
.item-plate .plate-open { align-items: center; }
.item-copy .plate-open { align-items: flex-start; }
.item-name { font-weight: 550; line-height: 1.45; }
.item-note { margin-top: var(--gap-item-text); font-size: var(--fs-caption); line-height: 1.5; }
.item-meta { align-self: auto; padding-top: 0; }
.item-copy .item-meta { padding-top: 1px; }
.qty-chip { font-size: var(--fs-caption); padding: 4px 7px; }
.item-plate .plate-caption { margin-top: var(--gap-item-text); }
.item-plate.is-done .item-check { background: var(--surface-2); border-color: var(--border); }
.item-plate.is-done .item-check-mark { color: var(--text-3); }
.section-head { min-height: 48px; margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-caption); }
.input-bar { padding-top: 12px; }
.input-bar textarea, .chat-editor { border-radius: 14px; background: var(--surface-1); }
.list-compose .icon-button.primary { border-radius: 12px; }
.msg { padding: 10px 12px 8px; margin-bottom: var(--gap-plate); background: var(--surface-1); border: 1px solid var(--border); }
.msg.own { background: var(--accent-container); color: var(--text-1); }
.msg.own .msg-meta { color: var(--text-3); opacity: 1; }
.msg.own .msg-quote { border-left-color: var(--accent); }
.msg.own .msg-quote-author { color: var(--accent); opacity: 1; }
.msg.own .msg-quote-text { color: var(--text-2); opacity: 1; }
.msg-quote { padding: 6px 8px; border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.msg-author { font-weight: 600; margin-bottom: 5px; }
.msg-text { line-height: 1.6; }
#chat-list { padding: 4px 0; }
.empty-state h2, .empty-title { font-weight: 650; }

@media (min-width: 1100px) {
	body.workspace-visible { padding-inline: 0; }
	#workspace.has-workspace { display: grid; grid-template-columns: var(--workspace-sidebar-width, 302px) 1px minmax(0, 1fr); width: min(1360px, 100%); min-height: 100dvh; margin: 0 auto; border-inline: 1px solid var(--border); }
	.has-workspace #screen-groups { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; position: sticky; top: 0; width: 100%; height: 100dvh; min-height: 0; min-width: 0; max-width: none; margin: 0; padding: env(safe-area-inset-top) 12px 16px; }
	.has-workspace .workspace-divider { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 2; width: 11px; height: 100dvh; margin-inline: -5px; padding: 0; cursor: col-resize; touch-action: none; outline: none; }
	.has-workspace .workspace-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: var(--border); }
	.has-workspace .workspace-divider:is(:hover, :focus-visible, .is-resizing)::before { left: 4px; width: 3px; background: var(--accent); }
	.has-workspace .workspace-brand { display: flex; align-items: center; gap: 10px; min-height: 76px; padding-inline: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
	.has-workspace .workspace-brand img { border-radius: 7px; }
	.has-workspace #screen-groups > .topbar { min-height: 76px; margin-bottom: 12px; padding-left: 9px; }
	.has-workspace #groups-titles h1 { font-size: 20px; }
	.has-workspace #groups-summary { font-size: 11px; }
	.has-workspace #groups-actions { gap: 0; }
	.has-workspace #groups-actions .icon-button { width: 48px; }
	.has-workspace #groups-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 12px; }
	.has-workspace #groups-list .group-chip { width: 34px; height: 34px; border-radius: 10px; }
	.has-workspace #groups-list .group-chip .icon { width: 18px; height: 18px; }
	.has-workspace #groups-list .plate-open { gap: 9px; min-height: 74px; padding-left: 11px; padding-right: 0; }
	.has-workspace #groups-list .plate-title { font-size: 13px; }
	.has-workspace #groups-list .plate-caption { font-size: 10px; }
	.has-workspace #groups-list .icon-button { width: 48px; }
	.has-workspace #groups-list .plate-tail { gap: 4px; }
	.has-workspace #groups-list .mark-count { font-size: 10px; }
	.has-workspace #groups-add { position: static; flex: none; width: 100%; height: 50px; margin-top: 12px; border-radius: 14px; }
	.has-workspace #screen-list { grid-column: 3; grid-row: 1; width: 100%; height: 100dvh; min-height: 0; min-width: 0; max-width: none; padding: env(safe-area-inset-top) 32px 12px; container: group-pane / inline-size; }
	.has-workspace #list-topbar { min-height: 100px; width: 100%; max-width: 720px; margin-inline: auto; gap: 16px; }
	.has-workspace #list-title { font-size: 24px; letter-spacing: -.7px; }
	.has-workspace #list-subtitle { font-size: 12px; }
	.has-workspace #list-back { display: none; }
	.has-workspace #list-tabs { flex: 0 0 300px; width: 300px; max-width: 100%; margin: 0; }
	.has-workspace #pane-items { padding-inline: 1px calc(1px + var(--list-scrollbar-width, 0px)); }
	.has-workspace #list-items { padding: 0 0 12px; }
	.has-workspace #list-items > .plate, .has-workspace #list-items > .section-head, .has-workspace #list-items > .empty-state { max-width: 720px; margin-inline: auto; }
	.has-workspace #list-items > .plate { margin-bottom: var(--gap-plate); }
	.has-workspace .input-bar { width: 100%; max-width: 720px; margin-inline: auto; }
	.has-workspace #chat-form { max-width: none; }
	.has-workspace #chat-list { width: 100%; max-width: none; margin-inline: 0; padding: 4px; }
	.has-workspace .msg { max-width: min(75%, 560px); margin-inline: 0 auto; }
	.has-workspace .msg.own { margin-inline: auto 0; }
	.has-workspace .workspace-empty { display: flex; grid-column: 3; grid-row: 1; min-width: 0; }
	@container group-pane (max-width: 620px) {
		.has-workspace #list-topbar { flex-wrap: wrap; min-height: 0; gap: 12px 8px; padding-top: 20px; margin-bottom: 16px; }
		.has-workspace #list-tabs { order: 3; flex-basis: 100%; width: 100%; }
	}
}

@media (max-width: 359px) {
	.group-fab { padding-inline: 14px; font-size: 12px; }
	#groups-titles h1 { font-size: 25px; }
}