/* Sharky AI — night-sea theme.
   Uses the tokens from style.css, so it follows the theme automatically. */
.ai-page{max-width:980px;margin:0 auto;padding:clamp(18px,4vw,44px) 5vw 56px}
.ai-intro{margin:0 0 clamp(14px,2.5vw,22px)}
.ai-intro h1{margin:.2rem 0 .4rem;font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.08;letter-spacing:-.02em}
.ai-intro h1 span{background:linear-gradient(135deg,#BFDCFF,#7FB4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-intro p{margin:0;color:var(--text-dim);max-width:60ch}

.sk-chat{--sk-h:min(720px,calc(100dvh - 250px));display:flex;flex-direction:column;height:max(var(--sk-h),460px);
  background:linear-gradient(180deg,rgba(14,30,66,.94),rgba(9,22,50,.94));border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(76,141,255,.06),0 24px 70px rgba(0,0,0,.45),0 0 60px rgba(76,141,255,.10)}
.sk-chat.sk-compact{--sk-h:min(620px,calc(100dvh - 300px))}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.sk-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(5,14,34,.45)}
.sk-logo{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:radial-gradient(circle at 30% 20%,#16407f,#0b1f45);border:1px solid #2a5aa8;box-shadow:0 0 18px rgba(76,141,255,.35)}
.sk-logo img{width:28px;height:auto;display:block}
.sk-title{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.sk-title b{font-size:1.05rem}
.sk-title small{color:var(--text-dim);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-status{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:.76rem;color:var(--text-dim);white-space:nowrap;background:rgba(5,14,34,.5)}
.sk-status i{width:8px;height:8px;border-radius:50%;background:#6c86b3}
.sk-status[data-state=online]{color:#d9ffc9}.sk-status[data-state=online] i{background:var(--slime);box-shadow:0 0 10px var(--slime)}
.sk-status[data-state=warn] i{background:#ffb347}.sk-status[data-state=offline] i{background:#ff5d6c}
.sk-new{flex:none;padding:7px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg-raised);color:var(--text);font:inherit;font-size:.82rem;cursor:pointer;touch-action:manipulation}
.sk-new:hover{border-color:#7FB4FF88;background:var(--bg-raised-2)}

/* body */
.sk-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 16px;scroll-behavior:smooth}
.sk-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;padding:8px 6px}
.sk-hero-logo{display:grid;place-items:center;width:96px;height:96px;border-radius:28px;margin-bottom:14px;background:radial-gradient(circle at 30% 20%,#16407f,#0b1f45);border:1px solid #2a5aa8;box-shadow:0 0 50px rgba(76,141,255,.45),0 0 90px rgba(127,180,255,.15);animation:sk-float 5s ease-in-out infinite}
.sk-hero-logo img{width:62px;height:auto}
@keyframes sk-float{50%{transform:translateY(-6px)}}
.sk-welcome h2{margin:0 0 .3rem;font-size:clamp(1.4rem,4vw,1.9rem)}
.sk-welcome p{margin:0 0 18px;color:var(--text-dim);max-width:44ch}
.sk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:620px}
.sk-chip{padding:10px 15px;border-radius:99px;border:1px solid var(--line);background:rgba(5,14,34,.55);color:var(--text);font:inherit;font-size:.88rem;cursor:pointer;touch-action:manipulation;transition:border-color .15s,box-shadow .15s,transform .15s}
.sk-chip:hover{border-color:#7FB4FF99;box-shadow:0 0 18px rgba(127,180,255,.2);transform:translateY(-1px)}

/* messages */
.sk-messages{display:flex;flex-direction:column;gap:14px}
.sk-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.sk-me{flex-direction:row-reverse}
.sk-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;font-size:.82rem;font-weight:800}
.sk-av-bot{background:radial-gradient(circle at 30% 20%,#16407f,#0b1f45);border:1px solid #2a5aa8}
.sk-av-bot img{width:20px;height:auto}
.sk-av-user{background:linear-gradient(135deg,#4C8DFF,#7FB4FF);color:#140a00}
.sk-bubble{min-width:0;max-width:min(680px,calc(100% - 46px));padding:11px 15px;border-radius:16px;line-height:1.55;overflow-wrap:anywhere;font-size:.96rem}
.sk-bot .sk-bubble{background:var(--bg-raised-2);border:1px solid var(--line);border-top-left-radius:5px}
.sk-me .sk-bubble{background:linear-gradient(135deg,#4C8DFF,#7FB4FF);color:#140a00;font-weight:600;border-top-right-radius:5px}
.sk-bubble p{margin:0 0 .6em}.sk-bubble>*:last-child{margin-bottom:0}
.sk-bubble ul,.sk-bubble ol{margin:0 0 .6em;padding-left:1.3em}.sk-bubble li{margin:.15em 0}
.sk-bubble .sk-h{font-weight:800;color:#ffd9a8}
.sk-bubble a{color:#ffb86b;text-decoration:underline}
.sk-me .sk-bubble a{color:#140a00}
.sk-bubble code{border:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;padding:.12em .4em;border-radius:6px;background:rgba(0,0,0,.35);color:#ffd9a8}
.sk-code{position:relative;margin:.5em 0}
.sk-code pre{margin:0;padding:12px 14px;overflow-x:auto;border-radius:12px;background:#0a0612;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.sk-code code{padding:0;border:0;background:none;color:#e9ddff;white-space:pre;border-radius:0}
.sk-copy{position:absolute;top:7px;right:7px;padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg-raised);color:var(--text-dim);font:inherit;font-size:.72rem;cursor:pointer}
.sk-copy:hover{color:var(--text);border-color:#7FB4FF88}
.sk-typing{display:flex;gap:5px;align-items:center;padding:15px 16px}
.sk-typing i{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:sk-dot 1.1s infinite ease-in-out}
.sk-typing i:nth-child(2){animation-delay:.15s;background:#BFDCFF}.sk-typing i:nth-child(3){animation-delay:.3s}
@keyframes sk-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

/* gate / errors / composer */
.sk-gate{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 16px;border-top:1px solid var(--line);background:rgba(5,14,34,.5)}
.sk-gate span{color:var(--text-dim);font-size:.88rem;max-width:44ch}
.sk-gate[hidden],.sk-composer[hidden],.sk-error[hidden],.sk-welcome[hidden],.sk-messages[hidden]{display:none}
.sk-error{margin:0 14px 8px;padding:9px 13px;border-radius:12px;border:1px solid #ff5d6c66;background:rgba(255,93,108,.1);color:#ffc2c8;font-size:.86rem}
.sk-composer{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:rgba(5,14,34,.5)}
.sk-composer textarea{flex:1;min-width:0;resize:none;max-height:160px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#0f0a1a;color:var(--text);font:inherit;font-size:16px;line-height:1.4;outline:none}
.sk-composer textarea:focus{border-color:#4C8DFF;box-shadow:0 0 0 3px rgba(76,141,255,.25)}
.sk-composer textarea::placeholder{color:#7d6f96}
.sk-send{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;color:#140a00;background:linear-gradient(135deg,#4C8DFF,#7FB4FF);touch-action:manipulation;transition:filter .15s,transform .15s}
.sk-send:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.sk-send:disabled{opacity:.35;cursor:not-allowed}
.sk-foot{margin:0;padding:0 14px 11px;text-align:center;font-size:.72rem;color:#7d6f96;background:rgba(5,14,34,.5)}

@media(max-width:640px){
  .ai-page{padding:12px 12px 32px}
  .ai-intro{margin-bottom:12px}.ai-intro p:not(.section-kicker){display:none}.ai-intro h1{font-size:1.7rem;margin:.1rem 0 0}
  .sk-chat{--sk-h:calc(100dvh - 196px);border-radius:16px}
  .sk-head{padding:11px 12px;gap:9px}.sk-title small{display:none}.sk-head .sk-status span{display:none}.sk-head .sk-status{padding:7px}
  .sk-body{padding:14px 11px}.sk-bubble{max-width:calc(100% - 42px);font-size:.95rem}
  .sk-chips{flex-direction:column;align-items:stretch;width:100%}.sk-chip{text-align:center}
  .sk-hero-logo{width:78px;height:78px;border-radius:22px}.sk-hero-logo img{width:50px}
}
@media(prefers-reduced-motion:reduce){.sk-hero-logo,.sk-typing i{animation:none}.sk-body{scroll-behavior:auto}}

/* Dashboard: bot connection chip + sidebar group label */
.bot-link{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bot-link-help{display:block;max-width:60ch;color:var(--text-dim);font-size:.84rem;line-height:1.45}
.bot-link-help::before{content:"→ ";color:var(--ember)}
.dashboard-sidebar .sidebar-label:not(:first-child){margin-top:12px}

/* Login wall: until Discord is connected, show only the connect card */
.sk-locked .sk-body{display:none}
.sk-locked .sk-gate{flex:1;justify-content:center;border-top:0;gap:12px;padding:32px 20px}
.sk-locked .sk-gate b{font-size:1.25rem}
.sk-locked .sk-foot{display:none}

/* Attachments (images + files) */
.sk-attach{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--bg-raised);color:var(--text-dim);cursor:pointer;touch-action:manipulation}
.sk-attach:hover{color:var(--text);border-color:#7FB4FF88}
.sk-tray{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 0;background:rgba(5,14,34,.5);border-top:1px solid var(--line)}
.sk-tray[hidden]{display:none}
.sk-chipfile{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:4px 6px 4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--bg-raised-2);font-size:.8rem}
.sk-chipfile img{width:28px;height:28px;object-fit:cover;border-radius:6px;display:block}
.sk-chipfile>span{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-chipfile button{border:0;background:none;color:var(--text-dim);font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 5px}
.sk-chipfile button:hover{color:#ff5d6c}
.sk-tray+.sk-composer{border-top:0}
.sk-atts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-top:.5em}.sk-atts:first-child{margin-top:0}
.sk-thumb{max-width:150px;max-height:120px;border-radius:10px;display:block;object-fit:cover;border:1px solid rgba(0,0,0,.25)}
.sk-att{font-size:.78rem;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.25)}
.sk-drop{outline:2px dashed #7FB4FF;outline-offset:-6px}