/* Shared AI-persona chat widget — included on every page. A circular
   trigger (bottom-right) opens a floating chat panel, Flora-assistant
   style. See assistant.js for behavior. */

.ai-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(100deg, rgba(34,34,32,0.92) 0%, rgba(18,18,17,0.92) 60%, rgba(26,24,28,0.92) 100%);
  border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(0,0,0,0.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink);
  z-index:60;
  transition:transform .2s ease, opacity .2s ease;
}
.ai-fab:hover{transform:scale(1.06);}
.ai-fab.is-hidden{opacity:0;transform:scale(.8);pointer-events:none;}
.ai-fab svg{width:22px;height:22px;}

.ai-panel{
  position:fixed;
  right:24px;
  bottom:24px;
  width:360px;
  max-width:calc(100vw - 32px);
  height:520px;
  max-height:calc(100vh - 48px);
  background:linear-gradient(100deg, rgba(32,32,30,0.97) 0%, rgba(16,16,15,0.97) 55%, rgba(24,22,26,0.97) 100%);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:65;
  opacity:0;
  transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.ai-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.ai-panel-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.ai-panel-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--accent);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.ai-panel-title{font-size:13.5px;font-weight:600;}
.ai-panel-sub{font-size:11px;color:var(--ink-faint);margin-top:1px;}
.ai-panel-close{
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.06);
  color:var(--ink-soft);
  cursor:pointer;
  font-size:15px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ai-panel-close:hover{background:rgba(255,255,255,0.12);color:var(--ink);}

.ai-thread{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ai-msg{
  font-size:13px;
  line-height:1.55;
  padding:10px 13px;
  border-radius:14px;
  max-width:84%;
  white-space:pre-wrap;
}
.ai-msg-bot{
  background:rgba(255,255,255,0.06);
  color:var(--ink);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
.ai-msg-user{
  background:var(--accent);
  color:var(--paper);
  align-self:flex-end;
  border-bottom-right-radius:4px;
  font-weight:500;
}
.ai-typing{opacity:0.6;}

.ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 16px 12px;
  flex-shrink:0;
}
.ai-suggestion{
  font-family:var(--sans);
  font-size:11.5px;
  color:var(--ink-soft);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.ai-suggestion:hover{border-color:var(--accent);color:var(--ink);}

.ai-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.ai-input-row input{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
  outline:none;
  min-width:0;
}
.ai-input-row input:focus{border-color:var(--accent);}
.ai-send{
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:var(--paper);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:opacity .15s ease;
}
.ai-send:hover{opacity:0.85;}
.ai-send:disabled{opacity:0.4;cursor:default;}
.ai-send svg{width:16px;height:16px;}

@media (max-width:480px){
  .ai-panel{
    right:16px;
    left:16px;
    bottom:16px;
    width:auto;
    max-width:none;
    height:min(520px, calc(100vh - 32px));
  }
  .ai-fab{right:16px;bottom:16px;}
}