:root{
  --navy:#0B2B4D;
  --gold:#C9A86B;
  --track:#E2E8F0;
}

/* =============================
   Sidebar scroll (Shared Hosting)
   - Custom scrollbar ONLY (no buttons)
   ============================= */

.side{
  /* allow scrolling when menu is long */
  overflow-y:auto;
  overflow-x:hidden;
  max-height: calc(100vh - 120px);
  scrollbar-gutter: stable;
}

/* Make scrollbar subtle until scrolling/hover */
.side{
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: rgba(201,168,107,.55) var(--track);
}

/* Webkit scrollbar */
.side::-webkit-scrollbar{
  width:6px;
  background: transparent;
}

.side::-webkit-scrollbar-track{
  background: rgba(226,232,240,.75);
  border-radius: 10px;
}

.side::-webkit-scrollbar-thumb{
  background: rgba(201,168,107,.55);
  border-radius: 10px;
  transition: opacity .25s, background .25s;
}

.side:hover::-webkit-scrollbar-thumb{
  background: rgba(201,168,107,.9);
}

/* show a bit stronger when actively scrolling */
.side.is-scrolling::-webkit-scrollbar-thumb{
  background: rgba(201,168,107,1);
}

/* Optional: horizontal scroll areas (tables etc.) */
.table-wrap{ overflow:auto; }
.table-wrap::-webkit-scrollbar{ height:6px; }
.table-wrap::-webkit-scrollbar-track{ background: rgba(226,232,240,.75); border-radius:10px; }
.table-wrap::-webkit-scrollbar-thumb{ background: rgba(201,168,107,.55); border-radius:10px; }
.table-wrap:hover::-webkit-scrollbar-thumb{ background: rgba(201,168,107,.9); }

/* =============================
   AI Chat UI
   ============================= */
.ai-shell{display:flex;gap:16px;height:calc(100vh - 210px)}
.ai-side{width:300px;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:18px;padding:14px;display:flex;flex-direction:column}
.ai-conv-list{margin-top:12px;overflow:auto;flex:1}
.ai-conv-item{border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:10px;margin-bottom:10px;cursor:pointer;position:relative;background:#fff}
.ai-conv-item:hover{border-color:rgba(201,168,107,.7);background:rgba(201,168,107,.06)}
.ai-conv-item.active{border-color:rgba(201,168,107,1);background:rgba(201,168,107,.08)}
.ai-conv-actions{position:absolute;left:10px;top:10px;display:flex;gap:6px}

.ai-main{flex:1;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:18px;display:flex;flex-direction:column;overflow:hidden}
.ai-top{padding:14px;border-bottom:1px solid rgba(15,23,42,.10);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ai-messages{flex:1;overflow:auto;padding:16px;background:linear-gradient(180deg, rgba(241,245,249,.9), rgba(255,255,255,1))}
.ai-input{padding:14px;border-top:1px solid rgba(15,23,42,.10)}
.ai-input textarea{width:100%;padding:12px;border:1px solid rgba(15,23,42,.15);border-radius:12px;resize:vertical;font-family:inherit}

.ai-msg{display:flex;margin-bottom:14px}
.ai-msg.user{justify-content:flex-start}
.ai-msg.assistant{justify-content:flex-end}
.ai-bubble{max-width:80%;padding:12px 12px;border-radius:14px;line-height:1.7}
.ai-msg.user .ai-bubble{background:#0B2B4D;color:#fff;border-top-right-radius:6px}
.ai-msg.assistant .ai-bubble{background:#ffffff;color:#0f172a;border:1px solid rgba(15,23,42,.10);border-top-left-radius:6px}
.ai-bubble pre{white-space:pre-wrap;word-break:break-word}
.ai-bubble code{background:rgba(201,168,107,.14);padding:2px 6px;border-radius:8px}
.ai-bubble a{color:var(--navy);text-decoration:underline}

.ai-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px;padding:0 6px}

@media (max-width: 980px){
  .ai-shell{flex-direction:column;height:auto}
  .ai-side{width:auto;height:260px}
}

/* =============================
   Onboarding overlay
   ============================= */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);z-index:9999;padding:16px}
.modal-card{width:min(760px, calc(100vw - 24px));background:#fff;border-radius:18px;border:1px solid rgba(15,23,42,.12);box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden;max-height:85vh;display:flex;flex-direction:column}
.modal-head{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(15,23,42,.10)}
.modal-body{padding:14px;overflow:auto}
.dots{display:flex;gap:6px;align-items:center}
.dots .dot{width:8px;height:8px;border-radius:999px;background:rgba(15,23,42,.18)}
.dots .dot.on{background:rgba(201,168,107,1)}