/* CK Labs Lab V3 — chat panel (Teams-style) */

.v3-chat{
  flex:0 0 40%;background:var(--surface);
  border-right:3px solid var(--accent);
  box-shadow:inset -1px 0 0 rgba(0,0,0,0.08);
  display:flex;flex-direction:column;overflow:hidden;min-width:340px;
}
/* Mobile: kill the 340px floor so the chat panel fits a 320px viewport (iPhone SE) */
@media (max-width:900px){
  .v3-chat{min-width:0;width:100%;max-width:100vw;border-right:none}
}

.v3-chat-h{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;flex:none;
  background:rgba(255,255,255,0.02);
}
.v3-boss-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#ec4899,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;position:relative;flex:none;
}
.v3-boss-avatar::after{
  content:'';position:absolute;bottom:0;right:0;
  width:10px;height:10px;border-radius:50%;
  background:var(--accent2);border:2px solid var(--surface);
}
.v3-boss-info{flex:1;min-width:0}
.v3-boss-name{font-size:13px;font-weight:700;letter-spacing:-.01em}
.v3-boss-role{font-size:11px;color:var(--muted)}
.v3-chat-tag{padding:3px 8px;border-radius:4px;background:rgba(245,184,81,0.15);color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

.v3-chat-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:14px;
}

.v3-msg{display:flex;gap:10px;align-items:flex-start;max-width:92%;animation:v3fadeUp .25s ease}
.v3-msg.user{align-self:flex-end;flex-direction:row-reverse}
.v3-msg-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex:none}
.v3-msg.boss .v3-msg-av{background:linear-gradient(135deg,#ec4899,#8b5cf6)}
.v3-msg.omar .v3-msg-av,.v3-msg.skilly .v3-msg-av{background:linear-gradient(135deg,#7c6cff,#ec4899)}
.v3-msg.user .v3-msg-av{background:var(--surface3);color:var(--muted)}
.v3-msg-body{min-width:0}
.v3-msg-name{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:3px;letter-spacing:.01em}
.v3-msg.boss .v3-msg-name{color:#ec4899}
.v3-msg.omar .v3-msg-name,.v3-msg.skilly .v3-msg-name{color:#a594ff}
.v3-msg.user .v3-msg-name{color:var(--accent2);text-align:right}
.v3-msg-bubble{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--text);word-wrap:break-word}
.v3-msg.boss .v3-msg-bubble{border-top-left-radius:2px}
.v3-msg.omar .v3-msg-bubble,.v3-msg.skilly .v3-msg-bubble{border-top-left-radius:2px;border-color:rgba(124,108,255,0.25);background:rgba(124,108,255,0.08)}
.v3-msg.user .v3-msg-bubble{border-top-right-radius:2px;background:rgba(124,108,255,0.12);border-color:rgba(124,108,255,0.3)}
.v3-msg-time{font-size:10px;color:var(--muted2);margin-top:4px;display:block}
.v3-msg-bubble code{background:rgba(124,108,255,0.18);color:#c4baff;padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:11px}
.v3-msg-bubble strong{font-weight:700}

/* Typing indicator */
.v3-msg-typing{display:flex;gap:4px;padding:10px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;border-top-left-radius:2px}
.v3-msg-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:v3typing 1.4s infinite}
.v3-msg-typing span:nth-child(2){animation-delay:.2s}
.v3-msg-typing span:nth-child(3){animation-delay:.4s}
@keyframes v3typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

@keyframes v3fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Hint card (Skilly) */
.v3-chat-hint{background:rgba(52,211,153,0.08);border:1px dashed rgba(52,211,153,0.3);border-radius:8px;padding:10px 12px;font-size:11px;color:var(--muted);line-height:1.5}
.v3-chat-hint strong{color:var(--accent2)}

/* Input — z-index bumped above floating Skilly/cookie FAB on mobile */
.v3-chat-input{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;gap:8px;flex:none;background:var(--surface);position:relative;z-index:9000}
/* Hide the floating Skilly bubble + cookie FAB when the chat tab is active so they
 * don't overlap the input where the user actually types their reply. */
body.chat-active #skilly-fl,body.chat-active #ck-consent-fab{display:none !important}
/* font-size 16px on mobile prevents iOS Safari from auto-zooming on focus. */
.v3-chat-input input{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;color:var(--text);font-size:16px;font-family:inherit;min-height:38px}
.v3-chat-input input:focus{outline:none;border-color:var(--accent)}
.v3-chat-input button{background:var(--accent);border:none;color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;flex:none}
.v3-chat-input button:hover{filter:brightness(1.1)}

/* Reveal solution button (inside Skilly hint bubble) */
.v3-reveal-btn{
  display:inline-block;margin-top:8px;padding:8px 14px;
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  color:#fff;border:1px solid rgba(59,130,246,0.5);
  border-radius:8px;font-size:12px;font-weight:700;font-family:inherit;
  cursor:pointer;letter-spacing:.01em;
  transition:filter .15s ease, transform .1s ease;
}
.v3-reveal-btn:hover:not(:disabled){filter:brightness(1.15)}
.v3-reveal-btn:active:not(:disabled){transform:translateY(1px)}
.v3-reveal-btn:disabled{opacity:.6;cursor:default;background:#222;border-color:#444}