
:root{
  --io-blue:#2563eb;
  --io-blue-dark:#1d4ed8;
  --io-bg:#ffffff;
  --io-text:#111827;
  --io-muted:#6b7280;
  --io-border:#e5e7eb;
  --io-shadow: 0 18px 45px rgba(17,24,39,0.18);
}

.io-aikb-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  border: none;
  background: var(--io-blue);
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(37,99,235,0.32);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}
.io-aikb-fab:hover{ background: var(--io-blue-dark); }
.io-aikb-fab-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: #fff;
  opacity: 0.95;
}
.io-aikb-fab-text{ font-size: 14px; letter-spacing: .2px; }

.io-aikb-panel{
  position: fixed;
  right: 22px;
  bottom: 78px;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 520px;
  max-height: calc(100vh - 130px);
  background: var(--io-bg);
  border: 1px solid var(--io-border);
  border-radius: 18px;
  box-shadow: var(--io-shadow);
  z-index: 99999;
  display: none;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--io-text);
}
.io-aikb-panel--open{ display: flex; flex-direction: column; }

.io-aikb-header{
  background: #f8fafc;
  border-bottom: 1px solid var(--io-border);
  padding: 14px 14px 10px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.io-aikb-title{ font-size: 16px; font-weight: 800; color: var(--io-text); }
.io-aikb-close{
  border:none;
  background: transparent;
  cursor:pointer;
  font-size: 16px;
  color: var(--io-muted);
  padding: 6px 8px;
  border-radius: 10px;
}
.io-aikb-close:hover{ background:#eef2ff; color: var(--io-blue); }

.io-aikb-subtitle{
  padding: 0 14px 10px 14px;
  font-size: 12.5px;
  color: var(--io-muted);
  border-bottom: 1px solid var(--io-border);
  background: #f8fafc;
}

.io-aikb-body{
  flex: 1;
  padding: 12px 12px;
  overflow: auto;
  background: #fff;
}
.io-aikb-msg{ display:flex; margin: 10px 0; }
.io-aikb-msg--user{ justify-content: flex-end; }
.io-aikb-msg--bot{ justify-content: flex-start; }
.io-aikb-bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  font-size: 13.5px;
  border: 1px solid var(--io-border);
  white-space: normal;
}
.io-aikb-msg--user .io-aikb-bubble{
  background: #eff6ff;
  border-color: #dbeafe;
  color: var(--io-text);
}
.io-aikb-msg--bot .io-aikb-bubble{
  background: #ffffff;
  color: var(--io-text);
}

.io-aikb-form{
  display:flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--io-border);
  background: #fff;
}
.io-aikb-input{
  flex:1;
  border: 1px solid var(--io-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  outline: none;
}
.io-aikb-input:focus{ border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.io-aikb-send{
  border:none;
  background: var(--io-blue);
  color:#fff;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.io-aikb-send:hover{ background: var(--io-blue-dark); }

.io-aikb-sources{
  padding: 10px 12px 12px 12px;
  border-top: 1px solid var(--io-border);
  background: #f8fafc;
}
.io-aikb-sources-title{
  font-size: 12px;
  font-weight: 800;
  color: var(--io-text);
  margin-bottom: 6px;
}
.io-aikb-sources-links a{
  font-size: 12px;
  color: var(--io-blue);
  text-decoration: none;
}
.io-aikb-sources-links a:hover{ text-decoration: underline; }

@media (max-width: 420px){
  .io-aikb-panel{ width: calc(100vw - 24px); right: 12px; bottom: 72px; }
  .io-aikb-fab{ right: 12px; bottom: 12px; }
}
