/* Maverrik AI v1.4.5.3 — presentation polish only. No backend, billing or workflow changes. */

/* Suggested questions: a deliberate action surface, not a faint footer. */
.mav-answer-surface .mav-followups {
  margin-top: 1.3rem;
  padding: 1rem 1.1rem 1.12rem;
  border: 1px solid #bfd7fc;
  border-radius: 14px;
  background: linear-gradient(135deg, #f1f7ff 0%, #e9f3ff 100%);
}
.dark .mav-answer-surface .mav-followups {
  background: linear-gradient(135deg, #112846 0%, #142339 100%);
  border-color: #2a578b;
}
.mav-followups-label {
  font-size: .86rem;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 800;
  color: #0b4c9c;
  margin: 0 0 3px;
}
.dark .mav-followups-label {color: #bfddff;}
.mav-followups-hint {font-size: .75rem; line-height: 1.5; color: #617c9d; margin: 0 0 .9rem;}
.dark .mav-followups-hint {color: #9eb9da;}
.mav-followups-choices {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .55rem;}
.mav-followup-btn {
  width: 100%; min-height: 46px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: .75rem .85rem;
  border: 1px solid #b5d2f8; border-radius: 10px;
  background: #fff; color: #17599d;
  font-size: .81rem; font-weight: 700; line-height: 1.45;
  box-shadow: 0 3px 12px rgba(15, 69, 135, .055);
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.dark .mav-followup-btn {background: #192f50; border-color: #365f91; color: #e5f1ff;}
.mav-followup-btn:hover, .mav-followup-btn:focus-visible {
  background: #e2f0ff; border-color: #1882ff; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(24, 130, 255, .14);
}
.dark .mav-followup-btn:hover, .dark .mav-followup-btn:focus-visible {background: #24436c; border-color: #63a9ff;}
.mav-followup-btn:focus-visible {outline: 2px solid #60a5fa; outline-offset: 2px;}
.mav-followup-text {min-width: 0; overflow-wrap: anywhere;}
.mav-followup-arrow {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 8px;
  background: #e5f1ff; color: #1372da; font-size: 15px;
}
.dark .mav-followup-arrow {background: #264a7a; color: #93c5fd;}
@media (max-width: 640px) {
  .mav-answer-surface .mav-followups {padding: .86rem; margin-top: 1.05rem;}
  .mav-followups-choices {grid-template-columns: 1fr;}
  .mav-followup-btn {min-height: 45px;}
}

/* A restrained, accurate capability badge on the admin agent welcome screen. */
.mav-agent-hero .mav-agent-capability {margin-top: 12px; display: flex; justify-content: center;}
.mav-agent-search-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid #b9d7f8; background: #edf6ff;
  color: #145f9c; font-size: 11px; font-weight: 750; line-height: 1.25;
  letter-spacing: .01em; white-space: nowrap;
}
.dark .mav-agent-search-badge {background: #122946; border-color: #2b557e; color: #afdcff;}
.mav-agent-search-badge svg {width: 16px; height: 16px; flex: none;}

/* Admin AI Agents — separate registry from the editor and group options meaningfully. */
#admin-panel-agents .mav-directory-card {margin-bottom: 24px;}
#admin-panel-agents .mav-agent-editor {margin-top: 0;}
#admin-panel-agents .mav-agent-options {display: grid; gap: 14px; margin-top: 2px;}
#admin-panel-agents .mav-agent-option-group {
  min-width: 0; padding: 18px;
  border: 1px solid var(--ma-stroke); border-radius: 14px;
  background: var(--ma-panel-2);
}
#admin-panel-agents .mav-agent-option-heading {display: flex; align-items: center; gap: 11px; margin-bottom: 15px;}
#admin-panel-agents .mav-agent-option-heading h4 {font-size: 13px; font-weight: 800; color: var(--ma-text); margin: 0;}
#admin-panel-agents .mav-agent-option-heading p {font-size: 11px; line-height: 1.55; color: var(--ma-muted); margin: 3px 0 0;}
#admin-panel-agents .mav-agent-option-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--ma-blue-soft); display: inline-flex; align-items: center; justify-content: center;
  color: var(--ma-blue); font-size: 18px; font-weight: 800;
}
#admin-panel-agents .mav-capability-grid {gap: 10px;}
#admin-panel-agents .mav-setting {
  min-height: 78px; padding: 14px 15px;
  background: var(--ma-panel); border-color: var(--ma-stroke);
  align-items: center; transition: border-color .15s, background .15s;
}
#admin-panel-agents .mav-setting:hover {border-color: #417bac;}
#admin-panel-agents .mav-setting strong {font-size: 12.5px; line-height: 1.35;}
#admin-panel-agents .mav-setting small {font-size: 11px; line-height: 1.45; margin-top: 5px;}
#admin-panel-agents .mav-setting input[type=checkbox] {width: 19px; height: 19px;}
#admin-panel-agents .mav-option-wide {grid-column: 1 / -1;}
#admin-panel-agents .mav-setting:has(#gem-workflow-template) {grid-column: auto;}
#admin-panel-agents .mav-workflow-setting {flex-wrap: wrap; align-content: center;}
#admin-panel-agents .mav-workflow-setting label {min-width: 180px; flex: 1 1 200px;}
#admin-panel-agents #gem-workflow-template {flex: 0 1 205px; min-width: 0; max-width: none;}
#admin-panel-agents .mav-capability-grid-single {grid-template-columns: minmax(0,1fr);}
#admin-panel-agents .mav-setting.mav-fallback {grid-column: auto; grid-template-columns: minmax(0,1fr) 20px minmax(190px,.58fr);}
#admin-panel-agents .mav-fallback label {cursor: pointer;}
@media (max-width: 850px) {
  #admin-panel-agents .mav-capability-grid {grid-template-columns: 1fr;}
  #admin-panel-agents .mav-option-wide {grid-column: auto;}
  #admin-panel-agents .mav-workflow-setting {align-items: stretch;}
  #admin-panel-agents #gem-workflow-template {flex: 1 1 100%;}
}
@media (max-width: 580px) {
  #admin-panel-agents .mav-agent-option-group {padding: 13px;}
  #admin-panel-agents .mav-setting.mav-fallback {grid-template-columns: minmax(0,1fr) auto;}
  #admin-panel-agents .mav-setting.mav-fallback select {grid-column: 1 / -1;}
}

/* Collapse button: integrate the gutter into the workflow background instead of
   padding the entire <main>, which left a visible colour seam and cut-off cards. */
@media (min-width: 768px) {
  #app-view.sidebar-is-collapsed > main {padding-left: 0 !important;}
  #app-view.sidebar-is-collapsed #mav-workflow-progress {padding-left: 64px;}
  #app-view.sidebar-is-collapsed > main > #sidebar-expand-btn {
    top: 12px; left: 12px; width: 36px; height: 36px;
    padding: 9px; border-radius: 11px;
    color: #d6e9ff; background: #172a47;
    border: 1px solid #385070; box-shadow: 0 3px 14px rgba(0,0,0,.18);
    backdrop-filter: none;
  }
  #app-view.sidebar-is-collapsed > main > #sidebar-expand-btn:hover {background: #24446c; color: #fff;}
}
@media (prefers-reduced-motion: reduce) { .mav-followup-btn {transition: none; transform: none!important;} }