/* ═══════════ AI HELPER ═══════════ */
.ai-helper{width:100%;max-width:680px;margin-top:1.25rem;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md);border:1px solid var(--border-light)}
.ai-helper-toggle{width:100%;padding:0.7rem 1rem;display:flex;align-items:center;gap:0.6rem;
  background:linear-gradient(135deg,#1A1A2E 0%,#2A2A4E 100%);color:#fff;font-weight:600;
  font-size:0.85rem;transition:all var(--transition);border:none;cursor:pointer;text-align:left}
.ai-helper-toggle:hover{background:linear-gradient(135deg,#2A2A4E 0%,#3A3A5E 100%)}
.ai-helper-toggle .ai-spark{font-size:1.1rem}
.ai-helper-toggle .ai-tag{margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400}
/* 2026-05-24 (Luke) — Community pill next to Board Assistant label.
   Sits between the title and the .ai-tag subtitle. Uses a margin-
   left:auto on the pill to push it (and everything after) to the
   right edge, mirroring the previous .ai-tag position. */
.ai-helper-toggle .ai-community-pill{
  margin-left:auto;
  background:rgba(74,144,226,0.18);
  color:#cfe1ff;
  border:1px solid rgba(74,144,226,0.45);
  border-radius:999px;
  padding:0.25rem 0.65rem;
  font-size:0.7rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--transition,180ms),border-color var(--transition,180ms);
}
.ai-helper-toggle .ai-community-pill:hover,
.ai-helper-toggle .ai-community-pill:focus-visible{
  background:rgba(74,144,226,0.32);
  border-color:rgba(74,144,226,0.85);
  outline:none;
}
.ai-helper-toggle .ai-chevron{transition:transform 0.3s;font-size:0.7rem}
.ai-helper.open .ai-chevron{transform:rotate(180deg)}
.ai-helper-body{display:none;border-top:1px solid var(--border-light)}
.ai-helper.open .ai-helper-body{display:block}

.ai-chat{max-height:320px;overflow-y:auto;padding:0.75rem}
.ai-msg{margin-bottom:0.75rem;display:flex;gap:0.6rem;animation:fadeIn 0.3s}
.ai-msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:0.85rem;flex-shrink:0;margin-top:2px}
.ai-msg-avatar.ai{background:linear-gradient(135deg,#E8A838,#FF8C00);color:#fff}
.ai-msg-avatar.user{background:var(--bg);border:1.5px solid var(--border)}
.ai-msg-bubble{flex:1}
.ai-msg-text{font-size:0.85rem;line-height:1.55;color:var(--ink-soft)}
.ai-msg-text strong{color:var(--ink);font-weight:600}
.ai-msg-text .ai-reason{display:block;margin-top:0.4rem;padding:0.4rem 0.6rem;
  background:var(--bg);border-radius:var(--radius-sm);font-size:0.78rem;color:var(--ink-muted);
  border-left:3px solid var(--amber)}
.ai-msg-actions{display:flex;gap:0.4rem;margin-top:0.5rem;flex-wrap:wrap}
.ai-action-btn{padding:0.3rem 0.7rem;border-radius:20px;font-size:0.75rem;font-weight:600;
  border:1.5px solid var(--border);color:var(--ink-soft);transition:all var(--transition);cursor:pointer;background:var(--surface)}
.ai-action-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--fk-noun-bg)}
.ai-action-btn.primary{background:var(--amber);color:#fff;border-color:var(--amber)}
.ai-action-btn.primary:hover{background:var(--amber-dark)}

.ai-input-row{display:flex;gap:0.5rem;padding:0.75rem;border-top:1px solid var(--border-light);background:var(--bg)}
.ai-input{flex:1;padding:0.6rem 0.85rem;border:1.5px solid var(--border);border-radius:var(--radius-lg);
  font-size:0.85rem;outline:none;background:var(--surface);transition:border-color var(--transition)}
.ai-input:focus{border-color:var(--amber)}
.ai-input::placeholder{color:var(--ink-muted)}
.ai-send-btn{padding:0.6rem 1rem;border-radius:var(--radius-lg);background:var(--amber);
  color:#fff;font-weight:700;font-size:0.8rem;transition:all var(--transition);border:none;cursor:pointer;white-space:nowrap}
.ai-send-btn:hover{background:var(--amber-dark)}
.ai-send-btn:disabled{opacity:0.5;cursor:not-allowed}
.ai-typing{display:flex;align-items:center;gap:0.3rem;padding:0.2rem 0}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-muted);
  animation:aiDot 1.2s infinite}
.ai-typing span:nth-child(2){animation-delay:0.2s}
.ai-typing span:nth-child(3){animation-delay:0.4s}
@keyframes aiDot{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1)}}

.ai-suggestions{display:flex;flex-wrap:wrap;gap:0.35rem;padding:0.5rem 0.75rem;border-top:1px solid var(--border-light)}
.ai-suggest-chip{padding:0.35rem 0.7rem;border-radius:20px;font-size:0.75rem;
  background:var(--bg);border:1px solid var(--border);color:var(--ink-soft);
  cursor:pointer;transition:all var(--transition);white-space:nowrap}
.ai-suggest-chip:hover{border-color:var(--amber);color:var(--amber);background:var(--fk-noun-bg)}

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes tileAppear{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
/* 2026-06-22 (Luke): one motion language. Was a bouncy back-ease
   (cubic-bezier(0.34,1.56,0.64,1)) baked onto EVERY tile on EVERY
   render — so editing one tile re-bounced the whole grid. Now this
   class is applied transiently to a SINGLE freshly-added tile (see
   addNewTile in tile-rendering.js) and uses the shared --motion-enter
   (ease-out) curve so it reads as the same surface as the drawers. */
.tile-appear{animation:tileAppear var(--motion-enter)}
@media (prefers-reduced-motion: reduce){ .tile-appear{animation:none} }
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-muted)}