/* Plain CSS for things that are awkward with Tailwind classes. */

[hidden] { display: none !important; }

.logo-mark {
  border-radius: 8px;
  background: #e07a4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 11l-4 5 4 5M22 11l4 5-4 5M18 9l-4 14' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Popovers & menus */
.popover {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.6);
  padding: 4px 0;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border-radius: 6px; font-size: 13px; color: #d4d4d8;
}
.menu-item:hover { background: #27272a; }
.project-item { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 0 4px; text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.project-item:hover { background: #27272a; }
.project-item.active { background: rgb(224 122 79 / 0.12); color: #f0a07e; }

.icon-btn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #a1a1aa; }
.icon-btn:hover { background: #27272a; color: #f4f4f5; }

/* Tabs */
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; font-size: 12.5px; color: #a1a1aa; white-space: nowrap;
  border-right: 1px solid #27272a; border-bottom: 2px solid transparent;
}
.tab:hover { color: #f4f4f5; background: #18181b; }
.tab.active { color: #fafafa; background: #18181b; border-bottom-color: #e07a4f; }
.tab .dot { width: 6px; height: 6px; border-radius: 999px; background: #e07a4f; animation: pulse 1s infinite; }

/* Mobile: show one pane at a time */
.mobile-tab { color: #a1a1aa; }
@media (max-width: 767px) {
  #main[data-mobile="work"] #chat-pane { display: none; }
  #main[data-mobile="work"] #work-pane { display: flex; }
}
#main[data-mobile="chat"] ~ nav [data-mobile-tab="chat"],
#main[data-mobile="work"] ~ nav [data-mobile-tab="work"] { color: #fafafa; box-shadow: inset 0 2px 0 #e07a4f; }

/* ---------- Chat messages ---------- */
.msg-user {
  background: #18181b; border: 1px solid #27272a; border-radius: 12px;
  padding: 10px 12px; font-size: 14px; white-space: pre-wrap; word-break: break-word;
}
.msg-user::before { content: "› "; color: #e07a4f; font-weight: 600; }

.turn { font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }

.tool {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
  color: #d4d4d8; display: grid; grid-template-columns: 14px 1fr; column-gap: 6px;
}
.tool .bullet { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; background: #71717a; }
.tool.running .bullet { background: #e07a4f; animation: pulse 1s infinite; }
.tool.ok .bullet { background: #22c55e; }
.tool.error .bullet { background: #ef4444; }
.tool .name { font-weight: 600; color: #fafafa; }
.tool .path { color: #f0a07e; cursor: pointer; }
.tool .path:hover { text-decoration: underline; }
.tool .result { grid-column: 2; color: #a1a1aa; }
.tool.error .result { color: #f87171; }

.thinking summary { cursor: pointer; color: #a1a1aa; font-size: 13px; list-style: none; user-select: none; }
.thinking summary::-webkit-details-marker { display: none; }
.thinking summary::before { content: "✻ "; color: #e07a4f; }
.thinking.live summary { animation: shimmer 1.6s infinite; }
.thinking .body {
  margin-top: 6px; padding-left: 12px; border-left: 2px solid #27272a;
  color: #a1a1aa; font-size: 13px; white-space: pre-wrap;
}

.notice { font-size: 13px; border-radius: 8px; padding: 6px 10px; }
.notice.warn { background: rgb(234 179 8 / 0.1); color: #facc15; }
.notice.error { background: rgb(239 68 68 / 0.1); color: #f87171; }
.notice.info { background: #18181b; color: #a1a1aa; }

.turn-meta { font-size: 11px; color: #52525b; font-variant-numeric: tabular-nums; }

.cursor::after { content: "▍"; color: #e07a4f; animation: blink 1s steps(1) infinite; }

/* Rendered markdown */
.md { word-break: break-word; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 { font-weight: 600; color: #fafafa; margin: 12px 0 6px; }
.md ul, .md ol { padding-left: 20px; margin: 0 0 8px; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: 2px 0; }
.md code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: #27272a; padding: 1px 5px; border-radius: 4px; color: #f0a07e; }
.md pre { background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 8px; }
.md pre code { background: none; padding: 0; color: #e4e4e7; }
.md a { color: #f0a07e; text-decoration: underline; }
.md strong { color: #fafafa; font-weight: 600; }

/* Console */
.log { padding: 2px 0; border-bottom: 1px solid #18181b; white-space: pre-wrap; word-break: break-word; color: #d4d4d8; }
.log.warn { color: #facc15; }
.log.error { color: #f87171; }
.log.info { color: #93c5fd; }

/* Editor */
#editor { tab-size: 2; caret-color: #e07a4f; }
#editor[readonly] { cursor: default; }

/* Suggestions on the empty chat */
.suggestion {
  text-align: left; font-size: 13px; color: #d4d4d8; border: 1px solid #27272a; background: #18181b;
  border-radius: 10px; padding: 10px 12px; transition: border-color .15s, background .15s;
}
.suggestion:hover { border-color: #e07a4f; background: #1c1917; }

@keyframes pulse { 50% { opacity: .35; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shimmer { 50% { color: #e4e4e7; } }

.notice.working { background: none; padding: 0; color: #a1a1aa; animation: shimmer 1.6s infinite; }

/* Admin forms */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #a1a1aa; }
.field input, .field select {
  background: #09090b; border: 1px solid #3f3f46; border-radius: 8px; padding: 6px 10px;
  font-size: 14px; color: #f4f4f5; outline: none;
}
.field input:focus, .field select:focus { border-color: #e07a4f; }
.btn { border-radius: 8px; background: #27272a; padding: 4px 10px; font-size: 12px; color: #e4e4e7; white-space: nowrap; }
.btn:hover { background: #3f3f46; }
.btn.danger { color: #f87171; }
.btn.danger:hover { background: rgb(239 68 68 / 0.15); }
.user-link { font-weight: 500; text-align: left; }
.user-link:hover { color: #f0a07e; text-decoration: underline; }