/* Shotlist Studio glass shell. Theme variables are supplied by shotlist.css. */

/* 環境氛圍光 */
body::before, body::after {
    content: ''; position: fixed; z-index: -1; pointer-events: none;
    border-radius: 50%; opacity: 0.6;
    transition: all 1s ease;
    filter: blur(100px);
}
body::before {
    top: -10%; left: -10%; width: 50vw; height: 50vw;
    background: radial-gradient(circle, var(--color-accent-shadow) 0%, transparent 70%);
}
body::after {
    bottom: -20%; right: -10%; width: 60vw; height: 60vw;
    background: radial-gradient(circle, var(--color-accent-shadow) 0%, transparent 60%);
    opacity: 0.4;
}
body.mode-light::before, body.mode-light::after { opacity: 0.8; filter: blur(80px); }

/* Liquid Glass UI Core Classes */
.liquid-glass {
    background: rgba(20, 24, 30, 0.35) !important;
    backdrop-filter: blur(32px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.5rem !important;
}
body.mode-light .liquid-glass {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important;
}

/* 淺色模式下強化面板陰影 */
body.mode-light #assistant-panel {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 20px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(255, 255, 255, 0.7) !important;
}

.glass-element {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255,255,255,0.05);
    border-radius: 9999px;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.glass-element:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}
body.mode-light .glass-element {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.03), inset 0 2px 3px rgba(255,255,255,0.9);
    color: #334155;
}
body.mode-light .glass-element:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
}

.glass-btn-primary {
    background: var(--color-accent) !important;
    color: var(--color-accent-fg) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 25px -5px var(--color-accent-shadow), inset 0 -3px 6px rgba(0,0,0,0.15), inset 0 3px 6px rgba(255,255,255,0.4) !important;
    border-radius: 9999px !important;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-shadow: 0 1px 2px rgba(255,255,255,0.2);
}
.glass-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px var(--color-accent-shadow), inset 0 -3px 6px rgba(0,0,0,0.15), inset 0 3px 6px rgba(255,255,255,0.6) !important;
    filter: brightness(1.1);
}
.glass-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 5px 15px -5px var(--color-accent-shadow), inset 0 3px 6px rgba(0,0,0,0.2) !important;
}

.glass-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.glass-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 0 10px 0 var(--color-accent-shadow);
}
body.mode-light .glass-input {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    color: #0f172a;
}
body.mode-light .glass-input:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--color-accent);
}

body.mode-light #project-title,
body.mode-light #project-notes {
    border-color: rgba(15, 23, 42, 0.3);
}
body.mode-light #project-title:focus,
body.mode-light #project-notes:focus {
    border-color: var(--color-accent);
}

.glass-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(39,39,42,.8);
    border: 1.5px solid rgba(var(--accent-rgb),.78);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.09);
    width:18px; height:18px; border-radius:6px;
    flex:none; margin:0; padding:0; box-sizing:border-box;
    display:inline-grid; place-items:center; vertical-align:middle;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.glass-checkbox:checked {
    background:rgb(var(--accent-rgb));
    border-color:rgb(var(--accent-rgb));
    box-shadow:0 2px 7px rgba(var(--accent-glow-rgb),.28);
}
.glass-checkbox:checked::after {
    content:''; width:8px; height:5px; box-sizing:border-box;
    border-left:2px solid rgb(var(--accent-text-rgb));
    border-bottom:2px solid rgb(var(--accent-text-rgb));
    transform:translateY(-1px) rotate(-45deg);
}
.glass-checkbox:focus-visible { outline:2px solid rgb(var(--accent-rgb)); outline-offset:3px; }
body.mode-light .glass-checkbox {
    background:rgba(255,255,255,.64);
}
body.mode-light .glass-checkbox:checked {
    background:rgb(var(--accent-rgb));
}

body.mode-light #assistant-panel button:not(.color-btn):not(.glass-btn-primary):not(.glass-checkbox) { 
    background-color: rgba(255,255,255,0.7) !important; 
    border-color: rgba(255,255,255,0.9) !important; 
    color: #334155 !important; 
}
body.mode-light #assistant-panel button:not(.color-btn):not(.glass-btn-primary):not(.glass-checkbox):hover { 
    background-color: #ffffff !important; 
    color: #0f172a !important; 
}

/* Floating orb, panel surface and Dock are supplied by glasspanel.js. */