:root{
  --bg:#f8fafc;
  --bg2:#eef2f7;
  --text:#111827;
  --muted:#6b7280;
  --border:rgba(17,24,39,.12);
  --card:rgba(255,255,255,.72);
  --card-strong:rgba(255,255,255,.86);
  --accent:#3070B3;
  --shadow:0 18px 40px rgba(17,24,39,.10);
  --radius:18px;
  --topbar-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(48,112,179,.14), transparent 55%),
    radial-gradient(900px 600px at 92% 18%, rgba(17,24,39,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow:hidden;
}

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:50;
}

.topbar .brand{display:flex;align-items:center;gap:14px}
.topbar .brand .brand-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:.2px}
.topbar .brand .dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(48,112,179,.14)}

.home-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  color:var(--text);
  background:rgba(17,24,39,.04);
  border:1px solid rgba(17,24,39,.08);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.home-btn:hover{background:rgba(17,24,39,.06);border-color:rgba(17,24,39,.14);transform:translateY(-1px)}
.home-btn:active{transform:translateY(0)}

.actions{display:flex;align-items:center;gap:10px}
#status{font-size:14px;color:var(--muted);margin-right:6px}

/* ---------- Buttons ---------- */
.btn, .send{
  appearance:none;
  border:1px solid rgba(17,24,39,.12);
  background:rgba(255,255,255,.75);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover,.send:hover{background:rgba(255,255,255,.92);border-color:rgba(17,24,39,.18);transform:translateY(-1px);box-shadow:0 12px 24px rgba(17,24,39,.10)}
.btn:active,.send:active{transform:translateY(0);box-shadow:none}

.btn:focus-visible,.send:focus-visible,.input:focus-visible{
  outline:3px solid rgba(48,112,179,.28);
  outline-offset:2px;
}

/* ---------- Context menu ---------- */
.context-toggle{position:relative}
.context-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:240px;
  padding:10px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:none;
}
.context-menu label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
  color:var(--text);
}
.context-menu label:hover{background:rgba(17,24,39,.04)}
.context-menu input[type="checkbox"]{accent-color:var(--accent)}
.context-toggle.open .context-menu{display:block}

.context-toggle:hover .context-menu{display:block}

/* ---------- Action hover menu (4 buttons) ---------- */
.action-menu{position:relative}
.action-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  min-width:220px;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.action-menu:hover .action-menu-panel,
.action-menu:focus-within .action-menu-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Make the 4 buttons full width inside the menu */
.action-menu-panel .btn{width:100%;justify-content:center}

/* ---------- Layout ---------- */
.wrap{
  height:calc(100vh - var(--topbar-h));
  width:100%;
  display:flex;
  align-items:stretch;
}

.left{
  position:relative;
  flex:1 1 auto;
  min-width:320px;
  height:100%;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  overflow:hidden;
}

/* Draggable splitter (restores original resize behavior) */
.splitter{
  width:10px;
  flex:0 0 10px;
  cursor:col-resize;
  position:relative;
  background:transparent;
}
.splitter::before{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  bottom:14px;
  width:2px;
  transform:translateX(-50%);
  background:rgba(17,24,39,.14);
  border-radius:999px;
}
.splitter:hover::before{background:rgba(48,112,179,.35)}

/* Cesium fills the left pane */
#cesiumContainer{width:100%;height:100%}

/* Optional hint: keep hidden for a clean look */
.embed-hint{display:none}

/* ---------- Chat side panel (separate, resizable) ---------- */
.right{
  position:relative;
  width:300px;
  flex:0 0 420px;
  min-width:340px;
  max-width:720px;
  display:flex;
  flex-direction:column;
  gap:0;
  background:rgba(255,255,255,.55);
  border-left:1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(12px);
  overflow:hidden;
}

/* keep Chatbot title bar hidden, as in current vibe */
.chat-head{display:none !important}

.chat-body{
  flex:1;
  overflow:auto;
  padding:16px;
  background:transparent;
  border:none;
  box-shadow:none;
  scroll-behavior:smooth;
}

.chat-foot{
  position:relative;
  padding:14px;
  border-top:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
}

#chatInput{
  width:100%;
  resize:none;
  min-height:46px;
  max-height:140px;
  padding:12px 88px 12px 14px; /* room for Send button */
  background:rgba(255,255,255,.55);
  border:1px solid rgba(17,24,39,.14);
  border-radius:16px;
}

#sendBtn.send{
  position:absolute;
  right:22px;
  bottom:22px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
}

/* Message bubbles - transparent, aligned */
.msg{
  max-width:92%;
  padding:12px 14px;
  border-radius:18px;
  margin:10px 0;
  line-height:1.35;
  font-size:15px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  box-shadow:0 12px 26px rgba(17,24,39,.10);
  white-space: pre-wrap;
}
.msg.bot{margin-right:auto}
.msg.user{margin-left:auto;border-color:rgba(48,112,179,.22);background:rgba(48,112,179,.10)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .right{width:360px;flex-basis:360px;min-width:300px}
}
@media (max-width: 820px){
  .wrap{flex-direction:column}
  .splitter{display:none}
  .right{width:100%;flex:0 0 auto;max-width:none;border-left:none;border-top:1px solid rgba(17,24,39,.10)}
  .left{min-width:0}
}