/* Opsi A: rail ikon, mascot melayang tepat di atas kolom chat, view besar sebagai kartu.
   Susunan mengacu ke Muse sebagai referensi; mascot dan isi buatan sendiri. */
.opt-a {
  display: grid; height: 100dvh;
  grid-template-columns: var(--rail-w) var(--a-chat-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.opt-a:not(.view-open) { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

.rail {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 10px 0;
}
.rail .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-lg); transition: transform var(--dur) var(--ease-spring); }
.rail .icon-btn:hover { transform: scale(1.08); }
.rail .is-active { background: var(--color-hover); color: var(--color-text); }

/* kolom chat */
.opt-a .chat { position: relative; }
.chat-top {
  position: absolute; inset: 0 0 auto 0; z-index: 30; height: var(--a-top-h);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px var(--space-3); pointer-events: none;
}
.chat-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-bg);
  -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent);
}
.chat-top > * { pointer-events: auto; }
.top-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--hit); padding: 0 10px 0 var(--space-2);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500;
}
.top-btn:hover { background: var(--color-hover); }
.open-view-btn { display: none; }
.opt-a:not(.view-open) .open-view-btn { display: inline-grid; }

/* mascot tepat di tengah atas kolom chat */
.mascot-dock { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); transition: opacity var(--dur), transform var(--dur); }
.opt-a .mascot-btn { --mascot-size: 64px; flex-direction: column; gap: 0; border-radius: var(--radius-lg); }
.opt-a .mascot-btn .mascot-svg { transition: transform 0.35s var(--ease-spring); }
.opt-a .mascot-btn:hover .mascot-svg { transform: scale(1.1) rotate(-5deg); }
.opt-a .mascot-btn:active .mascot-svg { transform: scale(0.94); }
.opt-a .mascot-name {
  margin-top: -7px; padding: 1px 10px; border-radius: var(--radius-pill); position: relative;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-float);
  font-size: var(--text-xs); font-weight: 600;
}
.panel-open .mascot-dock { opacity: 0; transform: translateX(-50%) scale(0.6); pointer-events: none; }

.opt-a .chat-scroll { padding-top: var(--a-top-h); }
.opt-a:not(.view-open) .thread { max-width: var(--a-chat-max); margin: 0 auto; }
.opt-a:not(.view-open) .composer { width: min(var(--a-chat-max), 100% - 2 * var(--space-5)); margin-inline: auto; }

/* panel mascot */
.panel {
  position: absolute; z-index: 45; top: var(--space-2); left: var(--space-3); right: var(--space-3);
  max-width: 420px; max-height: calc(100% - 2 * var(--space-2)); margin-inline: auto; overflow: auto;
  padding: var(--space-4) var(--space-5) var(--space-5); text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
  transform-origin: 50% 0; animation: panel-in 0.3s var(--ease-spring);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-10px) scale(0.9); } }
.panel-close { position: absolute; top: 10px; right: 10px; }
.panel-mascot { --mascot-size: 124px; margin-top: var(--space-3); border-radius: 50%; }
.panel-mascot .mascot-svg { transition: transform 0.35s var(--ease-spring); }
.panel-mascot:hover .mascot-svg { transform: scale(1.05); }
.panel-mascot:active .mascot-svg { transform: scale(0.94, 0.9); }
.panel-name { font-size: 20px; font-weight: 600; margin: var(--space-1) 0 14px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; margin-bottom: var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-sunken); }
.seg button { height: 30px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--color-text-muted); }
.seg button .icon { width: 16px; height: 16px; }
.seg [aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-float); }
.panel h3 { margin-bottom: 10px; text-align: left; font-size: var(--text-sm); font-weight: 600; }
.events { display: grid; gap: var(--space-3); text-align: left; }
.events li { display: flex; gap: var(--space-3); align-items: flex-start; }
.ev-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.ev-icon .icon { width: 16px; height: 16px; }
.ev-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.ev-title { font-size: var(--text-sm); font-weight: 500; }
.ev-sub, .events time { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

.picks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-4); }
.picks:last-child { margin-bottom: 0; }
.swatch, .shape-btn { transition: transform var(--dur) var(--ease-spring); }
.swatch:hover, .shape-btn:hover { transform: scale(1.12); }
.swatch {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sw);
  border: 3px solid var(--color-surface); outline: 2px solid transparent;
}
.swatch[aria-pressed="true"] { outline-color: var(--color-text); }
.shape-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-text-muted); }
.shape-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 9; stroke-linejoin: round; }
.shape-btn[aria-pressed="true"] { background: var(--color-hover); color: var(--color-text); }

/* panel sesi */
.sessions {
  position: absolute; z-index: 46; inset: 0 auto 0 0; width: min(288px, 86%); overflow: auto;
  padding: 10px; background: var(--color-surface); border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-pop); animation: slide-in var(--dur) ease;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } }
.srow {
  --mascot-size: 22px;
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--hit);
  padding: 6px var(--space-2); border-radius: var(--radius-md); font-size: var(--text-sm); text-align: left;
}
.srow:hover, .srow.is-active { background: var(--color-hover); }
.srow .icon { width: 16px; height: 16px; color: var(--color-text-muted); }
.sgroup { display: flex; align-items: center; gap: 6px; margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.sgroup .icon { width: 14px; height: 14px; }

.opt-a .view {
  margin: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden;
}
.opt-a:not(.view-open) .view { display: none; }

@media (max-width: 768px) {
  .opt-a, .opt-a:not(.view-open) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .rail {
    grid-row: 2; flex-direction: row; justify-content: space-around;
    padding: var(--space-1) var(--space-3) calc(var(--space-1) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
  }
  .opt-a .chat { grid-row: 1; }
  .opt-a .composer { margin-bottom: var(--space-2); }
  .open-view-btn { display: inline-grid; }

  /* view jadi lembar yang naik dari bawah */
  .opt-a .view, .opt-a:not(.view-open) .view {
    display: flex; position: fixed; inset: 9dvh 0 0 0; z-index: 60; margin: 0;
    border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-pop);
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.32s;
  }
  .opt-a.view-open .view { transform: none; visibility: visible; }
  .opt-a.view-open .backdrop { display: block; z-index: 55; }
}