/* ============================================================ EDITIQ v2.7 — style.css DESIGN: Claude-inspired UI - Warm off-white backgrounds (#faf9f7 light / #1a1915 dark) - Soft amber/orange accent replaced with violet (var(--accent)) - Claude-style rounded chat bubbles, generous padding - Sidebar: minimal, clean, icon+label nav - Input bar: Claude's pill-shaped bottom bar - Cards: soft shadows, no harsh borders - Typography: Inter-like feel with Poppins - Smooth everywhere ============================================================ */ /* ── LIGHT THEME ─────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #faf9f7; --bg-secondary: #f3f2ef; --sidebar-bg: #f3f2ef; --surface: #ffffff; --surface-alt: #f3f2ef; --surface-hover: #ebe9e4; --border: #e8e6e1; --border-soft: #f0ede8; --text-primary: #1a1915; --text-secondary: #5c5a56; --text-muted: #9b9890; --accent: #e07240; --accent-light: #fff3ed; --accent-hover: #c45e2e; --accent-glow: rgba(224,114,64,.15); --user-msg-bg: #f3f2ef; --ai-msg-bg: transparent; --shadow-xs: 0 1px 3px rgba(0,0,0,.05); --shadow-sm: 0 2px 8px rgba(0,0,0,.07); --shadow-md: 0 4px 20px rgba(0,0,0,.08); --shadow-lg: 0 8px 36px rgba(0,0,0,.10); --shadow-xl: 0 20px 64px rgba(0,0,0,.12); --danger: #dc2626; --danger-light: #fef2f2; --warning-bg: #fffbeb; --warning-border: #fde68a; --warning-text: #92400e; --input-bg: #ffffff; --input-border: #dddbd6; } /* ── DARK THEME ──────────────────────────────────────── */ [data-theme="dark"] { --bg: #1a1915; --bg-secondary: #211f1a; --sidebar-bg: #1f1d19; --surface: #272420; --surface-alt: #2e2b26; --surface-hover: #353128; --border: #38352e; --border-soft: #302d28; --text-primary: #f5f3ef; --text-secondary: #a8a49c; --text-muted: #6b6760; --accent: #f5935e; --accent-light: #3d1f0e; --accent-hover: #f7b08a; --accent-glow: rgba(245,147,94,.15); --user-msg-bg: #2e2b26; --ai-msg-bg: transparent; --shadow-xs: 0 1px 3px rgba(0,0,0,.3); --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 4px 20px rgba(0,0,0,.5); --shadow-lg: 0 8px 36px rgba(0,0,0,.6); --shadow-xl: 0 20px 64px rgba(0,0,0,.7); --danger: #f87171; --danger-light: #2d1212; --warning-bg: #1c1400; --warning-border: #3d2e00; --warning-text: #fde68a; --input-bg: #272420; --input-border: #38352e; } /* ════════════════════════════════════════════════════════ PALETTE: PREMIUM PASTEL (teal + gold, cream neutrals) Second preset theme — light + dark variants. Activated via [data-palette="pastel"] on , layered on top of the light/dark mode variables above. ════════════════════════════════════════════════════════ */ [data-palette="pastel"][data-theme="light"] { --bg: #FAFAF7; --bg-secondary: #F0EFE9; --sidebar-bg: #1B2430; --surface: #FFFFFF; --surface-alt: #F0EFE9; --surface-hover: #E5E3DC; --border: #E5E3DC; --border-soft: #EDEBE4; --text-primary: #1B2430; --text-secondary: #5F6B7A; --text-muted: #94A1B0; --accent: #0D7377; --accent-light: #E0F2F1; --accent-hover: #0A5E61; --accent-glow: rgba(13,115,119,.15); --gold: #B8860B; --gold-light: #FFF9EC; --user-msg-bg: #F0EFE9; --ai-msg-bg: transparent; --shadow-xs: 0 1px 3px rgba(27,36,48,.04); --shadow-sm: 0 4px 16px rgba(27,36,48,.05); --shadow-md: 0 8px 24px rgba(27,36,48,.06); --shadow-lg: 0 12px 36px rgba(27,36,48,.07); --shadow-xl: 0 24px 64px rgba(27,36,48,.10); --danger: #B83232; --danger-light: #FDF2F2; --warning-bg: #FFF9EC; --warning-border: #F5E6C0; --warning-text: #9A7209; --input-bg: #FFFFFF; --input-border: #D4D0C6; } [data-palette="pastel"][data-theme="dark"] { /* Dark adaptation — keeps the teal/gold identity, deep navy-charcoal base */ --bg: #11161D; --bg-secondary: #161C24; --sidebar-bg: #0D1117; --surface: #1A212B; --surface-alt: #202833; --surface-hover: #28313D; --border: #2B333F; --border-soft: #242C37; --text-primary: #EDEEEA; --text-secondary: #9BA5B3; --text-muted: #6B7585; --accent: #2BB3A8; --accent-light: #143632; --accent-hover: #4FCFC3; --accent-glow: rgba(43,179,168,.18); --gold: #D9A53C; --gold-light: #2A2114; --user-msg-bg: #202833; --ai-msg-bg: transparent; --shadow-xs: 0 1px 3px rgba(0,0,0,.35); --shadow-sm: 0 2px 8px rgba(0,0,0,.45); --shadow-md: 0 4px 20px rgba(0,0,0,.55); --shadow-lg: 0 8px 36px rgba(0,0,0,.65); --shadow-xl: 0 20px 64px rgba(0,0,0,.75); --danger: #E47272; --danger-light: #2A1414; --warning-bg: #2A2114; --warning-border: #3D2E00; --warning-text: #E8C66B; --input-bg: #1A212B; --input-border: #2B333F; } /* ════════════════════════════════════════════════════════ PALETTE: CUSTOM (Pro/Max only) Populated dynamically via JS from the custom theme builder. Each color falls back to the violet defaults until the user actually picks something in Settings → Appearance → Custom. ════════════════════════════════════════════════════════ */ [data-palette="custom"] { --accent: var(--custom-accent, #e07240); --accent-hover: var(--custom-accent-hover, #c45e2e); --accent-light: var(--custom-accent-light, #fff3ed); --accent-glow: var(--custom-accent-glow, rgba(224,114,64,.15)); --bg: var(--custom-bg, #faf9f7); --surface: var(--custom-surface, #ffffff); --sidebar-bg: var(--custom-sidebar, #1f1d19); --text-primary: var(--custom-text, #1a1915); } :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-full: 9999px; --sidebar-w: 248px; --topbar-h: 52px; --transition: .16s ease; --transition-slow: .28s ease; } /* ── RESET ───────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{font-size:15px;height:100%;} body{ font-family:'Poppins',sans-serif; background:var(--bg);color:var(--text-primary); height:100%;overflow:hidden; -webkit-font-smoothing:antialiased; transition:background var(--transition-slow),color var(--transition-slow); } a{color:var(--accent);text-decoration:none;} button{cursor:pointer;font-family:inherit;border:none;background:none;} input,textarea,select{font-family:inherit;} /* ═══════════════════════════════════════════════ ONBOARDING — Claude-style centered card ═══════════════════════════════════════════════ */ .onboarding-overlay{ position:fixed;inset:0;z-index:2000; background:rgba(0,0,0,.5);backdrop-filter:blur(12px); display:flex;align-items:center;justify-content:center; padding:20px;animation:fadeIn .3s ease; } .onboarding-modal{ background:var(--surface);border-radius:var(--radius-2xl); width:100%;max-width:660px;max-height:92vh;overflow-y:auto; box-shadow:var(--shadow-xl);animation:modalSlide .3s ease; display:flex;flex-direction:column; border:1px solid var(--border); } .onboarding-header{padding:36px 32px 22px;text-align:center;} .onboarding-logo{ font-size:1.5rem;font-weight:700;color:var(--accent); margin-bottom:16px;letter-spacing:-.5px; } .onboarding-title{ font-size:1.55rem;font-weight:700;letter-spacing:-.6px; margin-bottom:8px;color:var(--text-primary); } .onboarding-subtitle{font-size:.85rem;color:var(--text-muted);line-height:1.7;max-width:380px;margin:0 auto;} .onboarding-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:10px;padding:20px 32px; } .onboarding-card{ border:1.5px solid var(--border);border-radius:var(--radius-lg); padding:22px 14px 16px;text-align:center;cursor:pointer; background:var(--surface-alt);position:relative; transition:all var(--transition); } .onboarding-card:hover{ border-color:var(--accent);background:var(--accent-light); transform:translateY(-2px);box-shadow:var(--shadow-sm); } .onboarding-card.selected{ border-color:var(--accent);background:var(--accent-light); box-shadow:0 0 0 3px var(--accent-glow); } .onboarding-card.selected::after{ content:'✓';position:absolute;top:8px;right:10px; font-size:.65rem;font-weight:700;color:var(--accent); background:var(--surface);width:18px;height:18px; border-radius:50%;display:flex;align-items:center;justify-content:center; } .onboarding-card-icon{font-size:2.8rem;margin-bottom:10px;display:block;line-height:1;} .onboarding-card-title{font-size:.82rem;font-weight:600;color:var(--text-primary);} .onboarding-footer{ padding:16px 32px 28px;display:flex;justify-content:center; border-top:1px solid var(--border-soft); } /* ═══════════════════════════════════════════════ AUTH MODAL — sign in / sign up gate ═══════════════════════════════════════════════ */ .auth-overlay{ position:fixed;inset:0;z-index:2100; /* above onboarding */ background:rgba(0,0,0,.5);backdrop-filter:blur(12px); display:flex;align-items:center;justify-content:center; padding:20px;animation:fadeIn .3s ease; } .auth-modal{ background:var(--surface);border-radius:var(--radius-2xl); width:100%;max-width:420px;max-height:92vh;overflow-y:auto; box-shadow:var(--shadow-xl);animation:modalSlide .3s ease; border:1px solid var(--border);padding:0 0 24px; } .auth-header{padding:32px 28px 18px;text-align:center;} .auth-logo{font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:14px;letter-spacing:-.5px;} .auth-title{font-size:1.3rem;font-weight:700;letter-spacing:-.5px;margin-bottom:6px;color:var(--text-primary);} .auth-subtitle{font-size:.8rem;color:var(--text-muted);line-height:1.6;} .auth-tabs{ display:flex;gap:4px;padding:0 24px;margin-bottom:18px; border-bottom:1px solid var(--border-soft); } .auth-tab{ flex:1;padding:10px 0;font-size:.78rem;font-weight:600; color:var(--text-muted);background:none;border:none;cursor:pointer; border-bottom:2px solid transparent;transition:color var(--transition),border-color var(--transition); } .auth-tab.active{color:var(--accent);border-bottom-color:var(--accent);} .auth-panel{display:none;padding:0 28px;flex-direction:column;gap:12px;} .auth-panel.active{display:flex;} .auth-field{display:flex;flex-direction:column;gap:6px;} .auth-label{font-size:.74rem;font-weight:600;color:var(--text-secondary);} .auth-input{width:100%;padding:10px 13px;font-size:.85rem;} .auth-hint{font-size:.68rem;color:var(--text-muted);} .auth-billing-notice{ background:var(--accent-light);border:1px solid rgba(245,147,94,.25); border-radius:var(--radius-md);padding:10px 12px; font-size:.72rem;line-height:1.6;color:var(--text-secondary); margin-bottom:4px; } .auth-error{font-size:.74rem;color:var(--danger);min-height:0;line-height:1.5;} .auth-error:empty{display:none;} .auth-submit-btn{width:100%;justify-content:center;padding:11px 0;font-size:.84rem;} .auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;} .auth-google-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.7;margin-bottom:8px;} .auth-skip-btn{ display:block;width:calc(100% - 56px);margin:18px auto 0; text-align:center;font-size:.76rem;color:var(--text-muted); background:none;border:none;cursor:pointer;text-decoration:underline; text-decoration-color:var(--border); } .auth-skip-btn:hover{color:var(--text-secondary);} #recaptcha-container{margin-top:2px;} /* ── Auth status box (inside Settings → Account) ──────────── */ .auth-status-box{display:flex;flex-direction:column;gap:10px;} .auth-status-row{display:flex;align-items:center;gap:9px;} .auth-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .auth-status-on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);} .auth-status-off{background:var(--text-muted);} .auth-status-label{font-size:.8rem;color:var(--text-secondary);} /* ═══════════════════════════════════════════════ APP SHELL ═══════════════════════════════════════════════ */ #app{ display:flex; height:100vh;height:100dvh; width:100vw;overflow:hidden; } /* MOBILE TOPBAR */ .mobile-topbar{ display:none;position:fixed;top:0;left:0;right:0; height:var(--topbar-h); background:var(--bg);border-bottom:1px solid var(--border-soft); align-items:center;justify-content:space-between; padding:0 16px;z-index:300; } .mobile-topbar-logo{font-size:.95rem;font-weight:700;color:var(--text-primary);} .hamburger-btn{ width:34px;height:34px;border-radius:var(--radius-md); display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;background:var(--surface-alt); } .hamburger-btn span{display:block;width:16px;height:1.5px;background:var(--text-primary);border-radius:2px;} /* SIDEBAR OVERLAY */ .sidebar-overlay{ display:none;position:fixed;inset:0; background:rgba(0,0,0,.4);z-index:399; } .sidebar-overlay.visible{display:block;} /* ── SIDEBAR — Claude minimal style ────────── */ #sidebar{ width:var(--sidebar-w);min-width:var(--sidebar-w); background:var(--sidebar-bg); border-right:1px solid var(--border-soft); display:flex;flex-direction:column; padding:12px 8px;gap:2px; overflow:hidden;flex-shrink:0; height:100%;z-index:400; transition:opacity var(--transition),transform var(--transition-slow); } .sidebar-logo{ display:flex;align-items:center;gap:9px; padding:8px 10px 14px; margin-bottom:4px; } .logo-icon{font-size:17px;} .logo-text{font-size:.95rem;font-weight:700;letter-spacing:-.3px;flex:1;color:var(--text-primary);} .version-tag{ font-size:.54rem;font-weight:700; background:var(--accent-light);color:var(--accent); padding:2px 6px;border-radius:var(--radius-full); border:1px solid rgba(224,114,64,.2); } .sidebar-actions{display:flex;flex-direction:column;gap:4px;padding:0 2px;margin-bottom:6px;} .btn-new-chat{ display:flex;align-items:center;gap:8px;padding:9px 12px; background:var(--accent);color:#fff; border-radius:var(--radius-lg);font-size:.8rem;font-weight:600;width:100%; transition:background var(--transition),transform var(--transition); box-shadow:0 2px 10px var(--accent-glow); } .btn-new-chat svg{width:13px;height:13px;flex-shrink:0;} .btn-new-chat:hover{background:var(--accent-hover);transform:translateY(-1px);} .btn-temp-chat{ display:flex;align-items:center;gap:8px;padding:8px 12px; background:transparent;border:1px solid var(--border); color:var(--text-secondary);border-radius:var(--radius-lg); font-size:.78rem;font-weight:500;width:100%; transition:background var(--transition),color var(--transition),border-color var(--transition); } .btn-temp-chat svg{width:13px;height:13px;flex-shrink:0;} .btn-temp-chat:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--border);} .sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:0 2px;} .nav-item{ display:flex;align-items:center;gap:9px;padding:8px 10px; border-radius:var(--radius-md);font-size:.8rem;font-weight:500; color:var(--text-secondary);width:100%;text-align:left; transition:background var(--transition),color var(--transition); } .nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:.7;} .nav-item:hover{background:var(--surface-hover);color:var(--text-primary);} .nav-item:hover svg{opacity:1;} .nav-item.active{ background:var(--surface);color:var(--text-primary); font-weight:600;box-shadow:var(--shadow-xs); } .nav-item.active svg{stroke:var(--accent);opacity:1;} .sidebar-chats-label{ font-size:.6rem;font-weight:600;text-transform:uppercase; letter-spacing:.9px;color:var(--text-muted); padding:10px 12px 3px; } .sidebar-chat-list{ flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px; padding:0 2px; } .sidebar-chat-list::-webkit-scrollbar{width:3px;} .sidebar-chat-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} .sidebar-chat-item{ padding:6px 10px;border-radius:var(--radius-md);cursor:pointer; font-size:.74rem;color:var(--text-secondary); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background var(--transition),color var(--transition); } .sidebar-chat-item:hover{background:var(--surface-hover);color:var(--text-primary);} .sidebar-chat-item.active{background:var(--surface);color:var(--text-primary);font-weight:600;} .sidebar-footer{ display:flex;flex-direction:column;gap:1px; border-top:1px solid var(--border-soft);padding-top:6px; padding:6px 2px 0; } .sidebar-version{font-size:.62rem;color:var(--text-muted);padding:3px 10px;} #sidebar.sidebar-dimmed{opacity:.3;pointer-events:none;} /* ── Sync banner — visible cloud-sync reminder when not signed in ── */ .sync-banner{ display:flex;flex-direction:column;gap:6px; background:rgba(245,147,94,.1);border:1px solid rgba(245,147,94,.25); border-radius:var(--radius-md);padding:9px 10px;margin:0 4px 8px; color:var(--accent);font-size:.7rem; } .sync-banner svg{flex-shrink:0;opacity:.85;} .sync-banner span{line-height:1.4;color:var(--text-secondary);} .sync-banner button{ background:var(--accent);color:#fff;border:none; padding:6px 10px;border-radius:var(--radius-sm); font-size:.7rem;font-weight:600;cursor:pointer; transition:opacity var(--transition);align-self:flex-start; } .sync-banner button:hover{opacity:.88;} /* ── MAIN CONTENT ─────────────────────────── */ #main-content{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;flex-direction:column;height:100%;} .page{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;} .page.active{display:flex;animation:fadeIn .18s ease;} @keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}} @keyframes modalSlide{from{opacity:0;transform:scale(.97) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}} /* ═══════════════════════════════════════════════ HOME PAGE — asymmetric layout, chatbar NOT dead-center ═══════════════════════════════════════════════ */ #page-home{ overflow-y:auto;background:var(--bg);position:relative; } #page-home.active{display:flex;flex-direction:column;height:100%;} /* Soft radial gradient glow behind the hero text — Gemini-style ambience */ .home-hero-overlay{ position:absolute;top:0;left:0;right:0;height:55%; pointer-events:none;z-index:0; background:radial-gradient(ellipse 70% 60% at 30% 20%,var(--accent-glow) 0%,transparent 70%); } .home-wrapper{ flex:1;display:flex;flex-direction:column;justify-content:center; max-width:760px;width:100%;margin:0 auto; padding:32px 32px 0;position:relative;z-index:1; } .home-hero{text-align:left;width:100%;} .home-badge{ display:inline-flex;align-items:center;gap:6px; background:var(--accent-light);color:var(--accent); font-size:.7rem;font-weight:600;letter-spacing:.3px; padding:4px 14px;border-radius:var(--radius-full); margin-bottom:18px;border:1px solid rgba(224,114,64,.15); } .home-title{ font-size:2.6rem;font-weight:700;line-height:1.15; letter-spacing:-1.1px;margin-bottom:14px; color:var(--text-primary); } .home-title .accent{ background:linear-gradient(135deg,var(--accent),#f7b08a); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } .home-subtitle{ font-size:.92rem;color:var(--text-secondary); max-width:460px;margin:0;line-height:1.8; } /* Bottom-pinned, full-width input bar — like the annotated reference */ .home-chat-area{ width:100%;max-width:820px;margin:0 auto; padding:18px 32px 28px;position:relative;z-index:1; flex-shrink:0; } /* Claude-style bottom input on home */ .home-input-bar{ display:flex;align-items:flex-end;gap:8px; background:var(--input-bg); border:1.5px solid var(--input-border); border-radius:var(--radius-xl); padding:12px 12px 12px 20px; box-shadow:var(--shadow-md); transition:border-color var(--transition),box-shadow var(--transition); } .home-input-bar:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow),var(--shadow-md); } .home-chat-input{ flex:1;background:none;border:none;outline:none;resize:none; font-size:.9rem;color:var(--text-primary);line-height:1.65; max-height:120px;padding:3px 0; } .home-chat-input::placeholder{color:var(--text-muted);} .home-input-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;} .input-hint{font-size:.64rem;color:var(--text-muted);text-align:center;margin-top:9px;} .input-hint kbd{ background:var(--surface-alt);border:1px solid var(--border); border-radius:4px;padding:1px 5px;font-size:.62rem;font-family:inherit; } .credit-inline-label{color:var(--accent);font-weight:600;} /* ═══════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════ */ .btn-primary{ display:inline-flex;align-items:center;gap:7px;padding:10px 22px; background:var(--accent);color:#fff; border-radius:var(--radius-lg);font-size:.85rem;font-weight:600; transition:background var(--transition),transform var(--transition),box-shadow var(--transition); box-shadow:0 2px 10px var(--accent-glow); } .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);} .btn-primary:active{transform:translateY(0);} .btn-primary:disabled{background:var(--border);box-shadow:none;cursor:not-allowed;opacity:.7;transform:none;} .btn-primary.small{padding:7px 15px;font-size:.77rem;border-radius:var(--radius-md);} .btn-secondary{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px; background:var(--surface);color:var(--text-primary); border:1px solid var(--border);border-radius:var(--radius-md); font-size:.8rem;font-weight:500; transition:background var(--transition),border-color var(--transition); } .btn-secondary:hover{background:var(--surface-hover);} .small-btn{padding:6px 12px!important;font-size:.76rem!important;} .btn-danger{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px; background:var(--danger-light);color:var(--danger); border:1px solid var(--danger);border-radius:var(--radius-md); font-size:.8rem;font-weight:600; transition:background var(--transition),color var(--transition); } .btn-danger:hover{background:var(--danger);color:#fff;} /* Send button — Claude's circular send */ .btn-send{ width:34px;height:34px;min-width:34px;border-radius:50%; background:var(--accent); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background var(--transition),transform var(--transition),opacity var(--transition); box-shadow:0 2px 8px var(--accent-glow); } .btn-send:hover{background:var(--accent-hover);transform:scale(1.08);} .btn-send:active{transform:scale(.95);} .btn-send:disabled{background:var(--border);box-shadow:none;cursor:not-allowed;} .btn-send svg{width:13px;height:13px;stroke:#fff;} .icon-loader{animation:spin .8s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ═══════════════════════════════════════════════ SHORTS PAGE ═══════════════════════════════════════════════ */ #page-shorts{background:var(--bg);} .shorts-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 22px 10px;border-bottom:1px solid var(--border-soft); flex-shrink:0;gap:10px;flex-wrap:wrap;background:var(--bg); } .shorts-header-left{display:flex;flex-direction:column;min-width:0;} .shorts-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;} .shorts-title{font-size:1.05rem;font-weight:700;letter-spacing:-.2px;} .shorts-subtitle{font-size:.72rem;color:var(--text-muted);margin-top:1px;} .shorts-search-bar{ display:flex;gap:6px;align-items:center; background:var(--input-bg);border:1px solid var(--input-border); border-radius:var(--radius-full);padding:6px 7px 6px 14px; transition:border-color var(--transition),box-shadow var(--transition); } .shorts-search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} .shorts-search-bar input{background:none;border:none;outline:none;font-size:.79rem;color:var(--text-primary);width:170px;} .shorts-search-bar input::placeholder{color:var(--text-muted);} .shorts-search-bar button{ width:26px;height:26px;border-radius:50%;flex-shrink:0; background:var(--accent);display:flex;align-items:center;justify-content:center; transition:background var(--transition); } .shorts-search-bar button:hover{background:var(--accent-hover);} .shorts-search-bar button svg{width:11px;height:11px;stroke:#fff;} .btn-playlists-viewer{ display:flex;align-items:center;gap:6px;padding:6px 13px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-full);font-size:.77rem;font-weight:500; color:var(--text-secondary);white-space:nowrap; transition:all var(--transition); } .btn-playlists-viewer svg{width:12px;height:12px;} .btn-playlists-viewer:hover{background:var(--accent-light);color:var(--accent);border-color:rgba(224,114,64,.3);} .shorts-categories{ display:flex;gap:6px;padding:8px 22px; overflow-x:auto;flex-shrink:0;scrollbar-width:none; } .shorts-categories::-webkit-scrollbar{display:none;} .cat-btn{ padding:5px 14px;border-radius:var(--radius-full);font-size:.73rem;font-weight:500; background:var(--surface);border:1px solid var(--border); color:var(--text-secondary);white-space:nowrap;flex-shrink:0; transition:all var(--transition); } .cat-btn:hover{background:var(--surface-hover);color:var(--text-primary);} .cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;} .shorts-channel-banner{ margin:0 22px 4px;padding:11px 16px;border-radius:var(--radius-lg); background:var(--accent-light);border:1px solid rgba(224,114,64,.2); display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0; transition:box-shadow var(--transition); } .shorts-channel-banner:hover{box-shadow:var(--shadow-md);} .banner-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;overflow:hidden;} .banner-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;} .banner-info{flex:1;min-width:0;} .banner-name{font-size:.86rem;font-weight:700;color:var(--accent);} .banner-subs{font-size:.7rem;color:var(--text-secondary);margin-top:1px;} .banner-arrow{font-size:1.1rem;color:var(--accent);} .shorts-grid{ flex:1;overflow-y:auto;padding:14px 18px; display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px;align-content:start; } .shorts-grid::-webkit-scrollbar{width:3px;} .shorts-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} .shorts-placeholder{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;text-align:center;} .placeholder-icon{font-size:2.4rem;opacity:.18;} .placeholder-title{font-size:.9rem;font-weight:600;color:var(--text-secondary);} .placeholder-desc{font-size:.76rem;color:var(--text-muted);line-height:1.7;max-width:280px;} .short-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);overflow:visible;cursor:pointer;position:relative; transition:transform var(--transition),box-shadow var(--transition); animation:fadeIn .3s ease both;box-shadow:var(--shadow-xs); } .short-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(224,114,64,.2);} .short-card-wrap{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;position:relative;} .short-thumb{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--surface-alt);display:block;} .short-thumb-placeholder{width:100%;aspect-ratio:3/4;background:linear-gradient(145deg,var(--accent-light),var(--surface-alt));display:flex;align-items:center;justify-content:center;font-size:2rem;} .short-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition);} .short-play-overlay svg{width:40px;height:40px;stroke:#fff;fill:rgba(255,255,255,.12);} .short-card:hover .short-play-overlay{opacity:1;} .short-save-btn{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.5);color:#fff;border-radius:var(--radius-md);padding:4px 8px;font-size:.73rem;cursor:pointer;opacity:0;transition:opacity var(--transition),background var(--transition);z-index:2;backdrop-filter:blur(4px);} .short-card:hover .short-save-btn{opacity:1;} .short-save-btn:hover{background:var(--accent);} .short-info{padding:8px 10px 10px;} .short-title{font-size:.73rem;font-weight:600;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px;line-height:1.4;} .short-channel{font-size:.66rem;color:var(--text-muted);} /* ═══════════════════════════════════════════════ MY CHATS ═══════════════════════════════════════════════ */ #page-chats{overflow-y:auto;background:var(--bg);} .chats-wrapper{max-width:640px;margin:0 auto;padding:44px 28px;} .chats-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;} .chats-page-header h2{font-size:1.35rem;font-weight:700;letter-spacing:-.3px;} .chats-list-full{display:flex;flex-direction:column;gap:6px;} .chat-row{ display:flex;align-items:center;gap:12px; padding:13px 15px;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer; transition:all var(--transition);box-shadow:var(--shadow-xs); } .chat-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:rgba(224,114,64,.2);} .chat-row-icon{font-size:1.1rem;flex-shrink:0;} .chat-row-body{flex:1;min-width:0;} .chat-row-title{font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-row-preview{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;} .chat-row-actions{display:flex;gap:4px;flex-shrink:0;} .chat-action-btn{padding:5px 8px;border-radius:var(--radius-sm);font-size:.7rem;background:var(--surface-alt);color:var(--text-muted);transition:background var(--transition),color var(--transition);} .chat-action-btn:hover{background:var(--accent-light);color:var(--accent);} .chat-action-btn[data-action="delete"]:hover{background:var(--danger-light);color:var(--danger);} .chats-empty{padding:60px 20px;text-align:center;color:var(--text-muted);font-size:.84rem;} /* ═══════════════════════════════════════════════ CHAT PAGE — Claude-style layout ═══════════════════════════════════════════════ */ #page-chat{background:var(--bg);overflow:hidden;} .chat-header{ display:flex;align-items:center;justify-content:space-between; padding:11px 22px;border-bottom:1px solid var(--border-soft); background:var(--bg);flex-shrink:0;min-height:50px; } .chat-header-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1;} .chat-header-icon{font-size:.9rem;flex-shrink:0;} .chat-header-title{font-size:.86rem;font-weight:600;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;} .chat-header-title[contenteditable="true"]{border-bottom:2px solid var(--accent);padding:2px 5px;border-radius:4px;background:var(--surface-alt);} .rename-btn{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background var(--transition),color var(--transition);flex-shrink:0;} .rename-btn svg{width:11px;height:11px;} .rename-btn:hover{background:var(--surface-alt);color:var(--accent);} .chat-header-badges{display:flex;align-items:center;gap:6px;flex-shrink:0;} .temp-badge{font-size:.64rem;font-weight:500;color:#d97706;background:#fffbeb;border:1px solid #fde68a;padding:3px 9px;border-radius:var(--radius-full);} .btn-delete-chat{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background var(--transition),color var(--transition);flex-shrink:0;} .btn-delete-chat svg{width:12px;height:12px;} .btn-delete-chat:hover{background:var(--danger-light);color:var(--danger);} /* Messages — Claude-style wide, generous spacing */ .chat-messages{ flex:1;overflow-y:auto; padding:28px 0 12px;scroll-behavior:smooth; } .chat-messages::-webkit-scrollbar{width:3px;} .chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} /* ── Suggestion chips — empty New Chat / Temp Chat state ── Bigger than the old home-page cards: full title + description visible, 3-column grid, generous padding. ── */ .suggestion-chips-wrap{ display:flex;flex-direction:column;align-items:center; max-width:780px;margin:0 auto;width:100%; padding:64px 28px 24px; } .suggestion-greeting{ font-size:1rem;font-weight:600;color:var(--text-primary); margin-bottom:22px; } .suggestion-chips-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:14px;width:100%; } .suggestion-chip{ display:flex;flex-direction:column;align-items:flex-start; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:20px 18px;cursor:pointer; transition:all var(--transition);box-shadow:var(--shadow-xs); text-align:left;font-family:inherit; } .suggestion-chip:hover{ border-color:rgba(224,114,64,.3); box-shadow:var(--shadow-sm);transform:translateY(-2px); } .suggestion-chip .chip-icon{font-size:1.7rem;margin-bottom:10px;} .suggestion-chip .chip-title{font-size:.95rem;font-weight:700;margin-bottom:6px;color:var(--text-primary);} .suggestion-chip .chip-desc{font-size:.78rem;color:var(--text-muted);line-height:1.55;} .message{ display:flex;padding:4px 28px; gap:12px;align-items:flex-start; max-width:860px;margin:0 auto;width:100%; } .message-user{justify-content:flex-end;} .message-ai{justify-content:flex-start;} /* Avatar icons */ .msg-icon{ width:26px;height:26px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; margin-top:5px; } .msg-icon svg{stroke:var(--text-muted);} .msg-icon-user{background:var(--surface-alt);border:1px solid var(--border);} .msg-icon-ai{background:var(--accent-light);border:1px solid rgba(224,114,64,.2);} .msg-icon-ai svg{stroke:var(--accent);} .message-user .msg-icon{order:2;} /* Message bubbles */ .msg-text{ max-width:70%;padding:11px 16px; border-radius:var(--radius-lg); font-size:.86rem;line-height:1.78; white-space:pre-wrap;word-wrap:break-word; word-break:break-word;overflow-wrap:break-word; } /* User bubble — Claude style: warm subtle background */ .message-user .msg-text{ background:var(--user-msg-bg);color:var(--text-primary); border:1px solid var(--border); border-bottom-right-radius:var(--radius-sm); animation:msgFadeUp .22s ease both; } /* AI bubble — no background, just text, Claude style */ .message-ai .msg-text{ background:none;color:var(--text-primary); border:none;box-shadow:none; padding-left:4px; max-width:min(70%,640px); } @keyframes msgFadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .word-animated{display:inline;opacity:0;white-space:normal;animation:wordFadeUp .16s ease forwards;} @keyframes wordFadeUp{to{opacity:1;}} .msg-words{display:inline;} /* Thinking */ .thinking-bar{display:flex;align-items:center;gap:5px;padding:6px 28px 2px;flex-shrink:0;max-width:860px;margin:0 auto;width:100%;} .thinking-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:dotBounce 1.2s infinite ease-in-out both;} .thinking-dot:nth-child(1){animation-delay:-.32s;} .thinking-dot:nth-child(2){animation-delay:-.16s;} @keyframes dotBounce{0%,80%,100%{transform:scale(.55);opacity:.25;}40%{transform:scale(1);opacity:1;}} .thinking-text{font-size:.71rem;color:var(--text-muted);margin-left:3px;font-style:italic;} .grammar-notice{margin:0 28px 5px;padding:7px 14px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:var(--radius-md);font-size:.72rem;color:var(--warning-text);line-height:1.5;animation:msgFadeUp .3s ease;max-width:860px;} /* ── INPUT BAR — Claude's floating pill ───── */ .chat-input-wrapper{ flex-shrink:0; padding:8px 28px 20px; background:var(--bg); max-width:860px;margin:0 auto;width:100%; /* needs to be part of the flex column but NOT max-width clipped from parent */ align-self:stretch; } .chat-input-bar{ display:flex;align-items:flex-end;gap:7px; background:var(--input-bg); border:1.5px solid var(--input-border); border-radius:var(--radius-xl); padding:8px 8px 8px 8px; box-shadow:var(--shadow-sm); transition:border-color var(--transition),box-shadow var(--transition); } .chat-input-bar:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow),var(--shadow-sm); } .chat-input{ flex:1;background:none;border:none;outline:none;resize:none; font-size:.86rem;color:var(--text-primary);line-height:1.65; max-height:150px;overflow-y:auto;padding:1px 6px; } .chat-input::placeholder{color:var(--text-muted);} .input-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;} .mode-select{ padding:6px 9px;border-radius:var(--radius-md); border:1px solid var(--border);background:var(--surface-alt); color:var(--text-secondary);font-size:.7rem;font-weight:500; outline:none;cursor:pointer; transition:border-color var(--transition),background var(--transition); } .mode-select:focus{border-color:var(--accent);} /* Paperclip */ .btn-attach{ width:30px;height:30px;min-width:30px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--text-muted); transition:background var(--transition),color var(--transition); } .btn-attach:hover{background:var(--surface-alt);color:var(--accent);} .btn-attach svg{width:14px;height:14px;} /* File chips */ .file-preview-chip{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;margin:0 0 5px; background:var(--surface-alt);border:1px solid var(--border); border-radius:var(--radius-md);font-size:.74rem; color:var(--text-secondary);max-width:100%; animation:msgFadeUp .2s ease; } .chip-icon{font-size:.95rem;flex-shrink:0;} .chip-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;} .chip-remove{ cursor:pointer;color:var(--text-muted);font-size:.75rem; padding:1px 3px;border-radius:4px;flex-shrink:0; transition:color var(--transition),background var(--transition); } .chip-remove:hover{color:var(--danger);background:var(--danger-light);} #file-preview-area{padding:0 0 0 0;margin-bottom:4px;} .file-image-preview{ display:flex;align-items:flex-start;gap:8px; margin-bottom:6px;position:relative;width:fit-content; } .file-image-preview img{ max-height:100px;max-width:160px; border-radius:var(--radius-md);object-fit:cover; border:1.5px solid var(--border);display:block; } .file-image-preview .chip-remove{ position:absolute;top:-5px;right:-5px; background:var(--surface);border:1px solid var(--border); border-radius:50%;width:17px;height:17px; display:flex;align-items:center;justify-content:center; font-size:.62rem;cursor:pointer; transition:background var(--transition),color var(--transition); } .file-image-preview .chip-remove:hover{background:var(--danger);color:#fff;} /* ═══════════════════════════════════════════════ MODALS — Claude-style ═══════════════════════════════════════════════ */ .modal-overlay{ position:fixed;inset:0; background:rgba(0,0,0,.45);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; z-index:1000;padding:16px; animation:fadeIn .16s ease; } #settings-modal-overlay{left:var(--sidebar-w);} #video-modal-overlay{left:0;background:rgba(0,0,0,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:0;} .modal{ background:var(--surface);border-radius:var(--radius-2xl); width:100%;max-width:440px;max-height:88vh;overflow-y:auto; box-shadow:var(--shadow-xl);display:flex;flex-direction:column; animation:modalSlide .2s ease;border:1px solid var(--border); } .settings-modal{max-width:410px;} .confirm-modal{max-width:330px;} .playlist-modal{max-width:330px;} .channel-modal{max-width:400px;} .modal-header{ display:flex;align-items:center;justify-content:space-between; padding:18px 22px 14px;border-bottom:1px solid var(--border-soft);flex-shrink:0; } .modal-title{font-size:.95rem;font-weight:700;letter-spacing:-.1px;} .modal-close{ width:26px;height:26px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--surface-alt);color:var(--text-muted); transition:background var(--transition),color var(--transition); } .modal-close svg{width:11px;height:11px;} .modal-close:hover{background:var(--surface-hover);color:var(--text-primary);} .modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:18px;flex:1;overflow-y:auto;} .modal-footer{padding:13px 22px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:7px;flex-shrink:0;} /* Settings */ .setting-section{display:flex;flex-direction:column;gap:8px;} .setting-label{font-size:.84rem;font-weight:600;} .setting-desc{font-size:.75rem;color:var(--text-muted);line-height:1.6;} .pref-display{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--accent-light);color:var(--accent);border-radius:var(--radius-md);font-size:.79rem;font-weight:600;width:fit-content;} .theme-toggle-row{display:flex;align-items:center;gap:12px;font-size:.82rem;font-weight:500;} .toggle-switch{position:relative;width:40px;height:22px;} .toggle-switch input{opacity:0;width:0;height:0;} .toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:100px;cursor:pointer;transition:background .25s;} .toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2);} .toggle-switch input:checked+.toggle-slider{background:var(--accent);} .toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px);} .confirm-message{font-size:.84rem;color:var(--text-secondary);line-height:1.65;} /* ── Palette picker (Settings → Appearance) ──────────── */ .palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;} .palette-swatch{ border:2px solid var(--border);border-radius:var(--radius-md); padding:10px;cursor:pointer;text-align:center; transition:border-color var(--transition),transform var(--transition); background:var(--surface); } .palette-swatch:hover{transform:translateY(-2px);} .palette-swatch.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} .palette-swatch.locked{cursor:not-allowed;opacity:.85;} .palette-preview{ height:38px;border-radius:8px;margin-bottom:8px; display:flex;align-items:center;justify-content:center;gap:5px; position:relative;overflow:hidden; } .palette-preview-violet{background:linear-gradient(135deg,#faf9f7 50%,#1a1915 50%);} .palette-preview-violet .ps-dot-1{background:#e07240;} .palette-preview-violet .ps-dot-2{background:#fff3ed;border:1px solid #e8e6e1;} .palette-preview-violet .ps-dot-3{background:#f5935e;} .palette-preview-pastel{background:linear-gradient(135deg,#FAFAF7 50%,#1B2430 50%);} .palette-preview-pastel .ps-dot-1{background:#0D7377;} .palette-preview-pastel .ps-dot-2{background:#B8860B;} .palette-preview-pastel .ps-dot-3{background:#FFFFFF;border:1px solid #E5E3DC;} .palette-preview-custom{background:repeating-linear-gradient(45deg,var(--surface-alt),var(--surface-alt) 6px,var(--surface) 6px,var(--surface) 12px);} .ps-dot{width:9px;height:9px;border-radius:50%;display:inline-block;} .palette-lock{font-size:1.05rem;opacity:.55;} .palette-name{font-size:.74rem;font-weight:600;color:var(--text-primary);} .palette-pro-tag{ display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.4px; background:var(--accent);color:#fff;padding:1px 5px;border-radius:5px; margin-left:4px;vertical-align:1px; } /* ── Custom Theme Builder modal ──────────────────────── */ .custom-theme-modal{max-width:420px;} .custom-theme-desc{font-size:.78rem;color:var(--text-muted);line-height:1.7;margin-bottom:16px;} .ct-swatch-list{display:flex;flex-direction:column;gap:4px;} .ct-swatch-row{ display:flex;align-items:center;gap:13px; padding:10px 6px;border-radius:var(--radius-md); transition:background var(--transition); } .ct-swatch-row:hover{background:var(--surface-alt);} .ct-swatch-circle{ width:38px;height:38px;border-radius:50%;flex-shrink:0;cursor:pointer; border:2.5px solid var(--surface);box-shadow:0 0 0 1.5px var(--border),var(--shadow-xs); transition:transform var(--transition); } .ct-swatch-circle:hover{transform:scale(1.08);} .ct-swatch-info{flex:1;min-width:0;} .ct-swatch-label{font-size:.82rem;font-weight:600;color:var(--text-primary);} .ct-swatch-hex{font-size:.7rem;color:var(--text-muted);font-family:monospace;margin-top:1px;letter-spacing:.3px;} /* ── Color Picker popup (wheel + hex) ────────────────── */ .color-picker-modal{max-width:300px;} .color-picker-body{ display:flex;flex-direction:column;align-items:center;gap:16px; padding-top:4px; } .color-picker-wheel{ width:100%;height:120px;border:none;border-radius:var(--radius-lg); cursor:pointer;padding:0;background:none; } .color-picker-wheel::-webkit-color-swatch-wrapper{padding:0;border-radius:var(--radius-lg);} .color-picker-wheel::-webkit-color-swatch{border:1.5px solid var(--border);border-radius:var(--radius-lg);} .color-picker-hex-row{ display:flex;align-items:center;gap:0; border:1.5px solid var(--input-border);border-radius:var(--radius-md); background:var(--input-bg);overflow:hidden;width:100%; } .color-picker-hash{padding:9px 0 9px 14px;color:var(--text-muted);font-family:monospace;font-size:.88rem;} .color-picker-hex-input{ flex:1;border:none;background:none;outline:none; padding:9px 14px 9px 4px;font-family:monospace;font-size:.88rem; letter-spacing:1px;color:var(--text-primary);text-transform:uppercase; } .color-picker-preview{ width:100%;height:44px;border-radius:var(--radius-md); border:1.5px solid var(--border); } /* ── Plan tier badge + code redemption ───────────────── */ .plan-tier-badge{ display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.4px; padding:2px 9px;border-radius:100px;margin-left:6px;vertical-align:2px; } .plan-tier-free{background:var(--surface-alt);color:var(--text-muted);} .plan-tier-pro{background:var(--accent-light);color:var(--accent);} .plan-tier-max{background:linear-gradient(135deg,var(--accent),var(--gold,#B8860B));color:#fff;} .plan-code-row{display:flex;gap:8px;} .plan-code-row .input-text{flex:1;} .input-text{ padding:8px 12px;border-radius:var(--radius-md); border:1px solid var(--input-border);background:var(--input-bg); color:var(--text-primary);font-size:.8rem;font-family:inherit; } .input-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} /* ── Plans / Pricing modal ───────────────────────────── */ .plans-modal{max-width:880px;} .plans-modal-note{font-size:.78rem;color:var(--text-muted);line-height:1.7;margin-bottom:16px;} .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .plans-grid-4{grid-template-columns:repeat(4,1fr);} .plan-card{ position:relative;border:1.5px solid var(--border);border-radius:var(--radius-lg); padding:18px 16px;display:flex;flex-direction:column;background:var(--surface); } .plan-card.plan-card-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} .plan-card-lite{border-color:rgba(43,179,168,.3);} .plan-card-pro{border-color:rgba(224,114,64,.3);} .plan-card-max{border-color:var(--gold,#B8860B);} .plan-card-tag{ position:absolute;top:-9px;right:14px;font-size:.6rem;font-weight:700; background:var(--accent);color:#fff;padding:2px 8px;border-radius:100px;letter-spacing:.3px; } .plan-card-name{font-size:.95rem;font-weight:700;margin-bottom:4px;} .plan-card-price{font-size:1.4rem;font-weight:700;margin-bottom:8px;color:var(--text-primary);} .plan-card-price span{font-size:.7rem;font-weight:500;color:var(--text-muted);} .plan-card-model{font-size:.7rem;font-weight:600;color:var(--accent);margin-bottom:2px;} .plan-card-credits{font-size:.7rem;color:var(--text-muted);margin-bottom:14px;} .plan-card-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;flex:1;} .plan-card-features li{font-size:.74rem;color:var(--text-secondary);padding-left:16px;position:relative;line-height:1.5;} .plan-card-features li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;} .plan-card-btn{width:100%;} .plan-card-btn:disabled{opacity:.6;cursor:not-allowed;} /* ── Credit usage bar (Settings) ─────────────────────── */ .credits-bar-track{ width:100%;height:7px;border-radius:100px; background:var(--surface-alt);overflow:hidden;margin-top:8px; } .credits-bar-fill{ height:100%;border-radius:100px; background:linear-gradient(90deg,var(--accent),var(--accent-hover)); transition:width .35s ease; } .credits-cost-hint{font-size:.68rem;color:var(--text-muted);margin-top:7px;line-height:1.6;} /* Playlist modals */ .pl-modal-item{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:var(--radius-md);background:var(--surface-alt);border:1px solid var(--border-soft);margin-bottom:6px;cursor:pointer;transition:background var(--transition),border-color var(--transition);} .pl-modal-item:hover{background:var(--accent-light);border-color:rgba(224,114,64,.2);} .pl-modal-item-name{font-size:.82rem;font-weight:600;} .pl-modal-item-count{font-size:.69rem;color:var(--text-muted);} .pl-modal-rename-btn{font-size:.69rem;color:var(--text-muted);padding:3px 7px;border-radius:var(--radius-sm);background:var(--border);margin-left:6px;transition:background var(--transition),color var(--transition);} .pl-modal-rename-btn:hover{background:var(--accent);color:#fff;} .pl-viewer-modal{max-width:490px;max-height:84vh;} .pl-viewer-section{border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:10px;} .pl-viewer-section:last-child{margin-bottom:0;} .pl-viewer-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-alt);border-bottom:1px solid var(--border-soft);} .pl-viewer-title{font-size:.85rem;font-weight:700;} .pl-viewer-count{font-size:.69rem;color:var(--text-muted);font-weight:400;margin-left:3px;} .pl-viewer-rename,.pl-viewer-delete{padding:3px 7px;border-radius:var(--radius-sm);font-size:.7rem;background:var(--border);color:var(--text-secondary);margin-left:4px;transition:background var(--transition),color var(--transition);} .pl-viewer-rename:hover{background:var(--accent-light);color:var(--accent);} .pl-viewer-delete:hover{background:var(--danger-light);color:var(--danger);} .pl-viewer-empty{padding:14px;font-size:.76rem;color:var(--text-muted);font-style:italic;} .pl-viewer-video{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border-soft);transition:background var(--transition);} .pl-viewer-video:last-child{border-bottom:none;} .pl-viewer-video:hover{background:var(--surface-alt);} .plv-thumb{width:42px;height:56px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:var(--surface-alt);} .plv-info{flex:1;min-width:0;} .plv-title{font-size:.71rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;} .plv-link{font-size:.67rem;color:var(--accent);} .plv-link:hover{text-decoration:underline;} .plv-remove{font-size:.69rem;color:var(--text-muted);padding:3px 7px;border-radius:var(--radius-sm);background:var(--border);flex-shrink:0;transition:background var(--transition),color var(--transition);} .plv-remove:hover{background:var(--danger-light);color:var(--danger);} /* Channel modal */ .channel-modal-avatar{width:58px;height:58px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0;} .channel-modal-meta{display:flex;flex-direction:column;gap:14px;} .channel-stat-row{display:flex;gap:8px;flex-wrap:wrap;} .channel-stat{flex:1;min-width:68px;text-align:center;background:var(--surface-alt);border-radius:var(--radius-md);padding:9px;border:1px solid var(--border-soft);} .channel-stat-val{font-size:.93rem;font-weight:700;color:var(--accent);} .channel-stat-lbl{font-size:.64rem;color:var(--text-muted);margin-top:2px;} .channel-desc{font-size:.74rem;color:var(--text-secondary);line-height:1.65;} /* ── VIDEO MODAL — Beautiful portrait shorts player ─────── */ #video-modal-overlay{ background:rgba(0,0,0,.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:0; align-items:center; justify-content:center; } .video-modal-outer{ display:flex;align-items:center;gap:16px; position:relative; animation:vmSlideIn .3s cubic-bezier(.34,1.2,.64,1); } @keyframes vmSlideIn{from{opacity:0;transform:scale(.92) translateY(24px);}to{opacity:1;transform:scale(1) translateY(0);}} /* Left column: player + meta */ .vm-left{ display:flex;flex-direction:column; width:340px;flex-shrink:0; border-radius:20px; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06); } /* Scrollable player container */ .video-scroll-container{ height:600px; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior-y:contain; background:#000; } .video-scroll-container::-webkit-scrollbar{display:none;} /* Individual slide */ .video-slide{ scroll-snap-align:start; position:relative; width:100%;height:600px; background:#000;overflow:hidden; display:flex;align-items:center;justify-content:center; } /* YT player fills slide */ .yt-player-wrap{position:absolute;inset:0;width:100%;height:100%;} .yt-player-wrap iframe{width:100%;height:100%;border:none;display:block;} /* Thin red progress bar at bottom */ .yt-custom-progress{ position:absolute;bottom:0;left:0;right:0; height:2px;background:rgba(255,255,255,.1);z-index:10; } .yt-progress-bar{ height:100%;width:0%; background:linear-gradient(90deg,#ff4444,#ff6666); transition:width .4s linear; } /* Meta info strip below player */ .video-meta-info{ flex-shrink:0;padding:11px 14px 13px; background:#111; border-top:1px solid rgba(255,255,255,.06); } .vm-meta-row{display:flex;align-items:center;gap:10px;} .vm-avatar{ width:32px;height:32px;border-radius:50%;object-fit:cover; flex-shrink:0;border:1.5px solid rgba(255,255,255,.15); } .vm-avatar-placeholder{ width:32px;height:32px;border-radius:50%;flex-shrink:0; background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:700; } .vm-meta-text{flex:1;min-width:0;} .vm-meta-title{ font-size:.77rem;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:#fff; } .vm-meta-channel{font-size:.67rem;color:rgba(255,255,255,.5);margin-top:2px;} /* Close button — top-right of outer, outside the player */ .vm-close-btn{ position:absolute;top:-14px;right:-54px; width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; color:#fff;cursor:pointer;z-index:20; box-shadow:0 4px 16px rgba(0,0,0,.4); transition:background var(--transition),transform var(--transition); } .vm-close-btn:hover{background:rgba(220,38,38,.8);transform:scale(1.08);} .vm-close-btn svg{stroke:#fff;} /* Right column — action buttons */ .video-modal-sidebar{ display:flex;flex-direction:column; align-items:center;gap:12px; flex-shrink:0;padding-top:4px; } .vm-sidebar-btn{ display:flex;flex-direction:column; align-items:center;justify-content:center; gap:5px; width:52px;height:52px; border-radius:50%; cursor:pointer; transition:all .2s cubic-bezier(.34,1.2,.64,1); text-decoration:none;font-family:inherit; } .vm-save-btn{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:.55rem;font-weight:700;letter-spacing:.6px; text-transform:uppercase; backdrop-filter:blur(8px); } .vm-save-btn:hover{ background:var(--accent); border-color:var(--accent); transform:scale(1.12); box-shadow:0 6px 20px rgba(224,114,64,.45); } .vm-yt-btn{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); } .vm-yt-btn svg{width:18px;height:18px;stroke:#fff;} .vm-yt-btn:hover{ background:#ff0000;border-color:#ff0000; transform:scale(1.12); box-shadow:0 6px 20px rgba(255,0,0,.4); } .vm-yt-btn:hover svg{stroke:#fff;} /* Click overlay for play/pause — sits above player */ .yt-click-overlay{ position:absolute;inset:0;z-index:5;cursor:pointer; /* transparent — just catches clicks */ } /* Scroll hint arrows */ .vm-scroll-hint{ position:absolute;bottom:56px;right:12px;z-index:12; display:flex;flex-direction:column;gap:4px;align-items:center; opacity:.55;pointer-events:none; animation:hintPulse 2s ease infinite; } @keyframes hintPulse{0%,100%{opacity:.3;}50%{opacity:.75;}} .vm-scroll-hint svg{width:14px;height:14px;stroke:#fff;} /* ── CODE POPUP ──────────────────────────── */ .code-block-btn{ display:inline-flex;align-items:center;gap:8px; padding:9px 14px;margin:6px 0; background:var(--surface);border:1px solid var(--border); border-left:3px solid var(--lang-color,var(--accent)); border-radius:var(--radius-md);cursor:pointer; font-size:.77rem;font-weight:500;color:var(--text-primary); transition:background var(--transition),box-shadow var(--transition),transform var(--transition); width:100%;max-width:360px;text-align:left;font-family:inherit; box-shadow:var(--shadow-xs); } .code-block-btn:hover{background:var(--surface-alt);box-shadow:var(--shadow-sm);transform:translateY(-1px);} .code-btn-icon{font-size:.95rem;flex-shrink:0;} .code-btn-label{flex:1;font-weight:600;} .code-btn-open{font-size:.68rem;color:var(--accent);font-weight:600;flex-shrink:0;} .code-popup-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .18s ease;} .code-popup{background:var(--surface);border-radius:var(--radius-2xl);width:100%;max-width:700px;max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);border:1px solid var(--border);animation:modalSlide .2s ease;overflow:hidden;} .code-popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-soft);flex-shrink:0;background:var(--surface-alt);} .code-popup-title{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;} .code-popup-lines{font-size:.7rem;color:var(--text-muted);font-weight:400;background:var(--border);padding:2px 8px;border-radius:var(--radius-full);} .code-popup-actions{display:flex;align-items:center;gap:6px;} .code-popup-run{padding:5px 13px;border-radius:var(--radius-md);background:var(--accent);color:#fff;font-size:.76rem;font-weight:600;transition:background var(--transition);} .code-popup-run:hover{background:var(--accent-hover);} .code-popup-copy{padding:5px 13px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);font-size:.76rem;font-weight:500;transition:background var(--transition),color var(--transition);} .code-popup-copy:hover{background:var(--accent-light);color:var(--accent);} .code-popup-close{width:26px;height:26px;border-radius:50%;background:var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:background var(--transition),color var(--transition);} .code-popup-close:hover{background:var(--danger-light);color:var(--danger);} .code-popup-pre{flex:1;overflow:auto;padding:20px;margin:0;font-family:'Courier New',Courier,monospace;font-size:.81rem;line-height:1.7;color:var(--text-primary);background:var(--bg);white-space:pre;tab-size:2;} .code-popup-runner{border-top:1px solid var(--border-soft);flex-shrink:0;height:320px;overflow:hidden;} .code-popup-runner iframe{width:100%;height:100%;border:none;display:block;background:#fff;} /* ── TOAST ───────────────────────────────── */ .toast-msg{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--text-primary);color:var(--bg);padding:9px 20px;border-radius:var(--radius-full);font-size:.78rem;font-weight:500;opacity:0;transition:opacity .2s,transform .2s;z-index:3000;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg);} .toast-msg.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ── SCROLLBARS ──────────────────────────── */ ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} ::-webkit-scrollbar-thumb:hover{background:var(--text-muted);} /* ═══════════════════════════════════════════════ RESPONSIVE — TABLET ≤900px ═══════════════════════════════════════════════ */ @media(max-width:900px){ :root{--sidebar-w:220px;} .suggestion-chips-grid{grid-template-columns:repeat(2,1fr);} .palette-grid{grid-template-columns:repeat(3,1fr);} .plans-grid{grid-template-columns:1fr;} .home-title{font-size:2.1rem;} .home-wrapper{padding:24px 24px 0;} .home-chat-area{padding:16px 24px 24px;} .shorts-search-bar input{width:130px;} .vm-left{width:280px;} .message{padding:4px 20px;} .chat-input-wrapper{padding:8px 20px 18px;} .thinking-bar{padding:6px 20px 2px;} } /* ═══════════════════════════════════════════════ RESPONSIVE — MOBILE ≤640px ═══════════════════════════════════════════════ */ @media(max-width:640px){ :root{--sidebar-w:264px;} .mobile-topbar{display:flex;} #app{padding-top:var(--topbar-h);} #sidebar{position:fixed;top:0;left:0;bottom:0;transform:translateX(-100%);z-index:400;padding-top:16px;box-shadow:var(--shadow-xl);height:100dvh;} #sidebar.mobile-open{transform:translateX(0);} #settings-modal-overlay,#video-modal-overlay{left:0;} .auth-modal{max-width:100%;} .auth-header{padding:26px 20px 14px;} .auth-panel{padding:0 20px;} .auth-skip-btn{width:calc(100% - 40px);} .video-modal-outer{flex-direction:column;align-items:center;gap:10px;padding:16px;} .vm-left{width:100%;max-width:320px;} .video-scroll-container{height:480px;} .video-slide{height:480px;} .video-modal-sidebar{flex-direction:row;gap:14px;padding-top:0;} .vm-close-btn{position:fixed;top:14px;right:14px;z-index:500;} .home-cards{grid-template-columns:1fr 1fr;gap:8px;} .suggestion-chips-grid{grid-template-columns:1fr;} .palette-grid{grid-template-columns:repeat(3,1fr);} .plans-grid{grid-template-columns:1fr;} .home-title{font-size:1.6rem;} .home-wrapper{padding:16px 16px 0;} .home-chat-area{padding:14px 16px 20px;} .onboarding-grid{grid-template-columns:repeat(2,1fr);padding:14px 18px;} .onboarding-header{padding:22px 18px 14px;} .onboarding-footer{padding:12px 18px 20px;} .shorts-header{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 14px 8px;} .shorts-header-right{width:100%;} .shorts-search-bar input{flex:1;width:auto;min-width:0;} .shorts-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));padding:10px 12px;gap:10px;} .message{padding:4px 14px;} .msg-text{max-width:86%;font-size:.83rem;} .message-ai .msg-text{max-width:88%;} .chat-input-wrapper{padding:6px 14px 14px;} .chat-header{padding:9px 14px;} .chat-header-title{max-width:160px;font-size:.82rem;} .modal-overlay{align-items:flex-end;padding:0;} .modal{max-width:100%;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;} #settings-modal-overlay{align-items:center;padding:16px;} .confirm-modal,.settings-modal{border-radius:var(--radius-xl);} .pl-viewer-modal{max-height:80dvh;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;} } @media(max-width:380px){ .home-cards{grid-template-columns:1fr;} .home-title{font-size:1.4rem;} .shorts-grid{grid-template-columns:repeat(2,1fr);} .onboarding-grid{grid-template-columns:repeat(2,1fr);} } /* ═══════════════════════════════════════════════ TRENDING SONGS PAGE ═══════════════════════════════════════════════ */ #page-songs{background:var(--bg);overflow:hidden;} .songs-header{ display:flex;align-items:center;justify-content:space-between; padding:14px 22px 10px;border-bottom:1px solid var(--border-soft); flex-shrink:0;gap:10px;flex-wrap:wrap;background:var(--bg); } .songs-header-left{display:flex;flex-direction:column;min-width:0;} .songs-title{font-size:1.05rem;font-weight:700;letter-spacing:-.2px;} .songs-subtitle{font-size:.72rem;color:var(--text-muted);margin-top:1px;} .songs-search-bar{ display:flex;gap:6px;align-items:center; background:var(--input-bg);border:1px solid var(--input-border); border-radius:var(--radius-full);padding:6px 7px 6px 14px; transition:border-color var(--transition),box-shadow var(--transition); } .songs-search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} .songs-search-bar input{background:none;border:none;outline:none;font-size:.79rem;color:var(--text-primary);width:200px;} .songs-search-bar input::placeholder{color:var(--text-muted);} .songs-search-bar button{ width:26px;height:26px;border-radius:50%;flex-shrink:0; background:var(--accent);display:flex;align-items:center;justify-content:center; transition:background var(--transition); } .songs-search-bar button:hover{background:var(--accent-hover);} .songs-search-bar button svg{width:11px;height:11px;stroke:#fff;} /* Genre pills */ .songs-genres{ display:flex;gap:6px;padding:10px 22px 8px; overflow-x:auto;flex-shrink:0;scrollbar-width:none; border-bottom:1px solid var(--border-soft); } .songs-genres::-webkit-scrollbar{display:none;} .song-genre-btn{ padding:5px 15px;border-radius:var(--radius-full); font-size:.73rem;font-weight:500; background:var(--surface);border:1.5px solid var(--border); color:var(--text-secondary);white-space:nowrap;flex-shrink:0; transition:all var(--transition); } .song-genre-btn:hover{background:var(--surface-hover);color:var(--text-primary);} .song-genre-btn.active{ background:var(--genre-color,var(--accent)); border-color:var(--genre-color,var(--accent)); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.15); } /* Body — list + detail side by side */ .songs-body{ flex:1;display:flex;overflow:hidden; } /* Song list */ .songs-grid-wrap{ flex:1;overflow-y:auto;padding:14px 16px; display:flex;flex-direction:column;gap:6px; min-width:0; } .songs-grid-wrap::-webkit-scrollbar{width:3px;} .songs-grid-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} .songs-placeholder{ display:flex;flex-direction:column;align-items:center; gap:10px;padding:60px 20px;text-align:center; } .songs-placeholder-icon{font-size:2.6rem;opacity:.18;} .songs-placeholder-title{font-size:.92rem;font-weight:600;color:var(--text-secondary);} .songs-placeholder-desc{font-size:.76rem;color:var(--text-muted);line-height:1.7;max-width:280px;} /* Loading dots */ .songs-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:50px 20px;} .songs-loading p{font-size:.78rem;color:var(--text-muted);} .songs-loading-dots{display:flex;gap:5px;} .songs-loading-dots span{ width:7px;height:7px;border-radius:50%; background:var(--accent);opacity:.3; animation:dotBounce 1.2s infinite ease-in-out both; } .songs-loading-dots span:nth-child(1){animation-delay:-.32s;} .songs-loading-dots span:nth-child(2){animation-delay:-.16s;} .songs-loading-dots span:nth-child(3){animation-delay:0s;} /* Song card row */ .song-card{ display:flex;align-items:center;gap:12px; padding:10px 13px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);cursor:pointer; transition:all var(--transition); animation:fadeIn .25s ease both; box-shadow:var(--shadow-xs); } .song-card:hover{ border-color:rgba(224,114,64,.3); transform:translateX(3px); box-shadow:var(--shadow-sm); } .song-card.active{ border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 0 2px var(--accent-glow); } .song-card-rank{ font-size:.72rem;font-weight:700;color:var(--text-muted); min-width:18px;text-align:center;flex-shrink:0; } .song-card.active .song-card-rank{color:var(--accent);} .song-card-thumb-wrap{ width:44px;height:44px;border-radius:var(--radius-md); overflow:hidden;flex-shrink:0; background:var(--surface-alt); box-shadow:var(--shadow-xs); } .song-card-thumb{width:100%;height:100%;object-fit:cover;display:block;} .song-card-thumb-placeholder{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:1.2rem; background:linear-gradient(135deg,var(--accent-light),var(--surface-alt)); } .song-card-info{flex:1;min-width:0;} .song-card-title{ font-size:.8rem;font-weight:600;color:var(--text-primary); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; margin-bottom:2px; } .song-card-artist{font-size:.68rem;color:var(--text-muted);} .song-card-views{ font-size:.68rem;font-weight:600;color:var(--text-secondary); flex-shrink:0;white-space:nowrap; } /* Detail panel */ .song-detail-panel{ width:360px;flex-shrink:0; border-left:1px solid var(--border-soft); background:var(--surface); display:flex;flex-direction:column; overflow-y:auto; position:relative; animation:fadeIn .22s ease; } .song-detail-panel::-webkit-scrollbar{width:3px;} .song-detail-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;} .song-detail-close{ position:sticky;top:10px;left:calc(100% - 42px); width:26px;height:26px;border-radius:50%; background:var(--surface-alt);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted);cursor:pointer;z-index:5; box-shadow:var(--shadow-xs);margin:10px 10px 0 auto;flex-shrink:0; transition:background var(--transition),color var(--transition); } .song-detail-close svg{width:10px;height:10px;} .song-detail-close:hover{background:var(--danger-light);color:var(--danger);} .song-detail-inner{padding:0 16px 24px;flex:1;} /* Detail panel — header */ .sdp-header{ display:flex;align-items:flex-start;gap:12px; margin-bottom:18px;padding-top:4px; } .sdp-thumb{ width:64px;height:64px;border-radius:var(--radius-md); object-fit:cover;flex-shrink:0; box-shadow:var(--shadow-sm); } .sdp-thumb-placeholder{ width:64px;height:64px;border-radius:var(--radius-md); flex-shrink:0;background:linear-gradient(135deg,var(--accent-light),var(--surface-alt)); display:flex;align-items:center;justify-content:center;font-size:1.8rem; } .sdp-header-info{flex:1;min-width:0;} .sdp-title{ font-size:.85rem;font-weight:700;color:var(--text-primary); display:-webkit-box;-webkit-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px; } .sdp-artist{font-size:.71rem;color:var(--text-muted);margin-bottom:6px;} .sdp-trend{ display:inline-flex;padding:3px 9px;border-radius:var(--radius-full); font-size:.67rem;font-weight:600;width:fit-content; } .trend-viral{background:#fef2f2;color:#dc2626;} .trend-trending{background:#fff7ed;color:#ea580c;} .trend-rising{background:#fefce8;color:#ca8a04;} .trend-established{background:#f0fdf4;color:#16a34a;} .trend-emerging{background:#eff6ff;color:#2563eb;} [data-theme="dark"] .trend-viral{background:#2d1212;color:#f87171;} [data-theme="dark"] .trend-trending{background:#2c1810;color:#fb923c;} [data-theme="dark"] .trend-rising{background:#1c1400;color:#fbbf24;} [data-theme="dark"] .trend-established{background:#0f1f14;color:#4ade80;} [data-theme="dark"] .trend-emerging{background:#0f1c2e;color:#60a5fa;} .sdp-yt-btn{ display:inline-flex;align-items:center;gap:5px; padding:6px 12px;border-radius:var(--radius-md); background:var(--accent);color:#fff; font-size:.72rem;font-weight:600; text-decoration:none;flex-shrink:0; transition:background var(--transition),transform var(--transition); box-shadow:0 2px 8px var(--accent-glow); } .sdp-yt-btn:hover{background:var(--accent-hover);transform:scale(1.04);} /* Stats grid */ .sdp-stats{ display:grid;grid-template-columns:1fr 1fr; gap:8px;margin-bottom:16px; } .sdp-stat{ padding:11px 12px;border-radius:var(--radius-md); background:var(--surface-alt);border:1px solid var(--border-soft); text-align:center; } .sdp-stat-accent{ background:var(--accent-light); border-color:rgba(224,114,64,.25); } .sdp-stat-val{ font-size:1.05rem;font-weight:700;color:var(--text-primary); margin-bottom:3px; } .sdp-stat-accent .sdp-stat-val{color:var(--accent);} .sdp-stat-lbl{font-size:.64rem;color:var(--text-muted);line-height:1.4;} /* Top short */ .sdp-section-label{ font-size:.66rem;font-weight:700;text-transform:uppercase; letter-spacing:.7px;color:var(--text-muted);margin-bottom:7px; } .sdp-top-short{margin-bottom:16px;} .sdp-top-short-link{ display:block;padding:10px 12px; background:var(--surface-alt);border:1px solid var(--border-soft); border-radius:var(--radius-md);text-decoration:none; transition:background var(--transition),border-color var(--transition); } .sdp-top-short-link:hover{background:var(--accent-light);border-color:rgba(224,114,64,.25);} .sdp-top-short-title{ font-size:.78rem;font-weight:600;color:var(--text-primary); display:-webkit-box;-webkit-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px; } .sdp-top-short-meta{font-size:.67rem;color:var(--text-muted);} /* Graph */ .sdp-graph-wrap{ margin-bottom:20px; padding:16px; border-radius:var(--radius-xl); background:var(--surface-alt); border:1px solid var(--border-soft); } #song-engagement-chart{ display:block; width:100%; height:150px; border-radius:var(--radius-md); background:transparent; } .sdp-graph-disclaimer{ font-size:.63rem;color:var(--text-muted); text-align:right;margin-top:10px;font-style:italic; } .sdp-loading{ display:flex;flex-direction:column;align-items:center; gap:12px;padding:40px 16px; } .sdp-loading p{font-size:.78rem;color:var(--text-muted);} /* Ask AI button */ .sdp-ask-ai-btn{ display:flex;align-items:center;justify-content:center;gap:7px; width:100%;padding:10px; background:var(--surface-alt);border:1.5px solid var(--border); border-radius:var(--radius-lg); font-size:.78rem;font-weight:600;color:var(--text-secondary); cursor:pointer; transition:all var(--transition); } .sdp-ask-ai-btn:hover{ background:var(--accent-light);border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); } .songs-filter-row{display:flex;gap:7px;align-items:center;flex-shrink:0;} .songs-filter-select{ padding:6px 10px;border-radius:var(--radius-full); border:1.5px solid var(--border);background:var(--surface); color:var(--text-primary);font-size:.73rem;font-family:inherit; cursor:pointer;outline:none; transition:border-color var(--transition),box-shadow var(--transition); appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 9px center; padding-right:26px; } /* Song card play button */ .song-play-btn{ width:32px;height:32px;border-radius:50%;flex-shrink:0; background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center; transition:all var(--transition); box-shadow:0 2px 8px var(--accent-glow); } .song-play-btn:hover{background:var(--accent-hover);transform:scale(1.1);} .song-no-preview{font-size:.65rem;color:var(--text-muted);flex-shrink:0;white-space:nowrap;} /* Detail panel audio player */ .sdp-audio-player{ margin-bottom:14px;padding:12px 14px; background:var(--surface-alt);border:1px solid var(--border-soft); border-radius:var(--radius-lg); } .sdp-audio-controls{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .sdp-audio-btn{ width:36px;height:36px;border-radius:50%;flex-shrink:0; background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 10px var(--accent-glow); transition:all var(--transition); } .sdp-audio-btn:hover{background:var(--accent-hover);transform:scale(1.08);} .sdp-audio-bar-wrap{flex:1;display:flex;flex-direction:column;gap:4px;} .sdp-audio-progress{ height:4px;background:var(--border);border-radius:10px;cursor:pointer; position:relative;overflow:hidden; } .sdp-audio-fill{ height:100%;background:var(--accent);border-radius:10px; width:0%;transition:width .1s linear; } .sdp-audio-times{ display:flex;justify-content:space-between; font-size:.63rem;color:var(--text-muted); } /* Song player embed */ .sdp-player-wrap{ position:relative;margin-bottom:14px;border-radius:var(--radius-lg);overflow:hidden; background:#000;box-shadow:var(--shadow-md); } .sdp-player-iframe{ display:block;width:100%;aspect-ratio:16/9;border:none; } .sdp-yt-btn{ display:inline-flex;align-items:center;gap:5px; padding:5px 11px;border-radius:var(--radius-md); background:var(--surface-alt);border:1px solid var(--border); color:var(--text-secondary); font-size:.68rem;font-weight:600; text-decoration:none;margin-top:7px; transition:all var(--transition); } .sdp-yt-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;} /* Responsive songs header */ @media(max-width:800px){ .songs-header{flex-wrap:wrap;gap:8px;} .songs-filter-row{flex-wrap:wrap;} } @media(max-width:640px){ .songs-body{flex-direction:column;} .song-detail-panel{ width:100%;border-left:none; border-top:1px solid var(--border-soft); max-height:55dvh; } .songs-search-bar input{width:140px;} } .msg-icon-ai svg,.msg-icon-user svg{display:block;} .code-btn-lines{font-size:.68rem;color:var(--text-muted);background:var(--surface-alt);padding:2px 7px;border-radius:20px;} .code-btn-open{font-size:.68rem;color:var(--accent);font-weight:600;margin-left:auto;} /* ============================================================ POLLINATIONS IMAGE GENERATION — toggle button + result card ============================================================ */ .btn-imagegen{ width:30px;height:30px;min-width:30px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--text-muted);border:1px solid transparent; transition:background var(--transition),color var(--transition),border-color var(--transition); } .btn-imagegen svg{width:14px;height:14px;} .btn-imagegen:hover{background:var(--surface-alt);color:var(--accent);} .btn-imagegen.active{ background:var(--accent-light);color:var(--accent); border-color:var(--accent); } .btn-attach.disabled-look{opacity:.35;pointer-events:none;} .ai-image-card{ margin:6px 0;max-width:340px;border-radius:var(--radius-lg); overflow:hidden;border:1px solid var(--border);background:var(--surface-alt); } .ai-image-shimmer{ width:100%;aspect-ratio:1/1; display:flex;align-items:center;justify-content:center; background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border) 50%,var(--surface-alt) 75%); background-size:200% 100%;animation:imgShimmer 1.4s ease-in-out infinite; padding:16px;text-align:center; } @keyframes imgShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}} .ai-image-result{ width:100%;display:block;border-radius:var(--radius-lg) var(--radius-lg) 0 0; animation:fadeIn .35s ease; } .ai-image-actions{ display:flex;gap:6px;padding:8px 10px; } .ai-image-action-btn{ flex:1;text-align:center;padding:6px 10px;border-radius:var(--radius-md); background:var(--surface);border:1px solid var(--border); font-size:.72rem;font-weight:600;color:var(--text-secondary); cursor:pointer;text-decoration:none; transition:background var(--transition),color var(--transition),border-color var(--transition); } .ai-image-action-btn:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent);}