/* UNO – Barangay Guinhawa Assistant (Free, client-side only)
   Drop-in CSS, no external libraries
*/
:root{
  --uno-primary:#2563eb;
  --uno-bg:#ffffff;
  --uno-surface:#f8fafc;
  --uno-border:#e2e8f0;
  --uno-text:#0f172a;
  --uno-accent:#10b981;
  --uno-danger:#ef4444;
  --uno-shadow:0 10px 30px rgba(2,6,23,.15);
}

*{box-sizing:border-box}

.uno-bubble{
  position:fixed; right:20px; bottom:20px;
  width:56px;height:56px;border-radius:9999px;
  background:var(--uno-primary); color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; box-shadow:var(--uno-shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  z-index:999999;
}
.uno-bubble:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(2,6,23,.22) }
.uno-bubble:active{ transform:translateY(0) }
.uno-bubble svg{ width:26px;height:26px; fill:#fff }

@keyframes uno-wiggle {
  0%,100%{ transform:rotate(0) }
  25%{ transform:rotate(6deg) }
  75%{ transform:rotate(-6deg) }
}
.uno-wiggle{ animation:uno-wiggle .6s ease-in-out }

.uno-panel{
  position:fixed; right:20px; bottom:86px;
  width:330px; max-height:70vh;
  background:var(--uno-bg);
  border:1px solid var(--uno-border);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--uno-shadow);
  display:none; flex-direction:column;
  z-index:999999;
}

.uno-header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--uno-surface);
  border-bottom:1px solid var(--uno-border);
}
.uno-avatar{
  width:32px;height:32px;border-radius:9999px;background:var(--uno-primary);
  display:grid;place-items:center;color:#fff;font-weight:700;font-family:system-ui;
}
.uno-title{ font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--uno-text) }
.uno-sub{ font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#475569 }

.uno-stream{
  padding:14px; overflow:auto; display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth; background:linear-gradient(#fff,#fafcff);
}

.uno-msg{
  display:flex; gap:8px; align-items:flex-end; max-width:90%;
  animation:uno-fade .18s ease;
}
.uno-msg--user{ margin-left:auto; justify-content:flex-end }
.uno-bubble-msg{
  padding:10px 12px; border-radius:14px; font: 13px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#0b1220; background:#eef2ff; border:1px solid #e5e7eb;
}
.uno-msg--user .uno-bubble-msg{ background:#dcfce7; border-color:#bbf7d0 }

@keyframes uno-fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.uno-meta{
  font:11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#64748a; margin-top:2px;
}

.uno-typing{
  display:inline-flex; align-items:center; gap:4px;
  background:#f1f5f9; border:1px solid #e2e8f0; color:#334155;
  padding:8px 10px; border-radius:12px;
}
.uno-dot{ width:6px;height:6px;border-radius:50%; background:#94a3b8; opacity:.6; animation:uno-bounce 1s infinite }
.uno-dot:nth-child(2){ animation-delay:.2s }
.uno-dot:nth-child(3){ animation-delay:.4s }
@keyframes uno-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.6 }
  40%{ transform:translateY(-4px); opacity:1 }
}

.uno-quick{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;
}
.uno-chip{
  font:12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border:1px solid var(--uno-border); background:#fff; color:#0f172a;
  padding:6px 8px; border-radius:9999px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.uno-chip:hover{ background:#f8fafc; border-color:#cbd5e1 }

.uno-composer{
  display:flex; gap:8px; padding:10px; background:var(--uno-bg); border-top:1px solid var(--uno-border);
}
.uno-input{
  flex:1; border:1px solid var(--uno-border); border-radius:9999px; padding:10px 14px;
  font:14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  outline:none;
}
.uno-send{
  width:40px;height:40px;border-radius:9999px;border:none;cursor:pointer;
  background:var(--uno-primary); color:#fff; display:grid;place-items:center;
}
.uno-send:disabled{ opacity:.6; cursor:not-allowed }

@media (max-width: 480px){
  .uno-panel{ width:94vw; right:3vw; bottom:90px; }
}

/* cards */
.uno-card{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px; margin:6px 0; background:#fff; }
.uno-card-title{ font-weight:700; margin-bottom:4px; }
.uno-card-sub{ color:#666; font-size:.9em; margin-bottom:6px; }
.uno-card-body{ color:#222; }
.uno-badge{ background:#eef4ff; color:#345; padding:2px 6px; border-radius:999px; font-size:.75em; }

/* avatar image */
.uno-avatar.uno-avatar--img{
  background-size:cover!important; background-position:center!important;
  color:transparent;
}