/* =========================================================
   O.I.M. — guided-quiz chat widget
   Reuses design tokens from css/style.css (loaded first on
   every page), so no colors/fonts are redefined here.
   ========================================================= */

.oim-chat-launcher{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:var(--sonar); color:#04181B;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  border:none; cursor:pointer; padding:0;
  transition:transform .25s ease;
}
.oim-chat-launcher:hover{ transform:scale(1.07); }
.oim-chat-launcher svg{ width:24px; height:24px; position:relative; z-index:1; }
.oim-chat-launcher .ping{
  position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--sonar-dim);
  animation:oimChatPing 2.6s ease-out infinite;
}
@keyframes oimChatPing{
  0%{ transform:scale(.86); opacity:.8; }
  100%{ transform:scale(1.4); opacity:0; }
}
.oim-chat-launcher .icon-chat{ display:block; }
.oim-chat-launcher .icon-close{ display:none; }
.oim-chat-launcher.open .icon-chat{ display:none; }
.oim-chat-launcher.open .icon-close{ display:block; }
.oim-chat-launcher.open .ping{ display:none; }
.oim-chat-launcher .oim-bot-face{
  width:38px; height:38px; position:relative; z-index:1; border-radius:50%; display:block;
  animation:oimBotWiggle 6s ease-in-out infinite;
}
@keyframes oimBotWiggle{
  0%, 92%, 100%{ transform:rotate(0deg); }
  94%{ transform:rotate(-10deg); }
  96%{ transform:rotate(10deg); }
  98%{ transform:rotate(-5deg); }
}
.oim-chat-header .oim-bot-face-sm{ width:20px; height:20px; border-radius:50%; flex-shrink:0; }

.oim-chat-tooltip{
  position:fixed; right:88px; bottom:36px; z-index:80;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:11px 15px; font-family:var(--font-body); font-size:13px; color:var(--ink);
  max-width:200px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.oim-chat-tooltip.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.oim-chat-tooltip::after{
  content:''; position:absolute; right:-5px; bottom:16px; width:10px; height:10px;
  background:var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(-45deg);
}

.oim-chat-panel{
  position:fixed; right:22px; bottom:90px; z-index:81;
  width:340px; max-width:calc(100vw - 32px); height:min(500px, 68vh);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.oim-chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.oim-chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.oim-chat-header .title{ display:flex; align-items:center; gap:8px; color:var(--ink); font-size:13px; font-family:var(--font-mono); letter-spacing:.04em; }
.oim-chat-header .dot{ width:6px; height:6px; border-radius:50%; background:var(--sonar); flex-shrink:0; }
.oim-chat-close{ background:none; border:none; color:var(--dim); cursor:pointer; padding:12px; margin:-12px; line-height:0; }
.oim-chat-close:hover{ color:var(--sonar); }
.oim-chat-close svg{ width:16px; height:16px; }

.oim-chat-body{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.oim-chat-body::-webkit-scrollbar{ width:6px; }
.oim-chat-body::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }

.oim-msg{
  max-width:88%; font-size:13.5px; line-height:1.5; padding:10px 13px; border-radius:14px;
  opacity:0; transform:translateY(6px); animation:oimMsgIn .35s ease forwards;
}
@keyframes oimMsgIn{ to{ opacity:1; transform:translateY(0); } }
.oim-msg.bot{ align-self:flex-start; background:var(--panel-2); color:var(--ink); border-bottom-left-radius:4px; }
.oim-msg.user{ align-self:flex-end; background:var(--sonar); color:#04181B; border-bottom-right-radius:4px; font-weight:500; }

.oim-typing-msg{ padding:12px 14px; }
.oim-typing{ display:inline-flex; gap:4px; align-items:center; }
.oim-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--dim2);
  animation:oimTypingBounce 1.1s ease-in-out infinite;
}
.oim-typing span:nth-child(2){ animation-delay:.15s; }
.oim-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes oimTypingBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

.oim-chat-options{ display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.oim-chat-option{
  text-align:left; background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--font-body); font-size:13px; line-height:1.4; padding:12px 14px; border-radius:10px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.oim-chat-option:hover{ border-color:var(--sonar); color:var(--sonar); background:rgba(61,188,202,.07); }
.oim-chat-option:disabled{ opacity:.4; cursor:default; }

.oim-result-card{
  border:1px solid var(--sonar-dim); border-radius:12px; padding:14px;
  background:rgba(61,188,202,.06); align-self:stretch;
  opacity:0; transform:translateY(6px); animation:oimMsgIn .35s ease forwards;
}
.oim-result-card .pkg-name{ font-family:var(--font-display); font-size:15px; color:var(--ink); margin-bottom:6px; font-weight:600; }
.oim-result-card p{ font-size:13px; color:var(--dim); margin-bottom:12px; line-height:1.5; }
.oim-result-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.oim-chat-btn{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 15px; border-radius:999px; transition:transform .2s ease, background .2s ease;
  display:inline-flex; align-items:center;
}
.oim-chat-btn.primary{ background:var(--sonar); color:#04181B; }
.oim-chat-btn.primary:hover{ background:#5ccdd9; }
.oim-chat-btn.ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.oim-chat-btn.ghost:hover{ border-color:var(--sonar); color:var(--sonar); }

.oim-chat-footer{ padding:10px 16px; border-top:1px solid var(--line); text-align:center; flex-shrink:0; }
.oim-chat-restart{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim2); background:none; border:none; cursor:pointer; padding:12px;
}
.oim-chat-restart:hover{ color:var(--sonar); }

@media (max-width:480px){
  .oim-chat-panel{ right:12px; left:12px; width:auto; bottom:82px; height:min(66vh,460px); }
  .oim-chat-launcher{ right:16px; bottom:16px; }
  .oim-chat-tooltip{ right:16px; bottom:82px; max-width:160px; }
}