/* Growbox shell - One Dark */
:root {
  --bg: #282c34; --bg-dark: #21252b; --bg-light: #2c313a; --line: #3e4451;
  --fg: #abb2bf; --dim: #5c6370; --blue: #61afef; --red: #e06c75;
  --green: #98c379; --yellow: #e5c07b; --purple: #c678dd; --cyan: #56b6c2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; font: 15px/1.45 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
#root { display: flex; flex-direction: column; }
button { font: inherit; }
button:disabled { opacity: .5; cursor: default; }

.bar { display: flex; gap: .5rem; align-items: center; padding: .4rem .8rem; background: var(--bg-dark); border-bottom: 1px solid var(--line); }
.bar b { color: var(--purple); }
.bar b a { color: inherit; text-decoration: none; }
.bar .app-id { color: var(--fg); font-weight: 400; }
.bar .spacer { flex: 1; }
.bar code { color: var(--cyan); font-size: 12px; }
.bar .build { color: var(--dim); font-size: 11px; }
.bar button { background: var(--bg-light); color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: .2rem .6rem; cursor: pointer; }
.bar button:hover { border-color: var(--blue); color: var(--blue); }

.home { flex: 1; overflow: auto; padding: 2rem; }
.home .wrap { max-width: 640px; margin: 0 auto; }
.home h2 { color: var(--purple); font-weight: 600; margin: 0 0 1rem; }
.home .apps { border-top: 1px solid var(--line); margin-bottom: 1.2rem; }
.home .a { display: flex; gap: .8rem; align-items: baseline; padding: .55rem .2rem; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.home .a:hover { background: var(--bg-light); }
.home .a b { color: var(--blue); font-family: ui-monospace, monospace; font-weight: 500; }
.home .a span { flex: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .a small { color: var(--dim); }
.home .empty { color: var(--dim); padding: .8rem .2rem; }
button.primary { background: var(--blue); color: var(--bg-dark); border: 0; border-radius: 4px; padding: .45rem 1rem; cursor: pointer; font-weight: 600; }

.banner { display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; background: #3b2a2e; color: var(--red); border-bottom: 1px solid var(--red); }
.banner .msg { flex: 1; white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 13px; }
.banner button { border: 1px solid var(--red); background: transparent; color: var(--red); border-radius: 4px; padding: .2rem .6rem; cursor: pointer; }

.main { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.app { overflow: auto; padding: 1rem; }
.app .empty { color: var(--dim); margin-top: 3rem; text-align: center; }
.side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg-dark); }
.chat { flex: 1; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.m { padding: .45rem .65rem; border-radius: 8px; white-space: pre-wrap; max-width: 92%; }
.m.user { background: #2f3d52; color: #d7dae0; align-self: flex-end; }
.m.assistant { background: var(--bg-light); border: 1px solid var(--line); }
.m.tool { font: 12px ui-monospace, monospace; color: var(--dim); padding: 0 .2rem; }
.m.err { color: var(--red); }
.send { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); }
.send textarea { flex: 1; resize: none; height: 4.2em; font: inherit; padding: .4rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.send textarea:focus { outline: none; border-color: var(--blue); }
.send textarea:disabled { opacity: .5; }
.send button { padding: 0 .9rem; border: 0; border-radius: 6px; background: var(--blue); color: var(--bg-dark); font-weight: 600; cursor: pointer; }

.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 10; }
.dialog { display: flex; flex-direction: column; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; width: 90vw; max-width: 640px; max-height: 90vh; padding: 0 1rem 1rem; overflow: auto; }
.dialog.wide { max-width: none; width: 92vw; height: 86vh; }
.dialog header { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; }
.dialog header h3 { margin: 0; flex: 1; color: var(--purple); }
.dialog label { display: block; margin: .6rem 0 .2rem; }
.dialog input, .dialog select { width: 100%; padding: .35rem; font: inherit; color: var(--fg); background: var(--bg-dark); border: 1px solid var(--line); border-radius: 4px; }
.dialog .hint { font-size: 13px; color: var(--dim); }
.dialog button { color: var(--fg); background: var(--bg-light); border: 1px solid var(--line); border-radius: 4px; padding: .25rem .7rem; cursor: pointer; }
.dialog button:hover { border-color: var(--blue); color: var(--blue); }
.dialog .row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.dialog .legend { display: flex; gap: .8rem; align-items: baseline; font-size: 13px; padding-bottom: .5rem; }
.dialog .legend small { color: var(--dim); margin-left: auto; }
.dialog .graph { flex: 1; position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.dialog pre.source { flex: 1; margin: 0; overflow: auto; padding: .8rem; background: var(--bg-dark); border: 1px solid var(--line); border-radius: 6px; font: 13px/1.5 ui-monospace, monospace; white-space: pre; }
.dialog .deps { font-size: 13px; color: var(--dim); margin: .5rem 0 0; }
.dialog .deps a { color: var(--blue); cursor: pointer; margin-right: .5rem; }
.versions { max-height: 70vh; overflow: auto; }
.v { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.v code { font-size: 12px; color: var(--cyan); }
.v small { color: var(--dim); }
.v .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v.head .t { color: var(--green); font-weight: 600; }

@media (max-width: 800px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr 45vh; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .bar { flex-wrap: wrap; }
}
.dialog .active { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.dialog h4 { margin: .9rem 0 0; color: var(--dim); font-weight: normal; }
.dialog .key { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .6rem; margin-top: .4rem; }
.dialog .key label { margin: 0; }