@layer legacy {
/* Final chat polish: account accent, explicit AI colours, and visible writing motion. */

/* Let the shared transparent character fill its existing avatar slot. */
#app .app-shell.chat-shell .chat-message .message-avatar-image {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 821px) {
  #app .app-shell.chat-shell .chat-is-active .aios-chat-messages {
    padding-top: 80px !important;
    scroll-padding-top: 80px;
  }
}

#app .app-shell.chat-shell .chat-message.user .message-body,
body[data-theme="light"] #app .app-shell.chat-shell .chat-message.user .message-body,
body[data-theme="dark"] #app .app-shell.chat-shell .chat-message.user .message-body {
  color: var(--aios-text) !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--aios-accent-strong) 8%, var(--aios-surface)) !important;
  box-shadow: none !important;
}

#app .app-shell.chat-shell .chat-message.user .message-text,
#app .app-shell.chat-shell .chat-message.user .message-text p,
#app .app-shell.chat-shell .chat-message.user .message-text li,
#app .app-shell.chat-shell .chat-message.user .message-meta,
#app .app-shell.chat-shell .chat-message.user .message-meta span,
#app .app-shell.chat-shell .chat-message.user .message-meta time,
#app .app-shell.chat-shell .chat-message.user .message-actions button {
  color: var(--aios-text) !important;
}

#app .app-shell.chat-shell .chat-message.user .message-actions button {
  opacity: 1;
}

#app .app-shell.chat-shell .chat-message.user .message-actions button:hover {
  opacity: 1;
  background: var(--aios-surface-hover) !important;
}

#aiko-workspace .aw-composer {
  box-shadow: none;
}

#app .app-shell.chat-shell :is(.message-tools, .message-actions) {
  gap: 4px;
  opacity: 1;
}

#app .app-shell.chat-shell :is(.message-tools, .message-actions, .message-followups) button {
  min-height: 32px;
  padding: 6px 10px;
  font-weight: 500;
}

#app .app-shell.chat-shell .message-followups {
  gap: 8px;
}

#app .app-shell.chat-shell .chat-message.ai .message-tools .chat-response-tool {
  --aios-button-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 10px;
  border-radius: 12px;
  color: var(--aios-text-muted);
}

#app .app-shell.chat-shell .chat-response-tool svg {
  width: 24px;
  height: 24px;
  flex: none;
}

#app .app-shell.chat-shell .chat-response-tool:is(:hover, :focus-visible) {
  --aios-button-face: var(--aios-surface-subtle);
  --aios-button-ink: var(--aios-text);
  background: var(--aios-surface-subtle);
  color: var(--aios-text);
}

#app .app-shell.chat-shell .chat-response-tool[aria-pressed="true"] {
  --aios-button-ink: var(--aios-accent-strong);
  --aios-button-face: color-mix(in srgb, var(--aios-accent) 12%, transparent);
  color: var(--aios-accent-strong);
  background: color-mix(in srgb, var(--aios-accent) 12%, transparent);
}

#app .app-shell.chat-shell .chat-response-tool[data-chat-response-tool="positive"][aria-pressed="true"] {
  --aios-button-ink: var(--aios-success);
  --aios-button-face: var(--aios-success-soft);
  color: var(--aios-success);
  background: var(--aios-success-soft);
}

#app .app-shell.chat-shell .chat-response-tool[data-chat-response-tool="negative"][aria-pressed="true"],
#app .app-shell.chat-shell .chat-response-tool[data-chat-response-tool="report"][aria-pressed="true"] {
  --aios-button-ink: var(--aios-danger);
  --aios-button-face: var(--aios-danger-soft);
  color: var(--aios-danger);
  background: var(--aios-danger-soft);
}

@media (max-width: 820px) {
  #app .app-shell.chat-shell :is(.message-tools, .message-actions, .message-followups) button {
    min-height: 44px;
  }
}

/* AI colour tokens must win over the generic message-text colour rules. */
#app .app-shell.chat-shell .message-text .ai-color {
  font-weight: 720;
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
}

/* Emphasis inside a color token keeps that color instead of the generic ink. */
#app .app-shell.chat-shell .message-text .ai-color :is(strong, em, code),
#aiko-workspace .aw-message-text .ai-color :is(strong, em, code) {
  color: inherit !important;
}

#app .app-shell.chat-shell .message-text .ai-color-red { color: #dc2626 !important; }
#app .app-shell.chat-shell .message-text .ai-color-blue { color: #2563eb !important; }
#app .app-shell.chat-shell .message-text .ai-color-green { color: #15803d !important; }
#app .app-shell.chat-shell .message-text .ai-color-yellow { color: #a16207 !important; }
#app .app-shell.chat-shell .message-text .ai-color-purple { color: #7e22ce !important; }
#app .app-shell.chat-shell .message-text .ai-color-highlight {
  color: inherit !important;
  padding: .04em .22em;
  border-radius: .3em;
  background: #fde68a !important;
}

body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-red { color: #ff6b7a !important; }
body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-blue { color: #75a7ff !important; }
body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-green { color: #5ee39a !important; }
body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-yellow { color: #f8cf63 !important; }
body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-purple { color: #c59bff !important; }
body[data-theme="dark"] #app .app-shell.chat-shell .message-text .ai-color-highlight {
  color: #fff8d8 !important;
  background: rgba(202, 138, 4, .34) !important;
}

/* Keep the real in-message status visible throughout streaming. */
#app .chat-message.ai.streaming > .message-body > [data-aios-writing-indicator] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 32px;
  margin: 2px 0 10px !important;
}

.aios-brand-state .aios-brand-draw {
  stroke: var(--aios-accent, #2f7cf6) !important;
}

.aios-brand-state .aios-brand-dots > i {
  background: var(--aios-accent, #2f7cf6) !important;
}

html:not([data-reduced-motion="true"]) .aios-brand-state.is-writing .aios-brand-draw {
  opacity: 1;
  stroke-dasharray: 18 64;
  stroke-dashoffset: 82;
  animation: aios-runtime-writing-trace 1.08s linear infinite;
}

html:not([data-reduced-motion="true"]) .aios-brand-state.is-writing .aios-brand-copy > span:first-child {
  background: linear-gradient(90deg, currentColor 28%, var(--aios-accent, #2f7cf6) 50%, currentColor 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aios-runtime-writing-label 1.35s linear infinite;
}

@keyframes aios-runtime-writing-trace {
  to { stroke-dashoffset: -82; }
}

@keyframes aios-runtime-writing-label {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aios-brand-state.is-writing .aios-brand-draw {
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none !important;
  }
}
}

@layer aios.material {
  /* Brief feedback complements the existing message-entry animation. */
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-reduced-motion="true"]) .app-shell.chat-shell :is(
      .claude-composer > button, .composer-tools > button, .aw-launch-bar button,
      .message-tools button, .message-actions button, .message-followups button
    ):not(:disabled):not([aria-disabled="true"]) {
      transition: scale 140ms ease, background-color 160ms ease, color 160ms ease;
    }

    @media (hover: hover) {
      html:not([data-reduced-motion="true"]) .app-shell.chat-shell :is(
        .claude-composer > button, .composer-tools > button
      ):hover:not(:disabled):not([aria-disabled="true"]) { scale: 1.04; }
    }

    html:not([data-reduced-motion="true"]) .app-shell.chat-shell :is(
      .claude-composer > button, .composer-tools > button, .aw-launch-bar button,
      .message-tools button, .message-actions button, .message-followups button
    ):active:not(:disabled):not([aria-disabled="true"]) { scale: .96; }

    html:not([data-reduced-motion="true"]) .app-shell.chat-shell .message-followups button {
      animation: aios-chat-followup-enter 220ms ease-out backwards;
    }
    html:not([data-reduced-motion="true"]) .app-shell.chat-shell .message-followups button:nth-child(2) { animation-delay: 40ms; }
    html:not([data-reduced-motion="true"]) .app-shell.chat-shell .message-followups button:nth-child(3) { animation-delay: 80ms; }
  }
  @keyframes aios-chat-followup-enter {
    from { opacity: 0; translate: 0 4px; }
    to { opacity: 1; translate: 0 0; }
  }
}