/* ============================================================
   YRSA CHAT — delt styling for alle sider
   Inkluderes via: <link rel="stylesheet" href="/assets/yrsa-chat.css">
   ============================================================ */

/* Chat FAB */
#chatFabWrap{position:fixed;right:3vw;bottom:5vw;z-index:300;width:56px;height:56px}
#chatFab{width:100%;height:100%;border-radius:50%;background:var(--accent);overflow:hidden;cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s;border:2px solid rgba(255,255,255,.2);display:block;position:relative}
#chatFabWrap:hover #chatFab{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.28)}
#chatFabWrap::before,#chatFabWrap::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent);pointer-events:none;opacity:0;z-index:0}
#chatFabWrap:hover::before{animation:yrsaPing 2.6s cubic-bezier(.2,.8,.2,1) infinite}
#chatFabWrap:hover::after{animation:yrsaPing 2.6s cubic-bezier(.2,.8,.2,1) infinite 1.3s}
@keyframes yrsaPing{0%{transform:translateY(-4px) scale(.98);opacity:.6}70%{opacity:.12}100%{transform:translateY(-4px) scale(1.3);opacity:0}}
#chatFab img{width:100%;height:100%;object-fit:cover;display:block}
#yrsaOnline{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#4ade80;border:2.5px solid var(--bg);z-index:1}

/* Bubble teaser */
#yrsaBubble{position:fixed;right:3vw;bottom:calc(5vw + 76px);z-index:300;background:var(--bg);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:13px;font-family:var(--sans);color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.1);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;white-space:nowrap;max-width:220px;line-height:1.4;cursor:pointer}
#yrsaBubble.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* Chat widget */
#ymChat{position:fixed;right:3vw;bottom:1.5vw;z-index:300;width:360px;max-height:540px;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 48px rgba(0,0,0,.14);overflow:hidden;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .35s,transform .35s}
#ymChat.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.ym-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.ym-head-left{display:flex;align-items:center;gap:10px}
.ym-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--accent)}
.ym-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ym-head-info b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.ym-head-info span{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.ym-status{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block}
.ym-close{background:none;border:none;cursor:pointer;color:var(--ink-3);font-size:18px;padding:4px;line-height:1}

/* Messages */
.ym-msgs{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ym-bubble{max-width:85%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;font-family:var(--sans)}
.ym-bubble.bot{background:color-mix(in oklab, var(--panel) 50%, var(--bg));color:var(--ink);border-top-left-radius:4px;align-self:flex-start}
.ym-bubble.user{background:var(--ink);color:var(--bg);border-top-right-radius:4px;align-self:flex-end}
.ym-bubble.typing{padding:14px}
.ym-dots{display:flex;gap:4px}
.ym-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:ymDot 1.4s infinite ease-in-out both}
.ym-dots span:nth-child(2){animation-delay:.2s}
.ym-dots span:nth-child(3){animation-delay:.4s}
@keyframes ymDot{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}

/* Choices */
.ym-choices{display:flex;flex-direction:column;gap:7px;padding:0 16px 12px;flex-shrink:0}
.ym-choice{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13px;font-family:var(--sans);color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s, background .2s}
.ym-choice:hover{border-color:var(--ink);background:color-mix(in oklab, var(--panel) 30%, var(--bg))}

/* Input row */
.ym-input-row{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);flex-shrink:0;align-items:center}
.ym-input-row input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;font-family:var(--sans);color:var(--ink);background:var(--bg);outline:none}
.ym-input-row input:focus{border-color:var(--ink)}
.ym-send{width:38px;height:38px;border-radius:10px;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ym-send svg{width:16px;height:16px;display:block}

/* Mobile */
@media (max-width:640px){
  #ymChat{right:2vw;left:2vw;bottom:80px;width:auto;max-height:70vh}
}