/* A5 CRM — css/aireply.css: the AI helper of a WhatsApp reply box (A5Comms.aiPanel in screens/deal.js; deal page + inbox;
   DESIGN-CALM.md §7). One box and nothing over the chat: the ready answer and the AI's next words grey right in the box,
   as in Gmail (.aig — a mirror of the textarea over it; Tab takes the words), «✦ Оформить» in the box (.aix-fmt) and the
   tools under it (.aistrip, .aix-*) — those two are in css/deal.css; the «/» commands in the page's «/» list and the
   files of /презентации over the box (.aiatt). Tokens only (base.css), light and dark. */

/* ── shared bits ── */
.aih-wait{display:inline-flex;align-items:center;gap:6px;font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap}
.aih-sp{width:12px;height:12px;flex:none;box-sizing:border-box;border:2px solid var(--border-strong);border-top-color:var(--text-2);border-radius:50%;animation:ai-spin .8s linear infinite}

/* ── the grey suggestion: the box's own text drawn again, transparent, in the textarea's exact font and box, then the
      suggestion in the placeholder grey and a quiet «Tab» key; the clicks go through to the textarea ── */
.cm-rbox.aig-box{position:relative}
.aig{position:absolute;z-index:2;margin:0;overflow:hidden;border-style:solid;border-color:transparent;background:transparent;pointer-events:none;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;color:transparent}
.aig[hidden]{display:none}
.aig-t{color:transparent}
.aig-g{color:var(--text-4)}
.aig-k{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;background:var(--surface);box-shadow:0 0 0 1px var(--border);
  font:600 10px/16px var(--font-sans);color:var(--text-3);vertical-align:1px;white-space:nowrap}
.cm-rbox.aig-on textarea::placeholder{color:transparent}

/* the box's text while the AI rewrites it */
.cm-rbox.aih-busy textarea{opacity:.5;transition:opacity var(--dur-2)}

@media (prefers-reduced-motion: reduce){
  .aih-sp{animation-duration:2s}
}

/* ── «/» commands (js/commands.js): the first rows of the page's «/» list (.tpl, css/deal.css), the templates under them ── */
.tpl-it.tpl-cmd{grid-template-columns:16px minmax(0,1fr);column-gap:10px;min-height:48px}
.tpl-cmd > .ic{grid-row:1 / span 2;align-self:center;width:16px;height:16px;color:var(--ai-text);stroke-width:2}
.tpl-cmd .tc{display:flex;align-items:baseline;gap:8px;min-width:0}
.tpl-cmd .tc span{min-width:0;font:var(--t-body);color:var(--text-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tpl-cmd .tp{grid-column:2}
.tpl-sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:10px 12px 6px;box-shadow:inset 0 1px 0 var(--border-soft)}
.tpl-sec .lbl{color:var(--text-2)}
.tpl-sec .q{font:var(--t-caption);color:var(--text-3)}

/* the files of /презентации: chips over the box (they go with the message), «Ещё» adds another deck */
.aiatt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.aiatt[hidden]{display:none}
.aiatt-c{display:inline-flex;align-items:center;gap:8px;height:28px;max-width:340px;padding:0 2px 0 6px;border-radius:var(--radius-s);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);font:var(--t-body);color:var(--text);animation:cm-in var(--dur-3) var(--ease-out)}
.aiatt-c .ft{display:inline-flex;align-items:center;flex:none;height:16px;padding:0 4px;border-radius:var(--radius-xs);background:var(--badge-neutral-bg);
  color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);font:600 11px/16px var(--font-sans)}
.aiatt-c .fn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.aiatt-c .lg{flex:none;font:600 11px/16px var(--font-sans);color:var(--text-3)}
.aiatt-c button{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--icon-strong)}
.aiatt-c button:hover{color:var(--text-strong);background:var(--surface-hover)}
.aiatt-c button .ic{width:12px;height:12px;stroke-width:2.4}
.aiatt-add{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border-radius:var(--radius-s);font:500 12px/16px var(--font-sans);color:var(--text-3)}
.aiatt-add:hover{color:var(--text-strong);background:var(--surface-hover)}
.aiatt-add .ic{width:12px;height:12px;stroke-width:2.4}

/* «Мои быстрые ответы» in the «/» list (screens/deal.js quickRows, the owner's pick 6, DESIGN-CALM §24): name + «3×», the text */
.tpl-q .qn{margin-left:8px;font:var(--t-caption);color:var(--text-3)}
.tpl-hint{padding:8px 12px 12px;font:var(--t-caption);color:var(--text-3)}