/* ===== Chat Feedback: AI bubble action toolbar + dislike popover ===== */
/* Used by chat-feedback.js + chat-ui.js (_renderAiActionToolbar). */

/* ── AI bubble action toolbar ─────────────────────────────────────────
 * Layout goal: actions sit on the SAME horizontal line as the timestamp
 * (timestamp on the left, actions on the right). We achieve that by
 * absolutely positioning the toolbar over the bottom-right of the bubble
 * wrap so it visually aligns with .acl-msg-time (which keeps its normal
 * flow position at the bottom-left of the wrap).
 *
 * Visual style: flat, borderless icons (matches mainstream chat UIs like
 * ChatGPT/Claude). Hover reveals a subtle circular background. */
.acl-msg-actions{
  position:absolute;
  right:2px;
  bottom:-2px;
  display:flex;
  align-items:center;
  gap:2px;
  opacity:.55;
  transition:opacity .18s ease;
  z-index:2;
}
.acl-bubble-wrap:hover .acl-msg-actions{ opacity:1; }

/* Reserve enough vertical room under the bubble for the toolbar/time row
 * (icon height 24px + a couple px breathing room). Without this, the
 * absolutely-positioned toolbar would overlap with the bubble bottom. */
.acl-msg.acl-ai .acl-bubble-wrap{ padding-bottom:6px; }

/* Align timestamp baseline with the icon row. */
.acl-msg.acl-ai .acl-msg-time{
  margin-top:6px;
  min-height:24px;
  display:flex;
  align-items:center;
}

/* IMPORTANT: the toolbar's copy button reuses the legacy `.acl-copy-btn`
 * class so that `copyMessageFromButton(this)` keeps working unchanged.
 * That legacy class (defined in chat.css) ships with `position:absolute;
 * top:0; opacity:0; border; box-shadow; width:26px; height:26px;`, which
 * would (a) place the copy icon outside the toolbar, (b) hide it until
 * hover, and (c) make it look visually different from the other 3 icons.
 * We use `!important` here to forcibly neutralize those legacy properties
 * so the copy button looks/behaves identical to refresh/like/dislike. */
.acl-action-btn{
  display:inline-flex !important;
  position:static !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  align-items:center;
  justify-content:center;
  width:24px !important;
  height:24px !important;
  padding:0;
  border:none !important;
  border-radius:6px;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  color:var(--md-on-surface-variant, #94A3B8);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.acl-action-btn:hover{
  background:rgba(0,0,0,.06) !important;
  color:var(--md-primary, #0052D9);
  border-color:transparent !important;
}
.acl-action-btn:active{ transform:scale(.92); }
.acl-action-btn .material-symbols-outlined{
  font-size:16px !important;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
  line-height:1;
  color:inherit !important;
}
.acl-action-btn[disabled]{ opacity:.5 !important; cursor:not-allowed; }

/* Refresh-disabled state: rendered on every AI bubble except the most-recent
 * one (only the last turn can be regenerated — see db.ErrNotLastTurn). The
 * button stays clickable (so the click handler can show a toast explaining
 * why) but is visually muted to communicate non-affordance.
 *
 * NOTE: targets `.acl-action-regen[data-state="off"]` specifically; we keep
 * `[disabled]` behavior intact for other buttons that may use it. */
.acl-action-btn.acl-action-regen[data-state="off"]{
  opacity:.35 !important;
  cursor:default;
}
.acl-action-btn.acl-action-regen[data-state="off"]:hover{
  background:transparent !important;
  color:var(--md-on-surface-variant, #94A3B8) !important;
}

/* Selected (active) state for thumb_up / thumb_down: solid fill icon + brand color. */
.acl-action-btn.is-active .material-symbols-outlined{
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20;
}
.acl-action-btn.acl-action-like.is-active{
  color:#16A34A;
  background:rgba(34,197,94,.10);
}
.acl-action-btn.acl-action-like.is-active:hover{
  background:rgba(34,197,94,.16);
}
.acl-action-btn.acl-action-dislike.is-active{
  color:#EA580C;
  background:rgba(249,115,22,.10);
}
.acl-action-btn.acl-action-dislike.is-active:hover{
  background:rgba(249,115,22,.16);
}

/* Always hide the legacy floating copy button on AI bubbles — when the
 * action toolbar is rendered, the toolbar's own copy button takes over.
 * `:not(.acl-action-btn)` makes sure we don't accidentally hide the new
 * copy button (which shares the .acl-copy-btn class for compatibility
 * with copyMessageFromButton). */
.acl-msg.acl-ai .acl-copy-btn:not(.acl-action-btn){
  display:none !important;
}

/* ===== Dislike popover ===== */
.acl-feedback-popover{
  position:absolute;
  z-index:1500;
  width:360px;
  max-width:calc(100vw - 32px);
  padding:14px 16px 12px;
  background:var(--md-surface, #1E293B);
  border:1px solid var(--md-surface-3, #334155);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  color:var(--md-on-surface, #F8FAFC);
  font-size:13px;
  opacity:0;
  transform:scale(.96);
  transform-origin:top right;
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:none;
}
.acl-feedback-popover.is-open{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.acl-feedback-popover__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:14px;
  color:var(--md-on-surface, #F8FAFC);
  margin-bottom:10px;
}
.acl-feedback-popover__close{
  width:22px;
  height:22px;
  border:none;
  background:transparent;
  color:var(--md-on-surface-variant, #94A3B8);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.acl-feedback-popover__close:hover{
  background:var(--md-surface-3, #334155);
  color:var(--md-on-surface, #F8FAFC);
}
.acl-feedback-popover__close .material-symbols-outlined{ font-size:16px; }

.acl-feedback-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.acl-feedback-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:14px;
  border:1px solid var(--md-surface-3, #334155);
  background:transparent;
  color:var(--md-on-surface-variant, #CBD5E1);
  font-size:12px;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
  user-select:none;
}
.acl-feedback-chip:hover{
  border-color:var(--md-primary, #3B82F6);
  color:var(--md-on-surface, #F8FAFC);
}
.acl-feedback-chip.is-selected{
  background:rgba(59,130,246,.15);
  border-color:var(--md-primary, #3B82F6);
  color:var(--md-primary, #3B82F6);
  font-weight:500;
}

.acl-feedback-popover__textarea{
  width:100%;
  min-height:64px;
  max-height:140px;
  padding:8px 10px;
  border:1px solid var(--md-surface-3, #334155);
  border-radius:8px;
  background:var(--md-surface-1, #0F172A);
  color:var(--md-on-surface, #F8FAFC);
  font-family:inherit;
  font-size:12px;
  resize:vertical;
  outline:none;
  transition:border-color .14s ease;
  box-sizing:border-box;
}
.acl-feedback-popover__textarea:focus{
  border-color:var(--md-primary, #3B82F6);
}
.acl-feedback-popover__counter{
  text-align:right;
  font-size:11px;
  color:var(--md-on-surface-variant, #64748B);
  margin-top:4px;
}

.acl-feedback-popover__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.acl-feedback-submit{
  padding:7px 18px;
  border:none;
  border-radius:8px;
  background:var(--md-primary, #3B82F6);
  color:#fff;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .14s ease, transform .12s ease;
}
.acl-feedback-submit:hover{ background:#2563EB; }
.acl-feedback-submit:active{ transform:scale(.97); }
.acl-feedback-submit[disabled]{
  background:var(--md-surface-3, #334155);
  color:var(--md-on-surface-variant, #64748B);
  cursor:not-allowed;
}