/* =====================================================================
   Athenian AI Chat — Token-Bridge + Glass Cosmic Panel (revised)
   Scoped to .awcai-chat-wrapper so it plays nice in Bricks.
   - Prefers Athenian tokens (ctl/text/surface/line/shadow/radius)
   - Falls back cleanly if tokens are missing
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Token bridge + safe fallbacks (NO hard dependency on oklch tokens)
   --------------------------------------------------------------------- */
:where(.awcai-chat-wrapper){

  /* Brand accents (site tokens first; then your chat vars; then fallbacks) */
  --brand-1: var(--ctl-c1, var(--chat-accent, #fe841b));
  --brand-2: var(--ctl-c2, #ff9900);
  --brand-3: var(--ctl-c3, #63b3ed);

  /* Text */
  --fg:     var(--text-high, #f5f5f5);
  --fg-mid: var(--text-mid,  rgba(245,245,245,.78));
  --fg-low: var(--text-low,  rgba(245,245,245,.58));

  /* Surfaces (prefer site surfaces; fallback to dark neutrals) */
  --bg-1: var(--surface-1, rgba(15,18,26,.72));
  --bg-2: var(--surface-2, rgba(15,18,26,.88));
  --bg-3: var(--surface-3, rgba(15,18,26,.94));

  /* Lines + rings */
  --bd:   var(--line-1, rgba(255,255,255,.10));
  --bd2:  var(--line-2, rgba(255,255,255,.07));
  --ring: var(--focus-ring, rgba(254,132,27,.32));

  /* Radii + shadows */
  --radius:    var(--radius, 12px);
  --radius-lg: var(--radius-lg, 16px);

  --drop-sm: var(--shadow-sm, 0 6px 14px rgba(0, 0, 0, .35));
  --drop-md: var(--shadow-md, 0 14px 32px rgba(0, 0, 0, .55));

  /* Chat-specific aliases (can be overridden via inline vars / JS) */
  --chat-accent:     var(--accent-primary, #fe841b);

  /* solid fallbacks (enhanced in @supports below) */
  --chat-accent-alt: var(--brand-2);
  --bubble-user:     var(--chat-accent);
  --bubble-ai:       rgba(255,255,255,.08);

  color: var(--fg);
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
}

/* Enhanced computed colors when supported */
@supports (color: color-mix(in oklch, white 50%, black)) {
  :where(.awcai-chat-wrapper){
    --chat-accent-alt: color-mix(in oklch, var(--brand-2) 70%, var(--chat-accent) 30%);
    --bubble-ai:       color-mix(in oklch, var(--bg-3) 92%, var(--brand-2) 8%);
    --ring:            color-mix(in oklch, var(--brand-3) 42%, transparent);
    --bd:              color-mix(in oklch, var(--brand-1) 12%, var(--bd));
  }
}

/* ---------------------------------------------------------------------
   1) Root chat shell
   --------------------------------------------------------------------- */
.awcai-chat-wrapper{
  display:flex;
  gap: 1rem;
  padding: 20px;

  border-radius: var(--radius-lg);
  box-shadow: var(--drop-md);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* solid fallbacks first */
  background:
    radial-gradient(140% 160% at 0% 0%,
      rgba(254,132,27,.18) 0%,
      transparent 60%
    ),
    radial-gradient(160% 200% at 100% 100%,
      rgba(255,153,0,.14) 0%,
      transparent 60%
    ),
    linear-gradient(145deg, rgba(0,0,0,.32), rgba(0,0,0,.40));

  border: 1px solid var(--bd);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-wrapper{
    background:
      radial-gradient(140% 160% at 0% 0%,
        color-mix(in oklch, var(--brand-1) 70%, transparent) 0%,
        transparent 60%
      ),
      radial-gradient(160% 200% at 100% 100%,
        color-mix(in oklch, var(--brand-2) 70%, transparent) 0%,
        transparent 60%
      ),
      linear-gradient(
        145deg,
        color-mix(in oklch, var(--bg-2) 96%, transparent),
        color-mix(in oklch, var(--bg-3) 96%, transparent)
      );

    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

/* Soft inner glass border */
.awcai-chat-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  opacity:.45;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-wrapper::before{
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--brand-1) 10%, transparent),
      color-mix(in oklch, var(--brand-2) 6%, transparent)
    );
  }
}

.awcai-chat-wrapper > *{
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   2) Main chat panel
   --------------------------------------------------------------------- */
.awcai-chat-panel{
  flex: 2;
  display:flex;
  flex-direction: column;
  min-height: 260px;

  padding: 14px;
  border-radius: calc(var(--radius-lg) - 4px);

  background: linear-gradient(135deg, rgba(0,0,0,.28), rgba(0,0,0,.40));
  border: 1px solid var(--bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-panel{
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--bg-2) 94%, transparent),
      color-mix(in oklch, var(--bg-3) 92%, transparent)
    );
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

/* Messages list */
.awcai-messages{
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  border-radius: 14px;
  margin-bottom: .75rem;

  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.34));
  border: 1px solid var(--bd2);

  display:flex;
  flex-direction: column;
  gap: .45rem;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-messages{
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--bg-2) 96%, transparent),
      color-mix(in oklch, var(--bg-3) 96%, transparent)
    );
    border-color: color-mix(in oklch, var(--bd) 95%, transparent);
  }
}

/* ---------------------------------------------------------------------
   3) Message bubbles
   --------------------------------------------------------------------- */
.awcai-message{
  max-width: 90%;
  padding: .6rem .85rem;
  border-radius: 18px;
  font-size: .9rem;
  line-height: 1.5;

  border: 1px solid transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,.55);

  opacity: 0;
  display:inline-block;
}

.awcai-message-enter{
  animation: awcaiMessageFadeUp .32s ease-out forwards;
}

@keyframes awcaiMessageFadeUp{
  from{ transform: translateY(4px) scale(.98); opacity: 0; }
  to{   transform: translateY(0) scale(1);    opacity: 1; }
}

/* User bubble */
.awcai-message-user{
  margin-left:auto;
  color:#111;

  background: linear-gradient(135deg, var(--bubble-user), var(--chat-accent-alt));
  border-color: rgba(254,132,27,.35);

  border-radius: 18px 18px 6px 18px;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-message-user{
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--bubble-user) 88%, #ffffff 12%),
      color-mix(in oklch, var(--chat-accent-alt) 88%, #fff3d1 12%)
    );
    border-color: color-mix(in oklch, var(--bubble-user) 40%, transparent);
  }
}

/* AI bubble */
.awcai-message-ai{
  margin-right:auto;
  color: var(--fg-mid);

  background: rgba(255,255,255,.06);
  border-color: var(--bd);

  border-radius: 18px 18px 18px 6px;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-message-ai{
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--bubble-ai) 96%, transparent),
      color-mix(in oklch, var(--bg-3) 92%, transparent)
    );
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

/* Processing state */
.awcai-message-processing{
  box-shadow:
    0 0 0 1px rgba(255,153,0,.30),
    0 0 32px rgba(0,0,0,.9);
  position: relative;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-message-processing{
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--brand-2) 40%, transparent),
      0 0 32px rgba(0,0,0,.9);
  }
}

.awcai-message-processing::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  border: 1px solid rgba(255,153,0,.28);
  opacity: 0;
  animation: awcaiProcessingHalo 1.4s ease-out infinite;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-message-processing::after{
    border-color: color-mix(in oklch, var(--brand-2) 35%, transparent);
  }
}

@keyframes awcaiProcessingHalo{
  0%   { opacity: 0;   transform: scale(.97); }
  30%  { opacity: .6;  transform: scale(1.02); }
  100% { opacity: 0;   transform: scale(1.06); }
}

/* ---------------------------------------------------------------------
   4) Input row
   --------------------------------------------------------------------- */
.awcai-input-row{
  display:flex;
  gap: .5rem;
  align-items:center;
}

.awcai-input{
  flex:1;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(0,0,0,.22);
  color: var(--fg);
  font-size: .92rem;
  box-sizing: border-box;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-input{
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
    background: color-mix(in oklch, var(--bg-2) 92%, transparent);
  }
}

.awcai-input::placeholder{ color: var(--fg-low); }

.awcai-input:focus{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--ring);
}

/* Send button */
.awcai-send-btn{
  padding: 10px 18px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;

  color: #0b0b0e;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: var(--drop-sm);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.awcai-send-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: var(--drop-md);
}

.awcai-send-btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   5) Status bar
   --------------------------------------------------------------------- */
.awcai-status{
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--fg-low);
  display:inline-flex;
  align-items:center;
  gap: .4rem;

  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(0,0,0,.18);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-status{
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
    background: color-mix(in oklch, var(--bg-2) 92%, transparent);
  }
}

.awcai-status::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-status::before{
    background: color-mix(in oklch, var(--fg-low) 90%, transparent);
  }
}

/* Busy */
.awcai-status[data-status-mode="busy"]{
  color: rgba(255,240,220,.88);
  border-color: rgba(255,153,0,.35);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-status[data-status-mode="busy"]{
    color: color-mix(in oklch, var(--brand-2) 70%, var(--fg));
    border-color: color-mix(in oklch, var(--brand-2) 40%, transparent);
  }
}

.awcai-status[data-status-mode="busy"]::before{
  background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand-1));
  animation: awcaiStatusPulse 1.3s ease-out infinite;
}

.awcai-status[data-status-mode="idle"]::before{
  background: rgba(255,255,255,.26);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-status[data-status-mode="idle"]::before{
    background: color-mix(in oklch, var(--fg-low) 70%, transparent);
  }
}

/* Error */
.awcai-status[data-status-mode="error"]{
  color: #ffb3b3;
  border-color: rgba(255, 90, 90, 0.7);
}
.awcai-status[data-status-mode="error"]::before{
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #b60000);
}

@keyframes awcaiStatusPulse{
  0%   { transform: scale(.9); opacity: .6; }
  30%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(.9); opacity: .6; }
}

/* ---------------------------------------------------------------------
   6) Loading dots
   --------------------------------------------------------------------- */
.awcai-loading-dots{
  display:inline-flex;
  align-items:center;
  gap: .35rem;
}

.awcai-loading-dots > span{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 8px rgba(0,0,0,.9);
  animation: awcaiDotBounce 1s ease-in-out infinite;
}

.awcai-loading-dots > span:nth-child(2){ animation-delay: .12s; }
.awcai-loading-dots > span:nth-child(3){ animation-delay: .24s; }

.awcai-loading-label{
  margin-left: .3rem;
  font-size: .8rem;
  color: var(--fg-low);
  opacity: .8;
}

@keyframes awcaiDotBounce{
  0%,60%,100%{ transform: translateY(0) scale(1); opacity: .5; }
  30%{ transform: translateY(-4px) scale(1.15); opacity: 1; }
}

/* ---------------------------------------------------------------------
   7) Sidebar / recommendations
   --------------------------------------------------------------------- */
.awcai-sidebar{
  flex: 1;
  min-width: 220px;
  padding: 14px;

  border-radius: calc(var(--radius-lg) - 4px);
  background: linear-gradient(135deg, rgba(0,0,0,.26), rgba(0,0,0,.38));
  border: 1px solid var(--bd);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-sidebar{
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--bg-2) 94%, transparent),
      color-mix(in oklch, var(--bg-3) 94%, transparent)
    );
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

.awcai-sidebar h3{
  margin-top: 0;
  font-size: .95rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-low);
}

.awcai-recommendations{
  max-height: 320px;
  overflow-y: auto;
  display:block;
}

.awcai-results-empty{
  font-size: .85rem;
  color: var(--fg-low);
  padding: .5rem .25rem;
}

/* Results grid */
.awcai-results-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
@media (min-width: 1024px){
  .awcai-results-grid{ grid-template-columns: 1fr; }
}

/* Result item */
.awcai-result-item{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;

  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: .55rem .6rem;
  border: 1px solid var(--bd);

  box-shadow: var(--drop-sm);
  font-size: .85rem;
  color: var(--fg-mid);

  opacity: 0;
  transform: translateY(4px) scale(.98);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-item{
    background: color-mix(in oklch, var(--bg-2) 96%, transparent);
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

.awcai-result-enter{
  animation: awcaiResultFadeUp .3s ease-out forwards;
}

@keyframes awcaiResultFadeUp{
  from{ opacity: 0; transform: translateY(4px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.awcai-result-thumb{
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow:hidden;

  background: radial-gradient(circle at 20% 20%, rgba(0,0,0,.22), rgba(0,0,0,.42));
  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid var(--bd);
  flex-shrink: 0;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-thumb{
    background: radial-gradient(circle at 20% 20%, var(--bg-1), var(--bg-3));
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
  }
}

.awcai-result-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.awcai-result-thumb--placeholder span{
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,.78);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-thumb--placeholder span{
    color: color-mix(in oklch, var(--brand-1) 60%, var(--fg));
  }
}

.awcai-result-body{
  display:flex;
  flex-direction: column;
  gap: .2rem;
}

.awcai-result-header-row{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem;
}

.awcai-result-title{
  font-weight: 700;
  margin: 0;
  font-size: .9rem;
  color: var(--fg);
}

.awcai-result-sku{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-low);
  white-space: nowrap;
}

.awcai-result-price{
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,190,120,.92);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-price{
    color: color-mix(in oklch, var(--brand-1) 70%, var(--fg));
  }
}

.awcai-result-stock{
  display:flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items:center;
  font-size: .78rem;
}

.awcai-result-stock-label{
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bd);
  color: var(--fg-mid);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-stock-label{
    background: color-mix(in oklch, var(--bg-3) 96%, transparent);
    border-color: color-mix(in oklch, var(--bd) 90%, transparent);
  }
}

.awcai-result-stock-lead{ color: var(--fg-low); }

.awcai-result-meta{
  display:grid;
  grid-auto-flow: row;
  gap: .15rem;
  margin: .1rem 0 .2rem;
}

.awcai-result-meta > div{
  display:flex;
  gap: .4rem;
  font-size: .78rem;
}

.awcai-result-meta dt{
  font-weight: 600;
  color: var(--fg-low);
  min-width: 2.4rem;
}

.awcai-result-meta dd{
  margin: 0;
  color: var(--fg-mid);
}

.awcai-result-actions{
  display:flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

.awcai-result-link{
  font-size: .78rem;
  text-decoration: none;
  color: rgba(255,190,120,.95);
  position: relative;
  padding-bottom: 1px;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-link{
    color: color-mix(in oklch, var(--brand-1) 80%, var(--fg));
  }
}

.awcai-result-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}

.awcai-result-link:hover{
  color: rgba(255,210,160,.98);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-result-link:hover{
    color: color-mix(in oklch, var(--brand-2) 80%, var(--fg));
  }
}

.awcai-result-add-to-cart{
  font-size: .8rem;
  font-weight: 700;
  text-decoration:none;

  padding: .25rem .7rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  color:#0b0b0e;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: var(--drop-sm);

  display:inline-flex;
  align-items:center;
  gap: .25rem;
}

.awcai-result-add-to-cart:hover{
  filter: brightness(1.06) saturate(1.04);
  box-shadow: var(--drop-md);
}

/* ---------------------------------------------------------------------
   8) Scrollbars
   --------------------------------------------------------------------- */
.awcai-chat-wrapper,
.awcai-messages,
.awcai-recommendations{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.22);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-wrapper,
  .awcai-messages,
  .awcai-recommendations{
    scrollbar-color:
      color-mix(in oklch, var(--bg-3) 90%, transparent)
      color-mix(in oklch, var(--bg-2) 94%, transparent);
  }
}

.awcai-chat-wrapper::-webkit-scrollbar,
.awcai-messages::-webkit-scrollbar,
.awcai-recommendations::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.awcai-chat-wrapper::-webkit-scrollbar-thumb,
.awcai-messages::-webkit-scrollbar-thumb,
.awcai-recommendations::-webkit-scrollbar-thumb{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.28);
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-wrapper::-webkit-scrollbar-thumb,
  .awcai-messages::-webkit-scrollbar-thumb,
  .awcai-recommendations::-webkit-scrollbar-thumb{
    border-color: color-mix(in oklch, var(--bg-2) 92%, transparent);
  }
}

.awcai-chat-wrapper::-webkit-scrollbar-track,
.awcai-messages::-webkit-scrollbar-track,
.awcai-recommendations::-webkit-scrollbar-track{
  background: rgba(0,0,0,.18);
  border-radius: 10px;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chat-wrapper::-webkit-scrollbar-track,
  .awcai-messages::-webkit-scrollbar-track,
  .awcai-recommendations::-webkit-scrollbar-track{
    background: color-mix(in oklch, var(--bg-2) 94%, transparent);
  }
}

.awcai-chat-wrapper::-webkit-scrollbar-thumb:hover,
.awcai-messages::-webkit-scrollbar-thumb:hover,
.awcai-recommendations::-webkit-scrollbar-thumb:hover{
  filter: brightness(1.05) saturate(1.06);
}

/* ---------------------------------------------------------------------
   9) Chips row (token-native)
   --------------------------------------------------------------------- */
.awcai-filters-row{
  display:flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}

.awcai-chip{
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.04);
  color: var(--fg-mid);
  font-size: .75rem;
  padding: .15rem .55rem;
  cursor: default;
}

@supports (color: color-mix(in oklch, white 50%, black)) {
  .awcai-chip{
    border-color: color-mix(in oklch, var(--bd) 100%, transparent);
    background: color-mix(in oklch, var(--bg-3) 96%, transparent);
  }
}

.awcai-chip--meta{ opacity: .8; }

/* ---------------------------------------------------------------------
   10) Mobile stacking
   --------------------------------------------------------------------- */
@media (max-width: 768px){
  .awcai-chat-wrapper{
    flex-direction: column;
    padding: 14px;
  }
  .awcai-sidebar{ order: -1; }
}

/* ---------------------------------------------------------------------
   11) Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .awcai-send-btn,
  .awcai-message,
  .awcai-result-item{
    transition: none !important;
    animation: none !important;
  }
}