:root{
  --chat-max-width: 432px; /* desktop box +20% */
  --chat-padding: 16px;
  --bubble-max: 75%;
  --font-base: 16px;
}

.chat-container #boxProdotti_cont{ overflow-x:auto; overflow-y:hidden; white-space:nowrap; margin-bottom:20px !important;}
.chat-container #boxProdotti{overflow-x: auto;}

.chat-container #boxProdotti::-webkit-scrollbar{
    background: transparent !important;
	width:13px;
	height:13px;
}
.chat-container #boxProdotti::-webkit-scrollbar-thumb{
	background-color: #8a8a8a;
	border: solid #f5f5f8 3px !important;
	border-radius: 50px;
	min-width: 30px;
	min-height: 30px;
}

/* MOBILE DEFAULT: full screen */
.chat-container{
  display:flex; flex-direction:column;
  height:100dvh; max-width:100%; width:100%; margin:0 auto;
  border:none; border-radius:0; background:#fff;
  padding-bottom:env(safe-area-inset-bottom,0);
  z-index:9999;
  position:fixed;
}
/* HEADER (più alto +20%), titolo bianco */
.chat-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 8px 4px 12px; /* era 8px -> +20% */
  background:#000;/*#273744;/*#0077ff;*/
  color:#fff;
  font-weight:bold;
  font-size:15px;
	
  background-image: url(../images/flowy.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: 32px;
  padding-left:50px;
}
.chat-header > button:hover{
	background-color:rgba(255,255,255,0.2) !important;
	opacity:1 !important;
}
.chat-title{
	flex:1;
	text-align:left;
	color:#fff;
  }

/* Bottoni header (icone pure, niente fondino) */
.chat-close-btn, .chat-fullscreen-btn{
  width:28px; height:28px; border:none; background-color:transparent; cursor:pointer; transition:opacity .2s;box-shadow:none !important;
}
.chat-close-btn:hover, .chat-fullscreen-btn:hover{ opacity:.7; }

/* icona Chiudi (X) */
.chat-close-btn{
  background:url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12.01l-6.3-6.3-1.4 1.41 6.29 6.29-6.3 6.3 1.41 1.4 6.3-6.29 6.29 6.3 1.41-1.41-6.3-6.3 6.3-6.29z'/%3E%3C/svg%3E") no-repeat center/20px;
}

/* icona Fullscreen (ingrandisci) */
.chat-fullscreen-btn{
  background:url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6V2H2v8h2V4zm10-2v2h6v6h2V2h-8zm6 18h-6v2h8v-8h-2v6zm-16-6H2v8h8v-2H4v-6z'/%3E%3C/svg%3E") no-repeat center/16px;
}
/* icona Riduci quando è fullscreen */
.chat-container.fullscreen .chat-fullscreen-btn{
  background-image:url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3H3v6h2V5h4V3zm6 0v2h4v4h2V3h-6zm4 14h-4v2h6v-6h-2v4zm-10 0H5v-4H3v6h6v-2z'/%3E%3C/svg%3E");
}

.chat-history{ flex:1; padding:var(--chat-padding); overflow-y:auto; background:#f5f5f8; }
.chat-input-bar{ display:flex; gap:8px; border-top:1px solid #ccc; padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0)); background:#fff; position:sticky; bottom:0; }
.chat-input-bar input{ flex:1; min-width:0; padding:10px 14px; border:1px solid #ccc; border-radius:999px; font-size:1rem; outline:none; }
.chat-input-bar input:focus{ border-color:#0077ff; box-shadow:0 0 0 3px rgba(0,119,255,.15); }
.chat-input-bar button{ padding:10px 16px; border:none; background:#0077ff; color:#fff; border-radius:999px; cursor:pointer; }
.chat-input-bar button:hover{ background:#005fcc; }

.chat-message{ display:flex; align-items:flex-end; gap:8px; margin-bottom:10px; font-size:var(--font-base); line-height:1.35; }
.chat-message.user{ justify-content:flex-end; }
.chat-message.bot{ justify-content:flex-start; }
.chat-message .avatar{ width:32px; height:32px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 32px; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.chat-message .bubble{ max-width:var(--bubble-max); padding:10px 14px; border-radius:18px; position:relative; overflow-wrap:break-word; }
.chat-message.user .bubble{ background:#0077ff; color:#fff; border-bottom-right-radius:6px; }
.chat-message.bot .bubble{ background:#fff; color:#333; border-bottom-left-radius:6px; border:1px solid #ddd; }

/* typing */
.typing-indicator{ display:flex; align-items:center; gap:3px; }
.typing-indicator span{ height:8px; width:8px; background:#999; border-radius:50%; display:inline-block; animation:bounce 1.4s infinite ease-in-out; }
.typing-indicator span:nth-child(1){ animation-delay:0s; }
.typing-indicator span:nth-child(2){ animation-delay:.2s; }
.typing-indicator span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce{ 0%,80%,100%{ transform:scale(0);} 40%{ transform:scale(1);} }
.chat-history::-webkit-scrollbar{
    background: transparent;
	width:13px;
	height:13px;
}
.chat-history::-webkit-scrollbar-thumb{
	background-color: #8a8a8a;
	border: solid #f5f5f8 3px;
	border-radius: 50px;
	min-width: 30px;
	min-height: 30px;
}
/* labels */
.prods_label{ overflow-y:auto; max-height:199px; margin-top:10px; }
.prods_label > div{ display:inline-block; background:#bae3ed; line-height:30px; height:30px; border-radius:15px; padding:0 14px; cursor:pointer; margin-bottom:2px;
  white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100%);
    overflow: hidden;}
.go_prod{
	display:inline-block;
	background-color:rgba(0,0,0,0.1);
	background-position:right center;
	background-repeat:no-repeat;
	background-image:url(../images/frDxB_1.png);
	background-size:auto 100%;
	line-height:30px;
	height:30px;
	border-radius:8px;
	padding:0 24px 0 14px;
	cursor:pointer;
	margin-bottom:2px;
	float:right;
	margin-top:5px;
	display:inline-block;
	
}
.go_prod:hover{
	background-color:rgba(0,0,0,0.2);
}

/* MOBILE finiture */
@media (max-width:600px){
  :root{ --font-base:15px; --bubble-max:85%; }
  .chat-message .avatar{ width:28px; height:28px; flex-basis:28px; }
  .chat-input-bar{ padding:8px; }
  .chat-input-bar button{ padding:10px 14px; }
  
	.chat-container{
	  position:fixed;
	  top: 0;
	}
}
@media (max-width:380px){
  :root{ --font-base:14px; }
  .chat-message .bubble{ padding:8px 12px; }
  .chat-input-bar input{ padding:8px 12px; }
}

/* DESKTOP: box flottante in basso a destra */
@media (min-width:600px){
  .chat-container{
    position:fixed; right:20px; bottom:20px;
    height:576px; width:var(--chat-max-width);
    /*border:1px solid #ddd;*/ border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.2);
    overflow:hidden;
  }
}

/* FULLSCREEN */
.chat-container.fullscreen{
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  height:100vh !important; width:100vw !important; border-radius:0 !important; border:none !important; max-width:none !important;
}
/* icona Riduci (quadrettino in basso a destra) quando è fullscreen */
.chat-container.fullscreen .chat-fullscreen-btn{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='18' rx='2' ry='2' stroke='white' fill='none' stroke-width='2'/%3E%3Crect x='14' y='15' width='6' height='6' fill='white'/%3E%3C/svg%3E");
}

/* Stato chiuso */
.chat-container.is-hidden{ display:none !important; }

/* Visibilità bottoni */
@media (max-width:1024px){
  .chat-fullscreen-btn{ display:none !important; }  /* mobile: NO fullscreen */
  .chat-close-btn{ display:inline-block !important; } /* mobile: SI chiudi */
}
@media (min-width:1025px){
  /* desktop: mostra entrambi */
  .chat-close-btn{ display:inline-block !important; }
  .chat-fullscreen-btn{ display:inline-block !important; }
}


/* FAB apri chat */
.chat-fab{
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #fffbec;/*#0077ff;*/
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 10000;
  background-image: url(../images/flowy.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
}
.chat-fab:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.chat-fab:active{ transform: translateY(0); }

/* leggermente più grande su desktop */
@media (min-width:1025px){
  .chat-fab{ width: 64px; height: 64px; background-size: 36px; }
}

/* quando la chat è aperta, nascondi il FAB */
.chat-container:not(.is-hidden) ~ #chat_fab { display: none; }
#chat_fab:hover{
	background-color:#273744 !important;
}

.wa,
.wb,
.em,
.tl{
	display:inline-block;
	vertical-align:middle;
	padding:0 10px;
	height:28px;
	line-height:30px;
	background-position:5px center;
	background-repeat:no-repeat;
	padding-left:30px;
	border-radius:6px;
	cursor:pointer;
	margin-bottom:2px;
	white-space: nowrap;
}
.wa{
	background-image:url(../images/wa.png);
	background-color:#2aa81a;
	color:#FFF;
}
.wb{
	background-image:url(../images/wb.png);
	background-color:#EEE;
}
.em{
	background-image:url(../images/em.png);
	background-color:#EEE;
}
.tl{
	background-image:url(../images/tl.png);
	background-color:#EEE;
}
.time{
	text-align: right;
    font-size: 12px;
    padding-right: 52px;
    padding-bottom: 7px;
}

#session_menu{
	float:right;
	width:29px;
	height:25px;
	margin:-4px;
	border-radius:5px;
	background-image:url(../images/p_menu_1.png);
	background-repeat:no-repeat;
	background-position:center calc(50% - 1px);
	cursor:pointer;
}
#session_menu:hover{
	background-color:rgba(255,255,255,.1);
}