:root{
    /* slightly dark, not pure black */
    --bg1: #0b0e18;
    --bg2: #0a0c14;
    --panel: #111427;
    --text: #e9ecf4;
    --muted: #a8b2c6;

    --c1: #7c3aed;  /* purple */
    --c2: #22d3ee;  /* cyan   */
    --c3: #10b981;  /* green  */
}

*{ box-sizing: border-box }
html,body{ height:100% }
body {
    margin: 0;
    color: #e9ecf4;
    background:#000;
    /*background: radial-gradient(1100px 700px at 50% -10%, #1c2152 0%, #0b0e18 55%, #0a0c14 100%);*/
    font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* header */
.site-header{
    display:flex; align-items:center; justify-content:center;
    padding:18px 16px;
    background: transparent;
}
.logo{ height:28px; opacity:.95 }

/* center layout */
.wrap{
    min-height: 70svh;            /* корректно на мобильных */
    display: grid;
    align-content: center;
    gap: 16px;                      /* было больше — уменьшаем */
    padding-inline: 0;              /* убрали боковые поля */
}

.voice-wrap {
    display: grid;
    place-items: center;
}

.voice-gif {
    display:block;
    height:auto;
    width: min(86vw, 900px);
    /* чуть-чуть свечения, можно убрать */
    /*filter: drop-shadow(0 10px 50px rgba(255,255,255,.08));*/
}

@media (max-width: 768px){
    .voice-wrap{
        width: 100vw;
        margin-inline: calc(50% - 50vw);  /* от края до края */
    }
    .voice-gif{
        width: 100vw;                    /* во всю ширину экрана */
        max-width: 100vw;
    }
}

/* ORB — alien, colorful, constantly drifting */
.orb{
    position:relative;
    width:clamp(260px, 48vw, 520px);
    height:clamp(260px, 48vw, 520px);
    border-radius:42% 58% 63% 37% / 45% 36% 64% 55%; /* not a perfect circle */
    isolation:isolate;
    animation: drift 14s ease-in-out infinite;
    filter: drop-shadow(0 24px 120px rgba(34,211,238,.22));
    transition: transform .25s ease, filter .25s ease;
}

.layer{
    position:absolute; inset:0; border-radius:inherit;
}

/* color core with hue spin */
.layer.core{
    background:
            radial-gradient(55% 55% at 45% 40%, rgba(255,255,255,.20) 0%, transparent 55%),
            conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1));
    filter: blur(0.4px);
    animation: hue 12s linear infinite;
}

/* glow ring */
.layer.glow{
    inset:-8%;
    background:
            radial-gradient(60% 60% at 50% 50%, rgba(124,58,237,.25) 0%, transparent 55%),
            radial-gradient(60% 60% at 55% 45%, rgba(34,211,238,.20) 0%, transparent 60%);
    filter: blur(18px);
    z-index:-1;
}

/* soft haze edges */
.layer.haze{
    background:
            radial-gradient(120% 120% at 50% 50%, rgba(124,58,237,.18) 0%, transparent 60%),
            radial-gradient(120% 120% at 60% 55%, rgba(34,211,238,.16) 0%, transparent 62%);
    mix-blend-mode: screen;
    opacity:.85;
}

@keyframes drift{
    0%   { transform: translateX(0) translateY(0) rotate(0deg) }
    25%  { transform: translateX(-14px) translateY(8px) rotate(1.2deg) }
    50%  { transform: translateX(16px) translateY(-10px) rotate(-0.8deg) }
    75%  { transform: translateX(-10px) translateY(6px) rotate(1.0deg) }
    100% { transform: translateX(0) translateY(0) rotate(0deg) }
}

@keyframes hue{
    0%   { filter: hue-rotate(0deg) }
    100% { filter: hue-rotate(360deg) }
}

/* speaking boost */
.orb.speaking{
    transform: scale(1.04);
    animation-duration: 6s;
    filter: drop-shadow(0 36px 140px rgba(124,58,237,.28))
    drop-shadow(0 16px 60px rgba(34,211,238,.22));
}
.orb.idle{ opacity:.98 }

/* button */
.controls{ display:flex; justify-content:center; margin-top: 6px; }
.btn-cta{
    background: linear-gradient(34deg, #172365, #49aeff);
    border: 0;
    color:#fff;
    font-size: 18px;
    padding: 16px 28px;
    min-width: clamp(240px, 60vw, 380px);
    border-radius: 999px;
    box-shadow: 0 12px 36px rgba(124,58,237,.35);
}
@media (max-width: 480px){
    .btn-cta{
        font-size: 18px;
        padding: 18px 30px;            /* ещё чуть больше на маленьких */
    }
}
.btn-cta:hover{ transform: translateY(-1px); filter:brightness(1.05) }
.btn-cta.active{ background: linear-gradient(90deg, #ef4444, #f59e0b); /* Stop mode */ }

/* status */
.status{ color:var(--muted); text-align:center; display:grid; gap:6px }

/* modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:50 }
.hidden{ display:none !important }
.modal-dialog{
    width:min(680px, 94vw);
    background:var(--panel); color:var(--text);
    border:1px solid #1c2142; border-radius:16px; padding:16px;
    box-shadow:0 20px 100px rgba(0,0,0,.45);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.modal-head h3{ margin:0; font-size:18px }
.x{ background:transparent; color:var(--muted); border:0; font-size:18px; cursor:pointer }

/* agent cards */
.agent-grid{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px; margin-top:6px;
}
.agents { display: grid; gap: 10px; }

.agent{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
    border-radius: 16px;
    background: rgba(30,33,40,.6);
    border: 1px solid rgba(255,255,255,.06);
    color: #e6e9f4;
    text-align: left;
}
.agent:hover{ border-color: var(--c2); transform: translateY(-1px) }
.agent.active{ border-color: var(--c3); box-shadow: 0 0 0 3px rgba(16,185,129,.25) }
.agent img{ width:42px; height:42px; border-radius:12px; object-fit:cover }
.agent .meta{ display:flex; flex-direction:column }
.agent .meta .title{ font-weight:700; color: #fff }
.agent .meta .name{ font-size:12px; color:var(--muted); margin-top:2px; text-align: left }

.agent .avatar{
    width: 44px; height: 44px;
    border-radius: 12px;
    object-fit: cover;
}
.agent .lang-badge{
    position: absolute;
    top: 8px;                 /* <-- если хочешь по центру правого края: top:50%; transform:translateY(-50%); */
    right: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    padding: 3px;            /* маленькое поле внутри */
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
}

.agent.active{
    outline: 2px solid #22d3ee;
    background: rgba(34,211,238,.08);
}

@media (max-width: 480px){
    .agent{ padding: 10px 12px; }
    .agent .avatar{ width: 38px; height: 38px; }
    .agent .lang-badge{ width: 20px; height: 20px; top: 6px; right: 8px; }
}

.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px }
.btn{
    background:#15182b; color:var(--text); border:1px solid #262b4a;
    padding:10px 16px; border-radius:12px; cursor:pointer;
}
.btn.primary{ background: linear-gradient(34deg, #172365, #49aeff); border:0; font-weight:700 }
.btn.ghost{ background:transparent }
.voice-gif.dim { opacity: .45; transition: opacity .2s ease; }

.status{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    width: 100%;
    text-align: center;
    line-height: 1.35;
    font-size: 14px;
    color: #cfd6e6;
    z-index: 40;
    pointer-events: none;           /* чтобы не мешал кликам */
}

/* для аккуратности на очень высоких экранах */
@media (min-height: 900px){
    .status{ bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
}