/* Ask hunters (askhunters.js, with the chat panel in agentchat.js): a conversation desk.
   The team is a list of conversations on the left; the open one fills the right and keeps its box to write in
   at the bottom. Loaded after screens-business.css so these rules refine the older chat styles. */

.ah2 { display: flex; flex-direction: column; gap: 16px; }

/* team strip */
.ah2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ah2-kpi { display: flex; align-items: center; gap: 12px; background: var(--sh-surface-lowest); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sh-shadow); }
.ah2-kpi-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--sh-surface-container); color: var(--sh-secondary); flex: none; }
.ah2-kpi-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); }
.ah2-kpi-v { font-size: 20px; font-weight: 800; line-height: 1.2; }
.ah2-kpi-n { font-size: 12px; color: var(--sh-on-surface-variant); }

/* the desk */
.ah2-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; height: calc(100vh - 300px); min-height: 540px; }
.ah2-list, .ah2-thread { background: var(--sh-surface-lowest); border-radius: 14px; box-shadow: var(--sh-shadow); min-height: 0; }
.ah2-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ah2-search { position: relative; }
.ah2-search .material-symbols-outlined { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sh-on-surface-variant); font-size: 20px; pointer-events: none; }
.ah2-search input { width: 100%; box-sizing: border-box; padding-left: 38px !important; }
.ah2-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.ah2-chip { all: unset; cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--sh-surface-low); display: inline-flex; align-items: center; gap: 4px; }
.ah2-chip:hover, .ah2-chip:focus-visible { background: var(--sh-surface-container); }
.ah2-chip.on { background: var(--sh-secondary, #8a5a00); color: #fff; }
.ah2-chip.member .material-symbols-outlined { font-size: 15px; }
.ah2-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ah2-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.ah2-row:hover, .ah2-row:focus-visible { background: var(--sh-surface-low); outline: none; }
.ah2-row.on { background: var(--sh-surface-container); }
.ah2-row.team { margin-bottom: 4px; border: 1px dashed var(--sh-surface-high); }
.ah2-main { min-width: 0; flex: 1; }
.ah2-name { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ah2-sub { font-size: 12px; color: var(--sh-on-surface-variant); overflow-wrap: anywhere; }
.ah2-badge { background: var(--sh-secondary, #8a5a00); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.ah2-none { padding: 18px 10px; font-size: 13px; color: var(--sh-on-surface-variant); text-align: center; }

/* faces */
.ah2-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--sh-primary-container, #f5b800); color: var(--sh-on-primary-container, #2b1d00); }
.ah2-av.bot { background: #1b2230; color: #fff; }
.ah2-av.team { background: var(--sh-surface-container); color: var(--sh-secondary); }
.ah2-av.big { width: 46px; height: 46px; font-size: 15px; }
.ah2-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--sh-surface-lowest); background: #9aa3b2; }
.ah2-dot.active { background: #2f9e44; }
.ah2-dot.paused { background: #f59e0b; }

/* a conversation */
.ah2-thread { display: flex; flex-direction: column; overflow: hidden; }
.ah2-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sh-surface-high); }
.ah2-head-t { flex: 1; min-width: 0; }
.ah2-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah2-back { all: unset; display: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; place-items: center; background: var(--sh-surface-low); order: -1; }
.ah2-stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--sh-surface-high); }
.ac-stat.hot { background: #fff1d6; }
.ah2-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ah2-chat > .sb.ac, .ah2-chat > .sh-sub { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.ah2-chat .ac-thread { flex: 1; max-height: none; border-radius: 0; background: var(--sh-surface-low); padding: 18px; gap: 14px; scroll-behavior: smooth; }
.ah2-chat .ac-composer { border-radius: 0; box-shadow: none; border-top: 1px solid var(--sh-surface-high); max-height: 58%; overflow-y: auto; flex: none; }
.ah2-chat .ac-guide { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--sh-surface-high); }

.ah2-welcome { margin: auto; max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 24px; color: var(--sh-on-surface-variant); }
.ah2-welcome .material-symbols-outlined { font-size: 40px; color: var(--sh-secondary); }
.ah2-welcome b { color: var(--sh-on-surface); font-size: 16px; }

/* messages (the one-to-one chat panel) */
.ac-msg { flex-direction: row; align-items: flex-end; gap: 8px; max-width: 92%; }
.ac-msg.me { flex-direction: row-reverse; }
.ac-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-msg.me .ac-col { align-items: flex-end; }
.ac-msg.sending .ac-bub { opacity: .65; }
.ac-bub { border-radius: 16px 16px 16px 4px; }
.ac-msg.me .ac-bub { border-radius: 16px 16px 4px 16px; }
.ac-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--sh-primary-container, #f5b800); color: var(--sh-on-primary-container, #2b1d00); }
.ac-av.bot { background: #1b2230; color: #fff; }
.ac-av .material-symbols-outlined { font-size: 16px; }
.ac-day { display: flex; justify-content: center; }
.ac-day span { font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); background: var(--sh-surface-container); border-radius: 999px; padding: 3px 10px; }
.ac-hint { font-size: 11px; color: var(--sh-on-surface-variant); margin-right: auto; }

/* "typing" */
.ac-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px !important; }
.ac-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-on-surface-variant); opacity: .35; animation: ah-dot 1.1s infinite ease-in-out; }
.ac-typing i:nth-child(2) { animation-delay: .15s; }
.ac-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ah-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ac-typing i { animation: none; opacity: .7; } .ah2-chat .ac-thread { scroll-behavior: auto; } }

/* a question waiting for a yes */
.ac-confirm { display: flex; gap: 12px; align-items: flex-start; background: #fff8e6; border: 1px solid #f5d98b; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.ac-confirm > .material-symbols-outlined { color: #8a5a00; }
.ac-confirm-act { display: flex; gap: 8px; margin-top: 10px; }

/* "Whole team" */
.ah2-members { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--sh-surface-high); }
.ah2-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--sh-surface-low); scroll-behavior: smooth; }
.ah2-msg { display: flex; max-width: 80%; }
.ah2-msg.me { align-self: flex-end; }
.ah2-msg.them { align-self: flex-start; }
.ah2-msg.them.wide { max-width: 100%; width: 100%; }
.ah2-bub { background: var(--sh-primary-container, #f5b800); color: var(--sh-on-primary-container, #2b1d00); padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 13px; overflow-wrap: anywhere; }
.ah2-msg.them .ah2-bub { background: var(--sh-surface-lowest); color: inherit; border-radius: 16px 16px 16px 4px; box-shadow: var(--sh-shadow); }
.ah2-bub.err { color: var(--sh-error); }
.ah2-bot { width: 100%; background: var(--sh-surface-lowest); border-radius: 14px; box-shadow: var(--sh-shadow); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ah2-tk { display: flex; flex-wrap: wrap; gap: 8px; }
.ah2-each { display: flex; flex-direction: column; gap: 6px; }
.ah2-ans summary { display: flex; align-items: center; gap: 10px; padding: 8px 4px; cursor: pointer; list-style: none; }
.ah2-ans summary::-webkit-details-marker { display: none; }
.ah2-ans-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ah2-ans-t span { color: var(--sh-on-surface-variant); font-size: 12px; }
.ah2-ans-b { padding: 4px 4px 12px 52px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ah2-composer { border-top: 1px solid var(--sh-surface-high); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ah2-compose-row { display: flex; gap: 10px; align-items: flex-end; }
.ah2-compose-row .fi { flex: 1; box-sizing: border-box; border: none; padding: 10px 12px; font-size: 13px; font-family: inherit; background: var(--sh-surface-low); border-radius: 10px; resize: none; }
.ah2-foot { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.ah2-foot .sb-err { flex: 1; }

/* narrow screens: the list or the conversation, one at a time */
@media (max-width: 900px) {
  .ah2-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .ah2-thread { display: none; }
  .ah2.show-thread .ah2-list { display: none; }
  .ah2.show-thread .ah2-thread { display: flex; height: calc(100vh - 150px); min-height: 480px; }
  .ah2-back { display: grid; }
  .ah2-rows { max-height: 55vh; }
  .ah2-ans-b { padding-left: 4px; }
}

/* Hunter AI (huntassistant.js) */
.ah2-av.ai, .ha-av { background: linear-gradient(135deg, #f5b800, #e8590c); color: #2b1d00; }
.ah2-row.ai { margin-bottom: 4px; background: linear-gradient(90deg, rgba(245, 184, 0, .14), transparent); }
.ah2-row.ai.on { background: var(--sh-surface-container); }
.ha-thread-wrap { overflow: hidden; }
.ha-root, .ha { display: flex; flex-direction: column; min-height: 0; height: 100%; flex: 1; }
.ha-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sh-surface-high); }
.ha-head-t { flex: 1; min-width: 0; }
.ha-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; align-self: flex-start; }
.ha-av .material-symbols-outlined { font-size: 18px; }
.ha-av.big { width: 46px; height: 46px; align-self: center; }
.ha-av.big .material-symbols-outlined { font-size: 26px; }
.ha-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; background: #fff8e6; border-bottom: 1px solid #f5d98b; font-size: 12px; }
.ha-banner[hidden] { display: none; }
.ha-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px; background: var(--sh-surface-low); scroll-behavior: smooth; }
.ha-msg { display: flex; gap: 10px; max-width: 100%; }
.ha-msg.me { align-self: flex-end; max-width: 80%; }
.ha-msg.them { align-self: flex-start; width: 100%; }
.ha-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.ha-bub { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 16px 16px 16px 4px; padding: 11px 15px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ha-msg.me .ha-bub { background: var(--sh-primary-container, #f5b800); color: var(--sh-on-primary-container, #2b1d00); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.ha-bub p { margin: 0 0 8px; } .ha-bub p:last-child, .ha-bub ul:last-child { margin-bottom: 0; }
.ha-bub ul { margin: 0 0 8px; padding-left: 18px; } .ha-bub li { margin: 2px 0; }
.ha-block { background: var(--sh-surface-lowest); border-radius: 12px; box-shadow: var(--sh-shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ha-bt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); }
.ha-sub { font-size: 12px; color: var(--sh-on-surface-variant); overflow-wrap: anywhere; }
.ha-sum { margin: 0; font-size: 13px; }
.ha-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ha-metric { background: var(--sh-surface-low); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--sh-on-surface-variant); }
.ha-metric b { font-size: 14px; color: var(--sh-on-surface); }
.ha-leads { display: flex; flex-direction: column; }
.ha-lead { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sh-surface-high); font-size: 13px; }
.ha-lead:first-child { border-top: none; }
.ha-lead-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.ha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ha-tag { font-size: 12px; background: var(--sh-surface-container); border-radius: 999px; padding: 4px 10px; }
.ha-segs { display: flex; flex-direction: column; gap: 10px; }
.ha-seg-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ha-seg-t span { font-size: 12px; color: var(--sh-on-surface-variant); }
.ha-fit { height: 6px; border-radius: 3px; background: var(--sh-surface-high); overflow: hidden; margin: 4px 0; }
.ha-fit i { display: block; height: 100%; background: var(--sh-gold, #e9a23b); }

/* a proposed change: nothing happens until Go ahead */
.ha-prop { border-radius: 12px; border: 1px solid #f5d98b; background: #fff8e6; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; transition: opacity .15s; }
.ha-prop.working { opacity: .6; pointer-events: none; }
.ha-prop-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #8a5a00; }
.ha-prop-s { font-weight: 700; }
.ha-prop-d, .ha-prop-r { margin: 0; padding-left: 18px; font-size: 12px; color: var(--sh-on-surface-variant); }
.ha-prop-a { display: flex; gap: 8px; margin-top: 4px; }
.ha-prop.done { border-color: #b7e0c2; background: #f0faf3; } .ha-prop.done .ha-prop-h { color: #1b6b3a; }
.ha-prop.failed { border-color: #f1b9b9; background: #fdf1f1; } .ha-prop.failed .ha-prop-h { color: #a12a2a; }
.ha-prop.cancelled { border-color: var(--sh-surface-high); background: var(--sh-surface-lowest); opacity: .8; } .ha-prop.cancelled .ha-prop-h { color: var(--sh-on-surface-variant); }

/* first screen and suggestions */
.ha-welcome { margin: auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; }
.ha-welcome h2 { margin: 0; font-size: 20px; }
.ha-welcome p { margin: 0; color: var(--sh-on-surface-variant); font-size: 13px; line-height: 1.5; }
.ha-sugg { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
.ha-sg { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); }
.ha-sg:hover, .ha-sg:focus-visible { background: var(--sh-surface-container); }
.ha-sg .material-symbols-outlined { color: var(--sh-secondary); font-size: 20px; }

.ha-composer { border-top: 1px solid var(--sh-surface-high); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--sh-surface-lowest); }
.ha-compose-row { display: flex; gap: 10px; align-items: flex-end; }
.ha-compose-row .fi { flex: 1; box-sizing: border-box; border: none; padding: 10px 12px; font-size: 13px; font-family: inherit; background: var(--sh-surface-low); border-radius: 10px; resize: none; }
.ha-foot { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.ha-foot .sb-err { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ha-thread { scroll-behavior: auto; } }
@media (max-width: 900px) { .ha-lead { flex-direction: column; } .ha-lead-r { align-items: flex-start; flex-direction: row; gap: 8px; } }