/* Taleclip — Web Creator → Research tab
 *
 * Lives inside .ws-panel[data-ws-panel="research"]. Visual language matches
 * the other Web Creator panels (.ws-card / .ws-input) but with a distinct
 * accent for the "research / intelligence" mode.
 */

.wr-shell {
    color: var(--ws-text, #e7e9ee);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 24px;
}

.wr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.wr-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 600;
    background: linear-gradient(90deg, #6ea6ff, #b58cff 60%, #ff8cc8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.wr-sub {
    margin: 0;
    color: var(--ws-muted, #9aa0aa);
    font-size: 0.92rem;
    max-width: 760px;
}
.wr-engines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.wr-engine-pill {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wr-engine-pill-on   { color: #76e0a3; border-color: rgba(118,224,163,0.35); }
.wr-engine-pill-off  { color: #ff8b8b; border-color: rgba(255,139,139,0.35); }

/* ── Form ───────────────────────────────────────────────────────── */
.wr-form {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wr-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.wr-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    font-size: 0.84rem;
    color: var(--ws-muted, #9aa0aa);
}
.wr-grow { flex: 1 1 320px; }
.wr-input {
    background: rgba(0,0,0,0.35);
    color: var(--ws-text, #e7e9ee);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.94rem;
    outline: none;
}
.wr-input:focus { border-color: #6ea6ff; }
select.wr-input { padding-right: 28px; }
.wr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--ws-text, #e7e9ee);
    transition: background 0.12s, transform 0.05s;
}
.wr-btn:hover     { background: rgba(255,255,255,0.08); }
.wr-btn:active    { transform: translateY(1px); }
.wr-btn:disabled  { opacity: 0.5; cursor: not-allowed; }
.wr-btn-primary   { background: linear-gradient(180deg, #4f81e8, #3963c4);
                     border-color: #2b50a5; color: #fff; font-weight: 600; }
.wr-btn-primary:hover { background: linear-gradient(180deg, #5b8df0, #4470cf); }
.wr-btn-secondary { background: rgba(120,170,255,0.08); border-color: rgba(120,170,255,0.3); }
.wr-btn-ghost     { background: transparent; }
.wr-btn-sm        { font-size: 0.82rem; padding: 5px 9px; }
.wr-btn-danger    { color: #ff8b8b; border-color: rgba(255,139,139,0.3); }
.wr-error {
    color: #ff8b8b;
    background: rgba(255,139,139,0.08);
    border: 1px solid rgba(255,139,139,0.25);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.86rem;
}

/* ── Status / progress ladder ───────────────────────────────────── */
.wr-status {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px;
}
.wr-status-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}
.wr-status-title { font-weight: 600; font-size: 1rem; }
.wr-status-engine, .wr-status-pct {
    font-size: 0.82rem;
    color: var(--ws-muted, #9aa0aa);
    margin-left: auto;
}
.wr-status-pct { margin-left: 0; font-variant-numeric: tabular-nums; }
.wr-progress {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.wr-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6ea6ff, #b58cff);
    transition: width 0.35s ease;
}
.wr-phase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wr-phase {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.wr-phase-icon { width: 18px; text-align: center; }
.wr-phase-label { flex: 1; }
.wr-phase-meta {
    color: var(--ws-muted, #9aa0aa);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.wr-phase-pending   { color: rgba(255,255,255,0.4); }
.wr-phase-running   { color: #6ea6ff; background: rgba(110,166,255,0.06); }
.wr-phase-running .wr-phase-icon { animation: wr-spin 1.4s linear infinite; }
.wr-phase-completed { color: #76e0a3; }
.wr-phase-failed    { color: #ff8b8b; background: rgba(255,139,139,0.05); }
@keyframes wr-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Results ────────────────────────────────────────────────────── */
.wr-results {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 0 14px 14px;
}
.wr-results-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wr-rtab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ws-muted, #9aa0aa);
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.86rem;
}
.wr-rtab:hover  { background: rgba(255,255,255,0.04); color: var(--ws-text, #e7e9ee); }
.wr-rtab.active {
    background: rgba(110,166,255,0.12);
    border-color: rgba(110,166,255,0.35);
    color: #e7e9ee;
}
.wr-rpanel { display: none; padding: 12px 0; }
.wr-rpanel.active { display: block; }

.wr-empty {
    color: var(--ws-muted, #9aa0aa);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* ── Tables / lists ─────────────────────────────────────────────── */
.wr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.wr-table th, .wr-table td {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.wr-table th {
    width: 180px;
    color: var(--ws-muted, #9aa0aa);
    font-weight: 500;
}

.wr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.wr-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px;
    font-size: 0.88rem;
}
.wr-card-confirmed { border-color: rgba(118,224,163,0.4); }
.wr-card-likely    { border-color: rgba(110,166,255,0.4); }
.wr-card-possible  { border-color: rgba(255,200,120,0.35); }
.wr-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}
.wr-card-title { font-weight: 600; }
.wr-card-pill {
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wr-card-pill-rec {
    background: rgba(118,224,163,0.15);
    color: #76e0a3;
}
.wr-card-cat {
    font-size: 0.76rem;
    color: var(--ws-muted, #9aa0aa);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.wr-card-body > div { margin-bottom: 4px; }
.wr-card-evidence {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--ws-muted, #9aa0aa);
}

/* ── Stack visualizer ───────────────────────────────────────────── */
.wr-stack-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wr-stack-row:last-child { border-bottom: none; }
.wr-stack-label {
    min-width: 160px;
    color: var(--ws-muted, #9aa0aa);
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    padding-top: 4px;
}
.wr-stack-buckets {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wr-stack-bucket {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.wr-stack-bucket-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
}
.wr-stack-confirmed .wr-stack-bucket-name { background: rgba(118,224,163,0.18); color: #76e0a3; }
.wr-stack-likely    .wr-stack-bucket-name { background: rgba(110,166,255,0.18); color: #6ea6ff; }
.wr-stack-possible  .wr-stack-bucket-name { background: rgba(255,200,120,0.18); color: #ffc878; }
.wr-chip {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.wr-stack-notes {
    margin-top: 10px;
    color: var(--ws-muted, #9aa0aa);
    font-size: 0.86rem;
}

/* ── Replacements / candidates ──────────────────────────────────── */
.wr-cands { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.wr-cand {
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    padding: 6px 8px;
}
.wr-cand-name { font-weight: 500; }
.wr-cand-kind, .wr-cand-vram, .wr-cand-bw {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    margin-left: 4px;
}
.wr-bw-yes      { background: rgba(118,224,163,0.18); color: #76e0a3; }
.wr-bw-likely   { background: rgba(110,166,255,0.18); color: #6ea6ff; }
.wr-bw-unknown  { background: rgba(255,200,120,0.18); color: #ffc878; }
.wr-bw-no       { background: rgba(255,139,139,0.18); color: #ff8b8b; }
.wr-cand-rat    { color: var(--ws-muted, #9aa0aa); font-size: 0.84rem; margin-top: 2px; }
.wr-cand-lic    { font-size: 0.74rem; color: var(--ws-muted, #9aa0aa); margin-top: 2px; }
.wr-cand-fb     { margin-top: 8px; font-size: 0.82rem; color: var(--ws-muted, #9aa0aa); }

/* ── Architecture flow ──────────────────────────────────────────── */
.wr-flow-steps {
    margin: 6px 0 0 18px;
    padding: 0;
    font-size: 0.86rem;
    color: var(--ws-text, #e7e9ee);
}
.wr-warn {
    margin-top: 12px;
    background: rgba(255,200,120,0.08);
    border: 1px solid rgba(255,200,120,0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.86rem;
}
.wr-warn ul { margin: 4px 0 0 18px; padding: 0; }

/* ── Strategy / phase plan ──────────────────────────────────────── */
.wr-list {
    margin: 6px 0 12px 18px;
    padding: 0;
    font-size: 0.9rem;
}
.wr-list li { margin-bottom: 6px; }
.wr-phase-plan {
    margin: 0 0 0 18px;
    padding: 0;
    font-size: 0.9rem;
}
.wr-phase-plan > li {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid #6ea6ff;
}
.wr-phase-plan-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.wr-est {
    font-size: 0.74rem;
    background: rgba(110,166,255,0.18);
    color: #6ea6ff;
    padding: 1px 6px;
    border-radius: 4px;
}

/* ── Prompt panel ───────────────────────────────────────────────── */
.wr-prompt-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}
.wr-prompt-hint {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--ws-muted, #9aa0aa);
}
.wr-prompt-hint code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 4px;
}
.wr-prompt-output {
    background: #0d1117;
    color: #e7e9ee;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 560px;
    overflow: auto;
}

/* ── Saved sessions ─────────────────────────────────────────────── */
.wr-history {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 12px 14px;
}
.wr-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.wr-history-head h3 { margin: 0; font-size: 1rem; }
.wr-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wr-hist {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    border-left: 3px solid rgba(255,255,255,0.08);
}
.wr-hist-completed { border-left-color: #76e0a3; }
.wr-hist-running   { border-left-color: #6ea6ff; }
.wr-hist-failed    { border-left-color: #ff8b8b; }
.wr-hist-cancelled { border-left-color: #ffc878; }
.wr-hist-main { flex: 1; min-width: 0; }
.wr-hist-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-hist-meta {
    font-size: 0.76rem;
    color: var(--ws-muted, #9aa0aa);
    margin-top: 2px;
}
.wr-hist-status { text-transform: uppercase; }
.wr-hist-err { color: #ff8b8b; }
.wr-hist-actions { display: flex; gap: 4px; }

/* ── Log ───────────────────────────────────────────────────────── */
.wr-log-wrap details {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 8px 12px;
}
.wr-log-wrap summary {
    cursor: pointer;
    color: var(--ws-muted, #9aa0aa);
    font-size: 0.86rem;
}
.wr-log {
    margin: 8px 0 0;
    max-height: 240px;
    overflow: auto;
    background: #0d1117;
    color: #b6c1cf;
    padding: 8px;
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* ── Light-mode overrides (Taleclip supports both) ─────────────── */
body.light-mode .wr-shell,
body[data-theme="light"] .wr-shell {
    color: #2c333d;
}
body.light-mode .wr-input,
body[data-theme="light"] .wr-input {
    background: #fff;
    color: #2c333d;
    border-color: #d6dae0;
}
body.light-mode .wr-prompt-output,
body.light-mode .wr-log,
body[data-theme="light"] .wr-prompt-output,
body[data-theme="light"] .wr-log {
    background: #f5f7fa;
    color: #2c333d;
    border-color: #d6dae0;
}