/* Syntecian AI beta entry announcement — isolated from the main AI workspace styles. */
body.beta-notice-open { overflow: hidden; }

.beta-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s step-end;
}
.beta-notice-overlay.is-closing { opacity: 0; visibility: hidden; pointer-events: none; }
.beta-notice-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 15%, rgba(39,215,238,.11), transparent 38%),
        radial-gradient(circle at 78% 70%, rgba(144,104,255,.10), transparent 42%),
        rgba(3,9,15,.88);
    backdrop-filter: blur(16px) saturate(1.12);
}
.beta-notice-panel {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    max-height: min(780px, calc(100vh - 48px));
    overflow: auto;
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid rgba(116,224,239,.18);
    border-radius: 28px;
    color: #eef7fb;
    background: linear-gradient(155deg, rgba(8,25,34,.96), rgba(8,13,28,.97));
    box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
}
.beta-notice-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(39,215,238,.55), rgba(211,183,75,.36), rgba(154,105,255,.44), rgba(39,215,238,.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .7;
}
.beta-notice-cloud {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 17px;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.beta-notice-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(39,215,238,.24));
}
.beta-notice-halo {
    position: absolute;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    z-index: 1;
    background:
        radial-gradient(circle at 38% 38%, rgba(39,215,238,.23), transparent 54%),
        radial-gradient(circle at 66% 64%, rgba(148,101,255,.19), transparent 58%),
        radial-gradient(circle, rgba(213,185,75,.09), transparent 67%);
    filter: blur(13px);
    opacity: .85;
    animation: betaHaloBreathe 2.6s ease-in-out infinite;
}
@keyframes betaHaloBreathe {
    0%,100% { transform: scale(.9); opacity: .55; }
    50% { transform: scale(1.13); opacity: .98; }
}
.beta-notice-badge {
    width: fit-content;
    margin: 0 auto 14px;
    padding: 7px 11px;
    border: 1px solid rgba(213,185,75,.26);
    border-radius: 999px;
    color: #e5cf78;
    background: rgba(213,185,75,.07);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .16em;
}
.beta-notice-panel h1 {
    margin: 0 0 18px;
    text-align: center;
    font-size: clamp(1.65rem, 5vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.beta-notice-copy { color: rgba(232,243,248,.79); font-size: 1rem; line-height: 1.72; }
.beta-notice-copy p { margin: 0 0 13px; }
.beta-notice-callout {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 22px 0;
    padding: 14px 16px;
    border: 1px solid rgba(39,215,238,.12);
    border-radius: 16px;
    color: rgba(232,243,248,.73);
    background: rgba(39,215,238,.045);
    line-height: 1.5;
    font-size: .91rem;
}
.beta-notice-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #2bd7ee;
    box-shadow: 0 0 12px rgba(43,215,238,.75);
}
.beta-notice-enter {
    display: block;
    width: min(100%, 360px);
    min-height: 52px;
    margin: 4px auto 12px;
    border: 0;
    border-radius: 16px;
    color: #071018;
    background: linear-gradient(100deg, #d6bc52, #55d9df 72%, #30cddd);
    font: inherit;
    font-weight: 900;
    letter-spacing: .025em;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(39,215,238,.12);
    transition: transform .18s ease, filter .18s ease;
}
.beta-notice-enter:hover { transform: translateY(-1px); filter: brightness(1.06); }
.beta-notice-enter:focus-visible { outline: 3px solid rgba(39,215,238,.44); outline-offset: 3px; }
.beta-notice-footnote { margin: 0; text-align: center; color: rgba(210,225,234,.43); font-size: .78rem; line-height: 1.45; }
@keyframes betaOrbit { to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)); } }
@keyframes betaPulse {
    0%,100% { opacity:.42; filter:brightness(.88) saturate(.95); }
    50% { opacity:1; filter:brightness(1.35) saturate(1.25); }
}
@keyframes betaCloudFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes betaAura { 0%,100%{transform:scale(.9);opacity:.35} 50%{transform:scale(1.16);opacity:.7} }
@media (max-width: 560px) {
    .beta-notice-overlay { padding: 14px; }
    .beta-notice-panel { padding: 27px 20px 24px; border-radius: 22px; }
    .beta-notice-cloud { width: 92px; height: 92px; margin-bottom: 13px; }
    .beta-notice-copy { font-size: .93rem; }
}
@media (prefers-reduced-motion: reduce) {
    .beta-notice-halo { animation: none !important; opacity: .72; }
    .beta-notice-overlay, .beta-notice-enter { transition: none !important; }
}
