/* Веб-версия ЯБлока: те же цвета и шрифт, что в приложении. Тема — по системе или выбранная в настройках. */
@font-face { font-family: Onest; src: url(/site/onest.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --c0: #FFB15C; --c1: #F2554A; --c2: #D6336C;
  --grad: linear-gradient(135deg, var(--c0), var(--c1) 55%, var(--c2));
  --accent: #E5604A; --accent-ink: #C94733; --tint: #FCE6DF; --tint2: #FFF1EC;
  --bg: #F4EEEA; --surface: #FFFFFF; --raised: #FFFFFF; --sunken: #F2EBE6; --hover: #F7F1ED; --line: rgba(70,35,25,.08);
  --ink: #261E1B; --ink2: #6E625C; --ink3: #A3968F;
  --mine: linear-gradient(135deg, #FFE3D7, #FFD5C5); --mine-ink: #3A2A24; --mine-meta: rgba(130,70,55,.62); --them: #FFFFFF;
  --chat-bg: #F3D4C6;
  --wall-a: rgba(255,177,92,.45); --wall-b: rgba(214,51,108,.25);
  --danger: #DC4B3E; --ok: #2E9E5B; --read: #E5604A;
  --shadow-s: 0 1px 2px rgba(60,25,15,.08);
  --shadow-m: 0 10px 30px -8px rgba(70,25,15,.22), 0 2px 6px rgba(70,25,15,.06);
  --shadow-l: 0 24px 60px -12px rgba(50,15,10,.32);
  --scrim: rgba(25,12,10,.38);
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --accent: #F0705A; --accent-ink: #FF8A72; --tint: #3A2320; --tint2: #2A1B19;
  --bg: #0F0C0B; --surface: #181312; --raised: #221B1A; --sunken: #241D1C; --hover: #201918; --line: rgba(255,230,220,.07);
  --ink: #F5EEEA; --ink2: #B3A59E; --ink3: #7F726C;
  --mine: linear-gradient(135deg, #5C2F28, #4A251F); --mine-ink: #FCEDE7; --mine-meta: rgba(255,220,210,.55); --them: #221B1A;
  --chat-bg: #15100F; --wall-a: rgba(242,85,74,.10); --wall-b: rgba(214,51,108,.08);
  --shadow-m: 0 12px 34px -8px rgba(0,0,0,.6); --shadow-l: 0 24px 70px -10px rgba(0,0,0,.75); --scrim: rgba(0,0,0,.55);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --accent: #F0705A; --accent-ink: #FF8A72; --tint: #3A2320; --tint2: #2A1B19;
  --bg: #0F0C0B; --surface: #181312; --raised: #221B1A; --sunken: #241D1C; --hover: #201918; --line: rgba(255,230,220,.07);
  --ink: #F5EEEA; --ink2: #B3A59E; --ink3: #7F726C;
  --mine: linear-gradient(135deg, #5C2F28, #4A251F); --mine-ink: #FCEDE7; --mine-meta: rgba(255,220,210,.55); --them: #221B1A;
  --chat-bg: #15100F; --wall-a: rgba(242,85,74,.10); --wall-b: rgba(214,51,108,.08);
  --shadow-m: 0 12px 34px -8px rgba(0,0,0,.6); --shadow-l: 0 24px 70px -10px rgba(0,0,0,.75); --scrim: rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* страница целиком не прокручивается — только список и лента; высота — видимая область (важно для Safari на iPhone) */
html, body { height: 100%; position: fixed; inset: 0; width: 100%; overscroll-behavior: none; }
body { font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
#root { height: 100%; height: 100dvh; }
.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { display: block; }
.verified { display: inline-grid; flex: none; animation: pop .5s var(--spring) both; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink3) 35%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink3) 60%, transparent); }
*::-webkit-scrollbar-track { background: transparent; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(12px) scale(.97); opacity: 0; } }
@keyframes menu-in { from { transform: scale(.88); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }

.splash { height: 100%; display: grid; place-items: center; }
.splash img { width: 92px; height: 92px; border-radius: 28px; animation: pulse 1.6s ease-in-out infinite; box-shadow: 0 18px 40px -12px rgba(229,96,74,.6); }
@keyframes pulse { 50% { transform: scale(.93); opacity: .8; } }

/* ---------- кнопки и поля */
.btn { height: 50px; border-radius: 16px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; transition: transform .2s var(--ease), filter .2s, background .2s, opacity .2s; width: 100%; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(226,70,70,.75); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05) saturate(1.05); }
.btn.soft { background: var(--sunken); color: var(--ink); }
.btn.soft:hover { background: color-mix(in srgb, var(--sunken) 80%, var(--ink3)); }
.btn.vk { background: #0077FF; color: #fff; box-shadow: 0 10px 24px -10px rgba(0,119,255,.7); }
.btn.vk:hover { filter: brightness(1.06); }
.btn.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn.sm { height: 40px; border-radius: 12px; font-size: 14.5px; padding: 0 16px; width: auto; }
.field { width: 100%; height: 50px; border-radius: 15px; border: 1.5px solid transparent; background: var(--sunken); padding: 0 16px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-size: 16px; }
.field:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.label { font-size: 13px; font-weight: 650; color: var(--ink3); margin: 0 4px 6px; display: block; }
.link { color: var(--accent-ink); font-weight: 650; padding: 8px 10px; border-radius: 10px; transition: background .2s; }
.link:hover { background: var(--tint2); }
.error { color: var(--danger); font-size: 14px; font-weight: 550; animation: rise .3s var(--ease); }
.icon-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--ink2); flex: none; transition: background .2s, color .2s, transform .2s var(--ease); position: relative; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.on { color: var(--accent); background: var(--tint2); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- вход */
.auth { height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); }
.auth .art { position: relative; overflow: hidden; background: var(--grad); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; isolation: isolate; }
.auth .art::before, .auth .art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.16); z-index: -1; }
.auth .art::before { width: 560px; height: 560px; right: -180px; top: -180px; animation: drift 18s ease-in-out infinite; }
.auth .art::after { width: 420px; height: 420px; left: -160px; bottom: 120px; animation: drift 22s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate(-50px, 40px) scale(1.08); } }
.auth .art h2 { font-size: 46px; line-height: 1.02; font-weight: 820; letter-spacing: -.03em; max-width: 440px; }
.auth .art p { margin-top: 14px; font-size: 18px; opacity: .9; max-width: 420px; }
.auth .bubbles { position: absolute; top: 18%; left: 56px; right: 56px; display: flex; flex-direction: column; gap: 10px; }
.auth .bubbles div { align-self: flex-start; background: rgba(255,255,255,.95); color: #3A2A24; padding: 10px 15px; border-radius: 20px 20px 20px 6px; font-weight: 550; box-shadow: 0 14px 30px -12px rgba(80,0,20,.4); animation: rise .7s var(--spring) both; }
.auth .bubbles div:nth-child(2) { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(10px); animation-delay: .5s; }
.auth .bubbles div:nth-child(3) { animation-delay: 1s; }
.auth .form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; gap: 12px; text-align: center; }
.auth .form > * { width: 100%; max-width: 360px; }
.auth .logo { width: 92px; height: 92px; border-radius: 28px; box-shadow: 0 18px 40px -12px rgba(229,96,74,.6); animation: pop .6s var(--spring) both; }
.auth h1 { font-size: 34px; font-weight: 820; letter-spacing: -.02em; margin-top: 10px; }
.auth .hint { color: var(--ink2); margin-bottom: 14px; }
.auth form { display: grid; gap: 10px; animation: rise .35s var(--ease); }
.auth .small { color: var(--ink3); font-size: 13px; margin-top: 10px; }
.auth .small a { color: var(--ink2); }
.vk-logo { width: 26px; height: 26px; border-radius: 8px; background: #fff; color: #0077FF; display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: -.02em; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth .art { display: none; } }

/* ---------- раскладка */
.app { height: 100%; display: grid; grid-template-columns: 380px minmax(0, 1fr); position: relative; overflow: hidden; }
.app.info-open { grid-template-columns: 380px minmax(0, 1fr) 360px; }
@media (max-width: 1100px) { .app { grid-template-columns: 330px minmax(0, 1fr); } .app.info-open { grid-template-columns: 330px minmax(0, 1fr); } }

/* ---------- список чатов */
.list { min-width: 0; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding-top: var(--safe-top); position: relative; z-index: 2; }
.list .head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 6px 10px; }
.list .head h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; flex: 1; margin-left: 4px; display: flex; align-items: center; gap: 10px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink3); animation: fade-in .3s; }
.conn .spinner { width: 13px; height: 13px; border-width: 2px; }
.search { position: relative; margin: 4px 12px 8px; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink3); pointer-events: none; }
.search input { width: 100%; height: 42px; border-radius: 14px; border: 1.5px solid transparent; background: var(--sunken); padding: 0 36px 0 42px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; font-size: 15px; }
.search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--ink3); }
.search .clear .ico { position: static; transform: none; }
.tabs { display: flex; gap: 4px; padding: 0 12px 8px; position: relative; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 32px; padding: 0 13px; border-radius: 11px; font-size: 14px; font-weight: 650; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; transition: background .25s var(--ease), color .25s; white-space: nowrap; }
.tabs button:hover { background: var(--hover); }
.tabs button.on { background: var(--tint); color: var(--accent-ink); }
.tabs button b { font-size: 11.5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.chats { overflow-y: auto; flex: 1; padding: 2px 8px calc(10px + var(--safe-bottom)); scrollbar-gutter: stable; }
.section-title { font-size: 13px; font-weight: 700; color: var(--ink3); padding: 12px 10px 6px; text-transform: uppercase; letter-spacing: .05em; }
.row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; cursor: pointer; border-radius: 16px; position: relative; transition: background .18s; user-select: none; }
.row:hover { background: var(--hover); }
.row.active { background: var(--tint); }
.row .mid { flex: 1; min-width: 0; }
.row .top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.row .title { font-weight: 680; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .kind { color: var(--ink3); display: inline-grid; }
.row .time { margin-left: auto; color: var(--ink3); font-size: 12.5px; flex: none; padding-left: 6px; display: inline-flex; align-items: center; gap: 3px; }
.row .time .ico { color: var(--read); }
.row .bottom { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.row .preview { flex: 1; color: var(--ink2); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .preview .who { color: var(--ink); font-weight: 560; }
.row .preview.typing { color: var(--accent-ink); font-weight: 560; display: flex; align-items: center; gap: 6px; }
.row .muted-ico { color: var(--ink3); }
.badge { background: var(--accent); color: #fff; font-size: 12px; font-weight: 750; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; padding: 0 7px; flex: none; animation: pop .35s var(--spring); }
.badge.muted { background: var(--ink3); }
.avatar { flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 720; overflow: hidden; background-size: cover; background-position: center; position: relative; letter-spacing: -.01em; user-select: none; }
.av-wrap { position: relative; flex: none; display: inline-flex; }
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #3CC36A; border: 2.5px solid var(--surface); animation: pop .3s var(--spring); }
.row.active .online-dot { border-color: var(--tint); }
.empty { color: var(--ink3); text-align: center; padding: 48px 24px; display: grid; justify-items: center; gap: 12px; animation: fade-in .4s; }
.empty > .ico { width: 64px; height: 64px; border-radius: 22px; background: var(--sunken); color: var(--ink3); }
.empty b { color: var(--ink); font-size: 17px; }
.fab { position: absolute; right: 18px; bottom: calc(18px + var(--safe-bottom)); width: 54px; height: 54px; border-radius: 18px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(226,70,70,.8); transition: transform .3s var(--spring); z-index: 3; }
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab:active { transform: scale(.94); }

/* ---------- чат */
.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--chat-bg); position: relative; isolation: isolate; overflow: hidden; }
.chat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 10%, var(--wall-a), transparent 70%), radial-gradient(55% 45% at 10% 90%, var(--wall-b), transparent 70%); }
.chat.none { display: grid; place-items: center; }
.chat.none .hello { text-align: center; color: var(--ink2); display: grid; justify-items: center; gap: 10px; animation: fade-in .5s; }
.chat.none .hello img { width: 84px; height: 84px; border-radius: 26px; opacity: .95; box-shadow: var(--shadow-m); }
.chat.none .hello b { color: var(--ink); font-size: 19px; }
.chat.none .hello span { background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 6px 14px; border-radius: 12px; font-size: 14px; backdrop-filter: blur(10px); }
.chat-head { display: flex; align-items: center; gap: 4px; padding: calc(8px + var(--safe-top)) 10px 8px 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.5) blur(20px); -webkit-backdrop-filter: saturate(1.5) blur(20px); border-bottom: 1px solid var(--line); min-height: 62px; z-index: 3; }
.chat-head .back { display: none; }
.chat-head .who { min-width: 0; flex: 1; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 2px 6px 2px 2px; border-radius: 14px; }
.chat-head .t { font-weight: 720; font-size: 16px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.chat-head .t > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.chat-head .s { color: var(--ink3); font-size: 13.5px; height: 19px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .s.on { color: var(--accent-ink); }
.dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
.dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3.5px); opacity: 1; } }
.status-swap { animation: fade-in .25s; display: inline-flex; align-items: center; gap: 6px; }

/* поиск по чату */
.chat-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); animation: sheet-in .25s var(--ease); z-index: 2; }
.chat-search input { flex: 1; height: 38px; border: 0; background: var(--sunken); border-radius: 12px; padding: 0 14px; outline: none; }
.results { position: absolute; top: 120px; left: 12px; right: 12px; max-height: 50%; overflow-y: auto; background: var(--raised); border-radius: 18px; box-shadow: var(--shadow-l); z-index: 6; padding: 6px; animation: menu-in .2s var(--ease); transform-origin: top center; }
.results .hit { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; }
.results .hit:hover { background: var(--hover); }
.results .hit small { color: var(--ink3); font-size: 12.5px; }
.results .hit div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results .none { padding: 16px; text-align: center; color: var(--ink3); }
.mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* лента */
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column-reverse; padding: 12px max(14px, calc((100% - 820px) / 2)) 8px; overscroll-behavior: contain; }
.day { position: sticky; top: 6px; z-index: 1; align-self: center; background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink2); font-size: 13px; font-weight: 650; padding: 4px 12px; border-radius: 12px; margin: 10px 0 8px; box-shadow: var(--shadow-s); }
.unread-line { align-self: stretch; text-align: center; margin: 10px 0; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 5px; border-radius: 12px; }
.older { align-self: center; margin: 8px; color: var(--ink3); }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(84%, 600px); position: relative; margin-top: 2px; }
.msg.first { margin-top: 10px; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.new { animation: rise .32s var(--ease) both; }
.msg.mine.new { transform-origin: bottom right; }
.msg .av-slot { width: 34px; flex: none; align-self: flex-end; }
.msg .col { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; position: relative; }
.msg.mine .col { align-items: flex-end; }
.msg.flash .bubble { animation: flash 1.4s var(--ease); }
@keyframes flash { 20% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }
.bubble { background: var(--them); border-radius: 18px; padding: 7px 11px 6px 12px; box-shadow: var(--shadow-s); position: relative; overflow: hidden; min-width: 64px; max-width: 100%; }
.msg:not(.mine) .bubble { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.msg:not(.mine).first .bubble { border-top-left-radius: 18px; }
.msg:not(.mine).last .bubble { border-bottom-left-radius: 18px; }
.mine .bubble { background: var(--mine); color: var(--mine-ink); border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.mine.first .bubble { border-top-right-radius: 18px; }
.mine.last .bubble { border-bottom-right-radius: 18px; }
.bubble.bleed { padding: 0; }
.author { font-size: 13.5px; font-weight: 700; margin-bottom: 1px; display: flex; align-items: center; gap: 4px; }
.bleed .author { padding: 7px 12px 4px; }
.fwd { font-size: 13px; color: var(--accent-ink); font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.bleed .fwd { padding: 7px 12px 0; }
.quote { display: block; text-align: left; width: 100%; border-radius: 9px; padding: 4px 10px 5px 10px; margin: 2px 0 5px; background: color-mix(in srgb, var(--qc, var(--accent)) 12%, transparent); border-left: 3px solid var(--qc, var(--accent)); cursor: pointer; transition: background .2s; min-width: 0; }
.quote:hover { background: color-mix(in srgb, var(--qc, var(--accent)) 20%, transparent); }
.quote b { display: block; font-size: 13px; color: var(--qc, var(--accent-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote span { display: block; font-size: 13.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.bleed .quote { margin: 6px 6px 0; width: calc(100% - 12px); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.38; }
.text a { color: var(--accent-ink); text-decoration: none; }
.mine .text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.text a:hover { text-decoration: underline; }
.text.big { font-size: 46px; line-height: 1.15; }
.meta { float: right; position: relative; top: 6px; margin: 0 -2px 0 10px; font-size: 11.5px; color: var(--ink3); display: inline-flex; align-items: center; gap: 2px; line-height: 1; user-select: none; height: 15px; }
.mine .meta { color: var(--mine-meta); }
.meta .read, .over .read { color: var(--read); }
.over .read { color: #fff; }
.meta .fail { color: var(--danger); }
.caption { padding: 6px 11px 6px 12px; }
.over { position: absolute; right: 7px; bottom: 7px; background: rgba(20,10,8,.5); backdrop-filter: blur(6px); color: #fff; border-radius: 10px; padding: 3px 7px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.photo-wrap { position: relative; display: block; cursor: zoom-in; overflow: hidden; background: var(--sunken); }
.photo-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .4s; }
.photo-wrap:hover img { transform: scale(1.02); }
.photo-wrap .up { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); color: #fff; }
.photo-wrap .up .spinner { width: 34px; height: 34px; border-width: 3px; }
video.vid { display: block; width: 100%; max-height: 420px; background: #000; }
.sticker { width: 160px; height: 160px; object-fit: contain; display: block; cursor: pointer; transition: transform .3s var(--spring); }
.sticker:hover { transform: scale(1.04); }
.sticker-meta { margin-top: 2px; }
.sticker-meta .over { position: static; display: inline-flex; }
.deleted { font-style: italic; color: var(--ink3); display: flex; align-items: center; gap: 6px; }
.locked { display: flex; align-items: center; gap: 8px; color: var(--ink2); }

/* голосовое */
.voice { display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; padding: 2px 0; }
.voice .play { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; transition: transform .2s var(--spring); }
.voice .play:active { transform: scale(.9); }
.voice .body { flex: 1; min-width: 0; }
.voice .bars { display: flex; align-items: center; gap: 2px; height: 26px; cursor: pointer; }
.voice .bars i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink3) 55%, transparent); transition: background .15s; }
.voice .bars i.on { background: var(--accent); }
.voice .row2 { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); margin-top: 2px; }
.mine .voice .row2 { color: var(--mine-meta); }
.voice .speed { font-size: 11.5px; font-weight: 750; padding: 1px 6px; border-radius: 7px; background: color-mix(in srgb, var(--ink3) 18%, transparent); color: inherit; min-width: 34px; }

/* файл */
.file { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 3px 0; min-width: 220px; }
.file .fi { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; transition: transform .2s var(--spring); }
.file:hover .fi { transform: scale(1.06); }
.file b { display: block; font-weight: 640; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.file small { color: var(--ink3); font-size: 12.5px; }
.mine .file small { color: var(--mine-meta); }

/* реакции */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow-s); border-radius: 14px; padding: 3px 9px 3px 7px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; transition: transform .2s var(--spring), background .2s; animation: pop .35s var(--spring); color: var(--ink2); }
.chip .e { font-size: 15px; line-height: 1; }
.chip:hover { transform: scale(1.06); }
.chip.on { background: var(--accent); color: #fff; }

/* действия при наведении: сбоку от пузыря */
.hover-act { position: absolute; top: 50%; display: flex; gap: 2px; padding: 3px; background: var(--raised); border-radius: 14px; box-shadow: var(--shadow-m); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.92); transition: opacity .15s, transform .2s var(--ease); z-index: 4; white-space: nowrap; }
.msg.mine .hover-act { right: calc(100% + 6px); }
.msg:not(.mine) .hover-act { left: calc(100% + 6px); }
.msg:hover .hover-act { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.hover-act button { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--ink2); transition: background .15s, color .15s; }
.hover-act button:hover { background: var(--hover); color: var(--ink); }
@media (hover: none) { .hover-act { display: none; } }

/* меню сообщения */
.scrim { position: fixed; inset: 0; z-index: 29; animation: fade-in .2s; }
.menu { position: fixed; z-index: 30; background: var(--raised); border-radius: 18px; box-shadow: var(--shadow-l); padding: 6px; display: grid; gap: 1px; min-width: 230px; animation: menu-in .18s var(--ease) both; border: 1px solid var(--line); }
.menu .emojis { display: flex; padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .emojis button { font-size: 23px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; transition: transform .2s var(--spring), background .15s; animation: pop .35s var(--spring) both; }
.menu .emojis button:nth-child(2) { animation-delay: .02s; } .menu .emojis button:nth-child(3) { animation-delay: .04s; } .menu .emojis button:nth-child(4) { animation-delay: .06s; }
.menu .emojis button:nth-child(5) { animation-delay: .08s; } .menu .emojis button:nth-child(6) { animation-delay: .1s; } .menu .emojis button:nth-child(7) { animation-delay: .12s; } .menu .emojis button:nth-child(8) { animation-delay: .14s; }
.menu .emojis button:hover { transform: scale(1.25); background: var(--hover); }
.menu .emojis button.on { background: var(--tint); }
.menu .item { text-align: left; padding: 0 12px; height: 40px; border-radius: 11px; font-weight: 560; display: flex; align-items: center; gap: 12px; font-size: 15px; transition: background .15s; }
.menu .item .ico { color: var(--ink2); }
.menu .item:hover { background: var(--hover); }
.menu .item.danger, .menu .item.danger .ico { color: var(--danger); }
.menu .sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* кнопка «вниз» */
.to-bottom { position: absolute; right: 18px; bottom: 90px; width: 46px; height: 46px; border-radius: 50%; background: var(--raised); box-shadow: var(--shadow-m); display: grid; place-items: center; color: var(--ink2); z-index: 4; animation: pop .3s var(--spring); transition: transform .2s var(--ease); }
.to-bottom:hover { transform: translateY(-2px); color: var(--ink); }
.to-bottom .badge { position: absolute; top: -6px; right: -4px; }

/* ---------- поле ввода */
.composer-wrap { padding: 6px max(12px, calc((100% - 820px) / 2)) calc(10px + var(--safe-bottom)); z-index: 3; position: relative; }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.composer .box { flex: 1; min-width: 0; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-m); display: flex; flex-direction: column; overflow: hidden; }
.composer .line { display: flex; align-items: flex-end; gap: 2px; padding: 4px; }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; max-height: 200px; padding: 10px 6px; font-size: 16px; line-height: 22px; height: 42px; }
.composer textarea::placeholder { color: var(--ink3); }
.composer .icon-btn { width: 42px; height: 42px; border-radius: 50%; }
.send { width: 50px; height: 50px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 10px 22px -8px rgba(226,70,70,.8); transition: transform .25s var(--spring), filter .2s; }
.send:hover { filter: brightness(1.06); }
.send:active { transform: scale(.9); }
.send .ico { animation: pop .3s var(--spring); }
.send.rec { background: var(--danger); animation: ring 1.4s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.attach-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px 14px; border-bottom: 1px solid var(--line); animation: sheet-in .2s var(--ease); }
.attach-bar > .ico { color: var(--accent); }
.attach-bar .q { flex: 1; min-width: 0; border-left: 2.5px solid var(--accent); padding-left: 10px; }
.attach-bar .q b { display: block; color: var(--accent-ink); font-size: 13.5px; }
.attach-bar .q span { display: block; font-size: 14px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-bar .icon-btn { width: 32px; height: 32px; }
.readonly { margin: 0 auto; padding: 0 22px; height: 48px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-m); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 650; color: var(--accent-ink); width: fit-content; transition: transform .2s var(--ease); }
.readonly:hover { transform: translateY(-1px); }
.recorder { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 14px; height: 50px; animation: fade-in .2s; }
.recorder .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; flex: none; }
.recorder .time { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 44px; }
.recorder .live { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; overflow: hidden; justify-content: flex-end; }
.recorder .live i { width: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.attach-menu { position: absolute; bottom: calc(100% + 4px); left: max(12px, calc((100% - 820px) / 2)); z-index: 31; }
.attach-menu .menu { position: static; }

/* панель эмодзи и стикеров */
.picker { position: absolute; bottom: calc(100% + 4px); left: max(12px, calc((100% - 820px) / 2)); width: 380px; max-width: calc(100% - 24px); height: 420px; background: var(--raised); border-radius: 22px; box-shadow: var(--shadow-l); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; z-index: 31; animation: menu-in .2s var(--ease); transform-origin: bottom left; }
.picker .ptabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.picker .ptabs button { flex: 1; height: 34px; border-radius: 11px; font-weight: 650; font-size: 14px; color: var(--ink2); transition: background .2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.picker .ptabs button.on { background: var(--tint); color: var(--accent-ink); }
.picker .pbody { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.picker h4 { font-size: 12.5px; font-weight: 700; color: var(--ink3); padding: 10px 4px 6px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; background: var(--raised); z-index: 1; }
.egrid { display: grid; grid-template-columns: repeat(8, 1fr); }
.egrid button { font-size: 25px; height: 42px; border-radius: 11px; display: grid; place-items: center; transition: transform .15s var(--spring), background .15s; }
.egrid button:hover { background: var(--hover); transform: scale(1.18); }
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sgrid button { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; transition: background .15s, transform .2s var(--spring); padding: 6px; position: relative; }
.sgrid button::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--sunken); z-index: -1; }
.sgrid { isolation: isolate; }
.sgrid button:hover { background: var(--hover); transform: scale(1.06); }
.sgrid img { width: 100%; height: 100%; object-fit: contain; }

/* перетаскивание файла */
.drop { position: absolute; inset: 10px; z-index: 40; border-radius: 24px; border: 2.5px dashed var(--accent); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); display: grid; place-items: center; text-align: center; color: var(--accent-ink); font-weight: 700; font-size: 18px; animation: fade-in .15s; pointer-events: none; }
.drop .ico { width: 70px; height: 70px; border-radius: 24px; background: var(--tint); margin: 0 auto 12px; display: grid; }

/* ---------- окна */
.modal-scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center; padding: 20px; animation: fade-in .2s; }
.modal { width: 100%; max-width: 440px; max-height: calc(100dvh - 40px); overflow: auto; background: var(--raised); border-radius: 26px; box-shadow: var(--shadow-l); padding: 20px 22px 22px; animation: menu-in .25s var(--spring); display: flex; flex-direction: column; gap: 14px; }
.modal h3 { font-size: 20px; font-weight: 780; display: flex; align-items: center; gap: 10px; }
.modal h3 .icon-btn { margin-left: auto; margin-right: -8px; }
.modal .row-btns { display: flex; gap: 10px; }
.modal .preview-img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 16px; background: var(--sunken); }
.modal p.note { color: var(--ink2); font-size: 14.5px; }
.seg { display: flex; padding: 4px; border-radius: 14px; background: var(--sunken); gap: 2px; }
.seg button { flex: 1; height: 36px; border-radius: 11px; font-weight: 650; font-size: 14px; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.pick-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; margin: 0 -8px; }
.pick-list .row { padding: 7px 10px; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink3); display: grid; place-items: center; color: #fff; margin-left: auto; transition: background .2s, border-color .2s; flex: none; }
.check.on { background: var(--accent); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--accent-ink); padding: 4px 6px 4px 12px; border-radius: 12px; font-weight: 600; font-size: 14px; animation: pop .25s var(--spring); }
.chips button { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }

/* ---------- боковые панели: профиль чата и настройки */
.side { background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; animation: side-in .3s var(--ease); z-index: 4; }
@keyframes side-in { from { transform: translateX(30px); opacity: 0; } }
@media (max-width: 1100px) { .side { position: absolute; right: 0; top: 0; bottom: 0; width: 360px; box-shadow: var(--shadow-l); z-index: 20; } }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--surface); z-index: 25; display: flex; flex-direction: column; box-shadow: var(--shadow-l); animation: drawer-in .32s var(--ease); padding-top: var(--safe-top); }
@media (max-width: 1100px) { .drawer { width: 330px; } }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer-scrim { position: absolute; inset: 0; z-index: 24; background: var(--scrim); animation: fade-in .25s; }
.side-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 10px 10px 14px; min-height: 62px; }
.drawer .side-head { padding-top: 10px; }
.side-head h3 { font-size: 18px; font-weight: 760; flex: 1; }
.side-body { flex: 1; overflow-y: auto; padding: 0 12px calc(24px + var(--safe-bottom)); }
.hero-card { position: relative; border-radius: 26px; padding: 26px 18px 20px; text-align: center; overflow: hidden; color: #fff; isolation: isolate; margin-bottom: 12px; }
.hero-card::before { content: ""; position: absolute; inset: 0; background: var(--hc, var(--grad)); z-index: -2; transition: background .4s; }
.hero-card::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -110px; background: rgba(255,255,255,.14); z-index: -1; }
.hero-card .av-host { position: relative; width: fit-content; margin: 0 auto; }
.hero-card .avatar { box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.65); }
.hero-card h2 { margin-top: 14px; font-size: 22px; font-weight: 780; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-card p { opacity: .9; font-size: 14.5px; margin-top: 2px; }
.hero-card .cam { position: absolute; right: -8px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow-m); transition: transform .2s var(--spring); }
.hero-card .cam:hover { transform: scale(1.1); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tiles button { background: var(--sunken); border-radius: 16px; padding: 12px 4px 10px; display: grid; justify-items: center; gap: 5px; font-size: 13px; font-weight: 620; color: var(--ink2); transition: background .2s, transform .2s var(--ease); }
.tiles button .ico { color: var(--accent); }
.tiles button:hover { background: var(--hover); }
.tiles button:active { transform: scale(.96); }
.group { background: var(--sunken); border-radius: 20px; padding: 4px; margin-bottom: 12px; }
.group .gt { font-size: 12.5px; font-weight: 700; color: var(--ink3); padding: 10px 12px 4px; text-transform: uppercase; letter-spacing: .04em; }
.item-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 12px; border-radius: 16px; text-align: left; transition: background .15s; min-height: 52px; text-decoration: none; }
button.item-row:hover, a.item-row:hover, label.item-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); cursor: pointer; }
.item-row .ii { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--accent); flex: none; }
.item-row .tx { flex: 1; min-width: 0; }
.item-row .tx b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row .tx small { display: block; color: var(--ink3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row.danger, .item-row.danger .ii { color: var(--danger); }
.item-row .end { color: var(--ink3); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.switch { width: 44px; height: 26px; border-radius: 13px; background: color-mix(in srgb, var(--ink3) 45%, transparent); position: relative; transition: background .25s; flex: none; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .3s var(--spring); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 12px 12px; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; position: relative; transition: transform .25s var(--spring); display: grid; place-items: center; color: #fff; }
.swatches button:hover { transform: scale(1.1); }
.swatches button.on { box-shadow: 0 0 0 3px var(--sunken), 0 0 0 5px var(--sw); }
.edit-form { display: grid; gap: 10px; padding: 8px; }
.about { padding: 8px 12px 10px; white-space: pre-wrap; font-size: 15px; }

/* просмотр фото */
.viewer { position: fixed; inset: 0; z-index: 60; background: rgba(8,5,4,.94); display: grid; place-items: center; animation: fade-in .2s; cursor: zoom-out; }
.viewer img { max-width: 94vw; max-height: 86vh; border-radius: 6px; animation: zoom-in .3s var(--ease); box-shadow: 0 30px 80px rgba(0,0,0,.5); cursor: default; }
@keyframes zoom-in { from { transform: scale(.88); opacity: 0; } }
.viewer .bar { position: absolute; top: calc(12px + var(--safe-top)); right: 12px; display: flex; gap: 6px; }
.viewer .bar .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.viewer .bar .icon-btn:hover { background: rgba(255,255,255,.2); }
.viewer .cap { position: absolute; bottom: calc(20px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.4); padding: 8px 16px; border-radius: 14px; max-width: 80vw; text-align: center; }

/* всплывающее сообщение */
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translateX(-50%); background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg); padding: 11px 18px; border-radius: 15px; font-weight: 600; font-size: 14.5px; z-index: 80; box-shadow: var(--shadow-l); animation: toast .35s var(--spring); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
@keyframes toast { from { transform: translate(-50%, 20px) scale(.9); opacity: 0; } }

/* ---------- телефон: одна колонка, чат поверх списка */
@media (max-width: 760px) {
  .app, .app.info-open { grid-template-columns: minmax(0, 1fr); }
  .app > .chat { position: absolute; inset: 0; z-index: 5; transform: translateX(100%); transition: transform .38s var(--ease); box-shadow: -20px 0 40px -20px rgba(0,0,0,.35); }
  .app.open > .chat { transform: none; }
  .app > .list { transition: transform .38s var(--ease); }
  .app.open > .list { transform: translateX(-24%); }
  .chat-head .back { display: grid; }
  .chat-head { padding-left: 4px; }
  .msg { max-width: 88%; }
  .side { position: absolute; inset: 0; width: auto; z-index: 30; animation: phone-in .32s var(--ease); }
  .drawer { width: 100%; }
  .picker { left: 8px; right: 8px; width: auto; max-width: none; height: 46dvh; }
  .attach-menu { left: 8px; }
  .egrid { grid-template-columns: repeat(7, 1fr); }
  .to-bottom { bottom: 84px; right: 12px; }
  .messages { padding-left: 10px; padding-right: 10px; }
  .composer-wrap { padding-left: 8px; padding-right: 8px; }
  .modal-scrim { align-items: end; padding: 0; }
  .modal { max-width: none; border-radius: 26px 26px 0 0; padding-bottom: calc(22px + var(--safe-bottom)); animation: sheet-up .32s var(--ease); }
  .results { top: 112px; }
}
@keyframes phone-in { from { transform: translateX(100%); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.voice .row2 .meta { float: none; top: 0; margin: 0; }