/* 
  AI Thinking Mode Styles
  Liquid Glass Design System
*/

:root{
    --thinking-glass:rgba(255,255,255,0.05);
    --thinking-border:rgba(255,255,255,0.1);
    --thinking-accent:#888888;/* Grey Accent */
    --thinking-success:#FFFFFF;
}

.thinking-container{
    margin:1rem 0;
    padding:1.25rem;
    background:var(--thinking-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--thinking-border);
    border-radius:20px;
    box-shadow:0 8px 32px 0 rgba(0,0,0,0.1);
    font-family:'Inter',sans-serif;
    color:var(--text-primary);
    overflow:hidden;
    transition:all 0.5s cubic-bezier(0.19,1,0.22,1);
    max-width:90%;
    animation:slideIn 0.6s ease-out;
}

@keyframes slideIn{
    from{opacity:0;transform:translateY(10px) scale(0.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

.thinking-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1rem;
    font-weight:600;
    font-size:0.9rem;
    letter-spacing:-0.01em;
}

.thinking-badge{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--thinking-accent);
}

.thinking-dot{
    width:8px;
    height:8px;
    background:var(--thinking-accent);
    border-radius:50%;
    box-shadow:0 0 10px var(--thinking-accent);
    animation:pulseGlow 1.5s infinite alternate;
}

@keyframes pulseGlow{
    from{transform:scale(1);opacity:0.5;}
    to{transform:scale(1.3);opacity:1;box-shadow:0 0 15px var(--thinking-accent);}
}

.thinking-steps{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.thinking-step{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:0.85rem;
    color:var(--text-secondary);
    transition:all 0.3s ease;
    opacity:0.6;
}

.thinking-step.active{
    opacity:1;
    color:var(--text-primary);
    transform:translateX(4px);
}

.thinking-step.completed{
    opacity:0.8;
    color:var(--thinking-success);
}

.step-icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--thinking-border);
    font-size:0.7rem;
    transition:all 0.3s ease;
}

.thinking-step.active .step-icon{
    border-color:var(--thinking-accent);
    color:var(--thinking-accent);
}

.thinking-step.completed .step-icon{
    background:rgba(52,199,89,0.1);
    border-color:var(--thinking-success);
    color:var(--thinking-success);
}

/* Toggle Switch Styles */
.mode-toggle-container{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0.5rem 1rem;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--thinking-border);
    border-radius:100px;
    margin-bottom:1rem;
    width:fit-content;
}

.toggle-label{
    font-size:0.75rem;
    font-weight:500;
    color:var(--text-secondary);
}

.switch{
    position:relative;
    display:inline-block;
    width:34px;
    height:20px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#333;
    transition:.4s;
    border-radius:34px;
}

.slider:before{
    position:absolute;
    content:"";
    height:14px;
    width:14px;
    left:3px;
    bottom:3px;
    background-color:white;
    transition:.4s;
    border-radius:50%;
}

input:checked  .slider{
    background-color:var(--thinking-accent);
}

input:checked  .slider:before{
    transform:translateX(14px);
}

.brain-pulse{
    font-size:1.2rem;
    animation:brainWave 2s infinite ease-in-out;
}

@keyframes brainWave{
    0%,100%{transform:scale(1);filter:drop-shadow(0 0 0px var(--thinking-accent));}
    50%{transform:scale(1.1);filter:drop-shadow(0 0 10px var(--thinking-accent));}
}