/* Shared button family: 2px contours, 18px corners, flat by default.
   Primary actions alone retain the public site's 4px tactile finish.
   Opt-in on the app body; the public site already owns its tactile controls.
   Semantic colors derive from the canonical AIOS palette. Keep layout,
   transforms, visibility and interaction logic.
   Keep the existing desktop sidebar navigation untouched. Do not override
   switches/radios/checkboxes or explicitly unstyled controls. */
@layer aios.tactile {
  body[data-aios-buttons="tactile"] :where(
    button, input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"], a:is(.primary, .secondary, .ghost, .icon-button, .link-button, .danger-button, .btn),
    .awc-menu > summary
  ):not(:where([role="switch"], [role="checkbox"], [role="radio"], [data-aios-button="unstyled"], .sidebar *, .chat-workspace-rail *)) {
    border: var(--aios-button-border-width, 2px) solid var(--aios-button-edge, var(--aios-border, #d6d6da)) !important;
    border-radius: var(--aios-button-radius, 18px) !important;
    box-shadow: 0 var(--aios-button-depth, 0px) 0 var(--aios-button-edge, var(--aios-border, #d6d6da)) !important;
  }

  /* The old glass layers paint gradients and white text with priority rules.
     One semantic bridge replaces those paints, just as the finish above
     replaces their borders. Custom content tiles keep their own colors. */
  body[data-aios-buttons="tactile"] :where(
    .primary, .dojo-primary, .aw-primary, .aw-send, .sr2-hero-primary, .sr2-primary-action, .sr2-wide-button,
    .a2-btn-primary, .air-button-primary, .gamification-button--primary,
    .secondary, .ghost, .dojo-ghost, .sr2-hero-secondary, .sr2-add-note, .a2-ghost, .danger-button, .danger-soft,
    button[role="tab"], .slv2-nav button, .dojo-tab, .sr2-tabs button,
    .a2-seg, .air-tabs button, .awc-toolbar button, .aw-page-launch [data-open-aiko],
    .claude-composer > button, .composer-tools > button,
    .aios-chat-main .message-tools button, .aios-chat-main .message-actions button,
    .aios-chat-main .message-followups button, .aios-chat-main .chat-actions button,
    .aios-chat-topbar > button, .aw-launch-bar button, .aw-header-actions button, .aw-chat button
  ):not(:where(.sidebar *, .chat-workspace-rail *, [data-aios-button="unstyled"], [role="switch"], [role="checkbox"], [role="radio"])) {
    background: var(--aios-button-face, var(--aios-surface)) !important;
    color: var(--aios-button-ink, var(--aios-text)) !important;
  }
}

@layer aios.material {
  body[data-aios-buttons="tactile"] :where(
    button, input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"], a:is(.primary, .secondary, .ghost, .icon-button, .link-button, .danger-button, .btn),
    .awc-menu > summary
  ):not(:where([role="switch"], [role="checkbox"], [role="radio"], [data-aios-button="unstyled"], .sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 0px;
    --aios-button-border-width: 2px;
    --aios-button-press-distance: 0px;
    --aios-button-edge: var(--aios-border, #d6d6da);
    --aios-button-radius: 18px;
    box-sizing: border-box;
    min-block-size: 44px;
    min-inline-size: 44px;
    max-inline-size: 100%;
    border: 2px solid var(--aios-button-edge);
    border-radius: var(--aios-button-radius);
    box-shadow: 0 var(--aios-button-depth) 0 var(--aios-button-edge);
    font-weight: 750;
    transition: translate 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  }

  body[data-aios-buttons="tactile"] :where(.primary, .dojo-primary, .aw-primary, .aw-send, .sr2-hero-primary, .sr2-primary-action, .sr2-wide-button, .a2-btn-primary, .air-button-primary, .gamification-button--primary):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 4px;
    --aios-button-press-distance: 4px;
    --aios-button-face: var(--aios-accent-strong);
    --aios-button-ink: var(--aios-bg);
    --aios-button-edge: color-mix(in srgb, var(--aios-accent-strong, #1f63d6) 78%, black);
  }

  body[data-aios-buttons="tactile"] :where(.secondary, .ghost, .dojo-ghost, .sr2-hero-secondary, .sr2-add-note, .a2-ghost):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-face: var(--aios-surface);
    --aios-button-ink: var(--aios-accent-strong);
    --aios-button-edge: color-mix(in srgb, var(--aios-accent-strong) 48%, var(--aios-surface));
  }

  /* Tertiary actions stay in the same family without competing with the CTA.
     A transparent border preserves geometry and reappears in forced colors. */
  body[data-aios-buttons="tactile"] :where(.ghost, .dojo-ghost):not(:where(.primary, .secondary, .danger-button, .danger-soft, .sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 0px;
    --aios-button-press-distance: 0px;
    --aios-button-edge: transparent;
  }

  /* Some existing delete actions combine secondary and danger-soft. Their
     destructive meaning must take precedence over the neutral family. */
  body[data-aios-buttons="tactile"] :where(.danger-button, .danger-soft):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-face: color-mix(in srgb, var(--aios-danger) 8%, var(--aios-surface));
    --aios-button-ink: color-mix(in srgb, var(--aios-danger) 85%, var(--aios-text));
    --aios-button-edge: var(--aios-danger, #c0362c);
  }

  body[data-aios-buttons="tactile"] :where(.danger-soft):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 0px;
    --aios-button-press-distance: 0px;
    --aios-button-edge: color-mix(in srgb, var(--aios-danger) 30%, var(--aios-surface));
  }

  /* Compact, flat geometry for dense navigation. */
  body[data-aios-buttons="tactile"] :where(
    button.nav-item, button.conversation-item, button.table-sort,
    button[role="tab"], button[role="menuitem"], .awc-toolbar button,
    .slv2-nav button, .dojo-tab, .sr2-tabs button, .a2-seg, .air-tabs button
  ):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 0px;
    --aios-button-press-distance: 0px;
    --aios-button-radius: 14px;
  }

  body[data-aios-buttons="tactile"] :where(.icon-button, .aw-icon-button, .aw-send):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-radius: 14px;
  }

  /* Tabs choose a view; they do not need the raised action affordance. */
  body[data-aios-buttons="tactile"] :where(
    button[role="tab"], .slv2-nav button, .dojo-tab, .sr2-tabs button, .a2-seg, .air-tabs button
  ):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-depth: 0px;
    --aios-button-press-distance: 0px;
    --aios-button-edge: transparent;
  }

  body[data-aios-buttons="tactile"] :where(
    button[aria-selected="true"], button[aria-pressed="true"],
    .slv2-nav button.active, .dojo-tab.is-active, .sr2-tabs button.is-active,
    .a2-seg.is-active, .a2-ghost.is-active, .air-tabs button.is-active,
    .aw-page-launch [data-open-aiko]
  ):not(:where(.sidebar *, .chat-workspace-rail *, [role="switch"], [role="checkbox"], [role="radio"], [data-aios-button="unstyled"])) {
    --aios-button-face: color-mix(in srgb, var(--aios-accent-strong) 10%, var(--aios-surface));
    --aios-button-ink: var(--aios-accent-strong);
    --aios-button-edge: color-mix(in srgb, var(--aios-accent-strong) 48%, var(--aios-surface));
  }

  @media (hover: hover) {
    body[data-aios-buttons="tactile"] :where(.secondary, .sr2-hero-secondary, .sr2-add-note, .a2-ghost):hover:not(:where(.danger-soft, .is-active, .active, [aria-pressed="true"], [aria-selected="true"], :disabled, [aria-disabled="true"], .sidebar *, .chat-workspace-rail *)) {
      --aios-button-face: color-mix(in srgb, var(--aios-accent-strong) 8%, var(--aios-surface));
      --aios-button-edge: var(--aios-accent-strong);
    }
    body[data-aios-buttons="tactile"] :where(.ghost, .dojo-ghost):hover:not(:where(.primary, .secondary, .danger-button, .danger-soft, .is-active, .active, [aria-pressed="true"], [aria-selected="true"], :disabled, [aria-disabled="true"], .sidebar *, .chat-workspace-rail *)) {
      --aios-button-face: color-mix(in srgb, var(--aios-accent-strong) 8%, var(--aios-surface));
    }
  }
}

@layer aios.material {
  /* Conversation controls are quiet tools, not standalone task buttons. */
  body[data-aios-buttons="tactile"] :where(
    .claude-composer > button, .composer-tools > button,
    .aios-chat-main .message-tools button, .aios-chat-main .message-actions button,
    .aios-chat-main .message-followups button, .aios-chat-main .chat-actions button,
    .aios-chat-topbar > button, .aw-launch-bar button, .aw-header-actions button, .aw-chat button
  ):not(:where(.sidebar *, .chat-workspace-rail *)) {
    --aios-button-border-width: 0px;
    --aios-button-depth: 0px;
    --aios-button-press-distance: 0px;
    --aios-button-radius: 10px;
    --aios-button-edge: transparent;
    --aios-button-face: transparent;
    --aios-button-ink: var(--aios-text-muted);
  }

  body[data-aios-buttons="tactile"] :where(
    .claude-composer > button, .composer-tools > button,
    .aios-chat-topbar > .chat-sidebar-toggle, .aios-chat-topbar > .chat-mobile-new,
    .aw-header-actions button, .aw-chat .aw-icon-button
  ) {
    --aios-button-radius: 50%;
  }

  body[data-aios-buttons="tactile"] :where(.message-followups button, .aw-suggestions button) {
    --aios-button-border-width: 1px;
    --aios-button-edge: var(--aios-border);
    --aios-button-radius: 12px;
  }

  body[data-aios-buttons="tactile"] :where(.chat-message.user .message-tools button, .chat-message.user .message-actions button) {
    --aios-button-ink: var(--aios-text);
  }

  body[data-aios-buttons="tactile"] :where(
    .claude-composer > button, .composer-tools > button, .message-tools button,
    .message-actions button, .message-followups button, .aios-chat-topbar > button,
    .aw-launch-bar button, .aw-header-actions button, .aw-chat button
  ):where(:hover):not(:where(:disabled, [aria-disabled="true"])) {
    --aios-button-face: var(--aios-surface-hover);
    --aios-button-ink: var(--aios-text);
  }

  body[data-aios-buttons="tactile"] :where(.chat-context-action.selected, .aw-chat button[aria-pressed="true"], .aw-header-actions button[aria-pressed="true"]) {
    --aios-button-face: color-mix(in srgb, var(--aios-accent-strong) 10%, var(--aios-surface));
    --aios-button-ink: var(--aios-accent-strong);
  }

  body[data-aios-buttons="tactile"] :where(#aios-send, .claude-composer [data-action="stop-aios-generation"], .aw-chat .aw-send) {
    --aios-button-radius: 50%;
    --aios-button-face: var(--aios-accent-strong);
    --aios-button-ink: var(--aios-bg);
  }
}

@layer legacy {
  /* Personalization writes the canonical accent on html. The matching body
     theme must inherit it instead of redeclaring the default dark blue.
     Body-only theme integrations still keep their own fallback tokens. */
  html[data-theme="light"] body[data-theme="light"][data-aios-buttons="tactile"],
  html[data-theme="dark"] body[data-theme="dark"][data-aios-buttons="tactile"] {
    --aios-accent: inherit;
    --aios-accent-strong: inherit;
    --aios-accent-soft: inherit;
    --surface-active: inherit;
  }
}

@layer aios.state {
  body[data-aios-buttons="tactile"] :where(
    button, input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"], a:is(.primary, .secondary, .ghost, .icon-button, .link-button, .danger-button, .btn),
    .awc-menu > summary
  ):not(:where([role="switch"], [role="checkbox"], [role="radio"], [data-aios-button="unstyled"], .sidebar *, .chat-workspace-rail *)) {
    /* Individual translate composes with existing positioned-control transforms.
       No resting transform is added: idle controls do not gain a new containing block. */
    &:active:not(:where(:disabled, [disabled], [aria-disabled="true"], [aria-busy="true"])) {
      --aios-button-depth: 0px;
      translate: 0 var(--aios-button-press-distance);
    }

    &:focus-visible {
      outline: 3px solid var(--aios-accent-strong, #1f63d6);
      outline-offset: 3px;
    }

    &:is(:disabled, [disabled], [aria-disabled="true"]) {
      --aios-button-depth: 0px;
      opacity: .48;
      cursor: not-allowed;
      transition: none;
    }

    &[aria-busy="true"] {
      cursor: progress;
    }

    @media (prefers-reduced-motion: reduce) {
      &, &:active {
        translate: none;
        transition: none;
      }
    }

    @media (forced-colors: active) {
      &, &:active {
        --aios-button-depth: 0px;
        --aios-button-edge: ButtonText;
      }
      &:focus-visible { outline-color: Highlight; }
      &:is(:disabled, [disabled], [aria-disabled="true"]) { --aios-button-edge: GrayText; }
    }

    @media print {
      &, &:active {
        --aios-button-depth: 0px;
        translate: none;
        transition: none;
      }
    }
  }
}