/* Conversation-native Sidekicks. The same forest, lime and lilac, with room to breathe. */
.sidekick-hub { display:grid; gap:24px; }
.hub-intro { color:var(--muted); font-size:14px; margin-top:-3px; }
.hub-section { display:grid; gap:10px; }
.hub-label { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.12em; margin:0 0 1px; }
.hub-card.skill-card { padding:17px; border-radius:20px; display:grid; gap:13px; }
.hub-card-head { display:flex; align-items:center; gap:11px; min-width:0; }
.hub-card-head .bot-icon { width:42px; height:42px; flex:0 0 42px; font-size:23px; border-radius:14px; }
.hub-card h3 { font-size:16px; line-height:1.3; }
.hub-card .small { font-size:11px; line-height:1.5; margin-top:3px; }
.hub-card .skill-classification { flex:0 0 auto; font-size:9px; white-space:nowrap; padding:5px 7px; margin:0; }
.hub-card .skill-description { font-size:13px; line-height:1.55; margin:0; }
.hub-card.is-installed { background:#f8faf2; border-color:#e6eadb; }
.hub-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hub-actions .btn { min-height:40px; flex:1 1 auto; padding:10px 12px; font-size:12px; }
.hub-actions .icon-btn { flex:0 0 40px; width:40px; height:40px; }
.hub-guide { display:flex; align-items:center; gap:12px; padding:16px; border-radius:18px; background:var(--lilac-soft); color:var(--lilac-ink); flex-wrap:wrap; }
.hub-guide strong { font-size:13px; }
.hub-guide p { font-size:11px; margin-top:4px; line-height:1.5; }
.hub-guide .btn { padding:9px 11px; font-size:11px; min-height:40px; background:#ffffff80; }
.recipient-card { border:1px solid #dcd3ee; border-bottom:0; background:#f3effa; border-radius:19px 19px 0 0; padding:12px 14px 13px; margin:0 9px -3px; }
.recipient-heading { display:flex; align-items:center; gap:10px; }
.recipient-glyph { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:12px; background:var(--lilac); color:var(--lilac-ink); font-size:20px; font-weight:750; }
.recipient-glyph.tambola { background:var(--accent); color:var(--lime); font-size:15px; }
.recipient-heading strong { display:block; color:var(--ink); font-size:12px; line-height:1.4; }
.recipient-heading .grow > span { display:block; font-size:10px; line-height:1.45; color:var(--muted); }
.recipient-heading .icon-btn { width:34px; height:34px; flex:0 0 34px; min-height:34px; }
.sidekick-starters { display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; }
.starter { text-align:left; font-size:11px; line-height:1.4; background:#fff; border:1px solid #ded6ea; border-radius:11px; padding:9px 11px; color:#4d4261; min-height:36px; }
.starter:hover { background:#faf8ff; border-color:#a58bc9; }
.recipient-consent { display:flex; gap:9px 15px; flex-wrap:wrap; margin-top:10px; }
.recipient-consent label { display:flex; align-items:center; gap:6px; font-size:11px; color:#59476d; min-height:28px; }
.recipient-consent input { width:16px; height:16px; accent-color:var(--accent); margin:0; }
.message-recipient { display:flex; align-items:center; gap:5px; color:#67478b; font-size:10px; font-weight:650; margin:0 0 5px; }
.message.own .message-recipient { color:#416344; }
.sidekick-result.message { max-width:590px; margin:14px 0 16px 42px; }
.sidekick-result-body { width:100%; min-width:0; border:1px solid #e1d8ef; background:#fff; border-radius:8px 22px 22px; padding:16px 18px 10px; box-shadow:0 3px 12px #26302404; }
.sidekick-result-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sidekick-result-heading strong { font-size:12px; color:var(--ink); }
.result-status { display:block; color:#76648b; font-size:10px; margin-top:3px; }
.sidekick-result-body h3 { font-size:17px; line-height:1.35; margin-bottom:6px; }
.result-summary { font-size:13px; line-height:1.6; overflow-wrap:anywhere; color:#53604e; white-space:pre-line; }
.result-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.result-actions .btn { font-size:11px; min-height:38px; padding:9px 12px; }
.sidekick-result .message-time { display:block; margin-top:10px; text-align:right; }
.balance-mini { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:12px; }
.balance-mini strong { font-size:23px; letter-spacing:-.04em; }
.balance-mini span { color:var(--muted); font-size:10px; }
.balance-transfer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.chat-plan-preview { display:grid; gap:16px; }
.chat-plan-preview .form-actions { position:sticky; bottom:-1px; background:#fff; padding:14px 0 2px; margin-top:0; }
/* Keep reactions in flow so extra emoji rows reserve space, while the first
   row nestles over the bubble border. Never cover message text or timestamps. */
.reaction-strip { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:3px; margin:-5px 7px 0; }
.reaction-strip:empty { display:none; }
.own .reaction-strip { justify-content:flex-end; }
.reaction-chip { display:flex; align-items:center; gap:4px; min-height:24px; padding:2px 7px; border-radius:999px; font-size:12px; line-height:1.4; color:var(--muted); background:#fff; border:1px solid #d7dfce; box-shadow:0 1px 2px #20382e0c; }
.reaction-chip.is-mine { border-color:#77965a; background:#edf5df; color:var(--accent); }
.reaction-chip:hover { border-color:var(--accent); }
.reaction-picker { display:flex; justify-content:space-between; gap:4px; padding:7px; border-radius:22px; background:#f3f5ed; margin-bottom:4px; }
.reaction-choice { display:grid; place-items:center; width:44px; min-height:44px; font-size:25px; border-radius:14px; flex:1 1 0; }
.reaction-choice:hover, .reaction-choice[aria-pressed=true] { background:#e0eccb; transform:translateY(-2px); }
.reply-jump { display:block; text-align:left; width:100%; cursor:pointer; color:inherit; }
.reply-jump:hover { background:#e0e8d580; }
.message-highlight .bubble { animation:reply-highlight 1.8s ease-out; }
@keyframes reply-highlight { 0%,35% { box-shadow:0 0 0 4px #b7cc74; } 100% { box-shadow:0 0 0 0 transparent; } }
@media(max-width:680px) {
  .hub-card.skill-card { padding:15px; }
  .sidekick-hub { gap:22px; }
  .sidekick-result.message { margin-left:31px; margin-right:2px; width:calc(100% - 33px); }
  .sidekick-result-body { padding:14px 15px 9px; }
  .sidekick-result-body h3 { font-size:16px; }
  .result-actions .btn { min-height:42px; }
  .recipient-card { margin-left:5px; margin-right:5px; padding:11px 12px 12px; }
  .recipient-consent { gap:2px 12px; }
  .reaction-chip { min-height:26px; padding:3px 7px; }
  .reaction-choice { width:36px; font-size:23px; }
  .reaction-picker { gap:0; padding:5px; }
  .hub-guide { gap:10px; }
  .hub-guide .btn { width:100%; }
}
@media(max-width:380px) {
  .hub-card-head { flex-wrap:wrap; gap:9px; }
  .hub-card-head .skill-classification { margin-left:51px; margin-top:-4px; }
  .hub-card-head .grow { flex-basis:calc(100% - 55px); }
  .recipient-heading .grow > span { font-size:9px; }
  .recipient-consent label { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .message-highlight .bubble { animation:none; outline:2px solid #b7cc74; } .reaction-choice:hover { transform:none; } }

/* The message renderer owns scroll anchoring; browser anchoring must not apply a second offset. */
.messages-scroll { overflow-anchor:none; }

/* Chat-only Sidekicks keep the workspace quiet. */
.social-controls{display:flex;flex-wrap:wrap;gap:9px 12px;margin-top:10px}
.social-controls>.field{flex:1 1 110px;min-width:0}.social-controls select{width:100%;min-width:0;font-size:13px;padding:8px 10px;min-height:40px}
.social-context-note{flex-basis:100%;font-size:11px;line-height:1.4;margin:0}
.recipient-glyph.roast{background:#ffe3bd;color:#824514}.recipient-glyph.factcheck{background:#dcf0e6;color:#19573f}.recipient-glyph.summarizer{background:#e6dcfb;color:#564078}
.social-reply{min-width:0}.fact-citation{display:inline;padding:2px 3px;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.recap-points{display:grid;gap:10px;margin-top:12px}.recap-point{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 7px;font-size:13px;line-height:1.5}.recap-label{font-size:10px;font-weight:750;color:var(--accent)}
.recap-sources{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}.recap-source{font-size:10px;min-height:26px;padding:3px 7px;border-radius:8px;background:var(--canvas);color:var(--accent);border:1px solid var(--line)}
.social-coverage{font-size:10px;color:var(--muted);margin-top:12px;line-height:1.5}

.social-result .sidekick-result-body{padding:13px 15px 9px}
.social-result .result-actions:empty{display:none}
.social-result .message-time{margin-top:6px}
.social-result .social-coverage{margin-top:8px}
.social-result .result-summary{font-size:14px;line-height:1.5;color:var(--ink)}