/* glen-design: v1 */
/* Ask: the world on the left, the conversation on the right. */
:root{ --ak-world: 46%; }

.ak{ display: grid; grid-template-columns: var(--ak-world) minmax(0, 1fr); height: calc(100dvh - var(--topbar-h)); min-height: 620px; }
.ak-world{ position: relative; border-right: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(80% 60% at 50% 55%, var(--tint), transparent 70%); }
.ak-stage{ position: absolute; inset: 0; }
.ak-state{ position: absolute; left: var(--s5); top: var(--s5); display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: var(--r-pill); z-index: 2; }
.ak-state span:last-child{ display: grid; line-height: 1.2; }
.ak-state b{ font-size: var(--fs-sm); }
.ak-state small{ font-size: var(--fs-micro); color: var(--ink-dim); }

.ak-talk{ display: flex; flex-direction: column; min-height: 0; position: relative; }
.ak-scroll{ flex: 1; overflow: auto; padding: var(--s7) clamp(var(--s5), 4vw, var(--s8)) var(--s5); scroll-behavior: smooth; overscroll-behavior: contain; }
.ak-intro{ max-width: 720px; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.ak-intro h1{ font-size: clamp(30px, 3vw, 44px); font-weight: 300; letter-spacing: -.035em; margin: var(--s3) 0 var(--s3); line-height: 1.1; }
.ak-intro .lede{ font-size: var(--fs-lg); color: var(--ink-dim); line-height: 1.45; max-width: 60ch; }
.ak-can{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: var(--s5) 0; }
.ak-can-i{ display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r-sm); background: var(--surface-1); box-shadow: var(--shadow-1), var(--ring);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ak-can-i .ic{ width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.ak-can-i span{ display: grid; line-height: 1.3; }
.ak-can-i b{ font-size: var(--fs-sm); }
.ak-can-i small{ font-size: var(--fs-micro); color: var(--ink-dim); }
.ak-starters{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.ak-starter{ display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s3) var(--s4); border: 0; border-radius: var(--r); cursor: pointer; text-align: left; color: var(--ink);
  background: var(--surface-1); box-shadow: var(--shadow-1), var(--ring); font: 600 var(--fs-sm)/1.35 var(--font-body);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ak-starter span{ flex: 1; }
.ak-starter .ic{ width: 16px; height: 16px; color: var(--accent); flex: none; }
.ak-starter .ic:last-child{ color: var(--ink-faint); transition: transform var(--dur-base) var(--ease-out); }
.ak-intro.asked .ak-can, .ak-intro.asked .ak-starters{ display: none; }
.ak-intro.asked h1{ font-size: var(--fs-xl); }
.ak-intro.asked .lede{ display: none; }

.ak-threads{ display: grid; gap: var(--s6); margin-top: var(--s5); max-width: 760px; }
@media (prefers-reduced-motion: no-preference){ .ak-thread{ animation: ev-in var(--dur-slow) var(--ease-out) both; } }
.ak-thread .q p{ font-size: var(--fs-lg); }
.ak-thread .a{ font-size: var(--fs-lg); line-height: 1.55; }
.ak-thread .evs{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ak-follow{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.ak-compose{ display: flex; align-items: flex-end; gap: var(--s3); margin: 0 clamp(var(--s5), 4vw, var(--s8)) var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s3); border-radius: var(--r-lg);
  background: var(--surface-1); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); max-width: 760px; transition: box-shadow var(--dur-base) var(--ease-out); }
.ak-compose:focus-within{ box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 0 36px var(--glow); }
.ak-compose .mini-orb{ margin-bottom: 4px; }
.ak-compose textarea{ flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none; color: var(--ink); font: 400 var(--fs-lg)/1.45 var(--font-body); padding: var(--s2) 0; max-height: 160px; }
.ak-compose .btn--primary{ border-radius: 50%; width: 40px; min-height: 40px; }
.ak-foot{ margin: 0 clamp(var(--s5), 4vw, var(--s8)) var(--s4); font-size: var(--fs-micro); color: var(--ink-faint); max-width: 760px; }

@media (hover: hover) and (pointer: fine){
  .ak-starter:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2), 0 0 0 1px var(--accent); }
  .ak-starter:hover .ic:last-child{ transform: translateX(3px); color: var(--accent); }
  .ak-can-i:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2), var(--ring); }
}
.ak-starter:active{ transform: scale(.98); }

@media (max-width: 1100px){
  .ak{ grid-template-columns: 1fr; grid-template-rows: 42vh minmax(0, 1fr); height: auto; min-height: calc(100dvh - var(--topbar-h)); }
  .ak-world{ border-right: 0; border-bottom: 1px solid var(--line); }
  .ak-talk{ min-height: 58vh; }
  .ak-can{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .ak{ grid-template-rows: 44vh auto; min-height: 0; }
  .ak-scroll{ padding: var(--s5) var(--s4); overflow: visible; }
  .ak-starters{ grid-template-columns: 1fr; }
  .ak-compose{ position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); margin: 0 var(--s3) var(--s3); }
  .ak-foot{ margin: 0 var(--s4) var(--s4); }
  .ak-thread .q p, .ak-thread .a{ font-size: var(--fs-base); }
}