/* BAU AI app UI kit for product mockups on bauai.co.
   Matches the real app (docs/app-ui-references) and the home hero (style B:
   minimal, bento, glass). Every class is prefixed aw- so nothing leaks into
   page styles. See docs/app-ui-kit.md for how to use it. */

.aw-stage { position: relative; isolation: isolate; }
.aw-stage::before {
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 14%; bottom: -6%; pointer-events: none;
  background:
    radial-gradient(40% 50% at 22% 62%, rgba(138,60,240,.30), transparent 70%),
    radial-gradient(36% 46% at 80% 40%, rgba(201,160,245,.45), transparent 70%),
    radial-gradient(30% 36% at 55% 98%, rgba(15,124,140,.14), transparent 70%);
  filter: blur(34px);
}

/* the frosted bezel and the app surface inside it */
.aw { position: relative; padding: 8px; border-radius: 26px; text-align: left;
  background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.65), 0 0 0 1px rgba(80,0,168,.07), 0 44px 80px -46px rgba(60,20,120,.42); }
.aw-app { position: relative; overflow: hidden; border-radius: 19px; background: #fff; color: #0A0A0B; box-shadow: 0 0 0 1px rgba(80,0,168,.08); }
.aw-app em, .aw-app i { font-style: normal; }

/* agent header, as in the app chat */
.aw-hd { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; border-bottom: 1px solid #ECEAF2; background: #fff; }
.aw-hd .aw-av { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; background: #F1EEF7; }
.aw-hd .aw-nm { display: block; font-size: .86rem; font-weight: 600; color: #5000A8; line-height: 1.2; }
.aw-hd .aw-rl { display: block; font-size: .7rem; color: #6B6B6E; line-height: 1.3; }
.aw-hd .aw-ctx { margin-left: .4rem; padding-left: .8rem; border-left: 1px solid #ECEAF2; font-size: .72rem; color: #6B6B6E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-hd .aw-ctx b { color: #0A0A0B; font-weight: 500; }
.aw-ibs { margin-left: auto; display: flex; gap: .35rem; flex: none; }
.aw-ib { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #3A3A3E; box-shadow: inset 0 0 0 1px #ECEAF2; }
.aw-ib svg { width: 15px; height: 15px; }
.aw-beta { display: inline-block; margin-left: .3rem; padding: 0 .22rem; border: 1px solid currentColor; border-radius: 4px; font-size: .54rem; font-weight: 600; letter-spacing: 0; text-transform:none; color: #0F7C8C; vertical-align: 1px; }

/* chat pieces */
.aw-ub { display: inline-block; padding: .55rem .9rem; border-radius: 14px; background: #5000A8; color: #fff; font-size: .8rem; font-weight: 500; box-shadow: 0 8px 18px -10px rgba(80,0,168,.7); }
.aw-wl { display: flex; align-items: center; gap: .45rem; font-size: .74rem; color: #6B6B6E; }
.aw-wl img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.aw-ld { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border-radius: 12px; background: #F4F2F8; font-size: .76rem; color: #55555A; }
.aw-ld i { width: 5px; height: 5px; border-radius: 50%; background: #8A3CF0; animation: awDot 1s ease-in-out infinite; }
.aw-ld i:nth-child(2) { animation-delay: .15s; } .aw-ld i:nth-child(3) { animation-delay: .3s; }
@keyframes awDot { 0%,80%,100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-3px); opacity: 1; } }
.aw-ans { font-size: .8rem; line-height: 1.55; color: #2A2A2E; }
.aw-ans b { color: #0A0A0B; font-weight: 600; }
.aw-cap { font-size: .6rem; font-weight: 600; letter-spacing: 0; text-transform:none; color: #8A8794; }
.aw-sg { display: inline-block; padding: .35rem .7rem; border-radius: 999px; background: #F1EAFB; color: #2A2A2E; font-size: .72rem; }
.aw-input { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem .5rem .85rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E6E3EE, 0 8px 18px -14px rgba(60,20,120,.35); font-size: .74rem; color: #8A8794; }
.aw-input span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-input b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F1EFF5; color: #8A8794; }

/* cards, chips, citations and buttons */
.aw-card { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ECEAF2, 0 10px 22px -18px rgba(60,20,120,.45); }
.aw-card.is-sel { box-shadow: 0 0 0 1.5px rgba(80,0,168,.45), 0 12px 26px -18px rgba(80,0,168,.55); }
.aw-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .45rem; border-radius: 999px; font-size: .62rem; font-weight: 600; white-space: nowrap; }
.aw-chip svg { width: 10px; height: 10px; }
.aw-chip.ok { color: #1F6A41; background: #E3F4EA; box-shadow: inset 0 0 0 1px rgba(45,122,79,.25); }
.aw-chip.sg { color: #5000A8; background: #F1EAFB; box-shadow: inset 0 0 0 1px rgba(80,0,168,.2); }
.aw-chip.ms { color: #6B6B6E; background: #F4F3F7; box-shadow: inset 0 0 0 1px #E2DFEA; }
.aw-chip.hi { color: #B14242; background: #FBEDED; }
.aw-chip.md { color: #9A5A1F; background: #FBF1E6; }
.aw-chip.info { color: #2C5BB8; background: #E9F0FC; }
.aw-cite { display: inline-block; padding: .1rem .38rem; border-radius: 6px; background: #F1EAFB; color: #5000A8; font-size: .64rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem; border-radius: 9px; background: #5000A8; color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.aw-btn.ink { background: #0A0A0B; }
.aw-btn2 { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 9px; background: #fff; color: #2A2A2E; font-size: .72rem; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px #E2DFEA; }
.aw-btn3 { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .6rem; border-radius: 8px; color: #5000A8; font-size: .7rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(80,0,168,.4); }
.aw-btn svg, .aw-btn2 svg, .aw-btn3 svg { width: 13px; height: 13px; }
.aw-tabs { display: flex; gap: .2rem; padding: 3px; border-radius: 11px; background: #F1EFF5; font-size: .7rem; }
.aw-tabs > * { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: .3rem; padding: .32rem .5rem; border-radius: 8px; color: #55555A; white-space: nowrap; }
.aw-tabs > .on { background: #fff; color: #0A0A0B; font-weight: 500; box-shadow: 0 1px 2px rgba(10,10,11,.08); }
.aw-pane { background: #FBFAFD; }
.aw-sub { border-top: 1px solid #ECEAF2; }

/* frosted floating card, for anything that sits in front of a window */
.aw-float { border-radius: 18px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(80,0,168,.10), 0 30px 60px -30px rgba(60,20,120,.45); }

@media (max-width: 640px) {
  .aw { padding: 6px; border-radius: 20px; }
  .aw-app { border-radius: 15px; }
  .aw-ibs, .aw-hd .aw-ctx { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aw-ld i { animation: none; } }