/* ==========================================================================
   Чтение переписки
   ========================================================================== */
.reader { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.reader.is-enter .reader-scroll > * { animation: rise 0.5s var(--e-out) both; }
.reader.is-enter .reader-scroll > *:nth-child(2) { animation-delay: 0.05s; }
.reader.is-enter .reader-scroll > *:nth-child(3) { animation-delay: 0.1s; }
.reader-bar { display: flex; align-items: center; gap: 2px; height: 64px; padding: 0 12px; border-bottom: 1px solid var(--line); flex: none; }
.reader-bar-group { display: flex; gap: 2px; }
.reader-bar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
.reader-back { display: none; }
.app[data-pane='single'] .reader-back { display: inline-grid; margin-right: 6px; }
.reader-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 30px clamp(18px, 3.2vw, 44px) 40px; overscroll-behavior: contain; }
.reader-head { max-width: 920px; margin: 0 auto 26px; }
.reader-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.reader-tags:empty { display: none; }
.reader-title-row { display: flex; align-items: flex-start; gap: 12px; }
.reader-title { flex: 1; margin: 0; font: 600 clamp(22px, 2.2vw, 30px) / 1.2 var(--f-display); letter-spacing: -0.045em; overflow-wrap: anywhere; }
.reader-title-acts { display: flex; gap: 2px; margin-top: -2px; }
.reader-star.is-on { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.reader-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--text-3); }
.reader-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }

.msgs { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.msgs-more { position: relative; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 12.5px; font-weight: 650; }
.msgs-more::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong); }
.msgs-more span { position: relative; padding: 5px 14px; border-radius: 99px; background: var(--bg-float); border: 1px solid var(--line-strong); transition: color 0.2s, border-color 0.2s; }
.msgs-more:hover span { color: var(--accent-text); border-color: var(--accent-line); }
.msg { border-radius: 24px; background: var(--bg); border: 1px solid var(--line); transition: border-color 0.2s, background-color 0.2s, box-shadow 0.3s; overflow: hidden; }
[data-theme='light'] .msg { background: var(--bg-float); }
.msg.is-tucked { display: none; }
.msg:not(.is-open) { background: transparent; }
.msg:not(.is-open):hover { background: var(--bg-hover); }
.msg.is-open { box-shadow: var(--shadow-1); }
.msg.is-draft { border-style: dashed; border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.msg-head { display: flex; align-items: center; gap: 13px; padding: 16px 14px 16px 18px; cursor: pointer; }
.msg.is-open .msg-head { padding-bottom: 8px; }
.msg-head .orb { --s: 42px; }
.msg-who { flex: 1; min-width: 0; }
.msg-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msg-name b { font-size: 14.5px; font-weight: 650; white-space: nowrap; }
.msg.is-unread .msg-name b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: middle; box-shadow: 0 0 8px var(--accent); }
.msg-email { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-verified { color: var(--accent-text); display: inline-grid; }
.msg-sub { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-when { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-acts { display: flex; gap: 0; opacity: 0; transition: opacity 0.15s; }
.msg.is-open .msg-acts, .msg-head:hover .msg-acts { opacity: 1; }
.msg:not(.is-open) .msg-body { display: none; }
.msg-body { padding: 4px 22px 22px 73px; }
.msg-content-loading { display: grid; place-items: center; min-height: 80px; }
.msg-frame-wrap { position: relative; border-radius: 14px; }
.msg-frame-wrap.is-original { background: #fff; padding: 16px; margin: 0 -8px; box-shadow: 0 0 0 1px var(--line); }
.msg-frame { display: block; width: 100%; height: 80px; border: 0; background: transparent; color-scheme: normal; transition: height 0.25s var(--e-out); }
.msg-original { position: absolute; top: -34px; right: -8px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); opacity: 0; transition: opacity 0.2s, color 0.2s, background-color 0.2s; }
.msg:hover .msg-original { opacity: 1; }
.msg-original:hover { color: var(--text); background: var(--bg-hover); }
.msg-plain { white-space: pre-wrap; font: inherit; margin: 0; }
.msg-images { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 8px 8px 14px; border-radius: 14px; font-size: 13px; color: var(--text-2); background: var(--bg-hover); border: 1px solid var(--line); }
.msg-images span { flex: 1; }
.msg-status { display: flex; align-items: center; gap: 10px; margin: 0 18px 10px 73px; padding: 8px 8px 8px 14px; border-radius: 14px; font-size: 13px; font-weight: 550; background: var(--bg-hover); }
.msg-status span:not(.spinner) { flex: 1; }
.msg-status .spinner { width: 16px; height: 16px; }
.msg-status.is-failed { color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, transparent); }
.msg-status.is-scheduled { color: var(--info); background: color-mix(in oklab, var(--info) 10%, transparent); }
.msg-status.is-draft { color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, transparent); }

.atts { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.atts-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-bottom: 12px; }
.atts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.att { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--bg-hover); border: 1px solid var(--line); color: var(--text); text-decoration: none !important; overflow: hidden; transition: border-color 0.2s, transform 0.3s var(--e-spring); }
.att:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.att-kind { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font: 800 10.5px var(--f-mono); letter-spacing: 0.02em; color: #000; background: var(--kc, var(--text-3)); }
.k-pdf { --kc: #ff6b6b; } .k-img { --kc: #5ce0ff; } .k-zip { --kc: #ffc93d; } .k-xls { --kc: #5ceb8a; } .k-doc { --kc: #6fa8ff; } .k-aud { --kc: #ff6fb1; } .k-vid { --kc: #a58bff; } .k-txt { --kc: #d9d6de; }
.att .att-kind { background: var(--kc, var(--text-3)); }
.att-thumb { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none; background: var(--bg-active); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-meta b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-meta span { font-size: 11.5px; color: var(--text-3); }
.att-dl { opacity: 0; transition: opacity 0.15s; }
.att:hover .att-dl { opacity: 1; }

.reader-reply { max-width: 920px; margin: 18px auto 0; display: flex; gap: 8px; align-items: center; }
.reader-reply-box { flex: 1; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px 0 10px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line-strong); color: var(--text-3); text-align: left; font-size: 14px; transition: border-color 0.2s, box-shadow 0.3s, color 0.2s; }
.reader-reply-box span:not(.orb) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-reply-box:hover { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-softer); color: var(--text-2); }
.reader-reply .btn { height: 54px; border-radius: 18px; }

.reader-loading { padding: 40px clamp(18px, 3.2vw, 44px); max-width: 920px; width: 100%; margin: 0 auto; }
.reader-skel-card { display: flex; gap: 14px; align-items: center; margin-top: 36px; }
.reader-skel-card .orb { --s: 42px; background: var(--bg-hover); box-shadow: none; }
.reader-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); text-align: center; padding: 30px; }
.reader-error svg { color: var(--danger); }
.reader-error h3 { margin: 8px 0 0; color: var(--text); font: 600 18px var(--f-display); }

/* Пустое состояние */
.idle { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; overflow: hidden; }
.idle-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 10%, transparent), transparent 65%); top: 50%; left: 50%; translate: -50% -62%; pointer-events: none; animation: nori-halo 7s ease-in-out infinite; }
.idle .nori { animation: rise 0.9s var(--e-out) both; }
.idle-title { margin: 18px 0 6px; font: 600 clamp(24px, 2.4vw, 34px) / 1.15 var(--f-display); letter-spacing: -0.05em; animation: rise 0.9s var(--e-out) 0.1s both; }
.idle-sub { margin: 0; color: var(--text-2); font-size: 15px; animation: rise 0.9s var(--e-out) 0.18s both; }
.idle-sub b { font-weight: 700; }
.idle-keys { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 22px; margin-top: 38px; padding: 18px 22px; border-radius: 22px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 50%, transparent); animation: rise 0.9s var(--e-out) 0.26s both; }
.idle-key { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.idle-key span { display: flex; gap: 3px; }
.idle-key em { font-style: normal; }
@media (max-width: 1280px) { .idle-keys { grid-template-columns: repeat(2, auto); } }

@media (max-width: 860px) {
	.reader-bar { height: auto; padding: max(6px, env(safe-area-inset-top)) 6px 6px; overflow-x: auto; scrollbar-width: none; }
	.reader-bar-sep { margin: 0 2px; }
	.reader-scroll { padding: 22px 16px 120px; }
	.msg-head { padding: 14px 10px 14px 14px; }
	.msg-body { padding: 4px 14px 18px; }
	.msg-status { margin: 0 12px 10px; }
	.msg-email, .msg-acts .ibtn:first-child { display: none; }
	.reader-reply { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
	.reader-reply .btn { display: none; }
	.reader-reply-box { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-float); }
	.atts-grid { grid-template-columns: 1fr; }
}