/* ==========================================================================
   Circle Agent — brought onto the same surface as Chat, Hub, Coaches and
   CircleGram. Loaded after universe.css, so these rules win.

   The panel kept an older violet identity while every other surface moved to
   the shared dark ground with a single amber accent. The violet is retained
   only where it carries meaning — the assistant's own avatar — so the agent is
   still recognisably itself without being a different product.
   ========================================================================== */
:root{
  --ag-bg:#14161B; --ag-surface:#1B1E25; --ag-surface2:#21252E; --ag-line:#272B34;
  --ag-text:#E8EAEF; --ag-muted:#AEB5C2; --ag-dim:#868D9C;
  --ag-accent:#F2C14E; --ag-ink:#1A1408; --ag-mine:#333A4A;
}

.agc-panel{
  background:var(--ag-bg) !important;
  border:1px solid var(--ag-line) !important;
  border-bottom:none !important;
  border-radius:22px 22px 0 0 !important;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.agc-handle{ padding:10px 0 2px !important; }
.agc-handle-bar{ width:38px !important; height:4px !important; background:#343954 !important; }

.agc-header{
  padding:8px 18px 12px !important;
  border-bottom:1px solid var(--ag-line) !important;
}
.agc-header-left{ gap:11px !important; }
.agc-avatar{
  width:38px !important; height:38px !important; border-radius:13px !important;
  background:linear-gradient(135deg,#7C3AED,#4F46E5) !important;
}
.agc-name{
  font-size:16px !important; font-weight:700 !important; letter-spacing:-.02em;
  color:var(--ag-text) !important; line-height:1.15 !important;
}
.agc-status{ font-size:12px !important; color:var(--ag-dim) !important; }
.agc-header-right{ gap:4px !important; }

/* One shape for every header control, so they read as a set. */
.agc-settings-btn, .agc-clear-btn, .agc-close-btn{
  width:36px !important; height:36px !important; min-width:36px;
  border-radius:11px !important; padding:0 !important;
  display:grid !important; place-items:center;
  background:none !important; border:1px solid transparent !important;
  color:var(--ag-dim) !important; cursor:pointer;
}
.agc-settings-btn:hover, .agc-clear-btn:hover, .agc-close-btn:hover{
  color:var(--ag-text) !important; border-color:var(--ag-line) !important;
}
.agc-close-btn{ font-size:22px !important; line-height:1 !important; }

/* ── suggestion chips and the commands strip ────────────────────────────── */
.agc-suggestions-strip{
  padding:10px 18px 2px !important;
  gap:8px !important;
  border-bottom:0 !important;
}
.agc-suggestions-strip::-webkit-scrollbar{ display:none; }
.agc-sugg-chip{
  border-radius:18px !important; padding:8px 14px !important;
  font-size:12.5px !important; font-weight:600 !important;
  background:var(--ag-surface) !important; border:1px solid var(--ag-line) !important;
  color:var(--ag-muted) !important; white-space:nowrap;
}

.agc-commands-strip{
  border-bottom:1px solid var(--ag-line) !important;
  background:none !important;
}
.agc-cmds-toggle{
  padding:11px 18px !important; gap:9px !important;
  background:none !important; border:0 !important; width:100%;
  font-family:inherit; cursor:pointer;
}
.agc-cmds-toggle-label{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important;
  text-transform:uppercase; color:var(--ag-dim) !important;
}
.agc-cmds-toggle-icon{ font-size:13px !important; }
.agc-cmds-toggle-arrow{ color:var(--ag-dim) !important; margin-left:auto; }

/* ── thread ─────────────────────────────────────────────────────────────── */
.agc-thread{ padding:14px 16px !important; }
.agc-bubble{
  max-width:80% !important; padding:11px 14px !important;
  border-radius:16px !important;
  font-size:14.5px !important; line-height:1.5 !important;
  color:var(--ag-text) !important;
  overflow-wrap:anywhere;
}
.agc-msg-assistant .agc-bubble{
  background:var(--ag-surface) !important;
  border:1px solid var(--ag-line) !important;
  border-bottom-left-radius:6px !important;
}
.agc-msg-user .agc-bubble{
  background:var(--ag-mine) !important; border:1px solid transparent !important;
  color:#EEF1F7 !important;
  border-bottom-right-radius:6px !important; border-bottom-left-radius:16px !important;
}
/* Emphasis and code were violet-on-violet; they now read against the surface. */
.agc-bubble strong{ color:var(--ag-accent) !important; }
.agc-bubble code{
  background:var(--ag-surface2) !important; color:var(--ag-text) !important;
  border:1px solid var(--ag-line) !important; border-radius:6px !important;
  padding:1px 6px !important; font-size:12.5px !important;
}
.agc-bubble a{ color:var(--ag-accent) !important; }


/* ── rendered markdown ──────────────────────────────────────────────────────
   What the agent writes: headed sections, bullets, and tables. The table is
   the reason this exists -- a payoff table or a day's meals rendered as raw
   pipes before. It scrolls inside its own box so a six-column table cannot
   make the whole page scroll sideways. */
.agc-bubble .md-p{ margin:0 0 8px; }
.agc-bubble .md-p:last-child{ margin-bottom:0; }
.agc-bubble .md-h{ margin:12px 0 6px; font-size:1em; font-weight:700; color:var(--ag-accent); }
.agc-bubble .md-h:first-child{ margin-top:0; }
.agc-bubble .md-list{ margin:6px 0 8px; padding-left:20px; }
.agc-bubble .md-list li{ margin:3px 0; }
.agc-bubble .md-hr{ border:0; border-top:1px solid var(--ag-line); margin:10px 0; }
.agc-bubble .md-quote{ margin:8px 0; padding:4px 0 4px 10px; border-left:2px solid var(--ag-line); opacity:.85; }
.agc-bubble .md-pre{ margin:8px 0; padding:9px 11px; border-radius:8px; overflow-x:auto;
  background:var(--ag-surface2); border:1px solid var(--ag-line); }
.agc-bubble .md-pre code{ background:none; border:0; padding:0; font-size:12px; white-space:pre; }
.agc-bubble .md-table-wrap{ margin:8px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.agc-bubble .md-table{ border-collapse:collapse; width:100%; font-size:12.5px; }
.agc-bubble .md-table th, .agc-bubble .md-table td{
  padding:6px 9px; border:1px solid var(--ag-line); text-align:left; white-space:nowrap; }
.agc-bubble .md-table th{ background:var(--ag-surface2); font-weight:700; }
.agc-bubble .md-table tr:nth-child(even) td{ background:rgba(255,255,255,.02); }

/* ── the working ─────────────────────────────────────────────────────────
   What the agent did before it answered. Quieter than a reply in every
   respect -- smaller, dimmer, no bubble -- because it is context for the
   answer, not the answer. Open while it runs, one collapsed line afterwards. */
.agc-thought{
  max-width:80%;
  border:1px solid var(--ag-line); border-radius:12px;
  background:transparent;
  font-size:13px; color:var(--ag-muted);
}
.agc-thought-head{
  list-style:none; cursor:pointer;
  padding:8px 12px;
  display:flex; align-items:center; gap:8px;
  color:var(--ag-dim); font-size:12.5px;
}
.agc-thought-head::-webkit-details-marker{ display:none; }
/* A chevron that turns, rather than the browser's own triangle. */
.agc-thought-head::before{
  content:''; width:5px; height:5px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s ease;
}
.agc-thought[open] .agc-thought-head::before{ transform:rotate(45deg); }
/* While it is still running the label breathes, so an idle-looking box is
   distinguishable from a finished one at a glance. */
.agc-thought:not(.is-done) .agc-thought-label{ animation:agcPulse 1.6s ease-in-out infinite; }
@keyframes agcPulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .agc-thought:not(.is-done) .agc-thought-label{ animation:none; }
}

.agc-thought-body{
  padding:2px 12px 10px 12px;
  max-height:220px; overflow-y:auto;
  border-top:1px solid var(--ag-line);
  margin-top:2px;
}
.agc-thought-text{
  white-space:pre-wrap; line-height:1.45;
  color:var(--ag-muted); margin:8px 0;
}
/* Each tool call, on a rail so the sequence reads as a sequence. */
.agc-thought-step{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  margin:6px 0 6px 2px; padding-left:12px;
  position:relative; color:var(--ag-dim);
}
.agc-thought-step::before{
  content:''; position:absolute; left:0; top:6px;
  width:5px; height:5px; border-radius:50%;
  background:var(--ag-accent); opacity:.65;
}
.agc-thought-what{ color:var(--ag-muted); }
.agc-thought-arg{
  font-size:11.5px; color:var(--ag-dim);
  background:var(--ag-surface2); border:1px solid var(--ag-line);
  border-radius:5px; padding:0 5px;
  overflow-wrap:anywhere;
}

/* A caption on the typing dots, naming what the agent is reading. The wait is
   the same length either way; this is the difference between waiting and
   watching. */
.agc-step{
  margin-left:8px;
  font-size:12.5px; color:var(--ag-dim, #8b93a7);
  vertical-align:middle;
}

/* The tail of a streaming reply: the part of the text that has arrived but has
   not finished its block yet. Shown as plain text, with newlines kept, so a
   half-written table reads as a half-written table rather than as broken
   markdown. It is replaced by the rendered version the moment the block ends. */
.agc-stream-tail{
  white-space:pre-wrap;
}
.agc-stream-tail:empty{ display:none; }
/* A caret so an answer that has paused mid-sentence still looks alive. */
.agc-streaming .agc-stream-tail::after{
  content:''; display:inline-block;
  width:2px; height:1em; margin-left:2px; vertical-align:-2px;
  background:var(--ag-accent);
  animation:agcCaret 1s steps(2, start) infinite;
}
@keyframes agcCaret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){
  .agc-streaming .agc-stream-tail::after{ animation:none; }
}

/* ── composer ───────────────────────────────────────────────────────────── */
.agc-input-row{
  padding:10px 14px calc(env(safe-area-inset-bottom,14px) + 14px) !important;
  border-top:1px solid var(--ag-line) !important;
  background:var(--ag-bg) !important;
  gap:9px !important;
  align-items:flex-end !important;
}
.agc-input{
  min-height:44px !important; border-radius:13px !important;
  background:var(--ag-surface) !important; border:1px solid var(--ag-line) !important;
  color:var(--ag-text) !important; font-size:15px !important;
  padding:12px 14px !important; line-height:1.35 !important;
}
.agc-input:focus{ border-color:rgba(242,193,78,.5) !important; }
.agc-input::placeholder{ color:var(--ag-dim) !important; }

.agc-send-btn, .agc-cam-btn{
  width:44px !important; height:44px !important; min-width:44px !important;
  border-radius:13px !important; display:grid !important; place-items:center;
  padding:0 !important; cursor:pointer;
}
.agc-cam-btn{
  background:var(--ag-surface) !important; border:1px solid var(--ag-line) !important;
  color:var(--ag-muted) !important;
}
.agc-send-btn{
  background:var(--ag-accent) !important; border:1px solid var(--ag-accent) !important;
  color:var(--ag-ink) !important;
}
.agc-send-btn svg{ stroke:var(--ag-ink) !important; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.agc-confirm-card, .agc-preview-card{
  background:var(--ag-surface) !important;
  border:1px solid var(--ag-line) !important;
  border-radius:14px !important;
  margin:0 16px 12px !important;
}
.agc-btn-confirm, .agc-btn-preview-open, .agc-btn-preview-confirm{
  background:var(--ag-accent) !important; border:0 !important; color:var(--ag-ink) !important;
  border-radius:11px !important; font-weight:700 !important; min-height:44px;
}
.agc-btn-deny{
  background:none !important; border:1px solid var(--ag-line) !important;
  color:var(--ag-muted) !important; border-radius:11px !important; min-height:44px;
}

@media (prefers-reduced-motion:reduce){
  .agc-panel{ transition:none !important; }
}


/* ── settings: agents, skills, knowledge, model, cost ────────────────────
   The gear used to open tool permissions and nothing else. It now opens a
   menu, because permissions are one setting among several. */
.agc-settings-body{ padding:14px 16px 24px !important; }

.agc-set-menu{ display:flex; flex-direction:column; }
.agc-set-row{
  display:block; width:100%; text-align:left; background:none; cursor:pointer;
  border:0; border-bottom:1px solid var(--ag-line); padding:13px 2px;
  color:var(--ag-text); font:inherit; position:relative;
}
.agc-set-row:last-child{ border-bottom:0; }
.agc-set-row:hover{ background:var(--ag-surface); }
.agc-set-row-t{ display:block; font-size:14.5px; font-weight:600; }
.agc-set-row-s{ display:block; color:var(--ag-dim); font-size:12.5px; margin-top:2px;
  line-height:1.45; padding-right:18px; }
.agc-set-row-c{ position:absolute; right:4px; top:15px; color:var(--ag-dim); }

.agc-set-back{
  background:none; border:0; color:var(--ag-dim); cursor:pointer;
  font:13px inherit; padding:2px 0 12px; display:block;
}
.agc-set-back:hover{ color:var(--ag-text); }

.agc-set-label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ag-dim); margin:18px 0 8px;
}
.agc-set-note{ font-size:12.5px; color:var(--ag-dim); line-height:1.55; margin:8px 0; }
.agc-set-warn{ color:var(--ag-accent); }

.agc-set-card{
  background:var(--ag-surface); border:1px solid var(--ag-line);
  border-radius:12px; padding:12px 13px; margin-bottom:8px;
}
.agc-set-on{ border-color:rgba(242,193,78,.45); }
.agc-set-off{ opacity:.55; }
.agc-set-card-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.agc-set-card-top b{ font-size:14px; font-weight:600; }
.agc-set-pill{
  font-size:10.5px; padding:2px 8px; border-radius:20px;
  border:1px solid var(--ag-line); color:var(--ag-dim);
}
.agc-set-sub{ font-size:12px; color:var(--ag-dim); margin-top:4px; }
.agc-set-brief{
  font-size:13px; color:var(--ag-muted); margin-top:6px; line-height:1.5;
  white-space:pre-wrap;
}
.agc-set-acts{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.agc-set-btn{
  background:var(--ag-accent); border:0; color:var(--ag-ink);
  border-radius:10px; padding:9px 15px; font:600 13px inherit; cursor:pointer;
  min-height:38px;
}
.agc-set-ghost{
  background:none; border:1px solid var(--ag-line); color:var(--ag-muted);
}
.agc-set-wide{ width:100%; margin-top:10px; }

.agc-set-input{
  width:100%; background:var(--ag-surface); border:1px solid var(--ag-line);
  border-radius:10px; padding:11px 13px; color:var(--ag-text);
  font:14px inherit; margin-bottom:8px;
}
.agc-set-input:focus{ outline:none; border-color:rgba(242,193,78,.5); }
.agc-set-area{ resize:vertical; min-height:90px; line-height:1.5; }

.agc-set-stat{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-top:1px solid var(--ag-line); font-size:13.5px;
}
.agc-set-stat:first-of-type{ border-top:0; }
.agc-set-stat span:first-child{ color:var(--ag-muted); }
.agc-set-stat span:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.agc-set-stat small{ display:block; color:var(--ag-dim); font-size:11.5px; font-weight:400; }
.agc-set-big{
  font-size:30px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}