/* Casi d'uso: the answer panel reads as a real chat — always white,
   with the question (who asks) on the right and the reply (who answers) on the left. */
.usecase-page .case-reel .case-step-answer{
  --reel-ink:#15261c;--reel-muted:#5a6e61;--reel-accent:#2c6b45;--reel-line:#e1e8e2;--reel-soft:#eef5ef;
  --chat-user:#1e4f37;--chat-thread:#f6f8f5;
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:#fff;color:var(--reel-ink);
  border:1px solid #ffffff;border-radius:24px;
  box-shadow:0 34px 90px #00000059,0 2px 6px #0000001f;
}
.case-reel[data-tone=light] .case-step-answer{border-color:#dde6de!important;box-shadow:0 26px 70px #1c3a2a1f,0 2px 6px #1c3a2a0f!important}

/* Header: who is in the conversation */
.usecase-page .case-step-answer .reel-assistant-head{margin:0;padding:15px 22px;gap:11px;border-bottom:1px solid var(--reel-line);background:#fff}
.case-step-answer .reel-assistant-head .reel-live-orb{width:30px;height:30px}
.reel-head-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.reel-head-id strong{font-size:14px;font-weight:600;color:var(--reel-ink);line-height:1.2}
.reel-head-id strong span{color:var(--reel-accent)}
.reel-head-id small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--reel-muted)}
.reel-head-id small i{width:7px;height:7px;border-radius:50%;background:#3fae6a;box-shadow:0 0 0 3px #3fae6a26}
.usecase-page .reel-assistant-head>small.reel-head-tag{margin-left:auto;font-size:8px;letter-spacing:.08em;color:var(--reel-muted);padding:6px 9px;border:1px solid var(--reel-line);border-radius:30px;white-space:nowrap}

/* Thread */
.reel-chat-thread{display:flex;flex-direction:column;gap:14px;padding:18px 22px 6px;background:var(--chat-thread)}
.reel-chat-row{display:flex;align-items:flex-end;gap:10px;min-width:0}
.reel-chat-msg{display:flex;flex-direction:column;min-width:0}
.reel-chat-who{display:block;font-size:11px;font-weight:600;color:var(--reel-ink);margin:0 4px 6px}
.reel-chat-who i{font-style:normal;font-weight:400;color:var(--reel-muted)}
.reel-chat-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:650;background:#dcebe0;color:var(--chat-user)}
.reel-chat-bot .reel-chat-avatar.reel-live-orb{box-shadow:0 4px 12px #2c6b4533}

/* User: right-aligned, solid green bubble */
.reel-chat-user{justify-content:flex-end}
.reel-chat-user .reel-chat-msg{align-items:flex-end;max-width:82%}
.reel-chat-user .reel-chat-who{text-align:right}
.reel-chat-user .reel-bubble{margin:0;padding:11px 16px;border-radius:18px 18px 5px 18px;background:var(--chat-user);color:#fff;font-size:15px;line-height:1.45;font-weight:500;letter-spacing:-.005em;box-shadow:0 6px 16px #1e4f3726}

/* Assistant: left-aligned, white bubble */
.reel-chat-bot .reel-chat-msg{flex:1}
.reel-chat-bot .reel-bubble{padding:14px 17px 15px;border-radius:18px 18px 18px 5px;background:#fff;border:1px solid var(--reel-line);box-shadow:0 4px 14px #15261c0d}
.usecase-page .reel-chat-bot .reel-answer-block{margin-top:11px;padding-top:11px}
.usecase-page .reel-chat-bot .reel-answer-block>span{font-size:9.5px;font-weight:650;letter-spacing:.08em;color:var(--reel-accent)}
.usecase-page .reel-chat-bot .reel-answer-block>p{font-size:14px;line-height:1.6;color:#33473a;margin-top:5px}
.usecase-page .reel-chat-bot .reel-next{border:0;border-radius:12px;background:var(--reel-soft);padding:11px 13px}
.usecase-page .reel-chat-bot .reel-next>p{color:var(--reel-ink)}

/* Visuals inside the reply, tuned for a white surface */
.reel-chat-bot .reel-mini-chart{margin:0 0 4px}
.reel-chat-bot .reel-mini-chart>div:first-child>span,.reel-chat-bot .reel-finance small{font-size:11px}
.reel-chat-bot .reel-mini-chart strong,.reel-chat-bot .reel-finance>div>strong{font-size:26px;margin-top:2px}
.reel-chat-bot .reel-mini-chart svg{height:58px;margin-top:4px}
.reel-chat-bot .reel-chart-line{filter:none}
.reel-chat-bot .reel-mini-labels{font-size:9px}
.reel-chat-bot .reel-finance{margin-bottom:6px}
.reel-chat-bot .reel-money-row{font-size:11px;margin-top:7px}
.reel-chat-bot .reel-money-row>b{font-size:12px}
.reel-chat-bot .reel-operational{margin:0 0 6px;gap:16px}
.reel-chat-bot .reel-operational>strong{font-size:46px}
.reel-chat-bot .reel-operational small{font-size:11px}
/* Decorative orbit becomes a compact "what I looked at" chip row */
.usecase-page .reel-chat-bot .reel-flow-symbol{height:auto;margin:0 0 2px;padding:0;border:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
.reel-chat-bot .reel-flow-symbol>i{display:none}
.usecase-page .reel-chat-bot .reel-flow-symbol>b{position:static;font-size:13px;color:var(--reel-accent);text-shadow:none;margin-right:2px}
.usecase-page .reel-chat-bot .reel-flow-symbol>span{margin:0;font-size:9px;font-weight:600;letter-spacing:.07em;color:var(--reel-accent);background:var(--reel-soft);border:1px solid #d3e4d7;padding:5px 9px;border-radius:30px}

/* Composer: makes the panel instantly read as a chat */
.reel-composer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 22px 0;padding:6px 6px 6px 16px;border:1px solid var(--reel-line);border-radius:40px;background:#fff}
.reel-composer span{font-size:13px;color:#8a9a8f}
.reel-composer b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--chat-user);color:#fff;font-size:14px;font-weight:500}
.usecase-page .case-step-answer .reel-example-note{margin:0;padding:10px 22px 15px;font-size:10px;color:var(--reel-muted)}

@media(max-width:1100px){
  .reel-chat-thread{padding:16px 18px 6px}
  .usecase-page .case-step-answer .reel-assistant-head{padding:13px 18px}
  .reel-composer{margin-inline:18px}
  .usecase-page .case-step-answer .reel-example-note{padding-inline:18px}
  .usecase-page .reel-chat-bot .reel-answer-block>p{font-size:13px}
}

@media(max-width:640px){
  .usecase-page .case-reel .case-step-answer{border-radius:20px}
  .usecase-page .case-step-answer .reel-assistant-head{padding:11px 14px;gap:9px}
  .case-step-answer .reel-assistant-head .reel-live-orb{width:26px;height:26px}
  .reel-head-id strong{font-size:13px}
  .reel-head-id small{font-size:10px}
  .usecase-page .reel-assistant-head>small.reel-head-tag{font-size:7px;padding:5px 7px}
  .reel-chat-thread{gap:11px;padding:13px 12px 4px}
  .reel-chat-row{gap:7px}
  .reel-chat-avatar{width:24px;height:24px;font-size:10px}
  .reel-chat-who{font-size:10px;margin-bottom:4px}
  .reel-chat-user .reel-chat-msg{max-width:88%}
  .reel-chat-user .reel-bubble{font-size:14px;padding:9px 13px}
  .reel-chat-bot .reel-bubble{padding:11px 12px 12px}
  .usecase-page .reel-chat-bot .reel-answer-block{margin-top:9px;padding-top:9px}
  .usecase-page .reel-chat-bot .reel-answer-block>span{font-size:8.5px}
  .usecase-page .reel-chat-bot .reel-answer-block>p{font-size:12.5px;line-height:1.55;margin-top:4px}
  .usecase-page .reel-chat-bot .reel-next{padding:9px 11px}
  .reel-chat-bot .reel-mini-chart svg{height:44px}
  .reel-chat-bot .reel-mini-chart strong,.reel-chat-bot .reel-finance>div>strong{font-size:22px}
  .reel-chat-bot .reel-operational>strong{font-size:38px}
  .usecase-page .reel-chat-bot .reel-flow-symbol>span{font-size:8px;padding:4px 7px}
  .reel-composer{margin:8px 12px 0;padding:4px 4px 4px 13px}
  .reel-composer span{font-size:12px}
  .reel-composer b{width:26px;height:26px;font-size:12px}
  .usecase-page .case-step-answer .reel-example-note{padding:8px 14px 11px;font-size:9px}
  /* The question now lives in the chat bubble: keep it for screen readers, free the space. */
  .reel-enhanced .case-step-question h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .reel-enhanced .case-step{gap:12px}
  .reel-enhanced .case-step-question>a{margin-top:8px}
  .reel-enhanced .case-step-number{font-size:64px;top:-14px}
}

/* Fit: keep every case inside the pinned stage without inner scrolling. */
@media(min-width:641px){.reel-enhanced .case-step{grid-template-columns:.72fr 1.28fr;gap:5%}}
@media(max-height:960px){.reel-composer{display:none}.usecase-page .case-step-answer .reel-example-note{padding-top:12px}}
@media(min-width:641px) and (max-height:860px){
  .reel-enhanced .case-reel-stage{margin:14px auto}
  .usecase-page .case-step-answer .reel-assistant-head{padding:11px 20px}
  .reel-head-id small{display:none}
  .reel-chat-thread{gap:10px;padding-top:13px}
  .reel-chat-user .reel-bubble{font-size:14px;padding:9px 14px}
  .reel-chat-bot .reel-bubble{padding:12px 15px 13px}
  .usecase-page .reel-chat-bot .reel-answer-block{margin-top:8px;padding-top:8px}
  .usecase-page .reel-chat-bot .reel-answer-block>p{font-size:13px;line-height:1.5}
  .reel-chat-bot .reel-mini-chart svg{height:42px}
  .reel-chat-bot .reel-mini-chart strong,.reel-chat-bot .reel-finance>div>strong{font-size:22px}
  .usecase-page .case-step-answer .reel-example-note{padding:9px 20px 11px}
}
@media(max-width:640px){
  .reel-chat-bot>.reel-chat-avatar{display:none}
  .reel-head-id small{display:none}
  .reel-chat-user .reel-chat-msg{max-width:90%}
}
@media(max-width:640px) and (max-height:860px){
  .reel-enhanced .case-reel-stage{margin:12px auto}
  .reel-chat-thread{gap:9px;padding-top:11px}
  .usecase-page .reel-chat-bot .reel-answer-block>p{font-size:12px;line-height:1.5}
  .usecase-page .reel-chat-bot .reel-answer-block{margin-top:7px;padding-top:7px}
  .reel-chat-bot .reel-mini-chart svg{height:36px}
  .reel-chat-bot .reel-mini-labels{display:none}
  .reel-chat-user .reel-bubble{font-size:13.5px;padding:8px 12px}
}

/* Assistant avatar: solid, readable on white */
.reel-chat-bot{align-items:flex-start}
.reel-chat-bot>.reel-chat-avatar.reel-live-orb{margin-top:20px;background:radial-gradient(circle at 32% 30%,#7fc79a,#2c6b45 55%,#173b28);box-shadow:0 4px 12px #2c6b4540;position:relative}
.reel-chat-bot>.reel-chat-avatar.reel-live-orb::before{content:"✦";color:#fff;font-size:12px;line-height:1}
.reel-chat-user .reel-chat-avatar{align-self:flex-end}

@media(min-width:641px) and (max-height:820px){
  .reel-chat-bot .reel-mini-labels,.usecase-page .reel-chat-bot .reel-flow-symbol{display:none}
}
@media(max-width:640px){
  /* Role and case number are already in the top bar */
  .reel-enhanced .case-step-question>p:first-child,.reel-enhanced .case-step-number{display:none}
  .reel-enhanced .case-step-question>a{margin-top:0}
  .reel-enhanced .case-step{gap:10px}
}
@media(max-width:640px) and (max-height:860px){
  .usecase-page .reel-chat-bot .reel-flow-symbol{display:none}
  .usecase-page .reel-assistant-head>small.reel-head-tag{display:none}
}
@media(min-width:641px) and (max-height:800px){.reel-chat-bot .reel-mini-chart svg{height:32px}.reel-chat-bot .reel-finance .reel-money-row{margin-top:5px}}
@media(min-width:1101px) and (max-height:920px){.reel-chat-bot .reel-mini-chart svg{height:46px}}
@media(max-width:640px) and (max-height:800px){.reel-chat-bot .reel-mini-chart svg{height:30px}.reel-chat-bot .reel-mini-chart{margin-bottom:0}.reel-enhanced .case-reel-pin{padding-bottom:10px}.usecase-page .case-step-answer .reel-assistant-head{padding:9px 14px}}
.case-step-answer .reel-assistant-head>.reel-live-orb{display:grid;place-items:center;background:radial-gradient(circle at 32% 30%,#7fc79a,#2c6b45 55%,#173b28);box-shadow:0 4px 12px #2c6b4540}
.case-step-answer .reel-assistant-head>.reel-live-orb::before{content:"✦";color:#fff;font-size:12px;line-height:1}
.usecase-page .reel-chat-bot .reel-flow-symbol+.reel-answer-block{border-top:0;margin-top:8px;padding-top:2px}
@media(min-width:641px) and (max-height:820px){.usecase-page .reel-chat-bot .reel-flow-symbol+.reel-answer-block{margin-top:0;padding-top:0}}
@media(max-width:640px) and (max-height:860px){.usecase-page .reel-chat-bot .reel-flow-symbol+.reel-answer-block{margin-top:0;padding-top:0}}