body { font-family: Inter, Arial, sans-serif; background: #f7f9fb; margin:0; }
.chat-container { 
  max-width:430px; 
  margin:56px auto; 
  background:rgba(255,255,255,0.99); 
  border-radius:24px; 
  box-shadow:0 8px 44px #4455ef26; 
  overflow:hidden; 
  border:6px solid #e3eafc;
  position: relative; 
  z-index: 1; 
  transition: box-shadow .3s, border-color .2s;
}
.ai-table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 14px;
  width: 100%;
  background: #f5f8ff;
  border-radius: 7px;
  overflow: hidden;
}
.ai-table th, .ai-table td {
  border: 1px solid #d9e0f7;
  padding: 7px 8px;
  text-align: center;
}
.ai-table th {
  background: #dde4fa;
  font-weight: 700;
}
.ai-table tr:nth-child(even) { background: #f9fbff; }

.chat-header { display:flex;align-items:center;gap:15px;padding:24px 30px 14px 30px;background:#f8fbff; border-bottom:1.5px solid #e3eafc;}
.chat-header img { width:36px;height:36px;border-radius:12px;}
.chat-title { font-size:20px;font-weight:700;color:#25316c;}
.chat-messages { min-height:240px; max-height:410px; overflow-y:auto; padding:30px 24px 14px 24px; display:flex; flex-direction:column; gap:23px; background:rgba(246,248,254,0.87);}
.msg-row { display:flex; gap:12px; }
.msg-bot { align-items: flex-start; }
.msg-user { flex-direction:row-reverse; align-items:flex-end; }
.avatar { width:30px;height:30px;border-radius:11px;background:#e2eafd;display:flex;align-items:center;justify-content:center;}
.bubble { max-width:78%; padding:13px 17px; border-radius:16px; background:#e3ecff; color:#2e3166; font-size:15.7px; line-height:1.62; box-shadow:0 1.5px 6px #dbe1fa1e;}
.msg-user .bubble { background:linear-gradient(92deg,#d7f2f2 60%,#fafdff 100%); color:#2f3c4e;}
.chat-form { display:flex; border-top:1.5px solid #e3eafc;background:#f8fbff;}
.chat-input { flex:1; border:0; outline:0; font-size:16.5px; padding:17px 16px; background:#fff; border-radius:0 0 0 18px;}
.chat-send { border:0; background:#67e7e6; color:#fff; font-size:17px; font-weight:600; padding:0 34px; border-radius:0 0 18px 0; cursor:pointer; transition:.18s;}
.chat-send:hover { background:#203075;}
.loader-waves { display:flex;align-items:flex-end;gap:2.5px;height:21px;}
.loader-wave { width:5px; height:14px; border-radius:4px; background:linear-gradient(180deg,#33e7e0 60%,#97a7ff 100%); animation:wave .95s infinite; opacity:.93;}
.loader-wave:nth-child(2){ animation-delay:.11s;}
.loader-wave:nth-child(3){ animation-delay:.22s;}
.loader-wave:nth-child(4){ animation-delay:.31s;}
@keyframes wave {0%,100%{transform:scaleY(.5);} 30%{transform:scaleY(1.5);} 60%{transform:scaleY(.7);} }
.swai-card { background:#f8fbff; border:1.5px solid #c3d4fb; border-radius:16px; margin:7px 0; padding:19px 18px 14px 18px; }
.swai-card-title { font-weight:600; font-size:17px; color:#25316c; margin-bottom:7px; }
.swai-card-text { color:#405088; margin-bottom:14px; }
.swai-btn { background:#67e7e6; color:#fff; font-weight:600; padding:9px 22px; border-radius:11px; border:none; font-size:15px; cursor:pointer; text-decoration:none; margin-top:8px; display:inline-block;}
.swai-btn:hover { background:#203075; color:#fff; }
@media (max-width:500px){ .chat-container{max-width:98vw;margin:10vw 0;} }

/* --- Siri-style border animat doar pe margine, fără verde, puls intens, fără blur --- */
.chat-container.siri-waiting {
  border: 6px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(
      #1fdcff 0%,
      #22baff 17%,
      #5578fa 34%,
      #a94bfc 57%,
      #fd5ad9 82%,
      #1fdcff 100%
    ) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  animation: border-spin 3.3s linear infinite, border-wave 1.65s ease-in-out infinite alternate;
}
@keyframes border-spin {
  to {
    background:
      linear-gradient(white, white) padding-box,
      conic-gradient(
        from 360deg,
        #1fdcff 0%, #22baff 17%, #5578fa 34%, #a94bfc 57%, #fd5ad9 82%, #1fdcff 100%
      ) border-box;
  }
}
@keyframes border-wave {
  0%   { filter: brightness(1.00);}
  45%  { filter: brightness(1.38);}
  100% { filter: brightness(1.00);}
}


@keyframes fadeIn { from { opacity: 0;} to {opacity: 1;} }
.chat-header {
  display:flex;align-items:center;gap:15px;padding:24px 30px 14px 30px;background:#f8fbff; border-bottom:1.5px solid #e3eafc; position:relative;
}
.burger-icon {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  width: 34px; height: 34px; border: none; background: none; margin-right: 8px; cursor: pointer; padding: 0; z-index: 20;
}
.burger-icon span {
  display: block; width: 23px; height: 3.5px; margin: 3px 0; background: #25316c; border-radius: 3px;
  transition: all 0.24s cubic-bezier(.4,2,.6,1);
}
.burger-menu {
  position: absolute; left: 20px; top: 70px; z-index: 99;
  background: #fff; border-radius: 15px; box-shadow: 0 4px 24px #aab7ee36;
  padding: 10px 20px;
  display: none;
  animation: burgerFade .25s;
}
@keyframes burgerFade { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
#clear-history-btn {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid #d8e7f9; border-radius: 9px;
  padding: 7px 16px 7px 8px; color: #405088; font-size: 14px; cursor: pointer; box-shadow: 0 2px 10px #e6ebfd24;
  transition: background 0.2s, border 0.2s;
}
#clear-history-btn:hover { background: #f4f9ff; border: 1.5px solid #fd5ad999; }
.recycle-bin-icon {
  width: 17px; height: 17px; display: inline-block;
  background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f5d1.png') center/contain no-repeat;
  vertical-align: middle;
  filter: drop-shadow(0 1px 0 #a94bfc99);
}
.ai-chat-box button {
    display: inline-block;
    margin: 8px 8px 8px 0;
    padding: 12px 22px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ai-chat-box button:hover,
.ai-chat-box button:focus {
    background: linear-gradient(90deg, #0284c7 0%, #2563eb 100%);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 14px rgba(59,130,246,0.18);
}
@media (max-width: 600px) {
    .ai-chat-box button {
        display: block;
        width: 100%;
        margin: 8px 0;
        font-size: 1em;
    }
}