/* Orbsen Hosting - site styles */

/* Orbsen brand palette — matches Orbsen Video / www.orbsen.com */
:root {
    --orbsen-purple-50:  #f0ecff;
    --orbsen-purple-200: #ddc6ff;
    --orbsen-purple-400: #9b65e0;
    --orbsen-purple-600: #593196; /* primary */
    --orbsen-purple-900: #1b0847;

    --bs-primary:     var(--orbsen-purple-600);
    --bs-primary-rgb: 89, 49, 150;
}

/* Bootstrap utility classes bake their RGB at build time, so repaint by hand. */
.bg-primary     { background-color: var(--orbsen-purple-600) !important; }
.text-primary   { color: var(--orbsen-purple-600) !important; }
.border-primary { border-color: var(--orbsen-purple-600) !important; }
.link-primary   { color: var(--orbsen-purple-600) !important; }
.bg-primary-subtle { background-color: var(--orbsen-purple-50) !important; }
.badge.bg-primary { color: #fff !important; }

.btn-primary {
    --bs-btn-bg:                  var(--orbsen-purple-600);
    --bs-btn-border-color:        var(--orbsen-purple-600);
    --bs-btn-hover-bg:            var(--orbsen-purple-900);
    --bs-btn-hover-border-color:  var(--orbsen-purple-900);
    --bs-btn-active-bg:           var(--orbsen-purple-900);
    --bs-btn-active-border-color: var(--orbsen-purple-900);
    --bs-btn-disabled-bg:         var(--orbsen-purple-600);
    --bs-btn-disabled-border-color: var(--orbsen-purple-600);
}
.btn-outline-primary {
    --bs-btn-color:               var(--orbsen-purple-600);
    --bs-btn-border-color:        var(--orbsen-purple-600);
    --bs-btn-hover-bg:            var(--orbsen-purple-600);
    --bs-btn-hover-border-color:  var(--orbsen-purple-600);
    --bs-btn-active-bg:           var(--orbsen-purple-600);
    --bs-btn-active-border-color: var(--orbsen-purple-600);
}

body { font-family: system-ui, sans-serif; }
.navbar-brand { letter-spacing: -0.5px; }

/* Dashed border utility */
.border-dashed {
    border: 2px dashed #dee2e6 !important;
}

/* Site card hover */
.site-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.site-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
}

/* Wizard question cards */
.wizard-q { cursor: pointer; transition: border-color 0.12s; }
.wizard-q.border-primary { border-width: 2px !important; }

/* Start-mode selector cards */
.mode-card {
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.mode-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.mode-card.border-primary { border-width: 2px !important; }

/* Template selector cards */
.template-card {
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
}
.template-option input:checked + .template-card {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle);
}
.template-card:hover {
    border-color: var(--bs-primary);
}

/* Kanban columns */
.kanban-col {
    min-height: 200px;
}

/* Issue conversation thread avatars */
.thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}
.min-w-0 { min-width: 0; }

/* Issue traffic lights — hollow until assessed, one filled after send-to-agent */
.traffic-lights {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.traffic-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    background: transparent;
}
.traffic-light-green { border-color: #198754; }
.traffic-light-amber { border-color: #ffc107; }
.traffic-light-red { border-color: #dc3545; }
.traffic-light-green.lit { background: #198754; border-color: #198754; }
.traffic-light-amber.lit { background: #ffc107; border-color: #ffc107; }
.traffic-light-red.lit { background: #dc3545; border-color: #dc3545; }

/* Subtle LLM brand pill (Claude / Grok) while Factory is running */
.llm-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.22em 0.5em;
    border-radius: 999px;
    vertical-align: middle;
    border: 1px solid transparent;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-secondary-bg, #e9ecef);
}
.llm-pill--claude {
    color: #5b4636;
    background: #f3ebe4;
    border-color: #e5d5c8;
}
.llm-pill--grok {
    color: #1a3a4a;
    background: #e4f1f6;
    border-color: #c5dde8;
}
.llm-pill:empty { display: none; }

/* Planning — history + thinking expander */
.planning-history-card .markdown-body {
    color: #212529;
}
.planning-history-card--factory {
    border-left: 3px solid var(--bs-primary) !important;
}
.planning-recap .markdown-body {
    color: #212529;
}
.planning-thinking-toggle {
    font-size: .8rem;
    color: #6c757d;
}
.planning-thinking-toggle:hover {
    color: var(--bs-primary);
}
.planning-caret {
    transition: transform .15s ease;
}
.planning-thinking-thread {
    max-height: 360px;
    overflow-y: auto;
}
.issue-thinking-activity li + li {
    margin-top: .25rem;
}
.planning-running-inline {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.planning-thinking-msg + .planning-thinking-msg {
    padding-top: .75rem;
    border-top: 1px solid #f0f0f0;
}
.planning-technical-log-inline,
.planning-technical-log pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #495057;
    max-height: 200px;
    overflow-y: auto;
}
.planning-mode-switch .form-check-input {
    width: 2rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}
.planning-mode-label {
    user-select: none;
    white-space: nowrap;
}
.planning-composer textarea {
    resize: vertical;
    min-height: 4.5rem;
}
.planning-composer textarea:focus {
    box-shadow: none;
}

/* Rendered markdown (issue bodies, comments, discussions) */
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body pre { background: #f6f8fa; padding: 12px; border-radius: 6px; overflow: auto; font-size: .85em; }
.markdown-body code { background: var(--orbsen-purple-50); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body img { max-width: 100%; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: .6rem; }
.markdown-body blockquote { border-left: 3px solid var(--orbsen-purple-200); margin: 0 0 1rem; padding-left: 1rem; color: #6c757d; }

/* Nav tabs on site detail - no bottom border on active */
.nav-tabs .nav-link {
    border-radius: 6px 6px 0 0;
    color: #6c757d;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.5rem 1rem;
}
.nav-tabs .nav-link.active {
    color: var(--orbsen-purple-600);
    background: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: #495057;
    background: #f8f9fa;
}

/* Sticky app nav must stay above page chrome (site header, tabs, cards).
   Bootstrap sticky-top is z-index 1020, but a broad .bg-white.border-bottom
   rule used to set z-index:1 on the navbar too — Admin/user dropdowns then
   painted *under* the site Details header. */
.navbar.sticky-top {
    z-index: 1030;
}

/* Site detail header + tabs: sit above following content for the tab border
   blend, but stay below the navbar (not .navbar itself). */
.bg-white.border-bottom:not(.navbar) {
    position: relative;
    z-index: 1;
}

/* Monospace for evidence/commit hashes */
.font-monospace {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
}

/* Code tab: file rows highlight like links */
.code-file-row:hover { background: var(--bs-light, #f8f9fa); }


/* ==== Orbsen Loop brand orb (from the orbsen-loop demo site) ==== */
.orb-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orb-svg {
    width: 30px;
    height: 30px;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(147, 51, 234, .45));
}

.orb-ring {
    transform-origin: 40px 40px;
    animation: orbRingSpin 9s linear infinite;
}

@keyframes orbRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .orb-ring { animation: none; }
}