@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/src/styles/blocks.css

@@ -0,0 +1,2439 @@
+
+
+
+.ac-stream-wrap {
+  position: relative;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ac-stream-viewport {
+  position: relative;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ac-stream {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+  overflow-y: auto;
+  padding: 16px var(--ac-gutter) 8px;
+}
+.ac-stream > * {
+  max-width: var(--ac-content-max);
+  margin: 0 auto;
+  width: 100%;
+}
+.ac-stream__divider {
+  align-self: center;
+  border-radius: 999px;
+  background: var(--surface-800);
+  padding: 2px 12px;
+  font-size: var(--text-meta);
+  line-height: var(--text-meta--line-height);
+  color: var(--text-400);
+}
+.ac-stream__day {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 18px auto 10px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-stream__day::before,
+.ac-stream__day::after {
+  content: "";
+  height: 1px;
+  flex: 1;
+  background: var(--border-rule);
+}
+.ac-notes {
+  display: flex;
+  width: 100%;
+  max-width: var(--ac-content-max);
+  flex-direction: column;
+  gap: 6px;
+  margin: 0 auto;
+}
+
+
+.ac-msg-slot {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ac-msg-slot[data-align="end"] {
+  justify-content: flex-end;
+}
+.ac-msg-slot[data-select-mode="true"] {
+  cursor: pointer;
+}
+.ac-msg-slot[data-selected="true"] {
+  background: var(--surface-800);
+  margin: 0 max(calc((100% - var(--ac-content-max)) / -2), calc(var(--ac-gutter) * -1));
+  padding: 4px 20px;
+  border-radius: var(--radius-md);
+}
+.ac-select-box {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-600);
+  border-radius: 999px;
+  color: var(--surface-950);
+}
+.ac-select-box[data-state="checked"] {
+  background: var(--accent-success);
+  border-color: var(--accent-success);
+}
+.ac-msg {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  gap: 8px;
+  animation: ac-msg-enter 120ms ease-out;
+}
+.ac-msg[data-align="end"] {
+  max-width: 85%;
+  margin-left: auto;
+  flex-direction: row-reverse;
+}
+.ac-msg__col {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+.ac-msg__col[data-align="end"],
+.ac-msg-slot[data-align="end"] .ac-msg__col {
+  align-items: flex-end;
+}
+
+.ac-msg__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-meta);
+  line-height: var(--text-meta--line-height);
+  color: var(--text-400);
+}
+.ac-msg__meta time {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+.ac-msg__who {
+  font-weight: 500;
+  color: var(--text-300);
+}
+.ac-msg__ctx {
+  margin-left: auto;
+}
+.ac-avatar {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--surface-800);
+  border: 1px solid var(--border-700);
+  font-size: var(--text-meta);
+  color: var(--text-300);
+}
+.ac-avatar[data-kind="self"] {
+  background: var(--surface-700);
+  border-color: var(--border-600);
+}
+
+.ac-bubble {
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+  color: var(--text-200);
+  overflow-wrap: anywhere;
+}
+.ac-bubble[data-msg-role="user"] {
+  padding: 10px 14px;
+  border-radius: 16px;
+  background: var(--surface-700);
+  border: 1px solid var(--border-700);
+  color: var(--text-100);
+}
+.ac-bubble[data-msg-role="system"] {
+  padding: 6px 12px;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--surface-800) 50%, transparent);
+  color: var(--text-400);
+}
+.ac-bubble[data-msg-role="tool"] {
+  padding: 2px 0;
+  background: transparent;
+}
+.ac-bubble[data-variant="mention"] {
+  background: var(--surface-800);
+}
+.ac-bubble__mention {
+  display: inline-flex;
+  height: var(--control-xs);
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-700);
+  color: var(--text-200);
+  font-weight: 500;
+  font-size: var(--text-meta);
+}
+
+
+.ac-card {
+  min-width: min(320px, 100%);
+  overflow: hidden;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-md);
+  background: var(--surface-900);
+  font-size: var(--text-meta);
+}
+.ac-card__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border-rule);
+}
+.ac-card__title {
+  font-weight: 500;
+  color: var(--text-200);
+}
+.ac-card__state {
+  margin-left: auto;
+  color: var(--text-400);
+}
+.ac-card__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--accent-success);
+}
+.ac-card__dot[data-state="running"] {
+  background: var(--accent-warning);
+  animation: ac-pulse 1.1s ease-in-out infinite;
+}
+.ac-card__dot[data-state="error"] {
+  background: var(--accent-danger);
+}
+.ac-card__body {
+  padding: 8px 10px;
+  font-family: var(--font-code);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--text-300);
+}
+
+.ac-compact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: center;
+  padding: 2px 0;
+  font-size: var(--text-meta);
+  color: var(--text-500);
+}
+.ac-compact__tokens {
+  font-family: var(--font-code);
+  font-variant-numeric: tabular-nums;
+}
+.ac-compact__reason {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ac-memory {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  font-size: var(--text-micro);
+  line-height: 1.5;
+  color: var(--text-500);
+  opacity: 0.85;
+}
+.ac-memory__count {
+  flex-shrink: 0;
+  color: var(--text-400);
+}
+.ac-memory__excerpt {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+.ac-tools {
+  min-width: min(320px, 100%);
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-md);
+  background: var(--surface-900);
+  overflow: hidden;
+}
+.ac-tools__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  text-align: left;
+  color: var(--text-300);
+}
+.ac-tools__trigger:hover {
+  background: var(--surface-800);
+}
+.ac-tools__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--accent-success);
+}
+.ac-tools__dot[data-status="running"] {
+  background: var(--accent-warning);
+}
+.ac-tools__dot[data-status="error"] {
+  background: var(--accent-danger);
+}
+.ac-tools__title {
+  font-weight: 500;
+}
+.ac-tools__names {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-code);
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-tools__chevron {
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+.ac-tools__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--border-800);
+}
+
+
+.ac-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-400);
+  font-size: var(--text-meta);
+}
+.ac-typing i {
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--accent-primary);
+  animation: ac-blink 1.2s ease-in-out infinite;
+}
+.ac-typing i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.ac-typing i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+
+.ac-attach__grid {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.ac-attach__grid[data-cols="1"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+.ac-attach__grid[data-cols="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.ac-attach__grid[data-cols="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ac-attach__tile {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  cursor: zoom-in;
+}
+.ac-attach__grid[data-cols="1"] .ac-attach__tile {
+  width: fit-content;
+}
+.ac-attach__grid[data-cols="1"] .ac-attach__img {
+  max-width: 320px;
+  max-height: 240px;
+  object-fit: contain;
+}
+.ac-attach__grid:not([data-cols="1"]) .ac-attach__tile {
+  aspect-ratio: 1;
+}
+.ac-attach__grid:not([data-cols="1"]) .ac-attach__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ac-attach__tile[data-state="error"] {
+  cursor: not-allowed;
+}
+.ac-attach__ph {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-attach__preview-img {
+  max-height: 70vh;
+  max-width: min(92vw, 900px);
+  object-fit: contain;
+}
+.ac-attach__strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px 0;
+}
+.ac-attach__chip {
+  display: inline-flex;
+  max-width: 220px;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px 3px 5px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-800);
+  border: 1px solid var(--border-700);
+  font-size: var(--text-meta);
+  color: var(--text-200);
+}
+.ac-attach__chip-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.ac-attach__chip-icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--text-400);
+}
+.ac-attach__chip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ac-attach__remove {
+  display: grid;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--text-500);
+}
+.ac-attach__remove:hover {
+  color: var(--accent-danger);
+  background: var(--surface-700);
+}
+.ac-vision-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: var(--text-micro);
+}
+.ac-vision-tag[data-state="no"] {
+  background: var(--surface-800);
+  color: var(--text-300);
+}
+
+
+.ac-chat {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+.ac-composer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 10px var(--ac-gutter) 12px;
+  background: var(--surface-950);
+}
+.ac-composer__card {
+  position: relative;
+
+  border-radius: var(--radius-xl);
+  background: var(--surface-900);
+
+  border: 1px solid var(--border-control);
+  box-shadow: 0 1px 2px var(--shadow-strong);
+  transition: border-color 150ms ease;
+}
+
+.ac-composer__field {
+  min-height: 38px;
+  height: var(--ac-field-h, 64px);
+  padding: 10px 14px;
+  border: 0;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: transparent;
+  resize: none;
+  overflow-y: auto;
+  font-variant-ligatures: none;
+}
+.ac-composer__field:focus {
+  outline: none;
+}
+
+.ac-composer__field:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--border-500);
+  border-radius: var(--radius-md);
+}
+.ac-composer__bar {
+  display: flex;
+  height: 36px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+}
+.ac-composer__left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ac-composer__count {
+  margin-right: auto;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-composer__right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ac-composer__send {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+}
+.ac-composer__send[data-state="idle"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.ac-composer__send[data-state="idle"]:hover {
+  opacity: 0.88;
+}
+.ac-composer__send[data-state="disabled"] {
+  background: transparent;
+  border: 1px solid var(--border-600);
+  color: var(--text-500);
+}
+.ac-composer__send[data-state="streaming"] {
+  background: var(--surface-700);
+  border: 1px solid var(--border-600);
+  color: var(--text-200);
+}
+.ac-composer__stop-ring {
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border-radius: 999px;
+  border: 1px solid var(--border-600);
+  color: var(--text-300);
+}
+
+.ac-composer__stop-ring:hover {
+  background: var(--surface-700);
+}
+.ac-composer__mic {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--text-300);
+}
+.ac-composer__mic:hover {
+  background: var(--surface-700);
+}
+.ac-composer__mic[data-state="listening"] {
+  color: var(--accent-danger);
+  animation: ac-pulse 1.2s ease-in-out infinite;
+}
+.ac-composer__chip {
+  display: inline-flex;
+  height: var(--control-sm);
+  max-width: 180px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-pill);
+  color: var(--text-300);
+  cursor: pointer;
+}
+.ac-composer__chip[data-mode="yolo"] {
+  color: var(--accent-warning);
+}
+.ac-composer__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-meta);
+}
+.ac-composer__perm-icon {
+  width: 13px;
+  height: 13px;
+}
+.ac-composer__perm-caret {
+  width: 12px;
+  height: 12px;
+  opacity: 0.6;
+}
+.ac-menu__check-spacer {
+  display: inline-block;
+  width: 1em;
+}
+.ac-perm-menu__hint,
+.ac-model-menu__hint {
+  display: block;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-model-menu__list {
+  max-height: 288px;
+  overflow-y: auto;
+}
+.ac-model-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ac-model-tile {
+  position: relative;
+  display: inline-flex;
+}
+.ac-model-tile__badge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  color: var(--accent-primary);
+}
+.ac-model-menu__group {
+  padding-top: 6px;
+}
+.ac-model-menu__name-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ac-model-menu__multiplier {
+  margin-left: auto;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+  font-variant-numeric: tabular-nums;
+}
+.ac-model-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: var(--text-micro);
+  line-height: 16px;
+  white-space: nowrap;
+}
+.ac-model-badge[data-tone="warn"] {
+  background: color-mix(in srgb, var(--accent-warning) 16%, transparent);
+  color: var(--accent-warning);
+}
+.ac-model-badge[data-tone="accent"] {
+  background: var(--surface-700);
+  color: var(--accent-primary);
+}
+.ac-model-badge[data-tone="danger"] {
+  background: color-mix(in srgb, var(--accent-danger) 16%, transparent);
+  color: var(--accent-danger);
+}
+.ac-model-badge[data-tone="neutral"] {
+  background: var(--surface-700);
+  color: var(--text-300);
+}
+
+
+
+.ac-composer__grip {
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  z-index: 12;
+  display: grid;
+  width: 96px;
+  height: 12px;
+  transform: translateX(-50%);
+  place-items: center;
+  cursor: ew-resize;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 140ms ease;
+}
+.ac-composer__card:hover .ac-composer__grip,
+.ac-composer__grip:focus-visible,
+.ac-composer__grip[data-dragging="true"] {
+  opacity: 1;
+}
+.ac-composer__grip::before {
+  content: "";
+  width: 44px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--border-600);
+  transition:
+    width 140ms ease,
+    background 140ms ease;
+}
+.ac-composer__grip:hover::before,
+.ac-composer__grip[data-dragging="true"]::before {
+  width: 72px;
+  background: var(--accent-primary);
+}
+
+
+.ac-composer__dock {
+  position: relative;
+}
+.ac-mention {
+  position: absolute;
+  left: 10px;
+  bottom: calc(100% + 6px);
+  width: min(24rem, calc(100% - 20px));
+  border: 1px solid var(--border-600);
+  border-radius: var(--radius-sm);
+  background: var(--surface-900);
+  z-index: var(--z-tooltip);
+}
+.ac-mention[hidden] {
+  display: none;
+}
+.ac-mention__list {
+  max-height: 280px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.ac-mention__hint {
+  padding: 6px 10px;
+  border-top: 1px solid var(--border-800);
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-mention__label {
+  padding: 6px 10px 2px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-mention__all,
+.ac-mention__item {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  text-align: left;
+  color: var(--text-200);
+}
+.ac-mention__all {
+  background: var(--surface-800);
+  color: var(--accent-primary);
+}
+.ac-mention__all[data-state="active"],
+.ac-mention__item[data-state="active"] {
+  background: var(--surface-700);
+}
+.ac-mention__file {
+  display: flex;
+  width: 100%;
+  height: 32px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  text-align: left;
+}
+.ac-mention__file[data-state="active"] {
+  background: var(--surface-700);
+}
+.ac-mention__file-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-code);
+  font-size: var(--text-meta);
+}
+.ac-mention__cmd {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  text-align: left;
+}
+.ac-mention__cmd[data-state="active"] {
+  background: var(--surface-700);
+}
+.ac-mention__cmd-body {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+.ac-mention__cmd-label {
+  font-size: var(--text-body);
+  color: var(--text-200);
+}
+.ac-mention__cmd-desc {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-mention__cmd-trigger {
+  font-family: var(--font-code);
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-mention__src {
+  border: 1px solid var(--border-700);
+  border-radius: 999px;
+  padding: 0 6px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+
+
+.ac-select-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-800);
+  background: var(--surface-950);
+}
+.ac-select-bar__count {
+  font-size: var(--text-meta);
+  color: var(--text-400);
+}
+.ac-select-bar__actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+}
+.ac-select-bar__btn--danger:hover {
+  color: var(--accent-danger);
+}
+
+
+.ac-selection {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border-600);
+  border-radius: var(--radius-sm);
+  background: var(--surface-900);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
+}
+.ac-selection .ac-selection__btn {
+  height: var(--control-xs);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-meta);
+  font-weight: 500;
+}
+.ac-selection .ac-selection__btn:hover {
+  background: var(--surface-700);
+}
+
+
+.ac-chat__head {
+  display: flex;
+  height: 44px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border-rule);
+  background: var(--surface-950);
+}
+.ac-chat__titles {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+.ac-chat__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-title);
+  font-weight: 600;
+  color: var(--text-100);
+}
+.ac-chat__subline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ac-chat__sub {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-chat__grow {
+  flex: 1;
+}
+.ac-chat__actions {
+  display: flex;
+  gap: 4px;
+}
+.ac-icon-btn {
+  color: var(--text-400);
+}
+.ac-icon-btn:hover {
+  background: var(--surface-800);
+}
+.ac-icon-btn[data-state="active"] {
+  color: var(--accent-primary);
+  background: var(--surface-700);
+}
+.ac-id-avatars {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.ac-id-avatars__item {
+  margin-inline-start: -8px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px var(--surface-900);
+  transition: margin-inline-start 150ms ease;
+}
+.ac-id-avatars:hover .ac-id-avatars__item {
+  margin-inline-start: 0;
+}
+.ac-id-avatars__more {
+  display: inline-flex;
+  height: 22px;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-800);
+  font-size: var(--text-micro);
+  color: var(--text-400);
+}
+.ac-id-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ac-id-meta__chip {
+  border: 1px solid var(--border-700);
+  border-radius: 999px;
+  padding: 0 6px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+  white-space: nowrap;
+}
+.ac-id-meta__time {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+  white-space: nowrap;
+}
+.ac-empty-scene {
+  display: flex;
+  margin: auto;
+  max-width: 400px;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+.ac-empty-scene__mark {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border-radius: var(--radius-lg);
+  background: var(--surface-850, var(--surface-800));
+  color: var(--accent-primary);
+}
+.ac-empty-scene__title {
+  font-size: var(--text-heading);
+  font-weight: 600;
+  color: var(--text-100);
+}
+.ac-empty-scene__hint {
+  font-size: var(--text-body);
+  color: var(--text-400);
+}
+.ac-empty-scene__points {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.ac-empty-scene__point {
+  display: flex;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-850, var(--surface-800));
+  text-align: left;
+}
+.ac-empty-scene__point-icon {
+  color: var(--accent-primary);
+}
+.ac-empty-scene__point-title {
+  display: block;
+  font-size: var(--text-body);
+  font-weight: 500;
+  color: var(--text-200);
+}
+.ac-empty-scene__point-hint {
+  display: block;
+  font-size: var(--text-meta);
+  color: var(--text-500);
+}
+
+
+@keyframes ac-msg-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes ac-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  40% {
+    opacity: 0.2;
+  }
+}
+@keyframes ac-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ac-msg,
+  .ac-typing i,
+  .ac-card__dot,
+  .ac-composer__card,
+  .ac-tools__chevron {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .ac-card,
+  .ac-tools {
+    min-width: 0;
+  }
+  .ac-msg-slot[data-selected="true"] {
+    margin: 0 -12px;
+    padding: 4px 12px;
+  }
+}
+
+
+
+html[data-radius="square"] {
+  --radius: 2px;
+  --radius-sm: 0;
+  --radius-md: 1px;
+  --radius-lg: 2px;
+  --radius-xl: 3px;
+}
+
+
+html[data-density="compact"] .ac-msg {
+  gap: 6px;
+}
+html[data-density="compact"] .ac-msg__col {
+  gap: 2px;
+}
+html[data-density="compact"] .ac-bubble[data-msg-role="user"] {
+  padding: 6px 10px;
+}
+html[data-density="compact"] .ac-stream {
+  gap: 8px;
+}
+
+
+html[data-msg-style="bubble"] .ac-bubble[data-msg-role="assistant"] {
+  padding: 10px 14px;
+  border-radius: 12px;
+  background: var(--surface-800);
+  border: 1px solid var(--border-800);
+}
+html[data-msg-style="bubble"] .ac-msg-slot[data-align="end"] .ac-bubble[data-msg-role="user"] {
+  background: var(--surface-700);
+}
+
+
+html[data-hide~="reasoning"] [data-cmp="ai/reasoning"],
+html[data-hide~="reasoning"] [data-cmp="ac/reasoning"],
+html[data-hide~="tool"] [data-cmp="ai/tool-card"],
+html[data-hide~="tool"] [data-cmp="ac/tool-group"],
+html[data-hide~="sandbox"] [data-cmp="ac/sandbox"],
+html[data-hide~="memory"] [data-cmp="ac/memory-pill"],
+html[data-hide~="compaction"] [data-cmp="ac/compact"],
+html[data-hide~="usage"] [data-cmp="ai/context-usage"],
+html[data-hide~="attachments"] [data-cmp="ac/msg-attachments"],
+html[data-hide~="attachments"] [data-cmp="ac/attachments"],
+html[data-hide~="todo"] [data-cmp="ac/todo-card"] {
+  display: none !important;
+}
+
+
+.ac-display__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ac-display__label {
+  font-size: var(--text-body);
+  color: var(--text-200);
+}
+.ac-display__seg {
+  display: inline-flex;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-800);
+}
+.ac-display__seg-item {
+  padding: 3px 10px;
+  border-radius: calc(var(--radius-sm) - 1px);
+  font-size: var(--text-meta);
+  color: var(--text-400);
+}
+.ac-display__seg-item[data-state="selected"] {
+  background: var(--surface-600);
+  color: var(--text-100);
+}
+.ac-display__switch {
+  position: relative;
+  display: inline-flex;
+  width: 30px;
+  height: 17px;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 999px;
+  background: var(--surface-600);
+  transition: background 150ms ease;
+}
+.ac-display__switch[data-state="on"] {
+  background: var(--accent-success);
+}
+.ac-display__switch-knob {
+  position: absolute;
+  left: 2px;
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  background: var(--text-100);
+  transition: transform 150ms ease;
+}
+.ac-display__switch[data-state="on"] .ac-display__switch-knob {
+  transform: translateX(13px);
+}
+
+
+.ac-msg-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 2px;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+.ac-msg-slot:hover .ac-msg-actions,
+.ac-msg-actions:focus-within {
+  opacity: 1;
+}
+.ac-msg-actions__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  padding-left: 8px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+  font-variant-numeric: tabular-nums;
+}
+.ac-artifacts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+.ac-artifacts__chip {
+  display: inline-flex;
+  max-width: 240px;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-md);
+  background: var(--surface-800);
+  font-size: var(--text-meta);
+  color: var(--text-200);
+}
+.ac-artifacts__chip:disabled {
+  cursor: default;
+}
+.ac-artifacts__chip:not(:disabled):hover {
+  background: var(--surface-700);
+}
+.ac-artifacts__icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--text-400);
+}
+.ac-artifacts__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ac-artifacts__size {
+  flex-shrink: 0;
+  color: var(--text-500);
+  font-variant-numeric: tabular-nums;
+}
+.ac-artifacts__all {
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-meta);
+  color: var(--text-300);
+}
+.ac-artifacts__all:hover {
+  background: var(--surface-800);
+}
+
+
+html[data-theme="glass"] .ac-composer__card,
+html[data-theme="glass"] .ac-card,
+html[data-theme="glass"] .ac-artifacts__chip {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+html[data-theme="glass"] .ac-composer__send[data-state="idle"] {
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
+}
+
+[role="dialog"],
+[role="menu"],
+[role="listbox"],
+.ac-display-panel {
+  background: var(--surface-overlay);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+
+:root {
+  --ac-stream-width: 720px;
+  --ac-composer-width: 720px;
+
+  --ac-content-max: var(--ac-stream-width);
+
+  --ac-gutter: 20px;
+}
+.ac-msg,
+.ac-msg-slot {
+  max-width: var(--ac-content-max);
+  margin-left: auto;
+  margin-right: auto;
+}
+.ac-msg-slot[data-align="end"]:not([data-selected="true"]) {
+  margin-left: auto;
+  margin-right: auto;
+}
+.ac-composer__card {
+  width: 100%;
+  max-width: var(--ac-composer-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+html[data-composer-width="full"] .ac-composer,
+html[data-composer-width="full"] .ac-composer__card {
+  max-width: 100%;
+}
+
+html[data-composer-width="full"] {
+  --ac-composer-width: 100%;
+}
+
+html[data-stream-width="full"] .ac-msg,
+html[data-stream-width="full"] .ac-msg-slot,
+html[data-stream-width="full"] .ac-perm-dock > *,
+html[data-stream-width="full"] .ac-stream__day,
+html[data-stream-width="full"] .ac-notes,
+html[data-stream-width="full"] [data-cmp="ac/todo-card"] {
+  max-width: 100%;
+}
+
+html[data-stream-width="full"] {
+  --ac-content-max: 100%;
+}
+[data-cmp="ac/todo-card"] {
+  max-width: var(--ac-content-max);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.ac-perm-menu__row {
+  align-items: flex-start;
+}
+.ac-perm-menu__check {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.ac-perm-menu__icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.ac-perm-menu__body {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 1px;
+}
+.ac-perm-menu__title {
+  font-size: var(--text-body);
+  font-weight: 500;
+  color: var(--text-100);
+  line-height: 1.4;
+}
+.ac-perm-menu__hint {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+  line-height: 1.45;
+}
+
+
+.ac-todo-pill {
+  position: absolute;
+  top: 10px;
+
+  right: max(14px, calc((100% - var(--ac-content-max)) / 2 + 14px));
+  z-index: 30;
+}
+.ac-todo-pill__chip {
+  display: inline-flex;
+  height: 28px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid var(--border-700);
+  border-radius: 999px;
+  background: var(--surface-900);
+  font-size: var(--text-meta);
+  color: var(--text-300);
+}
+.ac-todo-pill__chip:hover {
+  background: var(--surface-800);
+  color: var(--text-100);
+}
+.ac-todo-pill__label {
+  font-weight: 500;
+}
+.ac-todo-pill__count {
+  font-variant-numeric: tabular-nums;
+  color: var(--text-400);
+}
+.ac-todo-pill__bar {
+  display: inline-block;
+  width: 36px;
+  height: 3px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--surface-700);
+}
+.ac-todo-pill__fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--accent-success);
+  transition: width 250ms ease;
+}
+.ac-todo-pill__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 300px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 8px 10px 10px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-lg);
+  background: var(--surface-overlay);
+  box-shadow: var(--elev-shadow-lg);
+}
+.ac-todo-pill__head {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 4px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+
+
+.spring-check__bounce {
+  animation: spring-check-squish 380ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.spring-check__tick {
+  animation: spring-check-tick 260ms ease-out;
+}
+.spring-check__tick path {
+  stroke-dasharray: 16;
+  stroke-dashoffset: 16;
+  animation: spring-check-draw 260ms 60ms ease-out forwards;
+}
+.spring-check__struck::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1px;
+  background: currentColor;
+  transform-origin: left;
+  animation: spring-check-strike 240ms 120ms ease-out both;
+}
+@keyframes spring-check-squish {
+  0% { transform: scale(1); }
+  35% { transform: scale(1.22, 0.82); }
+  65% { transform: scale(0.92, 1.1); }
+  100% { transform: scale(1); }
+}
+@keyframes spring-check-tick {
+  0% { opacity: 0; transform: scale(0.6); }
+  100% { opacity: 1; transform: scale(1); }
+}
+@keyframes spring-check-draw {
+  to { stroke-dashoffset: 0; }
+}
+@keyframes spring-check-strike {
+  0% { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+}
+
+
+.ac-lattice {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.ac-lattice__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 5px);
+  gap: 2px;
+}
+.ac-lattice__cell {
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.15;
+}
+.ac-lattice__cell--lit {
+  animation: lattice-wave 540ms ease-in-out infinite;
+}
+.ac-lattice__label {
+  font-size: var(--text-meta);
+  color: var(--text-300);
+}
+.ac-lattice__timer {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-meta);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-400);
+}
+.ac-lattice__mark[data-mark="done"] {
+  color: var(--accent-success);
+}
+.ac-lattice__mark[data-mark="error"] {
+  color: var(--accent-danger);
+}
+@keyframes lattice-wave {
+  0%, 100% { opacity: 0.15; }
+  40% { opacity: 1; }
+}
+
+
+.ac-squish {
+  display: inline-flex;
+  padding: 2px;
+  cursor: pointer;
+}
+.ac-squish__track {
+  position: relative;
+  display: inline-flex;
+  width: 34px;
+  height: 19px;
+  align-items: center;
+  border-radius: 999px;
+  background: var(--surface-600);
+  transition: background 200ms ease;
+}
+.ac-squish[data-state="on"] .ac-squish__track {
+  background: var(--accent-success);
+}
+.ac-squish__thumb {
+  position: absolute;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  background: var(--text-100);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.ac-squish[data-state="on"] .ac-squish__thumb {
+  transform: translateX(15px);
+}
+.ac-squish[data-squish="stretches"] .ac-squish__thumb {
+  transform: translateX(var(--squish-x, 7px)) scaleX(1.35) scaleY(0.85);
+  transition-duration: 180ms;
+}
+.ac-squish[data-state="on"][data-squish="stretches"] .ac-squish__thumb {
+  --squish-x: 8px;
+}
+.ac-squish[data-squish="squash"] .ac-squish__thumb {
+  transform: translateX(var(--thumb-x, 0)) scaleX(1.25) scaleY(0.8);
+  transition-duration: 140ms;
+}
+.ac-squish[data-state="on"][data-squish="squash"] .ac-squish__thumb {
+  --thumb-x: 15px;
+}
+
+
+.ac-line-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+}
+.ac-line-nav__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border-radius: var(--radius-sm);
+  text-align: left;
+  transition: transform 100ms ease;
+}
+.ac-line-nav__item:hover {
+  background: var(--surface-800);
+}
+.ac-line-nav__marker {
+  height: 1.5px;
+  border-radius: 999px;
+  transition:
+    width 120ms ease,
+    opacity 120ms ease,
+    background 120ms ease;
+}
+.ac-line-nav__index {
+  font-family: var(--font-code);
+  font-size: var(--text-micro);
+  color: var(--text-600);
+}
+.ac-line-nav__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-body);
+  color: var(--text-300);
+  transition: color 120ms ease;
+}
+.ac-line-nav__item[data-state="active"] .ac-line-nav__label {
+  font-weight: 500;
+}
+.ac-line-nav__badge {
+  margin-left: auto;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-700);
+  font-size: var(--text-micro);
+  color: var(--text-300);
+}
+
+
+
+.ac-queued {
+  width: 100%;
+  max-width: var(--ac-composer-width);
+  margin: 0 auto;
+  border: 1px solid var(--border-800);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: var(--surface-900);
+}
+.ac-queued + .ac-composer__card {
+
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top-color: transparent;
+}
+.ac-queued__head {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px 2px 10px;
+}
+.ac-queued__pill {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px;
+  font-size: var(--text-micro);
+  color: var(--text-400);
+}
+.ac-queued__pill:hover {
+  color: var(--text-200);
+}
+.ac-queued__preview {
+  overflow: hidden;
+  max-width: 320px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-600);
+}
+.ac-queued__chev {
+  width: 11px;
+  height: 11px;
+  color: var(--text-600);
+  transition: transform 160ms ease;
+}
+.ac-queued__chev[data-open="true"] {
+  transform: rotate(180deg);
+}
+.ac-queued__head-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--text-500);
+}
+.ac-queued__head-title {
+  color: var(--text-400);
+}
+.ac-queued__badge {
+  flex-shrink: 0;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--surface-700);
+  font-size: var(--text-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-300);
+}
+.ac-queued__badge[data-state="full"] {
+  background: color-mix(in srgb, var(--accent-warning) 22%, var(--surface-700));
+  color: var(--accent-warning);
+}
+.ac-queued__clear {
+  display: inline-grid;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-500);
+}
+.ac-queued__clear:hover {
+  background: var(--surface-800);
+  color: var(--text-100);
+}
+.ac-queued__body {
+  display: flex;
+  max-height: 200px;
+  overflow-y: auto;
+  flex-direction: column;
+  gap: 1px;
+  padding: 0 6px 6px;
+}
+.ac-queued-row {
+  display: flex;
+  min-height: 30px;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+}
+.ac-queued-row__grip {
+  flex-shrink: 0;
+  color: var(--text-700);
+  cursor: grab;
+}
+.ac-queued-row:hover .ac-queued-row__grip {
+  color: var(--text-500);
+}
+.ac-queued-row:hover {
+  background: var(--surface-800);
+}
+.ac-queued-row__text {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+}
+.ac-queued-row__content {
+  overflow: hidden;
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-body);
+  color: var(--text-100);
+}
+.ac-queued-row__att {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--surface-700);
+  font-size: var(--text-micro);
+  color: var(--text-300);
+}
+.ac-queued-row__acts {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  opacity: 0.55;
+  transition: opacity 120ms ease;
+}
+.ac-queued-row:hover .ac-queued-row__acts,
+.ac-queued-row:focus-within .ac-queued-row__acts {
+  opacity: 1;
+}
+.ac-queued-row__act {
+  display: inline-grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--text-400);
+}
+.ac-queued-row__act:hover:not(:disabled) {
+  background: var(--surface-700);
+  color: var(--text-100);
+}
+.ac-queued-row__act:disabled {
+  opacity: 0.35;
+}
+.ac-queued-row__act--accent {
+  width: auto;
+  padding: 0 7px;
+  color: var(--accent-primary);
+}
+.ac-queued-row__act--accent:hover:not(:disabled) {
+  background: var(--accent-primary-light);
+  color: var(--accent-primary);
+}
+
+
+
+.ac-prompt-pop {
+  position: absolute;
+  top: 50%;
+  right: max(6px, calc((100% - var(--ac-content-max)) / 2 - 40px));
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+}
+
+.ac-prompt-pop__rail {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 11px;
+  padding: 12px 8px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.ac-prompt-pop__rail:hover {
+  background: var(--surface-800);
+}
+.ac-prompt-pop__dash {
+  display: block;
+  width: 16px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--text-600);
+  opacity: 0.55;
+  transition:
+    width 150ms ease,
+    opacity 150ms ease,
+    background 150ms ease;
+}
+
+.ac-prompt-pop__dash[data-latest="true"] {
+  width: 24px;
+  opacity: 0.9;
+  background: var(--text-400);
+}
+.ac-prompt-pop__rail:hover .ac-prompt-pop__dash {
+  width: 20px;
+  opacity: 0.85;
+}
+.ac-prompt-pop__rail:hover .ac-prompt-pop__dash[data-active="true"],
+.ac-prompt-pop__dash[data-active="true"] {
+  width: 32px;
+  opacity: 1;
+  background: var(--accent-primary);
+}
+
+.ac-prompt-pop__panel {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 2px);
+  z-index: 40;
+  min-width: min(320px, calc(100vw - 48px));
+  max-width: min(440px, calc(100vw - 48px));
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-lg);
+  background: var(--surface-overlay);
+  box-shadow: var(--elev-shadow-lg);
+  transform: translateY(-50%);
+  transform-origin: right center;
+  animation: prompt-pop-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.ac-prompt-pop__head {
+  padding: 4px 8px 6px;
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-prompt-pop__row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  text-align: right;
+}
+.ac-prompt-pop__row:hover {
+  background: var(--surface-800);
+}
+.ac-prompt-pop__text {
+  overflow: hidden;
+  flex: 1;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-body);
+  color: var(--text-300);
+  transition: color 120ms ease;
+}
+.ac-prompt-pop__row:hover .ac-prompt-pop__text {
+  color: var(--text-100);
+}
+.ac-prompt-pop__marker {
+  width: 14px;
+  height: 2px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--text-600);
+  transition:
+    width 140ms ease,
+    background 140ms ease;
+}
+.ac-prompt-pop__row:hover .ac-prompt-pop__marker {
+  width: 30px;
+  background: var(--accent-primary);
+}
+@keyframes prompt-pop-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) translateX(6px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0) scale(1);
+  }
+}
+
+
+.ac-chat__main {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+.ac-chat__main > :first-child {
+  min-width: 0;
+  flex: 1;
+}
+
+
+.ac-perm {
+  position: relative;
+  width: 100%;
+  padding: 9px 11px 9px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-lg);
+  background: var(--surface-900);
+}
+
+.ac-perm[data-risk="high"]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 9px;
+  bottom: 9px;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--accent-danger);
+}
+
+
+.ac-perm__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ac-perm__head-icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--text-500);
+}
+.ac-perm__title {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: baseline;
+  gap: 5px;
+  font-size: var(--text-body);
+  color: var(--text-300);
+}
+.ac-perm__tool {
+  overflow: hidden;
+  padding: 1px 5px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-800);
+  font-family: var(--font-code);
+  font-size: var(--text-meta);
+  color: var(--text-100);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ac-perm__risk-icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--accent-danger);
+}
+.ac-perm__queue {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-600);
+}
+.ac-perm__rest {
+  margin-left: 2px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--surface-800);
+  color: var(--text-400);
+}
+.ac-perm__rest:hover {
+  color: var(--accent-primary);
+}
+
+
+.ac-perm__detail {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 5px;
+  padding-left: 19px;
+}
+.ac-perm__line {
+  min-width: 0;
+  font-family: var(--font-code);
+  font-size: var(--text-meta);
+  color: var(--text-500);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.ac-perm__line.is-clamped {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ac-perm__more {
+  flex-shrink: 0;
+  padding: 0 4px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-micro);
+  color: var(--text-600);
+}
+.ac-perm__more:hover {
+  background: var(--surface-800);
+  color: var(--text-300);
+}
+.ac-perm__reason {
+  margin-top: 4px;
+  padding-left: 19px;
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  color: var(--text-500);
+}
+
+
+.ac-perm__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+.ac-perm__deny {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  padding: 0 9px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-meta);
+  color: var(--text-500);
+}
+.ac-perm__deny:hover {
+  background: var(--surface-800);
+  color: var(--text-100);
+}
+
+.ac-perm__primary {
+  position: relative;
+  display: flex;
+  margin-left: auto;
+  align-items: stretch;
+}
+.ac-perm__btn {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 11px;
+  font-size: var(--text-meta);
+  font-weight: 500;
+}
+.ac-perm__btn--primary {
+  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.ac-perm__btn--primary:hover {
+  opacity: 0.9;
+}
+.ac-perm__btn--scope {
+  padding: 0 6px;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  border-left: 1px solid color-mix(in srgb, var(--primary) 70%, transparent);
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.ac-perm__btn--scope:hover {
+  opacity: 0.9;
+}
+.ac-perm__menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 5px);
+  z-index: 40;
+  min-width: 150px;
+  padding: 4px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-md);
+  background: var(--surface-overlay);
+  box-shadow: var(--elev-shadow-lg);
+}
+.ac-perm__menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 9px;
+  border-radius: var(--radius-sm);
+  text-align: left;
+  font-size: var(--text-meta);
+  color: var(--text-300);
+}
+.ac-perm__menu-item:hover {
+  background: var(--surface-800);
+  color: var(--text-100);
+}
+
+
+
+.ac-ask-sheet {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  z-index: 45;
+
+
+  width: min(var(--ac-composer-width), calc(100% - var(--ac-gutter) * 2));
+
+  max-height: min(320px, calc(100vh - 240px));
+  display: flex;
+  flex-direction: column;
+  transform: translateX(-50%);
+  padding: 10px 12px 11px;
+  border: 1px solid var(--border-700);
+  border-radius: var(--radius-lg);
+  background: var(--surface-overlay);
+  box-shadow: var(--elev-shadow-lg);
+  animation: ac-ask-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes ac-ask-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px) scale(0.97);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+.ac-ask-sheet__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-bottom: 7px;
+}
+.ac-ask-sheet__head-icon {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--accent-primary);
+}
+.ac-ask-sheet__who {
+  font-size: var(--text-meta);
+  font-weight: 500;
+  color: var(--text-200);
+}
+.ac-ask-sheet__progress {
+  padding: 0 6px;
+  border: 1px solid var(--border-600);
+  border-radius: 999px;
+  font-size: var(--text-micro);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-400);
+}
+.ac-ask-sheet__queued {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-ask-sheet__skip {
+  display: inline-flex;
+  margin-left: auto;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 7px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-ask-sheet__skip:hover {
+  background: var(--surface-800);
+  color: var(--text-200);
+}
+.ac-ask-sheet__body {
+  display: flex;
+  min-height: 0;
+  overflow-y: auto;
+  flex-direction: column;
+  gap: 9px;
+}
+.ac-ask-q__prompt {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: var(--text-body);
+  line-height: 1.55;
+  color: var(--text-100);
+}
+.ac-ask-q__index {
+  display: inline-grid;
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  place-items: center;
+  border: 1px solid var(--border-600);
+  border-radius: 999px;
+  font-size: 9px;
+  color: var(--text-400);
+}
+.ac-ask-q__choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 6px;
+}
+.ac-ask-q__chip {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 9px;
+  border: 1px solid var(--border-700);
+  border-radius: 999px;
+  background: var(--surface-800);
+  font-size: var(--text-meta);
+  color: var(--text-200);
+  transition:
+    border-color 130ms ease,
+    background 130ms ease,
+    color 130ms ease;
+}
+.ac-ask-q__chip:hover {
+  background: var(--surface-700);
+  color: var(--text-100);
+}
+.ac-ask-q__chip[data-state="recommended"] {
+  color: var(--text-100);
+}
+.ac-ask-q__chip[data-state="recommended"] svg {
+  color: var(--accent-primary);
+}
+.ac-ask-q__chip[data-state="chosen"] {
+  background: var(--accent-primary-light);
+  color: var(--text-100);
+}
+.ac-ask-q__chip[data-state="chosen"] svg {
+  color: var(--accent-primary);
+}
+.ac-ask-q__chip--free {
+  border-style: dashed;
+  color: var(--text-400);
+}
+.ac-ask-q__input {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 5px 8px;
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-sm);
+  background: var(--surface-950);
+  font-size: var(--text-meta);
+  color: var(--text-100);
+}
+.ac-ask-q__input:focus-visible {
+  border-color: var(--focus-ring);
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+.ac-ask-sheet__overflow {
+  font-size: var(--text-micro);
+  color: var(--text-500);
+}
+.ac-ask-sheet__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  padding-top: 9px;
+  border-top: 1px solid var(--border-800);
+}
+.ac-ask-sheet__default {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 9px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-meta);
+  color: var(--accent-primary);
+}
+.ac-ask-sheet__default:hover:not(:disabled) {
+  background: var(--accent-primary-light);
+}
+.ac-ask-sheet__default:disabled {
+  color: var(--text-600);
+}
+.ac-ask-sheet__submit {
+  display: inline-flex;
+  height: 26px;
+  margin-left: auto;
+  align-items: center;
+  gap: 4px;
+  padding: 0 11px;
+  border-radius: var(--radius-sm);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-size: var(--text-meta);
+  font-weight: 500;
+}
+.ac-ask-sheet__submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+.ac-ask-sheet__submit.is-empty {
+  background: var(--surface-700);
+  color: var(--text-500);
+}
+
+
+.ac-perm-dock {
+  position: relative;
+  z-index: 6;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 45vh;
+  overflow-y: auto;
+  padding: 0 var(--ac-gutter) 10px;
+}
+.ac-perm-dock > * {
+  max-width: var(--ac-content-max);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.ac-perm-dock::before {
+  content: "";
+  position: absolute;
+  inset: -18px 0 auto;
+  height: 18px;
+  background: linear-gradient(to bottom, transparent, var(--surface-950));
+  pointer-events: none;
+}
+
+
+.ac-composer__dock [data-cmp="ai/context-usage"] {
+  opacity: 0.55;
+  transition: opacity 140ms ease;
+}
+.ac-composer:hover .ac-composer__dock [data-cmp="ai/context-usage"],
+.ac-composer__dock [data-cmp="ai/context-usage"]:focus-visible,
+.ac-composer__dock [data-cmp="ai/context-usage"]:hover {
+  opacity: 1;
+}
+
+
+
+body:has(.ac-composer .ac-ask-sheet) .ac-perm-dock {
+  margin-bottom: 336px;
+}
+
+
+.ac-ask-q__multi-tag {
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 1px solid var(--border-600);
+  border-radius: 999px;
+  font-size: 10px;
+  color: var(--text-500);
+}
+
+.ac-ask-q__chip--other {
+  border-style: dashed;
+  color: var(--text-400);
+}
+.ac-ask-q__chip--other[data-state="chosen"] {
+  border-style: solid;
+  background: var(--accent-primary-light);
+  color: var(--text-100);
+}
+
+
+.ac-scroll-bottom {
+  position: absolute;
+  right: max(6px, calc((100% - var(--ac-content-max)) / 2 - 32px));
+
+  bottom: 10px;
+  z-index: 20;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid var(--border-700);
+  background: color-mix(in srgb, var(--surface-800) 92%, transparent);
+  color: var(--text-300);
+  box-shadow:
+    0 2px 8px -2px var(--shadow-strong),
+    0 0 0 3px color-mix(in srgb, var(--surface-950) 60%, transparent);
+  backdrop-filter: blur(6px);
+  animation: ac-scroll-bottom-in 160ms ease-out;
+}
+.ac-scroll-bottom:hover {
+  background: var(--surface-700);
+  color: var(--text-100);
+  border-color: var(--border-600);
+}
+@keyframes ac-scroll-bottom-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}