/* AI Chat Models — chat-app aesthetic (intentionally distinct from companions / virtual-girlfriends / ai-roleplay) */
:root {
    --cm-bg: #0e1620;
    --cm-panel: #17212b;
    --cm-panel-2: #1e2a36;
    --cm-border: #2b3a4a;
    --cm-text: #e9edf2;
    --cm-muted: #8fa3b3;
    --cm-rose: #ff6b9d;
    --cm-rose-glow: rgba(255,107,157,.35);
    --cm-online: #4ad96b;
    --cm-bubble-in: #182533;
    --cm-bubble-out: #2b5278;
    --cm-bubble-cta: linear-gradient(135deg, #ff6b9d 0%, #c084fc 100%);
    --cm-shadow: 0 4px 24px rgba(0,0,0,.35);
    --cm-radius: 14px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
    background: var(--cm-bg);
    color: var(--cm-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--cm-rose); text-decoration:none; }
a:hover { color: #fff; }
img, video { max-width:100%; height:auto; display:block; }

.skip-link {
    position:absolute; left:-9999px; top:auto;
    background:var(--cm-rose); color:#fff; padding:.5rem 1rem; z-index:9999;
}
.skip-link:focus { left:1rem; top:1rem; }

/* ─── Top bar (Telegram-style) ─── */
.cm-topbar {
    position:sticky; top:0; z-index:900;
    background:rgba(14,22,32,.92);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--cm-border);
    padding:.75rem 0;
}
.cm-topbar-inner {
    max-width:980px; margin:0 auto; padding:0 1.25rem;
    display:flex; justify-content:space-between; align-items:center;
}
.cm-logo { display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--cm-text); }
.cm-logo img { width:32px; height:32px; border-radius:50%; }
.cm-nav { display:flex; gap:1rem; align-items:center; font-size:.92rem; }
.cm-nav a { color:var(--cm-muted); }
.cm-nav a:hover { color:#fff; }
.cm-nav-cta {
    background: var(--cm-bubble-cta); color:#fff !important;
    padding:.45rem 1.1rem; border-radius:99px; font-weight:600;
}
.cm-nav-cta:hover { opacity:.92; color:#fff !important; }

/* ─── Hero ─── */
.cm-hero {
    text-align:center; padding: 4rem 1.25rem 2.5rem;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,107,157,.12) 0%, transparent 55%);
}
.cm-hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight:700;
    line-height:1.15; margin-bottom:.75rem;
}
.cm-hero h1 em {
    font-style:normal;
    background: var(--cm-bubble-cta);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.cm-hero p { color:var(--cm-muted); max-width:620px; margin:0 auto; font-size:1.05rem; }
.cm-hero-stats {
    margin-top:1.25rem; display:flex; gap:1.5rem; justify-content:center;
    color:var(--cm-muted); font-size:.85rem;
}
.cm-hero-stats span strong { color:var(--cm-text); }

/* ─── Chat list (Telegram-style rows) ─── */
.cm-list {
    max-width:780px; margin: 0 auto; padding: 1rem 1rem 4rem;
}
.cm-row {
    display:flex; align-items:center; gap:1rem;
    background: var(--cm-panel);
    border:1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 1rem;
    margin-bottom:.65rem;
    transition: background .15s, transform .15s;
    text-decoration:none; color: inherit;
}
.cm-row:hover { background: var(--cm-panel-2); transform: translateY(-1px); }

.cm-avatar {
    position:relative; flex: 0 0 64px;
    width:64px; height:64px; border-radius:50%; overflow:hidden;
    background: linear-gradient(135deg, #2b5278, #ff6b9d);
}
.cm-avatar img { width:100%; height:100%; object-fit:cover; }
.cm-online {
    position:absolute; bottom:2px; right:2px;
    width:14px; height:14px; border-radius:50%;
    background: var(--cm-online);
    border:2px solid var(--cm-panel);
}

.cm-body { flex:1; min-width:0; }
.cm-row-top {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:.15rem;
}
.cm-name { font-weight:600; color:#fff; font-size:1.02rem; }
.cm-archetype { font-size:.78rem; color:var(--cm-rose); margin-left:.4rem; }
.cm-preview {
    color:var(--cm-muted); font-size:.9rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cm-row-cta {
    flex:0 0 auto;
    padding:.5rem 1rem; font-size:.85rem; font-weight:600;
    background: var(--cm-bubble-cta); color:#fff;
    border-radius:99px;
}
.cm-row-cta:hover { opacity:.92; }

/* ─── Detail page (Telegram/DM view) ─── */
.cm-detail {
    max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 4rem;
}
.cm-detail-portrait {
    width: 100%; max-width: 280px; aspect-ratio: 1/1;
    border-radius:50%; object-fit:cover;
    margin: 0 auto 1rem; display:block;
    border: 3px solid var(--cm-border);
}
.cm-detail-header { text-align:center; margin-bottom:1.5rem; }
.cm-detail-name { font-size:1.7rem; font-weight:700; color:#fff; }
.cm-detail-tag { color:var(--cm-rose); font-size:.9rem; margin-top:.25rem; }
.cm-detail-topics {
    margin-top:.5rem; display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap;
}
.cm-topic {
    font-size:.72rem; padding:.2rem .55rem; border-radius:99px;
    background: rgba(255,107,157,.12); color:var(--cm-rose);
    border:1px solid rgba(255,107,157,.3);
}

/* ─── Chat thread (bubble stack) ─── */
.cm-thread {
    background: var(--cm-panel);
    border:1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.cm-bubble {
    max-width: 78%; padding: .65rem .9rem; border-radius: 16px;
    margin-bottom: .6rem; line-height:1.45; font-size:.95rem;
    position:relative;
}
.cm-bubble.in {
    background: var(--cm-bubble-in);
    border-bottom-left-radius: 4px;
    color: var(--cm-text);
}
.cm-bubble.in::before {
    content:""; position:absolute; left:-6px; bottom:0;
    width:12px; height:12px;
    background: var(--cm-bubble-in);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.cm-bubble.user {
    background: var(--cm-bubble-out);
    color: #fff;
    margin-left:auto; border-bottom-right-radius: 4px;
}
.cm-bubble.user::after {
    content:""; position:absolute; right:-6px; bottom:0;
    width:12px; height:12px;
    background: var(--cm-bubble-out);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.cm-bubble.cta {
    background: var(--cm-bubble-cta);
    color: #fff;
    margin: 1rem auto 0; max-width: 90%;
    text-align:center; font-weight:600;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
}
.cm-bubble.cta a { color:#fff; text-decoration:underline; }
.cm-bubble-meta {
    font-size:.7rem; color:var(--cm-muted);
    margin-bottom: .75rem;
}

/* ─── User input row (visual only — disabled in SEO version) ─── */
.cm-input-row {
    display:flex; gap:.5rem; padding: .75rem;
    background: var(--cm-panel-2);
    border:1px solid var(--cm-border);
    border-radius: 99px;
    margin-bottom: 1rem;
}
.cm-input {
    flex:1; background:transparent; border:0; outline:none;
    color:var(--cm-text); font-size:.95rem; padding:.3rem .5rem;
}
.cm-input::placeholder { color:var(--cm-muted); }
.cm-send-btn {
    width:38px; height:38px; border-radius:50%; border:0;
    background: var(--cm-bubble-cta); color:#fff;
    font-size:1rem; cursor:default;
    display:flex; align-items:center; justify-content:center;
}

/* ─── Video (model page) ─── */
.cm-video-wrap {
    position:relative; max-width:480px; margin:0 auto 1.5rem;
    border-radius: var(--cm-radius); overflow:hidden;
    background:#000; aspect-ratio:16/9;
    border:1px solid var(--cm-border);
}
.cm-video-wrap video {
    width:100%; height:100%; object-fit:contain; background:#000;
    display:block;
}

/* ─── Footer ─── */
.cm-footer {
    border-top:1px solid var(--cm-border);
    padding: 1.5rem 1rem; text-align:center;
    color:var(--cm-muted); font-size:.82rem;
}
.cm-footer a { color:var(--cm-muted); margin:0 .5rem; }
.cm-footer a:hover { color:#fff; }

@media (max-width: 640px) {
    .cm-row { padding:.85rem; gap:.75rem; }
    .cm-avatar { width:54px; height:54px; flex-basis:54px; }
    .cm-row-cta { padding:.45rem .85rem; font-size:.8rem; }
    .cm-nav a.hide-mobile { display:none; }
}