/**
 * agent.css — A Girl & Her Futures™
 *
 * Visual design for the AGHF Agent workspace. Kept as its own file
 * (sibling to dayli-desk.css, which stays reserved for dashboard/journal/
 * checklist chrome) so the workspace's look can keep evolving without
 * bloating an already-large stylesheet. Reuses tokens.css variables and
 * dayli-desk.css's existing .chip/.dd-primary-btn/.dd-secondary-btn/
 * .dd-card/.modal-overlay classes rather than re-declaring them.
 */

/* Overrides .main's default page padding (36px/44px/80px, or 24px/20px/84px
 * below 900px — that bottom value is what keeps ordinary page content clear
 * of the fixed mobile bottom nav) so the chat workspace can sit closer to
 * the edges. Sized as a flex column filling the true remaining viewport
 * height (not a second, independently-guessed 100vh-minus-a-constant calc
 * on .agc-workspace itself) so the two can never drift out of sync — that
 * drift previously left the composer tucked under the fixed mobile bottom
 * nav with no way to scroll to it, since .agc-workspace's own overflow is
 * intentionally hidden (everything scrolls internally, in .agc-thread/
 * .agc-sidebar instead). */
.agc-page { height: 100vh; box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; }
.agc-page #agcRoot { flex: 1; min-height: 0; display: flex; }

.agc-workspace {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  min-height: 0;
  background: var(--warm);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(44, 24, 16, .07);
  border: 1px solid var(--border);
  position: relative;
}

/* ── Sidebar ── */
.agc-sidebar {
  background: linear-gradient(180deg, var(--pink-pale) 0%, var(--cream) 55%);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.agc-new-btn { width: 100%; }
.agc-onetime-toggle { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); padding: 2px 2px 6px; }
.agc-sidebar-list { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.agc-sidebar-empty { color: var(--placeholder); font-size: .8rem; font-style: italic; padding: 10px 4px; }
.agc-convo-row { display: flex; align-items: center; gap: 4px; border-radius: 12px; }
.agc-convo-row.active, .agc-convo-row:hover { background: rgb(var(--pink-rgb,244 130 154) / .12); }
.agc-convo-title { flex: 1; text-align: left; background: none; border: none; padding: 9px 10px; font: 400 .85rem var(--font-body); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-convo-menu { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.agc-sidebar-section { border-top: 1px solid var(--border); padding-top: 10px; }
.agc-sidebar-heading { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 4px 6px; }
.agc-insights-list { max-height: 140px; }
.agc-sidebar-insight { font-size: .78rem; color: var(--text); padding: 6px 8px; border-radius: 8px; cursor: default; }
.agc-sidebar-insight:hover { background: rgba(126, 206, 196, .12); }
.agc-sidebar-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.agc-sidebar-link { background: none; border: none; text-align: left; padding: 8px 10px; border-radius: 10px; font: 400 .8rem var(--font-body); color: var(--muted); cursor: pointer; text-decoration: none; display: block; }
.agc-sidebar-link:hover { background: rgba(126, 206, 196, .12); color: var(--text); }

.agc-sidebar-toggle { display: none; position: absolute; top: 14px; left: 14px; z-index: 5; background: var(--warm); border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; }

/* ── Main canvas ── */
/* min-height: 0 on both .agc-main (a grid item here, inside .agc-workspace)
 * and .agc-thread (a flex item inside .agc-main) — without it, each
 * defaults to min-height:auto, which lets its content's natural height win
 * over the actual space the grid/flex parent has available. That let a
 * tall composer (mode chips + textarea + buttons, especially with an open
 * attach popover) silently grow .agc-main past .agc-workspace's own
 * height, with the overflow clipped — not scrollable — by
 * .agc-workspace's overflow:hidden. */
.agc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: radial-gradient(circle at 15% 0%, var(--peach-pale) 0%, transparent 45%), radial-gradient(circle at 90% 10%, var(--teal-pale) 0%, transparent 40%), var(--cream); }
.agc-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 32px clamp(16px, 6vw, 64px); display: flex; flex-direction: column; gap: 20px; }

.agc-welcome { max-width: 640px; margin: 6vh auto 0; text-align: center; }
.agc-welcome-title { font: 900 clamp(1.8rem, 4vw, 2.6rem) var(--font-display); color: var(--dark); }
.agc-welcome-description { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.agc-welcome-prompt { font: 400 italic 1.15rem var(--font-display); color: var(--pink); margin: 10px 0 6px; }
.agc-welcome-sub { color: var(--muted); font-size: .92rem; max-width: 460px; margin: 0 auto 26px; line-height: 1.6; }
.agc-suggested-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.agc-suggested-chip { background: var(--warm); border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 16px; font: 400 .82rem var(--font-body); color: var(--text); cursor: pointer; text-align: left; max-width: 260px; box-shadow: 0 6px 16px rgba(44, 24, 16, .05); transition: transform .15s ease; }
.agc-suggested-chip:hover { transform: translateY(-2px); }

.agc-msg { display: flex; flex-direction: column; max-width: 720px; }
.agc-msg-user { align-self: flex-end; align-items: flex-end; }
.agc-msg-assistant { align-self: flex-start; align-items: flex-start; }
.agc-msg-bubble { border-radius: 20px; padding: 16px 20px; line-height: 1.65; font-size: .93rem; }
.agc-msg-user .agc-msg-bubble { background: var(--pink); color: var(--fg-ffffff,#fff); border-bottom-right-radius: 6px; }
.agc-msg-assistant .agc-msg-bubble { background: var(--warm); border: 1px solid var(--border); border-bottom-left-radius: 6px; box-shadow: 0 8px 22px rgba(44, 24, 16, .05); }
.agc-msg-content p { margin: 0 0 10px; }
.agc-msg-content p:last-child { margin-bottom: 0; }
.agc-msg-content strong { color: var(--pink); }

.agc-attach-row { display: flex; gap: 6px; margin-bottom: 4px; }
.agc-attach-chip { font-size: .7rem; background: var(--peach-pale); color: var(--peach); border-radius: 100px; padding: 4px 10px; }
.agc-attach-chip.removable { display: inline-flex; align-items: center; gap: 6px; background: var(--pink-pale); color: var(--pink); font-weight: 600; }
.agc-attach-chip.removable button { background: none; border: none; color: var(--pink); cursor: pointer; font-size: .8rem; }
.agc-attach-chip-shot { padding: 4px 4px 4px 6px; gap: 8px; }
.agc-attach-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.agc-attach-uploading { font-size: .68rem; font-style: italic; opacity: .8; }
.agc-followups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.agc-contextual-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.agc-thinking { display: flex; gap: 5px; padding: 4px 0; }
.agc-thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-light); animation: agcPulse 1s infinite ease-in-out; }
.agc-thinking span:nth-child(2) { animation-delay: .15s; } .agc-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes agcPulse { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .agc-thinking span { animation: none; opacity: .7; } }

.agc-tool-status { font-size: .76rem; color: var(--muted); font-style: italic; padding: 4px 0 8px; }

.agc-msg-actions { display: flex; gap: 6px; margin-top: 6px; }
.agc-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 5px 8px; border-radius: 8px; font-size: .85rem; }
.agc-icon-btn:hover { background: rgba(126, 206, 196, .15); color: var(--text); }
.agc-icon-btn.active { color: var(--pink); }
.agc-error-text { color: var(--down,var(--pink)); font-size: .85rem; }

/* ── Cards inside messages ── */
.agc-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.agc-card { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; font-size: .85rem; }
.agc-card-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); margin-bottom: 6px; }
.agc-card-title { font: 700 .98rem var(--font-display); margin-bottom: 6px; text-transform: capitalize; }
.agc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.agc-pattern-meta { font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.agc-strength-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .68rem; font-weight: 700; margin-bottom: 8px; }
.agc-strength-early_signal { background: var(--peach-pale); color: var(--peach); }
.agc-strength-emerging { background: var(--pink-pale); color: var(--pink); }
.agc-strength-repeating, .agc-strength-strong { background: var(--teal-pale); color: var(--teal); }
.agc-strength-not_enough_data { background: var(--border); color: var(--muted); }
.agc-observed { margin: 4px 0; }
.agc-inference { color: var(--muted); font-style: italic; margin: 4px 0 0; }
.agc-note-card { color: var(--muted); font-style: italic; }
.agc-attach-error { color: var(--down,var(--pink)); font-size: .82rem; padding: 8px 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agc-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.agc-metrics-grid div { display: flex; flex-direction: column; }
.agc-metrics-grid span { font-size: .68rem; color: var(--muted); text-transform: capitalize; }
.agc-source-chip { display: inline-block; background: var(--teal-pale); color: var(--teal); border-radius: 100px; padding: 4px 12px; font-size: .76rem; margin: 2px 4px 2px 0; text-decoration: none; }
.agc-preview-card { border-color: var(--peach); }
.agc-launch-card { background: transparent; border: none; padding: 4px 0; }

/* ── Interactive components ── */
.agc-component { background: var(--cream); border: 1px dashed var(--pink-light); border-radius: 16px; padding: 14px 16px; margin-top: 10px; }
.agc-component-label { font-weight: 600; margin-bottom: 10px; }
.agc-scale { display: flex; gap: 8px; }
.agc-scale-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--warm); cursor: pointer; font-weight: 700; }
.agc-scale-btn.active { background: var(--pink); color: var(--fg-ffffff,#fff); border-color: var(--pink); }
.agc-plan-list { margin: 8px 0; padding-left: 18px; }
.agc-plan-list li { margin-bottom: 4px; }
.agc-evidence-compare p { margin: 0 0 4px; }

/* ── Composer ── */
.agc-composer { border-top: 1px solid var(--border); background: var(--warm); padding: 14px clamp(16px, 6vw, 40px) 18px; position: relative; }
.agc-input-row { display: flex; align-items: flex-end; gap: 8px; }
.agc-textarea { flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 14px; font: 400 .9rem var(--font-body); background: var(--cream); max-height: 160px; outline: none; }
.agc-textarea:focus { border-color: var(--pink); }
.agc-send-btn, .agc-stop-btn { flex-shrink: 0; }
.agc-attach-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.agc-attach-popover { position: absolute; bottom: 100%; left: clamp(16px, 6vw, 40px); margin-bottom: 8px; background: var(--warm); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 40px rgba(44, 24, 16, .12); padding: 12px; min-width: 220px; z-index: 6; }
.agc-attach-actions { display: flex; flex-direction: column; gap: 2px; }
.agc-attach-action { background: none; border: none; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .84rem; }
.agc-attach-action:hover { background: var(--pink-pale); }
.agc-pick-list { max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.agc-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: .8rem; }
.agc-pick-row:hover { background: var(--teal-pale); }
.agc-pick-row label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.agc-pick-exclude { background: none; border: none; color: var(--muted); font-size: .7rem; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.agc-pick-exclude:hover { color: var(--pink); }
.agc-pick-excluded { opacity: .5; }
.agc-flow-sub { color: var(--muted); font-size: .8rem; padding: 6px 10px; }

/* ── Slide-over panel (tool launches, memory) ── */
.agc-panel-host { position: absolute; inset: 0; z-index: 8; display: flex; justify-content: flex-end; background: rgb(var(--ink-rgb,44 24 16) / .28); }
.agc-panel-host[hidden] { display: none; }
.agc-panel { width: min(420px, 92vw); background: var(--warm); height: 100%; overflow-y: auto; padding: 20px; position: relative; box-shadow: -20px 0 50px rgba(44, 24, 16, .15); }
.agc-panel-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.agc-panel-title { font: 700 1.1rem var(--font-display); margin-bottom: 14px; }
.agc-memory-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.agc-memory-row.agc-memory-inactive { opacity: .5; }
.agc-memory-row-text { flex: 1; }
.agc-memory-edit { flex: 1; font: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; resize: vertical; min-height: 44px; }
.agc-memory-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.agc-memory-row button { background: none; border: none; color: var(--pink); font-size: .74rem; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 900px) {
  /* .mb-bar (sidebar.css) is a fixed-position bottom nav below 900px —
   * reserve room for it here (same value .main's own default mobile
   * bottom padding already uses elsewhere) instead of guessing a
   * separate height for .agc-workspace that could drift out of sync. */
  .agc-page { padding: 12px 12px calc(12px + 84px + env(safe-area-inset-bottom)); }
  .agc-workspace { grid-template-columns: 1fr; border-radius: 18px; }
  .agc-sidebar { position: absolute; inset: 0 20% 0 0; z-index: 7; transform: translateX(-105%); transition: transform .2s ease; }
  .agc-sidebar.open { transform: translateX(0); }
  .agc-sidebar-toggle { display: block; }
  .agc-thread { padding: 60px 14px 20px; }
  .agc-msg { max-width: 100%; }
  .agc-panel { width: 100%; }
}