/* AI chat widget — Selina Kingalame Foundation */
.skf-chat-launcher{
  position: fixed; left: 24px; bottom: 24px; z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, background .2s ease;
}
.skf-chat-launcher:hover{ transform: translateY(-3px); background: var(--sage-deep); }
.skf-chat-launcher svg{ width:26px; height:26px; }
.skf-chat-launcher .dot{
  position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%;
  background: var(--gold); border:2px solid var(--navy);
}

.skf-chat-panel{
  position: fixed; left: 24px; bottom: 92px; z-index: 96;
  width: min(360px, calc(100vw - 48px));
  height: min(520px, calc(100vh - 150px));
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  opacity: 0; pointer-events:none;
  transition: all .22s ease;
  border: 1px solid var(--line);
}
.skf-chat-panel.open{ transform:none; opacity:1; pointer-events:auto; }

.skf-chat-head{
  background: var(--navy); color:#fff;
  padding: 16px 18px; display:flex; align-items:center; gap:10px;
}
.skf-chat-head img{ width:30px; height:30px; border-radius:50%; background:#fff; padding:3px; }
.skf-chat-head div{ flex:1; }
.skf-chat-head strong{ display:block; font-size:.94rem; }
.skf-chat-head span{ font-size:.74rem; color: rgba(255,255,255,.65); }
.skf-chat-close{ background:none; border:none; color: rgba(255,255,255,.8); cursor:pointer; padding:4px; }
.skf-chat-close svg{ width:18px; height:18px; }

.skf-chat-body{
  flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:10px;
  background: var(--cream);
}
.skf-msg{ max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size:.88rem; line-height:1.45; }
.skf-msg.bot{ background: var(--paper); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.skf-msg.user{ background: var(--sage); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.skf-msg.typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.skf-msg.typing span{ width:6px; height:6px; border-radius:50%; background: var(--ink-soft); opacity:.5; animation: skfTyping 1s infinite; }
.skf-msg.typing span:nth-child(2){ animation-delay:.15s; }
.skf-msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes skfTyping{ 0%,60%,100%{ opacity:.35; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-2px);} }

.skf-chat-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 16px 12px; background: var(--cream); }
.skf-chip{
  border:1.5px solid var(--line); background: var(--paper); color: var(--ink-soft);
  border-radius:999px; padding:6px 12px; font-size:.76rem; cursor:pointer; font-weight:600;
}
.skf-chip:hover{ border-color: var(--sage); color: var(--sage-deep); }

.skf-chat-form{
  display:flex; gap:8px; padding: 12px; border-top:1px solid var(--line); background: var(--paper);
}
.skf-chat-form input{
  flex:1; border:1.5px solid var(--line); border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-size:.88rem; background: var(--cream);
}
.skf-chat-form input:focus{ outline:none; border-color: var(--sage); }
.skf-chat-form button{
  width:40px; height:40px; border-radius:50%; border:none; background: var(--gold); color: var(--navy-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.skf-chat-form button:hover{ background: var(--gold-deep); }
.skf-chat-form button svg{ width:18px; height:18px; }

@media (max-width: 480px){
  .skf-chat-launcher{ left:16px; bottom:16px; }
  .skf-chat-panel{ left:16px; bottom: 84px; }
}