/* CLS AI Labs — gaya halaman pembuka mirip Gemini: polos, salam bergradien, kotak tanya besar di tengah, kartu saran. */
:root{--ai-bg:#131314;--ai-surface:#1e1f20;--ai-surface2:#282a2c;--ai-line:#3c4043;--ai-text:#e3e3e3;--ai-muted:#9aa0a6;
  --ai-grad:linear-gradient(74deg,#4f8cff 0,#9b72cb 30%,#d96570 55%,#9b72cb 75%,#4f8cff 100%);--ai-ease:cubic-bezier(.23,1,.32,1)}

/* AI Labs: tanpa tombol Connect Wallet / membership / judul atas (polos) */
body.on-ailabs .topbar .actions,body.on-ailabs .topbar .eyebrow,body.on-ailabs .topbar .h1,body.on-ailabs .topbar .sub,body.on-ailabs #notice{display:none!important}
body.on-ailabs .topbar{margin-bottom:0;min-height:0}
body.on-ailabs .disclaimer{display:none}
.nav button[hidden]{display:none!important}

.ai-page{color:var(--ai-text);font-family:"Google Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.ai-page.active{display:flex!important;flex-direction:column;min-height:calc(100vh - 80px)}
.ai-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 8px}
.ai-brand{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:500;letter-spacing:-.2px;color:#e3e3e3}
.ai-spark{width:22px;height:22px;flex:0 0 22px}
.ai-newchat{border:1px solid var(--ai-line);background:transparent;color:var(--ai-text);border-radius:999px;padding:8px 16px;font-size:13px;transition:background-color .2s ease}
@media (hover:hover) and (pointer:fine){.ai-newchat:hover{background:var(--ai-surface)}}

.ai-stage{flex:1;width:min(820px,100%);margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:4vh 0 28px}
.ai-page.chatting .ai-stage{justify-content:flex-end}
.ai-hero{padding:0 4px 26px}
.ai-hello{margin:0;font-size:clamp(34px,5.2vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.ai-hello span{background:var(--ai-grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aiGrad 6s ease-in-out infinite alternate}
@keyframes aiGrad{from{background-position:0 50%}to{background-position:100% 50%}}
.ai-ask{margin:6px 0 0;font-size:clamp(26px,4vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.15;color:#444746}
.ai-hero>*{animation:aiRise .9s var(--ai-ease) both}.ai-hero>.ai-ask{animation-delay:.08s}
@keyframes aiRise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.ai-page.chatting .ai-hero,.ai-page.chatting .ai-suggest{display:none}

/* kotak tanya */
.ai-composer{position:relative;background:var(--ai-surface);border-radius:28px;padding:14px 14px 10px 20px;box-shadow:0 0 0 1px transparent;transition:box-shadow .25s ease,background-color .25s ease}
.ai-composer:focus-within{background:#232425;box-shadow:0 0 0 1px #4a4d50}
.ai-composer textarea{width:100%;min-height:28px;max-height:220px;resize:none;border:0;outline:0;background:transparent;color:var(--ai-text);font:inherit;font-size:16px;line-height:1.55;padding:4px 0 6px}
.ai-composer textarea::placeholder{color:#8e918f}
.ai-tools{display:flex;align-items:center;gap:6px}
.ai-flex{flex:1}
.ai-icon{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:0;background:transparent;color:#c4c7c5;display:grid;place-items:center;transition:background-color .2s ease,color .2s ease,transform .16s var(--ai-ease)}
.ai-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.ai-icon:not(:disabled):hover{background:var(--ai-surface2)}}
.ai-icon:active:not(:disabled){transform:scale(.94)}
.ai-send:not(:disabled){background:#e3e3e3;color:#131314}
.ai-send:disabled{opacity:.35;cursor:default}
.ai-icon.live{background:#d96570;color:#fff}
.ai-modes{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ai-modes::-webkit-scrollbar{display:none}
.ai-modes button{border:0;background:transparent;color:#c4c7c5;border-radius:999px;padding:8px 13px;font-size:13px;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.ai-modes button[aria-checked=true]{background:#2f3a52;color:#d3e3fd}
@media (hover:hover) and (pointer:fine){.ai-modes button:not([aria-checked=true]):hover{background:var(--ai-surface2)}}
.ai-attach{display:flex;gap:8px;padding:2px 0 10px}
.ai-attach figure{position:relative;margin:0;width:64px;height:64px;border-radius:14px;overflow:hidden;border:1px solid var(--ai-line)}
.ai-attach img{width:100%;height:100%;object-fit:cover;display:block}
.ai-attach button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:#000b;color:#fff;font-size:13px;line-height:1}

/* kartu saran */
.ai-suggest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.ai-suggest button{text-align:left;border:0;border-radius:16px;background:var(--ai-surface);color:var(--ai-text);padding:14px 14px 16px;min-height:104px;display:flex;flex-direction:column;gap:6px;
  transition:background-color .2s ease,transform .18s var(--ai-ease);animation:aiRise .8s var(--ai-ease) both}
.ai-suggest button:nth-child(2){animation-delay:.05s}.ai-suggest button:nth-child(3){animation-delay:.1s}.ai-suggest button:nth-child(4){animation-delay:.15s}
.ai-suggest b{font-size:14px;font-weight:500}.ai-suggest span{font-size:12.5px;color:var(--ai-muted);line-height:1.45}
@media (hover:hover) and (pointer:fine){.ai-suggest button:hover{background:#262729;transform:translateY(-2px)}}
.ai-foot{text-align:center;font-size:12px;color:#8e918f;margin:12px 0 0}

/* percakapan */
.ai-thread{display:flex;flex-direction:column;gap:22px;padding:4px 2px 22px}
.ai-msg{animation:aiIn .35s var(--ai-ease) both}
@keyframes aiIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg.user{align-self:flex-end;max-width:min(78%,620px);background:var(--ai-surface2);border-radius:22px 22px 6px 22px;padding:11px 16px;font-size:15px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.ai-msg.user img{display:block;max-width:220px;border-radius:12px;margin-bottom:8px}
.ai-msg.bot{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px}
.ai-msg.bot .ai-spark{width:24px;height:24px;margin-top:3px}
.ai-msg.bot.loading .ai-spark{animation:aiSpin 1.4s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-body{font-size:15px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.ai-body h3,.ai-body h4{font-size:16px;margin:16px 0 6px;font-weight:600;color:#fff}
.ai-body p{margin:0 0 10px}.ai-body ul,.ai-body ol{margin:0 0 10px;padding-left:22px}.ai-body li{margin:3px 0}
.ai-body strong{color:#fff;font-weight:600}.ai-body a{color:#a8c7fa}
.ai-body code{background:#2a2b2e;border-radius:6px;padding:1px 6px;font-size:13px}
.ai-body hr{border:0;border-top:1px solid #333;margin:14px 0}
.ai-shimmer{height:14px;border-radius:7px;margin:8px 0;background:linear-gradient(90deg,#2a2b2e 0,#3b4a6b 40%,#2a2b2e 80%);background-size:200% 100%;animation:aiShim 1.4s linear infinite}
.ai-shimmer:nth-child(2){width:86%}.ai-shimmer:nth-child(3){width:62%}
@keyframes aiShim{to{background-position:-200% 0}}
.ai-status{font-size:13px;color:var(--ai-muted);margin-bottom:6px}
.ai-err{color:#f2b8b5;background:#3a1e1e;border-radius:12px;padding:10px 14px;font-size:14px}
.ai-chart{margin:4px 0 12px;border-radius:16px;overflow:hidden;border:1px solid #2c2e33;background:#07080d}
.ai-chart img{display:block;width:100%;height:auto}
.ai-chart-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid #2c2e33;background:#111216}
.ai-pill{font-size:12px;border-radius:999px;padding:4px 10px;background:#1e1f20;color:#c4c7c5;white-space:nowrap}
.ai-pill.long{background:#0f2e22;color:#6dd58c}.ai-pill.short{background:#3a1e22;color:#f2b8b5}.ai-pill.wait{background:#3a2f12;color:#fdd663}
.ai-dl{margin-left:auto;border:1px solid var(--ai-line);background:transparent;color:var(--ai-text);border-radius:999px;padding:6px 14px;font-size:12.5px}
.ai-gen img{display:block;max-width:min(100%,520px);border-radius:16px;margin:4px 0 10px}
.ai-gen audio{width:min(100%,520px);margin:6px 0 10px}
.ai-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ai-src a{font-size:12px;text-decoration:none;color:#c4c7c5;background:#1e1f20;border-radius:999px;padding:5px 11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-actions{display:flex;gap:4px;margin-top:4px}
.ai-actions button{border:0;background:transparent;color:#9aa0a6;border-radius:999px;padding:6px 10px;font-size:12.5px}
@media (hover:hover) and (pointer:fine){.ai-actions button:hover{background:var(--ai-surface);color:#e3e3e3}}

/* berita */
.ai-news{width:min(1080px,100%);margin:36px auto 10px;padding-top:28px;border-top:1px solid #26282b}
.ai-news-head h2{margin:0;font-size:22px;font-weight:500;letter-spacing:-.4px;color:#e3e3e3}
.ai-news-head p{margin:4px 0 14px;font-size:12.5px;color:#8e918f}
.ai-news-filter{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none}
.ai-news-filter::-webkit-scrollbar{display:none}
.ai-news-filter button{border:1px solid var(--ai-line);background:transparent;color:#c4c7c5;border-radius:999px;padding:7px 14px;font-size:12.5px;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.ai-news-filter button[aria-selected=true]{background:#e3e3e3;color:#131314;border-color:#e3e3e3}
.ai-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ai-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ai-text);background:var(--ai-surface);border-radius:18px;overflow:hidden;transition:background-color .2s ease,transform .2s var(--ai-ease)}
@media (hover:hover) and (pointer:fine){.ai-card:hover{background:#252628;transform:translateY(-2px)}}
.ai-card .ph{aspect-ratio:16/9;background:#26282b center/cover no-repeat}
.ai-card .tx{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px}
.ai-card .meta{font-size:11.5px;color:#9aa0a6;display:flex;gap:6px;align-items:center}
.ai-card .meta b{color:#a8c7fa;font-weight:500}
.ai-card h3{margin:0;font-size:14.5px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ai-card p{margin:0;font-size:12.5px;color:#9aa0a6;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ai-news-empty{color:#8e918f;font-size:13px}
.ai-news-more{display:block;margin:16px auto 0;border:1px solid var(--ai-line);background:transparent;color:var(--ai-text);border-radius:999px;padding:9px 20px;font-size:13px}

/* mode suara */
.ai-voice{position:fixed;inset:0;z-index:90;background:radial-gradient(ellipse at 50% 60%,#1b2238 0,#0b0c10 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.ai-voice[hidden]{display:none}
.ai-orb{position:relative;width:160px;height:160px}
.ai-orb i{position:absolute;inset:0;border-radius:50%;background:var(--ai-grad);filter:blur(18px);opacity:.75;animation:aiOrb 3.2s ease-in-out infinite}
.ai-orb i:nth-child(2){inset:18px;opacity:.9;animation-duration:2.4s;animation-direction:reverse;filter:blur(10px)}
.ai-orb i:nth-child(3){inset:46px;background:#e3e3e3;filter:blur(6px);opacity:.85;animation-duration:1.8s}
.ai-voice.speaking .ai-orb i{animation-duration:.9s}
.ai-voice.paused .ai-orb i{animation-play-state:paused;opacity:.35}
@keyframes aiOrb{0%,100%{transform:scale(.92) rotate(0)}50%{transform:scale(1.06) rotate(180deg)}}
.ai-voice-state{margin:0;font-size:18px;color:#e3e3e3}
.ai-voice-text{margin:0;max-width:560px;font-size:15px;color:#9aa0a6;line-height:1.6;max-height:30vh;overflow:auto}
.ai-voice-actions{display:flex;gap:12px}
.ai-vbtn{border:0;border-radius:999px;padding:12px 24px;font-size:14px;background:#2a2b2e;color:#e3e3e3;min-width:110px}
.ai-vbtn.end{background:#d96570;color:#fff}

/* pemilih bahasa (sidebar) + sembunyikan bilah Google Translate */
.lang-box{padding:0 12px;margin-top:14px}
.lang-box .navlabel{display:block;padding:0;margin-bottom:6px}
.lang-select{width:100%;background:#0d0f17;border:1px solid #2a2d3e;color:#e3e3e3;border-radius:10px;padding:9px 10px;font-size:12.5px}
iframe.goog-te-banner-frame,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.skiptranslate>iframe{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
font>font{background:transparent!important}

@media (max-width:980px){.ai-suggest{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
  .ai-page.active{min-height:calc(100vh - 70px)}
  .ai-stage{padding-top:2vh}
  .ai-composer{border-radius:24px;padding:12px 10px 8px 14px}
  .ai-modes button{padding:8px 10px;font-size:12.5px}
  .ai-suggest{display:flex;overflow-x:auto;scrollbar-width:none;margin-left:-2px}
  .ai-suggest button{flex:0 0 72%;min-height:92px}
  .ai-news-grid{grid-template-columns:1fr}
  .ai-msg.user{max-width:88%}
  .ai-msg.bot{grid-template-columns:24px minmax(0,1fr);gap:9px}
  .lang-box{padding:0;margin-top:12px}
}
@media (pointer:coarse){.ai-modes button{min-height:40px}.ai-news-filter button{min-height:38px}}
@media (prefers-reduced-motion:reduce){.ai-hello span,.ai-orb i,.ai-shimmer,.ai-msg.bot.loading .ai-spark{animation:none}.ai-hero>*,.ai-suggest button,.ai-msg{animation:none}}
.ai-composer textarea{overflow-y:hidden}
.ai-composer textarea.scroll{overflow-y:auto}
@media (max-width:680px){
  .ai-tools{flex-wrap:wrap;row-gap:4px}
  .ai-modes{order:-1;flex:1 1 100%;margin:0 -4px 2px}
  .ai-composer textarea{font-size:16px}
}