/* Norius Mail — реворк интерфейса в духе Material You (Material 3 Expressive).
   Подключается последним, поэтому осознанно перекрывает app.css и controls.css. */

@import url('/styles/rework-search.css');
@import url('/styles/rework-settings.css');

:root {
	--star: #f2a900;
	--fade-size: 28px;
	--rail-w: 236px;
	--rail-w-mini: 76px;
}
:root[data-theme='dark'] { --star: #ffca28; }

/* ==================== Ленты: одна строка, без скроллбара ==================== */

.chips-row,
.compose-toolbar,
.thread-toolbar,
.search-dd-chips,
.drag-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--sp-3);
}
.chips-row::-webkit-scrollbar,
.compose-toolbar::-webkit-scrollbar,
.thread-toolbar::-webkit-scrollbar,
.search-dd-chips::-webkit-scrollbar,
.drag-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Пока ленту тянут мышью — гасим плавную прокрутку и выделение текста. */
.chips-row.dragging,
.compose-toolbar.dragging,
.thread-toolbar.dragging,
.search-dd-chips.dragging,
.drag-scroll.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.chips-row.dragging > *,
.search-dd-chips.dragging > * { pointer-events: none; }

.chips-row {
	--fade-l: 0px;
	--fade-r: 0px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sp-2);
	min-height: 46px;
	padding: 2px var(--sp-3) var(--sp-2);
	overflow: auto hidden;
	cursor: grab;
}
/* Маска нужна только тогда, когда лента действительно прокручивается:
   иначе браузер держит лишний слой под шапкой списка. */
.chips-row.is-scrollable {
	--fade-r: var(--fade-size);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.chips-row.is-scrollable:not(.at-start) { --fade-l: var(--fade-size); }
.chips-row.is-scrollable.at-end { --fade-r: 0px; }
.chips-row:not(.is-scrollable) { cursor: default; }
.chips-row .chip { flex: 0 0 auto; }

/* ==================== Чипы: выбранное теперь видно ==================== */

.chip {
	height: 34px;
	border-radius: var(--shape-sm);
	transition:
		background var(--dur-short-4) var(--ease-standard),
		color var(--dur-short-4) var(--ease-standard),
		border-color var(--dur-short-4) var(--ease-standard),
		border-radius var(--dur-medium-2) var(--ease-emphasized),
		box-shadow var(--dur-short-4) var(--ease-standard),
		transform var(--dur-short-3) var(--ease-spring);
}
.chip.active,
.chip.selected,
.chip[aria-pressed='true'] {
	background: var(--c-secondary-container);
	color: var(--c-on-secondary-container);
	border-color: transparent;
	border-radius: var(--shape-full);
	box-shadow: var(--elev-1);
}
.chip.active .msr,
.chip.selected .msr,
.chip[aria-pressed='true'] .msr {
	--icon-fill: 1;
	--icon-wght: 600;
	animation: icon-pop var(--dur-medium-2) var(--ease-spring);
}
.chip.active:hover,
.chip.selected:hover,
.chip[aria-pressed='true']:hover {
	background: color-mix(in srgb, var(--c-secondary-container) 86%, var(--c-on-secondary-container));
}

/* ==================== Избранное ==================== */

.thread-row .star-btn,
.star-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	border-radius: var(--shape-full);
	background: transparent;
	color: var(--c-on-surface-variant);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--dur-short-4) var(--ease-standard),
		transform var(--dur-short-3) var(--ease-spring);
}
.star-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	transform: scale(0.55);
	transition:
		opacity var(--dur-short-4) var(--ease-standard),
		transform var(--dur-medium-1) var(--ease-emphasized-decel);
}
.star-btn:hover::before { opacity: 0.11; transform: scale(1); }
.star-btn:active::before { opacity: 0.18; transform: scale(1); }
.star-btn:active { transform: scale(0.9); }
.star-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--c-primary) 55%, transparent);
	outline-offset: -2px;
}

/* Контур и заливка — один глиф с разной осью FILL, так что переключение — это морф. */
.star-btn .msr,
.star-btn .star-glyph {
	position: relative;
	font-size: 22px;
	--icon-opsz: 24;
	--icon-fill: 0;
	--icon-wght: 350;
	transition:
		font-variation-settings var(--dur-medium-2) var(--ease-emphasized),
		transform var(--dur-medium-3) var(--ease-spring),
		color var(--dur-short-4) var(--ease-standard);
}
.star-btn:hover .star-glyph { --icon-wght: 500; color: var(--star); transform: rotate(-10deg) scale(1.1); }
.star-btn.on { color: var(--star); }
.star-btn.on .star-glyph { --icon-fill: 1; --icon-wght: 650; color: var(--star); }
.star-btn.on:hover .star-glyph { transform: scale(1.12) rotate(0deg); }
.star-btn .msr.star-on { color: var(--star); animation: none; }

.star-ring {
	position: absolute;
	inset: 1px;
	border-radius: 50%;
	border: 2px solid var(--star);
	opacity: 0;
	transform: scale(0.35);
	pointer-events: none;
}
.star-btn.burst .star-ring { animation: star-ring var(--dur-long-2) var(--ease-emphasized-decel); }
.star-btn.burst .star-glyph { animation: star-morph var(--dur-long-1) var(--ease-spring); }
@keyframes star-ring {
	0% { opacity: 0.7; transform: scale(0.35); }
	60% { opacity: 0.18; }
	100% { opacity: 0; transform: scale(1.55); }
}
@keyframes star-morph {
	0% { transform: scale(0.5) rotate(-50deg); }
	45% { transform: scale(1.34) rotate(12deg); }
	100% { transform: scale(1) rotate(0deg); }
}

/* ==================== Действия строки: появление при наведении ==================== */

.thread-row .row-actions {
	position: absolute;
	top: 50%;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: var(--shape-full);
	background: var(--c-surface-container);
	box-shadow: var(--elev-2);
	opacity: 0;
	transform: translate(12px, -50%) scale(0.88);
	transform-origin: right center;
	pointer-events: none;
	transition:
		opacity var(--dur-short-3) var(--ease-standard),
		transform var(--dur-medium-2) var(--ease-emphasized-decel);
}
.thread-row:hover .row-actions,
.thread-row:focus-within .row-actions {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
	pointer-events: auto;
}
.thread-row .row-actions .icon-btn {
	width: 34px;
	height: 34px;
	opacity: 0;
	transform: translateX(10px) scale(0.55);
	transition:
		opacity var(--dur-short-4) var(--ease-standard),
		transform var(--dur-medium-2) var(--ease-spring),
		background var(--dur-short-4) var(--ease-standard),
		color var(--dur-short-4) var(--ease-standard);
}
.thread-row .row-actions .icon-btn .msr { font-size: 19px; --icon-opsz: 20; }
.thread-row:hover .row-actions .icon-btn,
.thread-row:focus-within .row-actions .icon-btn { opacity: 1; transform: none; }
.thread-row:hover .row-actions .icon-btn:nth-child(1) { transition-delay: 20ms; }
.thread-row:hover .row-actions .icon-btn:nth-child(2) { transition-delay: 55ms; }
.thread-row:hover .row-actions .icon-btn:nth-child(3) { transition-delay: 90ms; }
.thread-row:hover .row-actions .icon-btn:nth-child(4) { transition-delay: 125ms; }
.thread-row:hover .row-actions .icon-btn:nth-child(5) { transition-delay: 160ms; }
.thread-row .row-actions .icon-btn:hover {
	background: color-mix(in srgb, var(--c-primary) 14%, transparent);
	color: var(--c-primary);
}

/* Дата не прыгает, а мягко уступает место кнопкам. */
.thread-row .row-date {
	transition: opacity var(--dur-short-3) var(--ease-standard), transform var(--dur-short-4) var(--ease-emphasized);
}
.thread-row:hover .row-date,
.thread-row:focus-within .row-date { display: inline; opacity: 0; transform: translateX(10px); }

/* Морф аватара под курсором. Саму строку не анимируем: перерисовка длинного списка дорога. */
.thread-row.active { border-radius: var(--shape-lg); }
.thread-row .avatar { transition: border-radius var(--dur-medium-2) var(--ease-emphasized), transform var(--dur-medium-2) var(--ease-spring); }
.thread-row:hover .avatar { border-radius: 34%; transform: scale(1.04); }

@media (max-width: 860px) {
	.thread-row:hover .row-date,
	.thread-row:focus-within .row-date { opacity: 1; transform: none; }
}

/* ==================== Меню: морф из точки нажатия ==================== */

.menu {
	transform-origin: top left;
	animation: menu-morph-in var(--dur-medium-2) var(--ease-emphasized-decel);
}
@keyframes menu-morph-in {
	from { opacity: 0; transform: scale(0.72); border-radius: var(--shape-xl); }
	60% { opacity: 1; }
	to { opacity: 1; transform: none; border-radius: var(--shape-md); }
}
.menu-item { transition: background var(--dur-short-3) var(--ease-standard), color var(--dur-short-3) var(--ease-standard); }

/* ---------- Фон рабочей области ---------- */
/* Слой фона статичен: размытие считается один раз,
   при прокрутке списка ничего не пересчитывается. */
:root[data-bg=on] { background: var(--c-surface); }
#app-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--c-surface);
}
#app-backdrop .bd-layer {
  position: absolute;
  inset: -6vmax;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(var(--bg-blur, 22px)) saturate(1.12);
}
#app-backdrop.motion .bd-layer {
  will-change: transform;
  animation: bd-drift 48s var(--ease-standard) infinite alternate;
}
@keyframes bd-drift {
  from { transform: scale(1.04) translate3d(-1.2%, -0.8%, 0); }
  to { transform: scale(1.12) translate3d(1.4%, 1%, 0); }
}
#app-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-surface) var(--bg-scrim, 34%), transparent);
}
#app-backdrop .bd-grain { position: absolute; inset: 0; opacity: 0; }
:root[data-bg-effect=glass] #app-backdrop .bd-layer {
  filter: blur(var(--bg-blur, 22px)) saturate(1.42) brightness(1.04);
}
:root[data-bg-effect=duotone] #app-backdrop .bd-layer {
  filter: blur(var(--bg-blur, 22px)) grayscale(1) contrast(1.14);
}
:root[data-bg-effect=duotone] #app-backdrop .bd-grain {
  opacity: 0.92;
  background: linear-gradient(135deg, var(--c-primary), var(--c-tertiary, var(--c-primary)));
  mix-blend-mode: color;
}
:root[data-bg-effect=grain] #app-backdrop .bd-grain {
  opacity: 0.5;
  background-image:
    repeating-radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--c-on-surface) 22%, transparent) 0 0.6px, transparent 0.6px 2.6px),
    repeating-radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--c-surface-lowest) 26%, transparent) 0 0.6px, transparent 0.6px 3.1px);
  background-size: 7px 7px, 9px 9px;
  mix-blend-mode: overlay;
}
/* Поверхности становятся полупрозрачными — фон проступает. */
:root[data-bg=on] body { background: transparent; }
:root[data-bg=on] .topbar { background: color-mix(in srgb, var(--c-surface) var(--bg-panel, 80%), transparent); }
:root[data-bg=on] .list-pane { background: color-mix(in srgb, var(--c-surface-low) var(--bg-panel, 80%), transparent); }
:root[data-bg=on] .read-pane { background: color-mix(in srgb, var(--c-surface-lowest) var(--bg-panel, 80%), transparent); }
:root[data-bg=on] .bottom-nav { background: color-mix(in srgb, var(--c-surface-container) var(--bg-panel, 80%), transparent); }

/* Превью и регуляторы фона в настройках */
.bg-preview {
  position: relative;
  height: 136px;
  margin-top: var(--sp-2);
  border-radius: var(--shape-lg);
  border: 1px solid var(--c-outline-variant);
  background-position: center;
  background-size: cover;
  background-color: var(--c-surface-low);
  overflow: hidden;
  transition: border-radius var(--dur-medium-3) var(--ease-emphasized);
}
.bg-preview::after {
  content: attr(data-label);
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 3px 10px;
  border-radius: var(--shape-full);
  background: color-mix(in srgb, var(--c-surface) 74%, transparent);
  color: var(--c-on-surface);
  font-size: 11px;
}
.bg-slider { display: flex; align-items: center; gap: var(--sp-2); }
.bg-slider input[type=range] { width: 168px; }
.bg-slider output {
  min-width: 46px;
  text-align: right;
  color: var(--c-on-surface-variant);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.search-dd-note {
  padding: 4px 16px 10px;
  color: var(--c-on-surface-variant);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  #app-backdrop.motion .bd-layer { animation: none; }
}