/* Copilot · stile unico per tutte le Super App
   Solo presentazione: intestazione con icona, messaggi AI con avatar, messaggi
   utente a destra, domande suggerite a pillola e composer uniforme.
   Non cambia contenuti, pulsanti o logica dei copilot. */
:root{
  --cpk-pri:#0f9aa8;--cpk-pri2:#2a7de1;--cpk-grad:linear-gradient(135deg,#0f9aa8,#2a7de1);
  --cpk-ink:#0f172a;--cpk-sub:#64748b;--cpk-line:#e3e7ee;--cpk-bg:#f7f9fb;--cpk-user:#e6f4f5;--cpk-user-ink:#0b4f57;
}

/* ---------- intestazione ---------- */
.copilot-h{background:#fff!important;color:var(--cpk-ink)!important;border-bottom:1px solid var(--cpk-line)!important;padding:14px 16px!important;display:flex;align-items:center;gap:12px}
.copilot-h .t{display:flex;align-items:center;gap:12px;width:100%}
.copilot-h .ic,.chat-h .av,.ho-head .ho-av,.ho-head>.ho-ic{width:34px!important;height:34px!important;min-width:34px;border-radius:50%!important;background:var(--cpk-grad)!important;color:#fff!important;display:grid!important;place-items:center;font-size:0!important;box-shadow:0 4px 12px rgba(15,154,168,.28)}
.copilot-h .ic::before,.chat-h .av::before{content:"✦";font-size:15px;line-height:1;color:#fff}
.copilot-h .ic>*,.chat-h .av>*{display:none!important}
.copilot-h .tit,.chat-h .title{font-size:14.5px!important;font-weight:650!important;color:var(--cpk-ink)!important;letter-spacing:0!important}
.copilot-h .sub,.chat-h .sub{font-size:11.5px!important;color:var(--cpk-sub)!important;opacity:1!important}
.copilot-h{padding-right:112px!important;position:relative}
.copilot-h .copilot-close{position:static!important;order:9;flex:0 0 34px;margin-left:auto;transform:none!important;background:#fff!important;color:var(--cpk-sub)!important;border:1px solid var(--cpk-line)!important;border-radius:10px!important;width:34px;height:34px;display:grid;place-items:center}
.chat-h{background:#fff!important;color:var(--cpk-ink)!important;border-bottom:1px solid var(--cpk-line)!important}

/* Demand, Replenishment e Indirect Purchasing: avatar davanti al titolo del pannello */
.dr:has(.db>.chat)>header>div,.dr.cop>header>div,.ip-dialog:has(.ip-copilot-identity) .ip-dialog-header>div{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center}
.dr:has(.db>.chat)>header>div::before,.dr.cop>header>div::before,.ip-dialog:has(.ip-copilot-identity) .ip-dialog-header>div::before{content:"✦";grid-row:1/span 2;width:34px;height:34px;border-radius:50%;background:var(--cpk-grad);color:#fff;display:grid;place-items:center;font-size:15px;box-shadow:0 4px 12px rgba(15,154,168,.28)}
.dr:has(.db>.chat)>header>div>*,.dr.cop>header>div>*,.ip-dialog:has(.ip-copilot-identity) .ip-dialog-header>div>*{grid-column:2}

/* ---------- area messaggi ---------- */
.copilot-b,#chatBody,.chat-msgs,.cop-msgs,#hoBody,#assistant-messages,.dr .db>.chat{background:var(--cpk-bg)!important}
.copilot-b,#chatBody,.chat-msgs,.cop-msgs,#assistant-messages,.dr .db>.chat{padding:14px 16px!important;display:flex;flex-direction:column;gap:10px}

/* messaggio AI: riquadro bianco con avatar ✦ */
.chat-msg.ai:not(:has(.chat-avatar)),.cmsg.ai,.cop-a,.dr .chat .msg.a{position:relative;margin:0 0 0 40px!important;max-width:calc(100% - 40px)!important;align-self:flex-start;
  background:#fff!important;color:var(--cpk-ink)!important;border:1px solid var(--cpk-line)!important;border-radius:4px 14px 14px 14px!important;padding:10px 13px!important;font-size:13px!important;line-height:1.5!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important}
.chat-msg.ai:not(:has(.chat-avatar))::before,.cmsg.ai::before,.cop-a::before{content:"✦";position:absolute;left:-40px;top:0;width:30px;height:30px;border-radius:50%;background:var(--cpk-grad);color:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 3px 8px rgba(15,154,168,.25)}
.dr .chat .msg.a>.ic{position:absolute;left:-40px;top:0;width:30px;height:30px;border-radius:50%;background:var(--cpk-grad)!important;color:#fff!important;display:grid;place-items:center;font-size:13px;margin:0!important}
.chat-msg.ai:has(.chat-avatar){display:flex;gap:10px;align-items:flex-start;background:none!important;border:0!important;padding:0!important}
.chat-msg.ai .chat-avatar{width:30px!important;height:30px!important;min-width:30px;border-radius:50%!important;background:var(--cpk-grad)!important;color:#fff!important;display:grid!important;place-items:center;font-size:0!important}
.chat-msg.ai .chat-avatar::before{content:"✦";font-size:13px}
.chat-msg.ai .chat-avatar>*{display:none!important}
.chat-msg.ai .chat-bubble{background:#fff!important;color:var(--cpk-ink)!important;border:1px solid var(--cpk-line)!important;border-radius:4px 14px 14px 14px!important;padding:10px 13px!important;font-size:13px!important;line-height:1.5!important}
.ho-msg.ho-ai .ho-bub{background:#fff!important;border:1px solid var(--cpk-line)!important;color:var(--cpk-ink)!important}
.ip-chat-row:not(.me) .ip-chat-bubble:not(.guard){background:#fff!important;border:1px solid var(--cpk-line)!important;color:var(--cpk-ink)!important;border-radius:4px 14px 14px 14px!important}
.ip-chat-row:not(.me) .ip-chat-avatar{background:var(--cpk-grad)!important;color:#fff!important;border-radius:50%!important}

/* messaggio utente: a destra, tinta teal */
.chat-msg.user,.cmsg.usr,.cop-u,.dr .chat .msg.q{align-self:flex-end;margin:0 0 0 auto!important;max-width:85%!important;width:max-content;background:var(--cpk-user)!important;color:var(--cpk-user-ink)!important;border:0!important;border-radius:14px 14px 4px 14px!important;padding:8px 13px!important;font-size:13px!important;font-weight:500;line-height:1.45!important;box-shadow:none!important}
.ho-msg.ho-user .ho-bub,.ip-chat-row.me .ip-chat-bubble{background:var(--cpk-user)!important;color:var(--cpk-user-ink)!important;border-color:transparent!important;border-radius:14px 14px 4px 14px!important}

/* ---------- domande suggerite: pillole ---------- */
.copilot-suggestions,.chat-sugg,.ho-sugg,.dr .db>.sugq,.ip-copilot-questions{display:flex!important;flex-wrap:wrap;gap:6px!important;padding:10px 16px!important;background:#fff;border-top:1px solid var(--cpk-line)}
.copilot-sec{font-size:10.5px!important;font-weight:650!important;letter-spacing:.05em;text-transform:uppercase;color:var(--cpk-sub)!important;margin:6px 0 0!important;background:none!important;border:0!important;padding:0!important}
.cs-chip,.copilot-b button.suggest,.suggest-btn,.chat-sugg button,.ho-chip,.dr .db>.sugq .btn,.ip-copilot-questions .ip-btn{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;max-width:100%;text-align:left;
  padding:6px 12px!important;border:1px solid var(--cpk-line)!important;border-radius:999px!important;background:#fff!important;color:#334155!important;font-size:12.5px!important;font-weight:500!important;line-height:1.3!important;box-shadow:none!important;cursor:pointer;white-space:normal}
.copilot-b button.suggest{align-self:flex-start}
.copilot-b button.suggest .ic{color:var(--cpk-pri)!important;background:none!important;width:auto!important;height:auto!important}
.cs-chip:hover,.copilot-b button.suggest:hover,.suggest-btn:hover,.chat-sugg button:hover,.ho-chip:hover,.dr .db>.sugq .btn:hover,.ip-copilot-questions .ip-btn:hover{border-color:var(--cpk-pri)!important;color:var(--cpk-pri)!important;background:#f0fafb!important}
.chat-suggestions{background:#fff!important}
.chat-suggestions .suggest-btn{width:100%!important;border-radius:12px!important}

/* ---------- composer ---------- */
div.copilot-input,.copilot-f,.cop-in,.chat-input,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input,#hoForm{display:flex!important;align-items:center;gap:8px;padding:10px 14px!important;background:#fff!important;border-top:1px solid var(--cpk-line)!important}
div.copilot-input input,.copilot-f input,.cop-in input,.chat-input input,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input input,#hoForm input{flex:1;min-width:0;height:40px!important;padding:0 16px!important;border:1px solid var(--cpk-line)!important;border-radius:999px!important;background:var(--cpk-bg)!important;color:var(--cpk-ink)!important;font-size:13.5px!important;box-shadow:none!important;outline:none}
div.copilot-input input:focus,.copilot-f input:focus,.cop-in input:focus,.chat-input input:focus,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input input:focus,#hoForm input:focus{border-color:var(--cpk-pri)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(15,154,168,.15)!important}
div.copilot-input button,.copilot-f .cpk-send,.cop-in .btn.pri,.chat-input button,#chatSend,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input .ip-btn.icon:last-child,#hoForm button[type=submit]{flex:0 0 40px;width:40px!important;height:40px!important;min-width:40px;padding:0!important;border:0!important;border-radius:50%!important;background:var(--cpk-grad)!important;color:#fff!important;display:grid!important;place-items:center;font-size:0!important;box-shadow:0 4px 12px rgba(15,154,168,.3)!important}
div.copilot-input button::before,.copilot-f .cpk-send::before,.cop-in .btn.pri::before,.chat-input button::before,#chatSend::before,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input .ip-btn.icon:last-child::before,#hoForm button[type=submit]::before{content:"➤";font-size:15px;line-height:1}
div.copilot-input button>*,.cop-in .btn.pri>*,.chat-input button>*,#chatSend>*,.ip-dialog:has(.ip-copilot-identity) .ip-chat-input .ip-btn.icon:last-child>*,#hoForm button[type=submit]>*{display:none!important}
.chat-input>i.ti-sparkles{color:var(--cpk-pri)}
.ip-dialog:has(.ip-copilot-identity) .ip-chat-input .ip-mic{width:40px;height:40px;border-radius:50%!important;border:1px solid var(--cpk-line)!important;background:#fff!important}

/* ---------- Indirect Purchasing: corpo a colonna, messaggi che scorrono, composer in fondo ---------- */
.ip-dialog:has(.ip-copilot-identity) .ip-dialog-body{display:flex!important;flex-direction:column;padding:0!important;min-height:0;flex:1;overflow:hidden}
.ip-dialog:has(.ip-copilot-identity) .ip-copilot-identity{display:flex;align-items:center;gap:10px;margin:0!important;padding:12px 16px!important;border-bottom:1px solid var(--cpk-line);background:#fff;font-size:12px;color:var(--cpk-sub)}
.ip-dialog:has(.ip-copilot-identity) .ip-copilot-identity>svg{display:none}
.ip-dialog:has(.ip-copilot-identity) #assistant-messages{flex:1 1 auto;min-height:120px;overflow-y:auto}
.ip-dialog:has(.ip-copilot-identity) .ip-copilot-questions{order:2;border-bottom:0}
.ip-dialog:has(.ip-copilot-identity) .ip-chat-input{order:3;margin:0!important}

@media (max-width:640px){
  .chat-msg.ai:not(:has(.chat-avatar)),.cmsg.ai,.cop-a,.dr .chat .msg.a{margin-left:34px!important;max-width:calc(100% - 34px)!important}
  .chat-msg.ai:not(:has(.chat-avatar))::before,.cmsg.ai::before,.cop-a::before,.dr .chat .msg.a>.ic{left:-34px;width:26px;height:26px}
}

.copilot-h .t>div:not(.ic){flex:1;min-width:0}
.ip-dialog:has(.ip-copilot-identity)[open]{display:flex!important;flex-direction:column}
.apg-h{flex-wrap:wrap}.apg-h b{white-space:nowrap}