:root{
  --bg: #0b0f14;
  --panel: #0f141b;
  --panel-2: #0e1520;
  --muted: #13202f;
  --fg: #e6eef7;
  --subtle: #a5b3c0;
  --brand: #8ab4ff;
  --accent: #6aa1ff;
  --green: #22c55e;
  --red: #ef4444;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
}

/* Layout */
.layout{display:grid; grid-template-columns: 280px 1fr; height:100%}
.sidebar{background:#0a0f14; border-right:1px solid var(--muted); display:flex; flex-direction:column; overflow:auto}
.sidebar .section{padding:12px}
.sidebar .title{color:var(--subtle); font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin:8px 12px}
.sidebar .nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--fg); cursor:pointer}
.sidebar .nav-item:hover{background:#0e1520}
.sidebar .nav-item .dot{width:8px; height:8px; background:var(--brand); border-radius:50%}
.sidebar .footer{display:none}

/* Sidebar recent chats */
.sidebar .recent{padding:0 12px 12px}
.sidebar .recent .item{padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--subtle); display:flex; align-items:center; gap:8px}
.sidebar .recent .item .label{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar .recent .item .del{visibility:hidden; background:transparent; border:none; color:var(--subtle); padding:2px; border-radius:6px; cursor:pointer}
.sidebar .recent .item:hover .del{visibility:visible; color:var(--red); background:#0f1a2a}
.sidebar .recent .item:hover{background:#0e1520; color:var(--fg)}

.main{display:flex; flex-direction:column; height:100%}
.top-banner{background:#0f1720; border-bottom:1px solid var(--muted); padding:10px 16px; color:var(--subtle); font-size:14px; display:flex; align-items:center; justify-content:space-between}
.top-banner .icon-btn{background:#0f1a2a; border:1px solid var(--muted); color:var(--fg)}
.content{flex:1; display:flex; flex-direction:column; align-items:center; overflow:auto}
.container{width:100%; max-width:900px; padding:24px}

/* Hero */
.hero{display:flex; justify-content:center; margin:60px 0 24px}
.hero h1{margin:0; font-size:36px; font-weight:700; background: linear-gradient(90deg, #86b6ff, #e6eef7); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Chat */
.chat{width:100%;}
.messages{display:flex; flex-direction:column; gap:16px; padding-bottom: var(--input-pad, 120px)}
.bubble{background:var(--panel); border:1px solid var(--muted); border-radius:16px; padding:14px 16px; max-width:80%}
.me{align-self:flex-end; background:#0f1a2a}
.assistant{align-self:flex-start}
.bubble .role{color:var(--subtle); font-size:12px; margin-bottom:6px}
.bubble .text{white-space:pre-wrap}
.image-strip{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.image-card{display:flex; flex-direction:column; gap:6px}
.image-card img{max-width:300px; border-radius:8px; border:1px solid var(--muted)}
.image-actions{display:flex; gap:10px; align-items:center; color:var(--subtle); padding:2px 4px}
.image-actions button{background:transparent; border:none; color:inherit; cursor:pointer; padding:4px; border-radius:6px}
.image-actions button:hover{color:var(--fg); background:#0f1a2a}

/* Input Bar */
.input-wrap{position:fixed; left:280px; right:0; bottom:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.4));}
.input{max-width:900px; margin:0 auto 24px; background:var(--panel-2); border:1px solid var(--muted); border-radius:16px; padding:8px; display:flex; align-items:stretch; gap:8px; flex-wrap:wrap}
.input.column{flex-direction:column}
.thumbs-row{display:flex; align-items:center; gap:8px;}
.thumbs-scroll{display:flex; gap:8px; overflow-x:auto; max-width:100%; padding:4px 0}
.icon-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#0f1a2a; border:1px solid var(--muted); color:var(--subtle); cursor:pointer}
.icon-btn:hover{color:var(--fg)}
.thumbs{display:none}
.thumb{position:relative; width:56px; height:56px; border-radius:12px; overflow:hidden; border:1px solid var(--muted); background:#0b0f14}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.remove-thumb{position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:9px; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:18px; padding:0; cursor:pointer}
.remove-thumb:hover{background:rgba(0,0,0,.8)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0f1a2a; border:1px solid var(--muted); color:var(--subtle); cursor:pointer}
.chip + .chip{margin-left:6px}
.chip strong{color:var(--fg)}
.textarea{flex:1 1 auto}
.textarea textarea{width:100%; min-height:72px; max-height:320px; overflow-y:auto; resize:vertical; background:transparent; border:none; outline:none; color:var(--fg); font:inherit; padding:8px}
.actions{display:flex; align-items:center; justify-content:space-between; gap:10px}
.actions-left{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.actions-right{display:flex; align-items:center; gap:8px}
.send-btn{background:var(--brand); color:#0b0f14; border:none; border-radius:12px; padding:10px 14px; cursor:pointer}
.send-btn:disabled{opacity:.6; cursor:not-allowed}
.btn-spinner{width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color: rgba(0,0,0,.6); border-radius:50%; display:inline-block; animation:spin .8s linear infinite}

.tools-pop{position:absolute; bottom:70px; left:360px; background:#0f141b; border:1px solid var(--muted); border-radius:12px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index: 30}
.tools-pop.pos-fixed{position:fixed; bottom:auto;}
.tools-pop .item{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; cursor:pointer}
.tools-pop .item:hover{background:#0e1520}
.tools-pop .item .label{font-weight:600}
.tools-pop .item .muted{color:var(--subtle); font-size:12px}

/* Settings popover uniform to tools-pop */
.settings-popover{min-width:320px; max-width:360px}
.settings-popover .menu-header{display:flex; align-items:center; justify-content:space-between; padding:4px 6px 8px}
.settings-popover .menu-title{font-weight:600}
.settings-popover .row{display:flex; align-items:center; gap:10px; margin:8px 6px}
.settings-popover .row.hidden{display:none}
.settings-popover .row.column{flex-direction:column; align-items:stretch; gap:6px}
.settings-popover .row.column label{flex:0 0 auto; align-self:flex-start}
.settings-popover .row label{flex:0 0 110px; color:var(--subtle); font-size:12px}
.settings-popover .row input[type="range"]{flex:1 1 auto}
.settings-popover .row input[type="number"]{width:80px; background:#0b0f14; border:1px solid var(--muted); color:var(--fg); border-radius:8px; padding:6px}
.settings-popover .row input[type="text"]{width:100%; background:#0b0f14; border:1px solid var(--muted); color:var(--fg); border-radius:8px; padding:6px 8px}
.settings-popover .hint{color:var(--subtle); font-size:12px; margin:4px 6px 8px}
.settings-popover .hint.hidden{display:none}
.settings-popover .footer{display:flex; justify-content:flex-end; padding:4px 6px}
.link-btn{background:none; border:none; color:var(--accent, #60a5fa); cursor:pointer; padding:0 2px; font:inherit}
.link-btn:hover{text-decoration:underline}

/* Settings popover */
.settings-wrap{position:relative}
.settings-pop{position:absolute; right:0; top:34px; background:#0f141b; border:1px solid var(--muted); border-radius:12px; padding:12px; width:280px; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:20}
.settings-pop .row{display:flex; align-items:center; gap:10px; margin:8px 0}
.settings-pop .row label{flex:0 0 90px; color:var(--subtle); font-size:12px}
.settings-pop .row input[type="range"]{flex:1}
.settings-pop .row input[type="number"]{width:80px; background:#0b0f14; border:1px solid var(--muted); color:var(--fg); border-radius:8px; padding:6px}
.settings-pop .hint{color:var(--subtle); font-size:12px; margin-top:6px}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999}
.modal-card{width:min(560px, 94vw); background:#0f141b; border:1px solid var(--muted); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.7); overflow:hidden}
.modal-card.wide{width:min(760px, 96vw)}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:12px 12px 0 12px}
.modal-title{font-weight:600}
.modal-body{padding:16px 12px}
.modal-body .row{display:flex; align-items:center; gap:12px; margin:14px 0}
.modal-body .row label{flex:0 0 120px; color:var(--subtle); font-size:12px}
.modal-body .row input[type="range"]{flex:1 1 auto}
.modal-body .row input[type="number"]{width:90px; background:#0b0f14; border:1px solid var(--muted); color:var(--fg); border-radius:8px; padding:6px}
.modal-body .hint{color:var(--subtle); font-size:12px}
.modal-footer{display:flex; justify-content:flex-end; padding:0 12px 12px 12px}
.modal-header .icon-btn{width:28px; height:28px}

/* Markdown-like content helpers */
.md h3{margin:8px 0 4px; font-size:16px}
.md p{margin:4px 0; color:var(--subtle)}
.md ul{margin:6px 0 10px 18px; padding:0}
.md li{margin:4px 0}
.kbd{display:inline-block; padding:2px 6px; border:1px solid var(--muted); border-bottom-width:2px; border-radius:6px; background:#0b0f14; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px}

/* Iconed steps */
.steps{margin-top:6px}
.step{display:flex; gap:10px; align-items:flex-start; margin:10px 0}
.step .ix{flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#0f1a2a; border:1px solid var(--muted); color:var(--fg)}
.step .body{flex:1}

/* Bottom-left settings menu (popover style) */
.settings-menu-backdrop{position:fixed; inset:0; background:transparent; z-index:5000}
.settings-menu{width:340px; background:#0f141b; border:1px solid var(--muted); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.6); padding:10px 12px}
.settings-menu .menu-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.settings-menu .menu-title{font-weight:600}
.settings-menu .row{display:flex; align-items:center; gap:10px; margin:10px 0}
.settings-menu .row.hidden{display:none}
.settings-menu .row label{flex:0 0 110px; color:var(--subtle); font-size:12px}
.settings-menu .row input[type="range"]{flex:1 1 auto}
.settings-menu .row input[type="number"]{width:80px; background:#0b0f14; border:1px solid var(--muted); color:var(--fg); border-radius:8px; padding:6px}
.settings-menu .hint{color:var(--subtle); font-size:12px}
.settings-menu .footer{display:flex; justify-content:flex-end; margin-top:8px}
.icon-btn.small{width:28px; height:28px}

/* Utility */
.muted{color:var(--subtle)}
.spacer{height:18px}
.hidden{display:none}

/* Typing indicator */
.typing{display:flex; gap:6px; align-items:center; padding:6px 0}
.typing .dot{width:8px; height:8px; background:var(--subtle); border-radius:50%; opacity:.6; animation:typing 1s infinite ease-in-out}

@keyframes typing{
  0%, 80%, 100%{ transform: scale(.8); opacity:.3 }
  40%{ transform: scale(1); opacity:1 }
}

@keyframes spin{
  0%{ transform: rotate(0) }
  100%{ transform: rotate(360deg) }
}

/* Gebesa indicator */
.gebesa-ind{display:flex; align-items:center; gap:10px; padding:6px 0}
.gebesa-ind .g-wrap{position:relative; width:28px; height:28px}
.gebesa-ind .ring{width:28px; height:28px; display:block; animation:spin 1.2s linear infinite}
.gebesa-ind .arc{transform-origin:50% 50%}
.gebesa-ind .g{position:absolute; inset:0; margin:auto; width:14px; height:14px; object-fit:contain; filter: drop-shadow(0 0 2px rgba(0,0,0,.25));}
.palette-text{font-size:12px}

@media (max-width: 900px){
  .layout{grid-template-columns: 1fr}
  .input-wrap{left:0}
}