/* SocialPulsar design system — glass surfaces over a user-chosen backdrop.
   Rule for every screen: one shared backdrop (.home-backdrop), surfaces use the --glass-* tokens below.
   The "Görünüm" panel changes --bg / --glass / --bg-blur on #workspace, so every surface follows it. 
   KURAL (tasarım dili): Hiçbir ekranda gri/bej/beyaz opak kutu, kart ya da koyu gri yüzey kullanılmaz (akış, kullanıcı paneli, AI, Lobby, Kartlar, diyaloglar).
   Her yüzey camdır: --glass-bg (pencere/diyalog), --glass-inner (kart/panel), --glass-chip (düğme/hap); metin beyaz (--on-glass*).
   Tek istisna: birincil eylem hapı rgba(255,255,255,.92) + koyu yazı. --ink/--card/--card-2 yalnızca eski giriş ekranı uyumluluğu için duruyor; yeni kodda kullanma. */
.ai-workspace{
  --bg:linear-gradient(160deg,#a9b8ac 0%,#8fa293 38%,#6f8174 70%,#56665a 100%);
  --glass:.5;
  --bg-blur:0px;
  /* glass surfaces */
  --glass-bg:rgba(118,124,118,calc(.16 + var(--glass) * .5));
  --glass-filter:blur(calc(14px + var(--glass) * 34px)) saturate(1.35);
  --glass-border:rgba(255,255,255,.34);
  --glass-shadow:0 40px 90px rgba(10,14,12,.35),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08);
  --glass-inner:rgba(255,255,255,.08);
  --glass-inner-border:rgba(255,255,255,.16);
  --glass-chip:rgba(255,255,255,.14);
  --glass-chip-hover:rgba(255,255,255,.24);
  --glass-chip-border:rgba(255,255,255,.26);
  --glass-dark:rgba(255,255,255,.1); /* koyu/gri yüzey yok: "dark" artık yalnızca biraz daha yoğun cam */
  /* text on glass */
  --on-glass:#fff;--on-glass-2:rgba(255,255,255,.8);--on-glass-3:rgba(255,255,255,.6);
  /* accents */
  --grad:linear-gradient(135deg,#ffb347 0%,#ff5f6d 45%,#c13bd6 75%,#6a4cff 100%);
  --think:linear-gradient(90deg,#3d6bff 0%,#7f8cff 28%,#f08a4b 68%,#f5c542 100%);
  --edge:linear-gradient(90deg,#f5c542 0%,#f08a4b 34%,#e0567a 66%,#4f7dff 100%);
  /* light cards (posts, dialogs) */
  --ink:#24232b;--ink-2:#5e5c66;--ink-3:#8d8b95;--card:#f7f6f2;--card-2:#ecebe6;--white-a:rgba(255,255,255,.86);
  --radius-window:40px;--radius-panel:30px;
  position:fixed;inset:0;z-index:30;background:#20231f;color:#fff;-webkit-font-smoothing:antialiased;
}
.ai-workspace:not([hidden]){display:grid;grid-template-columns:96px minmax(0,1fr)}
.ai-workspace *{box-sizing:border-box}

/* shared backdrop behind every screen */
.home-backdrop{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.home-backdrop::before{content:"";position:absolute;inset:calc(var(--bg-blur) * -2);background:var(--bg);background-size:cover;background-position:center;filter:blur(var(--bg-blur));transition:background .4s ease}
.home-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,transparent 40%,rgba(0,0,0,.28) 100%)}

/* reusable glass surfaces */
.glass-window{position:relative;z-index:1;border-radius:var(--radius-window);background:var(--glass-bg);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-panel{border-radius:var(--radius-panel);background:var(--glass-inner);border:1px solid var(--glass-inner-border)}

/* main sidebar (rail) — same glass as the windows */
.ai-rail{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;width:76px;height:calc(100dvh - 40px);margin:20px 0 20px 20px;padding:18px 0 16px;
  border-radius:32px;background:var(--glass-bg);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  font-family:InterSP,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
.ai-rail svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ai-rail-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;flex:none;border:0;background:none;padding:0;cursor:pointer;color:var(--on-glass-2)}
.ai-rail-item span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--glass-chip);border:1px solid rgba(255,255,255,.18);transition:background .2s,color .2s,transform .2s}
.ai-rail-item small{display:block;width:100%;text-align:center;white-space:nowrap;line-height:14px;font-size:10.5px;letter-spacing:.01em;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.ai-rail-item:hover span{background:var(--glass-chip-hover);color:#fff}
.ai-rail-item.active span{background:rgba(255,255,255,.92);color:#2a2b33;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.ai-rail-item.active small{color:#fff;font-weight:600}
.ai-rail .rail-spark svg{width:22px;height:22px;stroke:none!important;fill:url(#spGrad)!important}
.ai-rail-spacer{flex:1}
.ai-rail-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:2px;background:var(--grad);font-size:15px;font-weight:600;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.ai-workspace :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* dialogs live at workspace level so they open from any screen */
.ai-workspace dialog{border:0;padding:0;color:#fff;font-family:Jost,Inter,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
.ai-workspace dialog::backdrop{background:rgba(18,20,19,.45);backdrop-filter:blur(6px)}
.ai-workspace dialog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .ai-workspace:not([hidden]){display:block}
  .ai-rail{display:none}
}