/* Theme overrides for Marvin (loaded last) */

:root {
  --bg-main: #1a1a1a;
  --bg-panel: #141414;
  --panel-w: 170px;
  --muted: #9a9a9a;
  --border: #2a2a2a;
  --card: #262626;
  --user-bubble: #333333;
  --assistant-bubble: #262626;
  --pill-bg: #222;
  --pill-border: #333;
  font-family: Inter, Vazirmatn, sans-serif !important;
  font-size: 14px;
}

/* App background and sidebar */
body, .app { background: var(--bg-main) !important; color: #e6e6e6; }

/* Sidebar */
.sidebar {
  width: var(--panel-w) !important;
  max-width: 260px;
  background: var(--bg-panel) !important;
  border-right: 1px solid var(--border);
  padding: 12px 10px !important;
}
.sidebar .sb-top { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.sb-new { background: transparent; color: #e6e6e6; border: 1px solid var(--border); padding:8px 10px; border-radius:10px; }
.icon-btn { background: transparent; color: #e6e6e6; border: 0; }

/* Conversation list rows */
.conv-list { margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.conv-list .conv-item {
  display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px; cursor:pointer; text-decoration:none; color:inherit;
}
.conv-list .conv-item .avatar {
  width:28px; height:28px; border-radius:28px; flex:0 0 28px; background-size:cover; background-position:center; background-repeat:no-repeat; background-image: url('/static/marvin.png');
}
.conv-list .conv-item .meta { overflow:hidden; }
.conv-list .conv-item .title { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-list .conv-item .preview { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-list .conv-item.active, .conv-item.active { background: var(--border) !important; }

/* Bottom connect pill */
.sb-bottom .sb-link { display:inline-block; background:#111; color:var(--muted); padding:8px 12px; border-radius:999px; border:1px solid var(--border); }

/* Middle floating name pill top-center */
.top-title {
  display:inline-flex; align-items:center; gap:8px; background:var(--pill-bg); padding:6px 12px; border-radius:999px; border:1px solid #222; font-weight:600; position:absolute; left:50%; transform:translateX(-50%); top:12px;
}
.top-title::before {
  content: '';
  display:inline-block; width:28px; height:28px; border-radius:28px; background-image: url('/static/marvin.png'); background-size:cover; background-position:center; flex:0 0 28px;
}

/* Messages area */
.messages { padding: 20px; }
.msg { display:flex; margin-bottom:10px; }
.msg.assistant { justify-content:flex-start; }
.msg.user { justify-content:flex-end; }
.bubble { display:inline-block; border-radius:16px; padding:10px 14px; font-size:14px; max-width:70%; }
.msg.assistant .bubble { background: var(--assistant-bubble); color:#e6e6e6; border:1px solid var(--border); }
.msg.user .bubble { background: var(--user-bubble); color:#e6e6e6; border:1px solid #333; }

/* Composer */
.composer-wrap { padding:12px; background: transparent; border-top: 1px solid var(--border); }
.composer { background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius:999px; padding:8px 12px; display:flex; gap:8px; align-items:center; }
.composer textarea { background: transparent; border:0; outline:none; resize:none; color: #e6e6e6; font-size:14px; flex:1; }
.composer .icon-btn { color:#e6e6e6; }
.send-btn { background:transparent; color:#e6e6e6; border-radius:999px; padding:8px 10px; }

/* Drawer / right panel (used as models drawer) */
.drawer { background: var(--bg-panel); border-left:1px solid var(--border); color:#e6e6e6; }
.drawer .drawer-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }

/* Panel (kp-panel) overrides to match spec */
.kp-panel { background: var(--bg-panel) !important; border-left:1px solid var(--border) !important; }
.kp-header { border-bottom:1px solid var(--border) !important; }
.kp-title { color:#e6e6e6; }
.kp-close { color:#e6e6e6; }
.kp-tabs { gap:8px; justify-content:center; }
.kp-tab { color:var(--muted); padding:6px 10px; border-radius:999px; }
.kp-tab.active { background: var(--border); color:#e6e6e6; }
.kp-body { padding:16px; }
.kp-card { background: #0f0f0f; border:1px solid var(--border); border-radius:12px; }
.kp-card-header { background:transparent; color:#e6e6e6; border-bottom:0; }
.kp-live { display:block; width:100%; background:#0c0c0c; padding-bottom:22px; border-radius:12px; border:1px solid #2a2a2a; position:relative; }
.kp-live::after { content: "Marvin's screen"; position:absolute; left:12px; bottom:8px; font-size:12px; color:var(--muted); }
.kp-toggle { background:#111 !important; color:#e6e6e6 !important; border:1px solid var(--border) !important; }

/* Avatar in panel header */
.kp-panel .kp-body .kp-avatar { display:flex; justify-content:center; align-items:center; margin-bottom:12px; }
.kp-panel .kp-body .kp-avatar img { width:64px; height:64px; border-radius:64px; }
.kp-panel .kp-name { text-align:center; font-weight:700; margin-top:8px; }
.kp-panel .kp-label { text-align:center; color:var(--muted); font-size:13px; }

/* Tabs pill centered */
.kp-tab { display:inline-flex; align-items:center; justify-content:center; }

/* Live screen card */
.kp-browser-card { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#0b0b0b; }

/* Subtle borders */
.border-subtle { border:1px solid var(--border); }

.kp-toggle{display:none!important}
#convTitle{cursor:pointer;transition:background .15s}#convTitle:hover{background:#2a2a2a!important}
.sb-bottom{position:relative;padding:8px}
.acct-row{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:10px;padding:8px;color:inherit;cursor:pointer}
.acct-row:hover{background:#1f1f1f}
.acct-av{width:28px;height:28px;border-radius:50%;background:#2e7d4f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.acct-name{flex:1;text-align:left}
.acct-menu{position:absolute;bottom:52px;left:8px;right:8px;background:#1f1f1f;border:1px solid #2a2a2a;border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:20}
.acct-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:8px}
.acct-menu button:hover{background:#2a2a2a}

/* Mobile: keep layout but ensure legible font/colors */
@media (max-width:820px) {
  :root { font-size:14px; }
}

body,button,input,textarea,select{font-family:Inter,Vazirmatn,sans-serif}
.bubble,.bubble *{unicode-bidi:plaintext;text-align:start}
.composer textarea{unicode-bidi:plaintext}
@media (min-width:821px){.app>.kp-panel{width:var(--kp-w,260px);min-width:230px}}
.kp-live.kp-live-fs::after{display:none}
/* review fixes */

/* proportions v2 */
@media (min-width: 1200px) {
  .sidebar { width: 260px !important; }
  .app > .kp-panel { width: var(--kp-w, 360px); min-width: 320px; }
  .sidebar { padding: 12px; }
  .app > .kp-panel { padding: 16px; }
  .conv-title, .conv-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kp-panel .kp-body .kp-card, .kp-panel .kp-body .kp-model { overflow-wrap: anywhere; font-size: 12px; }
  .kp-panel .kp-body .kp-card { width: 100%; }
}

@media (min-width: 821px) and (max-width: 1199px) {
  .sidebar { width: 240px; }
  .app > .kp-panel { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(380px, 90vw) !important; z-index: 60; box-shadow: -8px 0 24px rgba(0, 0, 0, .5); }
  .app > .kp-panel:not(.kp-open) { display: none; }
}
@media (min-width:821px){.sidebar{width:200px!important}}
.sidebar{padding:10px 8px!important}
.sb-top{display:flex;gap:6px;flex-wrap:nowrap}
.sb-top button,.sb-new{white-space:nowrap;text-align:left!important;padding:7px 10px!important;font-size:13px;width:auto;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.conv-item{min-width:0}.conv-main{flex:1;min-width:0}
.conv-title{font-weight:600;font-size:13px}.conv-date{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-item .avatar,.conv-item>:first-child{flex:none}
.sb-link{text-align:left!important;width:100%;border-radius:999px}
.sb-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
[class*="project"] *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-hero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 4px}
.kp-hero img{width:64px;height:64px;border-radius:50%}
.kp-hero b{font-size:15px;margin-top:6px}.kp-hero small{color:var(--muted);font-size:11px}
.kp-tabs{border-bottom:0!important}.kp-tab{font-size:12px!important;padding:4px 10px!important;border-bottom:0!important}
@media (max-width:820px){.sidebar{transform:translateX(-100%)!important}.sidebar.open{transform:none!important}}
.kp-toggle{left:auto!important;right:16px!important}
/* Marvin identity image */
.kp-hero img{object-fit:cover;background:transparent}
.top-title::before{background-size:cover!important;background-image:url('/static/marvin.png')!important}
.conv-list .conv-item .avatar{background-image:none!important;background:transparent!important}
/* steps: collapsed "N steps" line, Grok-style */
.steps{border:0!important;background:transparent;margin:2px 0 6px!important}
.steps-head{padding:4px 0!important;font-size:12px;color:#8a8a8a!important;text-align:left!important;background:none;border:0;cursor:pointer}
.steps-head:hover{color:#cfcfcf!important}
.steps-body{border-top:0!important;border-left:2px solid #2a2a2a;margin:2px 0 6px 4px;padding-left:10px}
.step-row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:3px 0;color:#bdbdbd;font-size:12px;text-align:left;cursor:pointer}
.step-row .step-sum{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7a7a7a}
.step-row .chip{flex:none;font-size:11px}
.step-out{display:none;max-height:240px;overflow:auto;font-size:11px;background:#141414;border:1px solid #2a2a2a;border-radius:8px;padding:8px;margin:4px 0}
.step.open .step-out{display:block}
/* proportions v3 (final overrides) */
@media (min-width:1200px){.sidebar{width:260px!important}.app>.kp-panel{width:var(--kp-w,360px)!important}}
@media (min-width:821px) and (max-width:1199px){.sidebar{width:240px!important}.app>.kp-panel{position:fixed!important;left:auto!important;right:0!important;top:0!important;bottom:0!important;width:min(380px,90vw)!important;z-index:60;box-shadow:-8px 0 24px rgba(0,0,0,.5)}}
.sb-top{align-items:center}.sb-top .sb-proj,.sb-top button:not(#sbSearchBtn):not(#newChatBtn):not(#sbCloseBtn){width:32px;height:32px;padding:0!important;flex:none;overflow:hidden;font-size:0}
.sb-top button:not(#sbSearchBtn):not(#newChatBtn):not(#sbCloseBtn)::before{content:"🗂";font-size:14px}
#sbSearchBtn,#newChatBtn{width:32px!important;height:32px;flex:none!important;padding:0!important;border-radius:50%!important;text-align:center!important;background:#1f1f1f;border:1px solid #2a2a2a}
.sb-top{justify-content:flex-end}
/* footer meta on its own line below the message */
.msg.assistant{flex-direction:column!important;align-items:flex-start!important}
.msg.user{flex-direction:column!important;align-items:flex-end!important}
.msg .body{unicode-bidi:plaintext;text-align:start;max-width:100%}
.msg .body *{unicode-bidi:plaintext}
.msg .meta{display:flex!important;clear:both;width:100%;direction:ltr;justify-content:flex-start;margin-top:6px;font-size:11px}
.avatar,.avatar::before{animation:none!important;box-shadow:none!important;transform:none!important}.conv-item .avatar{width:32px!important;height:32px!important;flex:0 0 32px!important}
/* Grok-style chat spacing */
.messages{padding:28px 24px 16px!important}
.messages>*{max-width:740px;margin-left:auto!important;margin-right:auto!important;width:100%}
.msg{margin-bottom:22px!important;line-height:1.7}
.msg .body{line-height:1.7;font-size:14.5px}
.msg .body p{margin:0 0 .7em}.msg .body p:last-child{margin-bottom:0}
.msg.user .bubble{padding:10px 16px!important;line-height:1.6}
.msg.assistant .body{padding:2px 2px}
.msg .meta{margin-top:6px!important}
.steps{margin:0 0 10px!important}.steps-head{padding:6px 0!important}
.composer-wrap{max-width:788px;margin:0 auto;width:100%}
/* visible cursor over the VNC view (watch + control) */
.kp-vnc,.kp-vnc canvas,.kp-vnc *{cursor:default!important}
.kp-vnc.control canvas{cursor:auto}

.top-title::before{background-image:var(--pill-av,url('/static/marvin.png'))!important;border-radius:50%}
/* Grok-style sidebar top icons */
.sb-top{display:flex!important;justify-content:flex-end!important;align-items:center;gap:2px!important;padding:10px 10px 6px!important;flex-wrap:wrap}
.sb-top .icon-btn{width:32px!important;height:32px!important;min-width:32px;padding:0!important;border-radius:50%!important;border:0!important;background:transparent!important;color:#b8b8bd!important;display:inline-flex!important;align-items:center;justify-content:center;box-shadow:none!important;font-size:0!important;margin:0!important}
.sb-top .icon-btn:hover{background:rgba(255,255,255,.08)!important;color:#e8e8ea!important}
.sb-top .icon-btn svg{width:18px;height:18px;display:block}
.sb-top .sb-search-input{order:9;flex:1 0 100%;margin-top:6px}

.sb-top>*:not(#sbSearchBtn):not(#newChatBtn):not(#sbSearch):not(script):not(.plus-menu):not(.proj-form){display:none!important}
.sb-top #sbSearchBtn{margin-left:auto!important}
.sb-top #sbSearch[hidden]{display:none!important}
/* avatar idle animation (transform only) */
@keyframes kav-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes kav-blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.82)}}
@keyframes kav-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(1.5px) rotate(-4deg)}65%{transform:translateY(-1px) rotate(3deg)}}
.conv-item .avatar{animation:kav-bob 3s ease-in-out var(--ad,0s) infinite!important;will-change:transform;transition:rotate .25s ease}
.conv-item .avatar img{animation:kav-blink var(--bl,5s) linear var(--bd,0s) infinite;transform-origin:50% 50%}
.conv-item:hover .avatar{rotate:-8deg}
.conv-list,#convList{contain:paint}
body.kom-busy .top-title::before{animation:kav-nod 1.1s ease-in-out infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){.conv-item .avatar,.conv-item .avatar img,body.kom-busy .top-title::before{animation:none!important}.conv-item:hover .avatar{rotate:0deg}}

.sb-top{position:relative}
.sb-top>.proj-form,.sb-top>.plus-menu{display:block!important;order:10;flex:1 0 100%}
.sb-top>.proj-form[style*="none"]{display:none!important}
.sb-top>.plus-menu{position:absolute!important;top:44px!important;bottom:auto!important;left:auto!important;right:10px!important;width:170px}
.sb-top>.plus-menu[hidden]{display:none!important}
.sb-top .plus-menu button,.sb-top .proj-form button{width:100%!important;height:auto!important;font-size:13px!important;padding:8px 10px!important;flex:none!important;overflow:visible!important;color:#e8e8ea;display:block;text-align:left!important}
.sb-top .proj-form .proj-form-actions button{width:auto!important;display:inline-block}
.sb-top .plus-menu button::before,.sb-top .proj-form button::before{content:none!important}
.sb-top #plusMenu{padding:6px!important}
.sb-top #plusMenu button{padding:8px 10px!important;border-radius:8px!important;height:auto!important}
.sb-top #plusMenu button:hover{background:#2a2a2a!important}
.sb-top .proj-form .proj-form-actions button{padding:6px 12px!important;border-radius:8px!important;height:auto!important}

.sidebar,aside,.sb-top{overflow:visible!important}
.sb-top #plusMenu{position:absolute!important;top:46px!important;right:6px!important;left:auto!important;bottom:auto!important;width:auto!important;min-width:180px;z-index:1000!important;padding:6px!important;display:flex!important;flex-direction:column;gap:4px;flex:none!important;background:#1f1f1f;border:1px solid #2e2e2e;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.sb-top #plusMenu[hidden]{display:none!important}
.sb-top #plusMenu button{display:flex!important;align-items:center;gap:10px;width:100%!important;padding:8px 12px!important;line-height:20px!important;font-size:13.5px!important;color:#e8e8ea!important;background:transparent!important;border:0!important;border-radius:8px!important;white-space:nowrap}
.sb-top #plusMenu button:hover{background:#2c2c2e!important}
.sb-top #plusMenu button svg{width:18px;height:18px;flex:0 0 18px;color:#b8b8bd}

/* live status row with chat avatar */
.msg .live{display:flex;align-items:center;gap:10px;margin:0 0 8px;direction:ltr;transition:opacity .4s ease;opacity:1}
.msg .live.gone{opacity:0}
.msg .live-av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;animation:kav-nod 1.2s ease-in-out infinite;will-change:transform}
.msg .live-text{font-size:13px;color:#a8a8ad;background:linear-gradient(90deg,#8a8a90 0%,#e6e6ea 50%,#8a8a90 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:kav-shim 1.6s linear infinite}
@keyframes kav-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.msg .live~.body .typing{display:none}
@media (prefers-reduced-motion:reduce){.msg .live-av,.msg .live-text{animation:none!important}}