/* =====================================================================
   Genexts UI polish (Oct 2026)
   Loaded after style.css. Same look, tidier details:
   1. Sidebar & navigation   2. Chat   3. Home
   4. Projects               5. Settings   6. Phones
   To undo everything, remove the <link> to this file in index.html.
   ===================================================================== */

/* ---------- 1. Sidebar & navigation ---------- */

/* The credits card and profile chip were being squashed to ~28px tall on laptop screens
   (flex items shrink by default). Keep every block at its real size; the sidebar scrolls instead. */
.sidebar > * { flex-shrink: 0; }
.sidebar .sidebar-nav-items { flex-shrink: 0; }

/* Slightly tighter nav so everything fits on a 13" laptop without scrolling. */
.genexts-sidebar-header { margin-bottom: 1.25rem !important; }
.sidebar-item { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; margin-bottom: 2px; border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s; }
.sidebar-item .icon { transition: transform 0.15s; }
.sidebar-item:hover .icon { transform: scale(1.08); }
.sidebar-item:focus-visible { outline: 2px solid rgba(var(--brand-rgb, 46, 230, 182), 0.6); outline-offset: 1px; }
.sidebar-group-label { padding-top: 0.75rem; }

/* Credits card: compact, and the sparkline only shows when there's room. */
.sb-credits { margin-top: 0.75rem; }
@media (max-height: 900px) {
  .sb-curve { display: none; } .sb-balance { margin-bottom: 0.55rem; }
  .sb-credits .sb-btn:not(.primary) { display: none; }   /* Subscriptions is already in the menu above */
  .sidebar:not(.collapsed) { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
  .sidebar-item { padding-top: 0.38rem !important; padding-bottom: 0.38rem !important; }
  .sidebar-item .icon { width: 26px !important; height: 26px !important; font-size: 0.98rem !important; }
  .sidebar-group-label { padding-top: 0.6rem; }
  .genexts-sidebar-header { margin-bottom: 0.9rem !important; }
}
.sb-btn.primary { background: linear-gradient(135deg, var(--brand, #2ee6b6), var(--brand-2, #14b8a6)) !important; color: #0b0e14 !important; }

/* Profile chip */
#profile-trigger { padding: 0.6rem 0.7rem !important; transition: background 0.15s, border-color 0.15s !important; }
#profile-trigger:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
#profile-trigger .profile-avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 0.8rem; font-weight: 600 !important; }
#profile-trigger .profile-plan { color: var(--brand, #2ee6b6) !important; }
#profile-trigger .profile-chevron { font-size: 0 !important; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor; color: #64748b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 15 12 10 17 15'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 15 12 10 17 15'/%3E%3C/svg%3E") center / 16px no-repeat; }
.profile-menu { border-radius: 14px !important; box-shadow: 0 -10px 40px rgba(0,0,0,0.55) !important; }
.profile-menu .btn-menu:hover { background: rgba(239,68,68,0.1) !important; }

/* ---------- 2. Chat ---------- */

/* Less empty space between turns (hidden Copy row + trailing margins were stacking up). */
#chat-history.chat-history { gap: 1.25rem; }
#chat-history .markdown-body > :last-child,
#chat-history .ai-content .markdown-body ul:last-child,
#chat-history .ai-content .markdown-body ol:last-child { margin-bottom: 0; }
#chat-history .ai-content .markdown-body ul, #chat-history .ai-content .markdown-body ol { padding-left: 1.25rem; }
#chat-history .ai-content .markdown-body li::marker { color: var(--text-muted, #64748b); }
.msg-actions { margin-top: 0.3rem; min-height: 28px; }
#chat-history .chat-message.user-message { background: rgba(255,255,255,0.075); border: 1px solid rgba(255,255,255,0.06); }

/* Inline code: neutral chip instead of bright green text. */
.chat-message .inline-code, .markdown-body code.inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em;
  color: #e2e8f0 !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.08);
  padding: 0.1em 0.4em !important; border-radius: 6px !important; }

/* Code cards: one clean box (header + code) instead of three boxes inside each other. */
.chat-message .code-example.file-card {
  background: #0d1117 !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 14px !important;
  margin: 1rem 0 !important; box-shadow: none !important; padding: 0 !important; }
.chat-message .file-card-header {
  background: rgba(255,255,255,0.035) !important; padding: 0.45rem 0.5rem 0.45rem 0.9rem !important; gap: 0.5rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important; margin: 0 !important; border-radius: 0 !important; }
.chat-message .file-card-header > div:first-child { min-width: 0; }
.chat-message .file-card-header > div:first-child > span:first-child { font-size: 0.95rem !important; opacity: 0.8; }
.chat-message .file-card-header > div:first-child > span:nth-child(2) {
  font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text-secondary) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chat-message .file-card-header > div:first-child > span:nth-child(3) {
  font-size: 0.66rem !important; letter-spacing: 0.05em; color: var(--brand, #2ee6b6) !important;
  background: rgba(var(--brand-rgb, 46, 230, 182), 0.1) !important; border-radius: 999px !important; padding: 0.12rem 0.5rem !important; }
.chat-message .file-card-header > div:last-child { gap: 0.15rem !important; flex-wrap: nowrap !important; }
.chat-message .file-card-header button {
  background: transparent !important; border: 1px solid transparent !important; color: var(--text-secondary) !important;
  font-size: 0.74rem !important; font-weight: 500 !important; padding: 0.3rem 0.6rem !important; border-radius: 8px !important;
  box-shadow: none !important; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.chat-message .file-card-header button:hover { background: rgba(255,255,255,0.07) !important; color: var(--text-primary, #fff) !important; }
.chat-message .file-card-body { padding: 0.9rem 1rem !important; margin: 0 !important; background: transparent !important; border: none !important; }
.chat-message .file-card-body pre, .markdown-body .file-card-body pre {
  background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
  font-size: 0.85rem !important; line-height: 1.6; }
.chat-message .file-card-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e6edf3; }

/* Plain markdown code blocks (no file card) match the cards. */
.markdown-body pre { background: #0d1117; border-color: rgba(255,255,255,0.09); border-radius: 12px; font-size: 0.85rem; line-height: 1.6; }

/* Composer: clearer focus and button hover states. */
.chat-composer .chat-icon-btn { color: var(--text-secondary); transition: background 0.15s, color 0.15s; }
.chat-composer .chat-icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-primary, #fff); }
.chat-composer .chat-toggle.active, .chat-composer .chat-toggle[aria-pressed="true"] {
  color: var(--brand, #2ee6b6); background: rgba(var(--brand-rgb, 46, 230, 182), 0.12); }
.chat-send:disabled { opacity: 0.45; transform: none; cursor: default; }
.chat-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.chat-suggestion::after { content: "→"; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; color: var(--brand, #2ee6b6); }
.chat-suggestion:hover::after { opacity: 1; transform: none; }

/* Back button in Chat (goes to Home), next to ☰. */
body.in-chat #chat-view .chat-header .btn-back { display: grid !important; }

/* Header pills */
.chat-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chat-header .chat-icon-btn:hover { background: rgba(255,255,255,0.07); }

/* ---------- 3. Home ---------- */

/* The "Ask anything" box had a second rounded box inside it. Now it's one box. */
.home-composer #genexts-global-input {
  background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0.75rem 0 !important; }
.home-composer { padding-left: 1.3rem !important; }
.home-action:focus-visible, .chat-suggestion:focus-visible, .pj-card:focus-visible {
  outline: 2px solid rgba(var(--brand-rgb, 46, 230, 182), 0.6); outline-offset: 2px; }

/* Four shortcuts on Home (Chat, Canvas, Image, Projects). */
.home-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1101px) { .home-main { max-width: 900px; } }
.home-action-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- 4. Projects ---------- */

/* No projects yet: one clear "Create your first project" card, instead of a button, a card and a repeat of the subtitle. */
.pj-grid:not(:has(.pj-card:not(.pj-new))) { grid-template-columns: 1fr; }
.pj-grid:not(:has(.pj-card:not(.pj-new))) .pj-new { min-height: 220px; font-size: 0.98rem; }
.pj-grid:not(:has(.pj-card:not(.pj-new))) .pj-new-plus { width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem;
  color: var(--brand, #2ee6b6); background: rgba(var(--brand-rgb, 46, 230, 182), 0.1); }
.pj-grid:not(:has(.pj-card:not(.pj-new))) > .ws-empty-hint { display: none; }
#projects-view:has(.pj-new):not(:has(.pj-card:not(.pj-new))) #btn-new-project { display: none !important; }
.pj-card { transition: transform 0.15s, background 0.15s, border-color 0.15s; }

/* Active project: empty Chats tab gets a friendly hint instead of a blank area. */
#project-chats:has(> #project-chat-list:empty)::after {
  content: "No chats in this project yet. Press “New chat” to start one."; display: block; text-align: center;
  padding: 2.5rem 1rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 16px; color: var(--text-secondary); font-size: 0.88rem; }
.ws-tab { transition: background 0.15s, color 0.15s; }

/* ---------- 5. Settings ---------- */
.st-card { transition: border-color 0.15s; }
.st-row .ws-btn, .st-profile .ws-btn { white-space: nowrap; }

/* ---------- 6. Phones (up to 768px) ---------- */
@media (max-width: 768px) {
  /* Pages use the full width with comfortable side margins. */
  .ws-page { padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 3rem !important; }
  .ws-head { margin-bottom: 1.25rem; }
  .ws-head h1 { font-size: 1.6rem; }

  /* Chat */
  #chat-history.chat-history { padding: 1.25rem 0.9rem 0.75rem; }
  #chat-history .chat-message.ai-message { grid-template-columns: 26px minmax(0, 1fr); gap: 0.65rem; }
  #chat-history .ai-avatar { width: 26px; height: 26px; border-radius: 8px; }
  #chat-history .chat-message { font-size: 0.95rem; }
  #chat-history .chat-message.user-message { max-width: 88%; }
  .msg-actions { opacity: 1; }                       /* no hover on phones, so keep Copy visible */
  .chat-composer-wrap { padding: 0.5rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); }
  .chat-footnote { display: none; }
  /* Keep the bar below the phone's status bar (clock, battery). */
  .chat-header { padding: calc(0.6rem + env(safe-area-inset-top)) 0.75rem 0.6rem; gap: 0.35rem; }
  /* Share is hidden on small phones to make room for the Back button. */
  #chat-share-btn { display: none; }
  .chat-header-actions { gap: 0.1rem; }
  .chat-header .chat-icon-btn { width: 34px; height: 34px; }
  .chat-suggestions { width: 100%; max-width: 420px; grid-template-columns: 1fr 1fr !important; }
  .chat-suggestion { font-size: 0.82rem; padding: 0.75rem 0.85rem; }
  .chat-empty h2 { font-size: 1.4rem; }

  /* Code cards: buttons stay on one line, code scrolls sideways instead of being cut off. */
  .chat-message .file-card-header { flex-wrap: nowrap !important; }
  .chat-message .file-card-header > div:first-child > span:nth-child(3) { display: none; }
  .chat-message .file-card-header button { padding: 0.3rem 0.45rem !important; }
  .chat-message .btn-save-kb { display: none !important; }
  .chat-message .file-card-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .chat-message .file-card-body pre { font-size: 0.8rem !important; width: max-content; min-width: 100%; }

  /* Home */
  .home-logo { width: 150px; margin-bottom: 1.5rem; }
  .home-sub { margin-bottom: 1.5rem; }
  .home-actions { gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Phones: icon on top, text below, so the names fit in two columns. */
  .home-action { padding: 0.85rem; gap: 0.55rem; flex-direction: column; align-items: flex-start; }
  .home-action-icon { width: 34px; height: 34px; }
  .home-action-text b { white-space: normal; }

  /* Projects */
  .pj-grid { grid-template-columns: 1fr; }

  /* Active project header: title on its own line, actions below. */
  #active-project-view .ws-head { align-items: center; }
  #active-project-view .ws-head-actions { width: 100%; justify-content: flex-end; }
  .ws-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ws-tabs::-webkit-scrollbar { display: none; }
  .ws-tab { flex: 1; justify-content: center; white-space: nowrap; }

  /* Settings: keep Plan / Credits / Refills side by side instead of three tall rows. */
  .st-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .st-stat { border-top: none !important; border-left: 1px solid rgba(255,255,255,0.06) !important; padding: 0.9rem 0.85rem !important; }
  .st-stat:first-child { border-left: none !important; }
  .st-row { padding: 0.9rem 1rem; }
  .st-profile { flex-wrap: wrap; }

  /* Bigger tap targets in the slide-out menu. */
  .sidebar-item { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
}

/* iPhone: Safari zooms into any text box under 16px and the page stays shifted after sending.
   16px stops the zoom. Only touch screens, so laptops keep the smaller text. */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"],
  input:not([type]), textarea, select,
  #chat-input, #cv-input, #code-input, #vision-input, #genexts-global-input { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-item .icon, .chat-suggestion::after, .pj-card { transition: none !important; }
}