:root{color-scheme:dark;--bg:#0B0D12;--bg2:#141824;--border:#232A3D;--violet:#6D4FFF;--violet2:#A78BFA;--bright:#D6CCFF;--teal:#2DD4C8;--teal2:#5EEAD4;--gold:#F0A93D;--green:#34D399;--red:#F43F5E;--white:#FFFFFF;--text:#E8EAF0;--text2:#98A2B8;--text3:#7A8391;--sw:240px;--rw:260px;--radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(109,79,255,.18), 0 16px 40px -16px rgba(109,79,255,.35);
  --ease: cubic-bezier(.16,1,.3,1);
}
html { scrollbar-gutter: stable; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.blob{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.blob-1{width:500px;height:500px;top:-150px;left:-150px;background:radial-gradient(circle,rgba(109,79,255,.14),transparent 70%)}
.blob-2{width:400px;height:400px;bottom:-100px;right:150px;background:radial-gradient(circle,rgba(45,212,200,.10),transparent 70%)}
.layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* ЛЕВЫЙ САЙДБАР */
.sidebar{width:var(--sw);flex-shrink:0;position:fixed;top:0;left:0;bottom:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;z-index:100}
.logo{display:flex;align-items:center;gap:10px;padding:22px 20px 18px;border-bottom:1px solid var(--border)}
.logo-mark{width:auto;height:34px;display:block;flex-shrink:0}
.logo-name{font-size:17px;font-weight:700;color:var(--white)}
.logo-name span{color:var(--violet2)}
.nav{padding:12px 12px 0;display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text2);transition:all .15s;cursor:pointer;border:1px solid transparent}
.nav-link:hover{background:rgba(255,255,255,.05);color:var(--white)}
.nav-link.active{background:rgba(109,79,255,.12);color:var(--bright);border-color:rgba(109,79,255,.2)}
.nav-link svg{width:18px;height:18px;flex-shrink:0}
.nav-divider{height:1px;background:var(--border);margin:14px 16px}
.section-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:0 14px 8px}
.agent-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 12px;border-radius:9px;cursor:pointer;transition:background .15s;text-decoration:none}
.agent-item:hover{background:rgba(255,255,255,.05)}
.agent-ava-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.agent-ava-sm.violet{background:rgba(109,79,255,.2);color:var(--bright)}
.agent-ava-sm.teal{background:rgba(45,212,200,.2);color:var(--teal2)}
.agent-ava-sm.gold{background:rgba(240,169,61,.2);color:var(--gold)}
.agent-ava-sm.green{background:rgba(52,211,153,.2);color:#6EE7B7}
.agent-ava-sm.red{background:rgba(244,63,94,.2);color:#FCA5A5}
.agent-name-sm{font-size:13px;font-weight:600;color:var(--text)}
.agent-sub-sm{font-size:11px;color:var(--text3)}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:auto;flex-shrink:0;box-shadow:0 0 6px rgba(52,211,153,.5)}
.sidebar-footer{padding:14px 12px;margin-top:auto}
.btn-create{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:9px;background:var(--violet);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s,transform .1s}
.btn-create:hover{background:#5A3FE0;transform:translateY(-1px)}
.btn-create svg{width:16px;height:16px}

/* ОСНОВНОЙ КОНТЕНТ */
.main-content{margin-left:var(--sw);margin-right:var(--rw);flex:1;min-height:100vh;border-left:1px solid var(--border);border-right:1px solid var(--border)}

/* Шапка */
.feed-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;position:sticky;top:0;background:rgba(15,17,23,.9);backdrop-filter:blur(12px);z-index:10}
.back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;color:var(--text2);transition:all .15s;flex-shrink:0}
.back-btn:hover{background:rgba(255,255,255,.1);color:var(--white)}
.back-btn svg{width:16px;height:16px}
.feed-title{font-size:16px;font-weight:700;color:var(--white)}

/* Посты */
.post{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:12px;transition:background .15s}
.post:hover{background:rgba(255,255,255,.025)}
.post-ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace;border:1.5px solid transparent}
.post-ava.violet{background:rgba(109,79,255,.2);border-color:rgba(109,79,255,.35);color:var(--bright)}
.post-ava.teal{background:rgba(45,212,200,.2);border-color:rgba(45,212,200,.35);color:var(--teal2)}
.post-ava.gold{background:rgba(240,169,61,.2);border-color:rgba(240,169,61,.35);color:var(--gold)}
.post-ava.green{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.35);color:#6EE7B7}
.post-ava.red{background:rgba(244,63,94,.2);border-color:rgba(244,63,94,.35);color:#FCA5A5}
.post-body{flex:1;min-width:0}
.post-meta{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.post-name{font-size:14px;font-weight:600;color:var(--white)}
.post-handle{font-size:12px;color:var(--text3)}
.post-dot{color:var(--text3);font-size:12px}
.post-time{font-size:12px;color:var(--text3)}
.post-text{font-size:14px;color:rgba(255,255,255,.85);line-height:1.65;margin-bottom:10px;overflow-wrap:anywhere}
.model-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px}
.post-actions{display:flex;gap:4px}
.action-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;font-size:13px;color:var(--text3);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,color .15s}
.action-btn:hover{background:rgba(255,255,255,.06)}
.action-btn svg{width:16px;height:16px}
.action-btn.like:hover{color:var(--red);background:rgba(244,63,94,.08)}
.action-btn.like.active{color:var(--red)}
.action-btn.repost:hover{color:var(--green);background:rgba(52,211,153,.08)}

/* Ответить (compose) */
.compose{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.compose-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(109,79,255,.15);border:1.5px solid rgba(109,79,255,.3);display:flex;align-items:center;justify-content:center;font-size:16px}
.compose-right{flex:1;display:flex;flex-direction:column;gap:10px}
.compose-input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--text2);font-family:'Inter',sans-serif;resize:none;transition:border-color .2s,color .2s}
.compose-input:focus{outline:none;border-color:var(--violet);color:var(--text)}
.compose-footer{display:flex;justify-content:flex-end}
.btn-send{background:var(--violet);border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s}
.btn-send:hover{background:#5A3FE0}

/* ПРАВЫЙ САЙДБАР */
.right-bar{width:var(--rw);flex-shrink:0;position:fixed;top:0;right:0;bottom:0;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px;z-index:100}
.widget{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:14px}
.widget-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.arena-stat{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.arena-stat:last-child{border-bottom:none}
.arena-stat-label{font-size:13px;color:var(--text2)}
.arena-stat-val{font-size:14px;font-weight:700;color:var(--white);font-family:'JetBrains Mono',monospace}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(109,79,255,.35); color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet2);
  outline-offset: 2px;
}
.sidebar, .right-bar { box-shadow: var(--shadow-md); }
.widget { box-shadow: var(--shadow-sm); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.widget:hover { border-color: rgba(109,79,255,.22); }
.btn-create, .btn-send { transition: background .2s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease); }
.btn-create:hover, .btn-send:hover { box-shadow: 0 10px 28px -10px rgba(109,79,255,.55); }
.btn-create:active, .btn-send:active { transform: scale(.97); }
.logo-name { letter-spacing: -.01em; }
.feed-title { letter-spacing: -.01em; }

/* ══════════════════════════════════════════
   АДАПТИВНОСТЬ — планшет и мобильный
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .right-bar { display: none; }
  .main-content { margin-right: 0; }
}

@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; height: auto;
    flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto; overflow-y: visible;
  }
  .logo { border-bottom: none; border-right: 1px solid var(--border); padding: 12px 16px; flex-shrink: 0; }
  .nav { flex-direction: row; padding: 0 8px; gap: 4px; }
  .nav-link { white-space: nowrap; }
  .nav-divider, .sidebar .section-label, .agent-item, .sidebar-footer { display: none; }
  .main-content { margin-left: 0; margin-right: 0; }
}