/* =====================================================================
   ChatGPT — GPT-2007 Aero Edition (Frutiger Aero chat)
   ===================================================================== */
.chat-win .win-body { overflow: hidden; }
.app.chat { position: relative; overflow: hidden; }

/* ---------- header ---------- */
.app.chat .chat-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(215,238,255,0.7) 50%, rgba(190,226,255,0.6) 51%, rgba(225,242,255,0.85) 100%);
  border-bottom: 1px solid rgba(0,60,150,0.22);
  box-shadow: 0 2px 8px rgba(0,40,120,0.12);
}
.app.chat .chat-head .spacer { flex: 1; min-width: 0; }
.app.chat .chat-head .chat-new { flex: none; }
.app.chat .chat-logo { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,40,120,0.35)); }
.app.chat .chat-title { flex: none; font: 700 1.2rem var(--font-display); letter-spacing: -0.01em; color: #0b3a80; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }
.app.chat .chat-badge {
  font: 700 0.66rem var(--font); text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  text-shadow: 0 -1px 0 rgba(30,90,0,0.6);
  padding: 3px 9px; border-radius: 999px; border: 1px solid #4a9a10;
  background: linear-gradient(180deg, #e2ffb0 0%, #a5ea4a 45%, #7ddc2b 50%, #56b81a 100%);
  box-shadow: 0 2px 5px rgba(0,60,0,0.25), 0 1px 0 rgba(255,255,255,0.8) inset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}

/* ---------- message list ---------- */
.app.chat .chat-list {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px;
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,0.7) 0, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 10% 90%, rgba(150,225,255,0.55) 0, rgba(150,225,255,0) 30%),
    linear-gradient(180deg, rgba(225,244,255,0.55), rgba(190,228,255,0.45));
  scroll-behavior: smooth;
}
.app.chat .chat-list::-webkit-scrollbar { width: 10px; }
.app.chat .chat-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.35); }
.app.chat .chat-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #bfe4ff, #5fb6ff); border-radius: 999px; border: 2px solid rgba(255,255,255,0.7); }

/* ---------- messages ---------- */
.app.chat .chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; animation: chat-pop 0.28s cubic-bezier(.2,1.2,.3,1) both; }
.app.chat .chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.app.chat .chat-msg.bot { align-self: flex-start; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

.app.chat .chat-avatar {
  flex: none; width: 34px; height: 34px; padding: 3px; object-fit: contain; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d5ecff 60%, #9fd0ff);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 3px 8px rgba(0,40,120,0.3), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.app.chat .chat-bubble {
  position: relative; overflow: hidden; min-width: 60px;
  padding: 8px 12px 6px; border-radius: 16px;
  font-size: 0.95rem; line-height: 1.4; word-break: break-word;
}
.app.chat .chat-bubble::before { /* riflesso lucido */
  content: ""; position: absolute; left: 4px; right: 4px; top: 1px; height: 46%;
  border-radius: inherit; border-bottom-left-radius: 40% 60%; border-bottom-right-radius: 40% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.05));
  pointer-events: none;
}
.app.chat .chat-text { position: relative; z-index: 1; white-space: pre-wrap; }
.app.chat .chat-time { position: relative; z-index: 1; font-size: 0.66rem; opacity: 0.7; text-align: right; margin-top: 3px; }

/* bot: vetro bianco */
.app.chat .chat-msg.bot .chat-bubble {
  color: #0b3a80;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(232,245,255,0.8));
  border: 1px solid rgba(255,255,255,0.98);
  border-bottom-left-radius: 5px;
  box-shadow: 0 5px 14px rgba(0,40,120,0.2), 0 0 0 1px rgba(80,150,230,0.25), 0 1px 0 rgba(255,255,255,0.9) inset;
}
/* user: aqua glossy */
.app.chat .chat-msg.user .chat-bubble {
  color: #fff; text-shadow: 0 1px 2px rgba(0,40,120,0.75), 0 0 6px rgba(0,60,160,0.5);
  background: linear-gradient(180deg, #a9ecff 0%, #3aa8ff 45%, #0f7de8 50%, #0b5fd6 100%);
  border: 1px solid #0b4ea8;
  border-bottom-right-radius: 5px;
  box-shadow: 0 5px 14px rgba(0,60,160,0.4), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.app.chat .chat-msg.user .chat-bubble::before { left: 5%; right: 5%; top: 4%; height: 40%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.04)); }
.app.chat .chat-msg.user .chat-time { color: #e6f6ff; opacity: 0.9; text-shadow: none; }

/* typing dots */
.app.chat .chat-msg.typing .chat-bubble { padding: 10px 14px; }
.app.chat .chat-dots { position: relative; z-index: 1; display: flex; gap: 5px; height: 14px; align-items: center; }
.app.chat .chat-dots b {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #bfe8ff, #2a8fe8 60%, #0b5fd6);
  box-shadow: 0 1px 2px rgba(0,40,120,0.4);
  animation: chat-bounce 1s infinite ease-in-out;
}
.app.chat .chat-dots b:nth-child(2) { animation-delay: 0.15s; }
.app.chat .chat-dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-6px); opacity: 1; } }

/* suggestion chips */
.app.chat .chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px 42px; animation: chat-pop 0.4s ease both; }
.app.chat .chat-chip {
  cursor: pointer; border-radius: 999px; padding: 6px 14px;
  border: 1px solid #7fa9d8; color: #0b3a80; font: 600 0.82rem var(--font);
  background: linear-gradient(180deg, #ffffff 0%, #e4f2ff 48%, #cfe6fb 52%, #e6f3ff 100%);
  box-shadow: 0 2px 5px rgba(0,40,120,0.2), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.app.chat .chat-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,60,160,0.3), 0 0 10px rgba(120,210,255,0.7); }
.app.chat .chat-chip:active { transform: translateY(1px); }

/* ---------- input bar ---------- */
.app.chat .chat-inputbar {
  flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(215,238,255,0.7));
  border-top: 1px solid rgba(0,60,150,0.22);
  box-shadow: 0 -2px 10px rgba(0,40,120,0.1);
}
.app.chat .chat-input {
  flex: 1; height: 38px; min-height: 38px; max-height: 110px; resize: none;
  padding: 8px 12px; line-height: 1.35; font-family: var(--font); overflow-y: auto;
}
.app.chat .chat-send {
  flex: none; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.95rem; white-space: nowrap;
}
.app.chat .chat-send i { font-style: normal; font-size: 0.85em; position: relative; z-index: 1; transition: transform 0.15s ease; }
.app.chat .chat-send span { position: relative; z-index: 1; }
.app.chat .chat-send:hover i { transform: translateX(3px); }
.app.chat .chat-send.busy { filter: saturate(0.8); }
.app.chat .chat-send.busy i { animation: chat-send-pulse 0.9s infinite ease-in-out; }
@keyframes chat-send-pulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.app.chat .chat-status {
  flex: none; padding: 4px 12px 5px; font-size: 0.7rem; opacity: 0.75; text-align: center;
  background: rgba(255,255,255,0.45); border-top: 1px solid rgba(0,60,150,0.12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}