:root {
      --bg:        #0d1117;
      --bg-subtle: #161b22;
      --bg-inset:  #010409;
      --border:    #30363d;
      --border-subtle: #21262d;
      --fg:        #e6edf3;
      --fg-muted:  #8b949e;
      --fg-subtle: #6e7681;
      --accent:    #58a6ff;
      --success:   #3fb950;
      --danger:    #f85149;
      --warn:      #d29922;
      --done:      #a371f7;
    }
    * { box-sizing: border-box; }
    body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; }
    [x-cloak] { display: none !important; }

    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
    .pulse-dot { animation: pulse-dot 1.2s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

    .git-line::before { content:''; position:absolute; left:7px; top:20px; bottom:-4px; width:1px; background: var(--border); }
    .git-line:last-child::before { display:none; }

    /* Chat panel slide */
    .chat-panel { overflow: hidden; }

    /* Resize handles */
    .resize-x {
      width: 5px; flex-shrink: 0; cursor: col-resize;
      background: transparent;
      transition: background .15s;
      position: relative; z-index: 10;
    }
    .resize-x:hover, .resize-x.dragging { background: var(--accent); }

    .resize-y {
      height: 5px; flex-shrink: 0; cursor: row-resize;
      background: transparent;
      transition: background .15s;
      position: relative; z-index: 10;
    }
    .resize-y:hover, .resize-y.dragging { background: var(--accent); }

    /* Markdown */
    .prose p  { margin: 0.3rem 0; }
    .prose ul, .prose ol { margin: 0.3rem 0; padding-left: 1.4rem; }
    .prose li { margin: 0.15rem 0; }
    .prose code { background: #161b22; color: #79c0ff; padding: 0.15em 0.4em; border-radius: 6px; font-size: 85%; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
    .prose pre  { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 0.5rem 0; }
    .prose pre code { background: none; color: #c9d1d9; padding: 0; font-size: 85%; }
    .prose strong { color: #e6edf3; }
    .prose h1, .prose h2, .prose h3 { color: #e6edf3; margin: 0.6rem 0 0.3rem; font-weight: 600; }
    .prose a { color: #58a6ff; }
    .prose table { width:100%; border-collapse:collapse; font-size: 85%; margin: 0.5rem 0; }
    .prose th { background: #161b22; color: #8b949e; padding: 0.4rem 0.75rem; text-align:left; border: 1px solid #30363d; }
    .prose td { padding: 0.4rem 0.75rem; border: 1px solid #21262d; }

    /* Nav tabs */
    .nav-tab { padding: 8px 0; border-bottom: 2px solid transparent; color: var(--fg-muted); font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s; }
    .nav-tab:hover { color: var(--fg); border-bottom-color: var(--border); }
    .nav-tab.active { color: var(--fg); border-bottom-color: var(--warn); }

    /* Btn styles */
    .btn { display:inline-flex; align-items:center; gap:6px; padding: 5px 12px; font-size: 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--fg); cursor:pointer; transition: background .15s, border-color .15s; }
    .btn:hover { background: #1c2128; border-color: #8b949e; }
    .btn:disabled { opacity: .5; cursor:not-allowed; }
    .btn-primary { background: #238636; border-color: #2ea043; color: #fff; }
    .btn-primary:hover { background: #2ea043; }
    .btn-danger { background: transparent; border-color: var(--border); color: var(--danger); }
    .btn-danger:hover { background: rgba(248,81,73,.1); border-color: var(--danger); }

    /* gh-btn (GitHub-style button) */
    .gh-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 16px; font-size:14px; border-radius:6px; border:1px solid var(--border); background:var(--bg-subtle); color:var(--fg); cursor:pointer; transition:background .15s,border-color .15s; }
    .gh-btn:hover { background:#1c2128; border-color:#8b949e; }
    .gh-btn:disabled { opacity:.5; cursor:not-allowed; }

    /* Input */
    .gh-input { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); padding: 5px 12px; font-size: 14px; outline: none; transition: border-color .15s; }
    .gh-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.1); }
    .gh-input::placeholder { color: var(--fg-subtle); }

    /* Label / badge */
    .badge { display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 2em; font-size: 12px; font-weight: 500; border: 1px solid; }
    .badge-green  { background: rgba(46,160,67,.15);  border-color: rgba(46,160,67,.4);  color: #3fb950; }
    .badge-red    { background: rgba(248,81,73,.15);  border-color: rgba(248,81,73,.4);  color: #f85149; }
    .badge-yellow { background: rgba(210,153,34,.15); border-color: rgba(210,153,34,.4); color: #d29922; }
    .badge-gray   { background: rgba(110,118,129,.1); border-color: rgba(110,118,129,.3); color: #8b949e; }
    .badge-prod   { background: rgba(248,81,73,.1);  border-color: rgba(248,81,73,.3);  color: #f85149; }
    .badge-staging{ background: rgba(210,153,34,.1); border-color: rgba(210,153,34,.3); color: #d29922; }
    .badge-dev    { background: rgba(110,118,129,.08);border-color: rgba(110,118,129,.2);color: #6e7681; }

    /* App rows in sidebar */
    .app-row { border-left: 2px solid transparent; transition: background .1s; }
    .app-row:hover { background: #161b22; }
    .app-row.app-selected { background: #161b22; border-left-color: #f78166; }
    .app-actions { display:none; }
    .app-row:hover .app-actions { display:flex; }

    /* Conversation rows */
    .conv-row { border-left: 2px solid transparent; transition: background .1s; cursor: pointer; }
    .conv-row:hover { background: #161b22; }
    .conv-row:hover .conv-del { display:flex !important; }
    .conv-row.conv-active { background: #161b22; border-left-color: var(--accent); }

    /* Toasts */
    .toast-enter { animation: toast-in .2s ease-out; }
    .toast-leave { animation: toast-out .2s ease-in forwards; }
    @keyframes toast-in  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(8px); } }

    /* Tab group separator */
    .tab-sep { width:1px; background:var(--border-subtle); margin: 8px 2px; align-self:stretch; flex-shrink:0; }

    /* Scale inline form */
    .scale-form { background:var(--bg-inset); border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-top:6px; }

    /* Editable search pill (remplace <input> pour bloquer l'autofill navigateur) */
    .search-pill {
      display: inline-block;
      min-width: 220px;
      padding: 5px 10px;
      font-size: 13px;
      line-height: 1.5;
      white-space: nowrap;
      overflow: hidden;
      cursor: text;
      border-radius: 6px;
    }
    .search-pill:empty::before {
      content: attr(data-placeholder);
      color: var(--fg-muted);
      pointer-events: none;
    }
    .search-pill:focus { outline: none; }
    .search-pill-has-clear { padding-right: 24px; }

    /* Skeleton loader */
    @keyframes shimmer { from { background-position: -400px 0 } to { background-position: 400px 0 } }
    .skeleton {
      background: linear-gradient(90deg, var(--bg-subtle) 25%, #1c2128 50%, var(--bg-subtle) 75%);
      background-size: 800px 100%;
      animation: shimmer 1.4s infinite linear;
      border-radius: 4px;
    }