/* Блок «Обновления статей» (справа от чата) + адаптив deck */
/* ===== controls under the card ===== */
/* ===== articles block (outside the chat, to the right) ===== */
.articles{flex:0 1 535px;min-width:420px;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:16px;
  background:var(--card);border:2px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;
  height:min(700px,calc(100dvh - 130px));min-height:560px}
.articles::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 38% at 85% 0%,rgba(255,255,255,.07),transparent 70%),radial-gradient(70% 30% at 10% 62%,rgba(255,255,255,.035),transparent 70%),
  linear-gradient(150deg,#31353a 0%,#1a1c1f 34%,#272a2e 58%,#141517 100%)}
.ah{display:flex;align-items:center;gap:10px;padding:4px 4px 0}
.at{flex:1;font-size:18px;font-weight:600;color:var(--text);line-height:1.3}
.aall{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--admin);padding:6px 8px;border-radius:10px;
  transition:transform .3s var(--spring),background-color .2s}
.aall:hover{background:rgba(253,0,47,.1)}.aall:hover svg{transform:translateX(3px)}.aall:active{transform:scale(.94)}
.aall svg{width:16px;height:16px;transition:transform .3s var(--spring)}
.alist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;overscroll-behavior:contain}
.art{--c:#d4ae62;position:relative;isolation:isolate;display:flex;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(10,11,12,.42);text-align:left;width:100%;
  transition:transform .35s var(--spring);animation:artIn .5s var(--spring) both;animation-delay:calc(var(--i)*70ms)}
/* hover: radial category glow 20% + gradient category border 40% (Figma: Articles / Card, State=Hover) */
.art::before,.art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;z-index:-1}
.art::before{background:radial-gradient(100% 230% at 50% 50%,color-mix(in srgb,var(--c) 20%,transparent),rgba(102,102,102,.2))}
.art::after{padding:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 40%,transparent),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.art:hover::before,.art:hover::after,.art:focus-visible::before,.art:focus-visible::after{opacity:1}
@keyframes artIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.art:active{transform:scale(.975)}
.ahead{display:flex;align-items:center;justify-content:space-between;gap:6px}
.acov{flex:0 0 112px;height:112px;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.7);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,transparent),#151719 90%);transition:transform .4s var(--spring)}
.art:hover .acov{transform:scale(1.04) rotate(-2deg)}
.acov svg,.alk svg,.aall svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.acov svg{width:28px;height:28px}
.abody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.atag{font-size:12px;font-weight:500;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#151719);padding:2px 8px;border-radius:99px;line-height:1.4}
.ati{font-size:16px;font-weight:600;color:var(--text);line-height:1.3}
.ade{font-size:14px;font-weight:400;color:rgba(255,255,255,.5);line-height:normal}
.alk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--c)}
.alk svg{width:16px;height:16px;transition:transform .3s var(--spring)}
.art:hover .alk svg{transform:translate(2px,-2px)}
.art.seen .ati{color:rgba(234,226,222,.6)}
@media (max-width:900px){
  .deck{flex-direction:column;align-items:center}
  .chat{flex:none;width:min(1250px,100%)}
  .articles{flex:none;width:min(1250px,100%);min-width:0;height:auto;min-height:0}
  .alist{overflow:visible}
}