/* ============================================
   NOVARA AI — premium AI controls (v2: flashy)
   ============================================ */

.novara-row{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:-4px 0 18px;
    padding:14px 16px;
    background:
        linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(139,92,246,0.16) 50%, rgba(56,189,248,0.14) 100%);
    border:1.5px solid rgba(139,92,246,0.45);
    border-radius:14px;
    align-items:center;
    box-shadow:
        0 0 0 1px rgba(139,92,246,0.10),
        0 8px 24px -10px rgba(99,102,241,0.45),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow:hidden;
    isolation:isolate;
}
/* Animated aurora glow behind the row */
.novara-row::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(40% 60% at 20% 50%, rgba(139,92,246,0.35), transparent 60%),
        radial-gradient(40% 60% at 80% 50%, rgba(56,189,248,0.30), transparent 60%);
    filter:blur(20px);
    opacity:0.55;
    z-index:-1;
    animation:novaraAurora 8s ease-in-out infinite alternate;
}
@keyframes novaraAurora{
    0%   { transform:translateX(-8%) translateY(-4%); }
    100% { transform:translateX(8%)  translateY(4%); }
}

.novara-row-label{
    font-size:12.5px;
    font-weight:800;
    color:#c7d2fe;
    text-transform:uppercase;
    letter-spacing:1.4px;
    margin-right:4px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-shadow:0 0 12px rgba(167,139,250,0.5);
}
.novara-row-label::before{
    content:"✦";
    color:#a78bfa;
    font-size:18px;
    display:inline-block;
    animation:novaraSparkle 2.4s ease-in-out infinite;
    text-shadow:0 0 10px rgba(167,139,250,0.9);
}
@keyframes novaraSparkle{
    0%, 100% { transform:scale(1) rotate(0deg);   opacity:1; }
    50%      { transform:scale(1.25) rotate(180deg); opacity:0.7; }
}
/* "NEW" badge */
.novara-row-label::after{
    content:"NEW";
    margin-left:4px;
    padding:2px 7px;
    font-size:9.5px;
    font-weight:900;
    letter-spacing:1px;
    color:#1e1b4b;
    background:linear-gradient(135deg, #fde047, #fbbf24);
    border-radius:6px;
    box-shadow:0 0 10px rgba(251,191,36,0.6), 0 1px 0 rgba(0,0,0,0.2) inset;
    animation:novaraNewPulse 1.8s ease-in-out infinite;
}
@keyframes novaraNewPulse{
    0%, 100% { box-shadow:0 0 10px rgba(251,191,36,0.55), 0 1px 0 rgba(0,0,0,0.2) inset; }
    50%      { box-shadow:0 0 18px rgba(251,191,36,0.95), 0 1px 0 rgba(0,0,0,0.2) inset; }
}

.novara-btn{
    all:unset;
    box-sizing:border-box;
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 18px;
    border-radius:10px;
    background:linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    background-size:200% 100%;
    color:white;
    font-size:13px;
    font-weight:800;
    line-height:1;
    letter-spacing:0.3px;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background-position .4s ease;
    box-shadow:
        0 6px 18px -6px rgba(139,92,246,0.7),
        0 0 0 1px rgba(255,255,255,0.08) inset;
    white-space:nowrap;
    text-shadow:0 1px 1px rgba(0,0,0,0.18);
    overflow:hidden;
}
/* Subtle constant shimmer sweep so users notice the button */
.novara-btn::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:50%;
    height:100%;
    background:linear-gradient(110deg, transparent, rgba(255,255,255,0.45), transparent);
    transform:skewX(-20deg);
    animation:novaraSweep 3.2s ease-in-out infinite;
    pointer-events:none;
}
@keyframes novaraSweep{
    0%   { left:-60%; }
    60%  { left:120%; }
    100% { left:120%; }
}
.novara-btn:hover:not(:disabled){
    transform:translateY(-2px);
    background-position:100% 0;
    box-shadow:
        0 12px 28px -8px rgba(139,92,246,0.85),
        0 0 0 1px rgba(255,255,255,0.15) inset;
}
.novara-btn:active:not(:disabled){ transform:translateY(0); }
.novara-btn:disabled{ opacity:0.55; cursor:not-allowed; }
.novara-btn:disabled::before{ display:none; }
.novara-btn:focus-visible{ outline:2px solid #fde047; outline-offset:3px; }

.novara-btn-sm{
    padding:9px 14px;
    font-size:12px;
    border-radius:9px;
}

.novara-icon{
    font-size:15px;
    line-height:1;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.5));
}

.novara-row-inline{
    display:flex;
    justify-content:flex-end;
    margin-top:-6px;
    margin-bottom:6px;
    padding:10px 12px;
    background:
        linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.10) 100%);
    border:1px dashed rgba(167,139,250,0.45);
    border-radius:10px;
}

/* Loading state — pulses the gradient + shows a spinner */
.novara-btn.is-novara-loading{
    background:linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899, #4f46e5);
    background-size:300% 100%;
    animation:novaraShimmer 1.4s ease-in-out infinite;
    cursor:progress;
}
.novara-btn.is-novara-loading::before{ display:none; }
@keyframes novaraShimmer{
    0%   { background-position:0% 50%; }
    100% { background-position:300% 50%; }
}
.novara-spinner{
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,0.35);
    border-top-color:white;
    border-radius:50%;
    animation:novaraSpin 0.7s linear infinite;
    flex-shrink:0;
}
@keyframes novaraSpin{ to { transform:rotate(360deg); } }
.novara-loading-text{ font-size:12.5px; }

/* Streaming indicator on the textarea while text is being written */
textarea[data-novara-streaming="1"],
input[data-novara-streaming="1"]{
    border-color:#a78bfa !important;
    box-shadow:
        0 0 0 3px rgba(167,139,250,0.22),
        0 0 24px rgba(139,92,246,0.35) !important;
    transition:border-color .2s, box-shadow .2s;
}

/* Tiny "powered by" badge */
.novara-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    color:#c7d2fe;
    margin-left:auto;
    padding:4px 9px;
    background:rgba(15,23,42,0.35);
    border:1px solid rgba(167,139,250,0.25);
    border-radius:999px;
    opacity:0.95;
    font-weight:600;
    letter-spacing:0.3px;
}
.novara-badge::before{
    content:"✦";
    color:#a78bfa;
    text-shadow:0 0 6px rgba(167,139,250,0.8);
}

@media (max-width:640px){
    .novara-row{ padding:12px 12px; gap:8px; border-radius:12px; }
    .novara-row-label{ font-size:11.5px; letter-spacing:1.1px; width:100%; margin-bottom:4px; }
    .novara-btn{ padding:10px 14px; font-size:12.5px; flex:1 1 auto; }
    .novara-badge{ font-size:10px; padding:3px 7px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
    .novara-row::before,
    .novara-row-label::before,
    .novara-row-label::after,
    .novara-btn::before{ animation:none !important; }
}