@import url('./layout.css');

/* ── Shell ──────────────────────────────── */
.shell{display:grid;grid-template-rows:52px 1fr;height:100vh}

header{
  display:flex;align-items:center;padding:0 20px;gap:16px;
  border-bottom:1px solid var(--border);background:var(--bg);z-index:10;
}
header h1{
  font-family:var(--display);font-weight:900;font-size:17px;
  background:linear-gradient(135deg,#a070f0,#f0a050);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:1px;
}

nav{display:flex;gap:2px;margin-left:12px}
nav button{
  font-family:var(--sans);font-size:12px;font-weight:500;
  padding:5px 12px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:var(--radius);transition:.12s;
}
nav button:hover{color:var(--text);background:var(--card2)}
nav button.active{color:var(--text);background:var(--accentbg)}

.stats{
  margin-left:auto;display:flex;gap:14px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.stats b{color:var(--text);font-weight:500}

/* ── Panels ─────────────────────────────── */
.panels{position:relative;overflow:hidden}
.panel{position:absolute;inset:0;padding:20px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .2s}
.panel.active{opacity:1;pointer-events:auto}
#panel-chat{padding:0;overflow:hidden}
#panel-eval{padding:0;overflow:hidden}
#panel-prompts{padding:0;overflow:hidden}
#panel-logs{padding:0;overflow:hidden;padding-top:16px}
.prompts-panel{display:flex;flex-direction:row;height:100%;width:100%;min-height:0;overflow:hidden}

/* ── CHAT panel ─────────────────────────── */
.chat-layout{
  display:grid;grid-template-columns:1fr;gap:0;
  height:100%;margin-left:280px;
}

.avatar-col{
  position:fixed;left:0;top:52px;width:280px;height:calc(100vh - 52px);
  display:flex;flex-direction:column;align-items:center;
  padding:16px 12px;border-right:1px solid var(--border);
  overflow:hidden;z-index:5;
}
.avatar-box{
  width:256px;height:341px;
  border:2px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--bg2);
  box-shadow:0 4px 30px #10083060;
}
.avatar-box canvas{display:block;width:256px;height:341px}

.avatar-state{
  margin-top:6px;font-family:var(--mono);font-size:9px;
  color:var(--dim);letter-spacing:1px;text-transform:uppercase;
}

.expr-btns{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:10px;width:256px;
}
.expr-btn{
  font-family:var(--mono);font-size:9px;
  padding:4px 8px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);
  cursor:pointer;border-radius:4px;transition:.1s;
}
.expr-btn:hover{border-color:var(--focus);color:var(--text)}
.expr-btn.on{border-color:var(--accent);color:var(--accent2);background:var(--accentbg)}

.options-separator{border-top:1px solid var(--border);margin:10px 0;width:256px}

.options-panel{width:256px;display:flex;flex-direction:column;gap:10px}
.opt-group{display:flex;flex-direction:column;gap:4px}
.opt-label{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.opt-label b{color:var(--accent2);font-weight:500;margin-left:auto;white-space:nowrap}
.opt-label b{color:var(--text);font-weight:500;font-size:10px}
.opt-slider{width:100%;height:4px;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;background:var(--card);accent-color:var(--accent)}
.opt-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:1px solid var(--accent2)}
.opt-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:1px solid var(--accent2)}

.opt-btn{
  font-family:var(--sans);font-size:10px;font-weight:500;
  padding:6px 10px;border:1px solid var(--border);border-radius:4px;
  background:var(--card);color:var(--text);cursor:pointer;transition:.1s;
}
.opt-btn:hover{border-color:var(--focus);background:var(--card2)}
.opt-btn-danger{border-color:var(--red);color:var(--redtext)}
.opt-btn-danger:hover{background:var(--redbg)}
.opt-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.opt-btn-primary:hover{background:var(--accent2);border-color:var(--accent2)}

.cost-display{font-family:var(--mono);font-size:9px;color:var(--muted);padding:6px;background:var(--card);border-radius:4px;margin-top:4px}
.cost-display b{color:var(--accent2)}
.opt-select{font-family:var(--sans);font-size:10px;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:var(--card);color:var(--text);outline:none;accent-color:var(--accent)}
.opt-select:focus{border-color:var(--focus)}
.opt-select option:disabled{color:var(--muted);background:var(--bg2)}

.chat-col{display:flex;flex-direction:column;height:calc(100vh - 52px)}

.messages{
  flex:1;overflow-y:auto;padding:16px 20px;
  display:flex;flex-direction:column;gap:24px;
}

.msg{display:flex;flex-direction:column;gap:4px}
.msg.user{align-items:flex-end}
.msg.assistant{align-items:flex-start}
.msg+.msg{margin-top:8px}
.msg-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);display:flex;align-items:center;gap:8px;padding:0 4px}
.msg-role.user{color:var(--text)}
.msg-role.assistant{color:var(--accent2)}
.msg-role-tokens{font-size:9px;font-weight:400;color:var(--muted);margin-left:auto}
.msg-bubble{
  max-width:80%;padding:12px 16px;border-radius:12px;
  display:flex;flex-direction:column;gap:4px;
}
.msg.user .msg-bubble{background:rgba(200,200,220,0.15);border:1px solid rgba(200,200,220,0.25)}
.msg.assistant .msg-bubble{background:rgba(100,150,220,0.12);border:1px solid rgba(100,150,220,0.2)}
.msg-body{font-size:13px;line-height:1.7;word-wrap:break-word;color:#ece6f5}
.msg-body code{background:var(--bg);padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:11px;color:var(--accent2)}
.msg-body pre{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:10px;overflow-x:auto;margin:6px 0}
.msg-body pre code{background:none;padding:0;color:inherit}
.msg-body ul,.msg-body ol{margin:6px 0 6px 20px}
.msg-body li{margin:2px 0}
.msg-body strong{color:var(--accent2);font-weight:600}
.msg-body em{color:#b8aed0;font-style:italic}
.msg-body a{color:var(--accent2);text-decoration:underline;text-decoration-color:rgba(160,128,240,0.4);text-underline-offset:2px}
.msg-body a:hover{text-decoration-color:var(--accent2)}
.msg-bubble .msg-sources{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.msg-sources{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.source-tag{
  font-family:var(--mono);font-size:10px;padding:2px 7px;
  background:var(--accentbg);color:var(--accent2);border-radius:4px;
}
.source-tag-video{background:rgba(99,179,237,0.15);color:#63B3ED;border:1px solid rgba(99,179,237,0.4)}
.source-tag-video::before{content:"▶ ";opacity:0.7;margin-right:2px}
.source-tag-video a{color:inherit;text-decoration:none;cursor:pointer}
.source-tag-video a:hover{text-decoration:underline}
.source-tag-pdf{background:rgba(237,137,54,0.15);color:#ED8936;border:1px solid rgba(237,137,54,0.4)}
.source-tag-pdf::before{content:"📄 ";margin-right:2px}

.chat-input-area{padding:12px 20px;border-top:1px solid var(--border);background:var(--bg)}
.chat-row{display:flex;gap:6px}
.chat-row input{
  flex:1;font-family:var(--sans);font-size:13px;padding:10px 14px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);color:var(--text);outline:none;transition:.15s;
}
.chat-row input:focus{border-color:var(--focus)}
.chat-row input::placeholder{color:var(--dim)}
.chat-row button{
  font-family:var(--sans);font-weight:600;font-size:12px;
  padding:10px 18px;border:none;border-radius:var(--radius);
  background:var(--accent);color:#fff;cursor:pointer;transition:.12s;white-space:nowrap;
}
.chat-row button:hover{opacity:.85}
.chat-row button:disabled{opacity:.4;cursor:not-allowed}

.empty-state{text-align:center;padding:40px 20px;color:var(--dim);font-size:13px}

/* ── DOCS panel ─────────────────────────── */
.docs-panel{max-width:900px;margin:0 auto}

/* Index tasks history panel */
.index-tasks-panel{margin-top:20px;border-top:1px solid var(--border);padding-top:14px}
.index-tasks-header{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.task-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.task-row:last-child{border-bottom:none}
.task-icon{font-size:15px;flex-shrink:0;width:18px;text-align:center}
.task-filename{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.task-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;min-width:90px}
.task-date{font-size:11px;color:var(--muted)}
.task-by{font-size:11px;color:var(--muted)}
.task-bar{width:80px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.task-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
.task-pending .task-icon::after{content:"⏳"}
.task-running .task-bar-fill{background:var(--accent2)}
.task-done .task-bar-fill{background:#22c55e}
.task-error .task-bar-fill{background:#ef4444}
.task-error .task-filename{color:#ef4444}

.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:28px;text-align:center;margin-bottom:16px;
  transition:.2s;cursor:pointer;
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accentbg)}
.upload-zone .ul{font-size:14px;font-weight:500}
.upload-zone p{color:var(--muted);font-size:12px;margin-top:4px}

.docs-toolbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.ctx-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ctx-toggle input{accent-color:var(--accent);width:15px;height:15px}

.chunk-options{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chunk-select, .chunk-input{font-family:var(--sans);font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:var(--card);color:var(--text);outline:none}
.chunk-select:focus, .chunk-input:focus{border-color:var(--focus)}
.chunk-label{font-size:11px;color:var(--muted)}

.chunk-help{font-size:11px;color:var(--muted);line-height:1.5;margin:8px 0;padding:8px;background:var(--card);border-left:2px solid var(--accent);border-radius:3px}

.tbtn{
  font-family:var(--sans);font-size:12px;font-weight:500;
  padding:7px 14px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--text);cursor:pointer;transition:.12s;
  display:inline-flex;align-items:center;gap:5px;
}
.tbtn:hover{border-color:var(--focus);background:var(--card2)}
.tbtn-danger{border-color:var(--red);color:var(--redtext)}
.tbtn-danger:hover{background:var(--redbg)}
.tbtn-primary{border-color:var(--accent);color:var(--accent2)}
.tbtn-primary:hover{background:var(--accentbg);border-color:var(--accent)}

table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
td{padding:8px 10px;border-bottom:1px solid var(--border)}
tr:hover td{background:var(--card2)}
.mono{font-family:var(--mono);font-size:11px}

.badge{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:500}
.badge-green{background:var(--greenbg);color:var(--greentext)}
.badge-amber{background:var(--amberbg);color:var(--ambertext)}

/* ── PIPELINE panel ─────────────────────── */
.pipeline-panel{max-width:860px;margin:0 auto}
.pipe-section{margin-bottom:28px}
.pipe-section h2{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pipe-num{
  font-family:var(--mono);font-size:11px;font-weight:500;
  background:var(--accentbg);color:var(--accent2);
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.step-flow{display:flex;align-items:center;gap:5px;margin:10px 0;flex-wrap:wrap}
.flow-box{font-family:var(--mono);font-size:11px;padding:5px 10px;background:var(--card);border:1px solid var(--border);border-radius:6px}
.flow-arrow{color:var(--dim);font-size:13px}

.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:6px}
.step-card h3{font-size:13px;font-weight:500;margin-bottom:5px}
.step-card p,.step-card li{font-size:12px;color:var(--muted);line-height:1.6}
.step-card code{font-family:var(--mono);font-size:11px;background:var(--bg);padding:1px 5px;border-radius:3px;color:var(--accent2)}
.step-card ul{margin:4px 0 0 16px;display:flex;flex-direction:column;gap:2px}

.code-block{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:10px 14px;font-family:var(--mono);font-size:11px;
  line-height:1.7;overflow-x:auto;color:var(--muted);margin-top:6px;
}

/* ── Toast ──────────────────────────────── */
.toast-box{position:fixed;bottom:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:6px}
.toast{
  font-family:var(--sans);font-size:12px;padding:8px 14px;
  border-radius:6px;background:var(--card);border:1px solid var(--border);
  color:var(--text);animation:slideIn .2s ease-out;max-width:340px;
}
.toast.error{border-color:var(--red);background:var(--redbg)}
.toast.success{border-color:var(--green);background:var(--greenbg)}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .5s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── EVALUATEUR panel ─────────────────────── */
.eval-panel{display:flex;flex-direction:column;height:100%;width:100%;min-height:0}
.eval-header{padding:20px;border-bottom:1px solid var(--border);flex-shrink:0}
.eval-header h2{font-size:18px;margin-bottom:12px}
.eval-tabs{display:flex;gap:2px}
.eval-tab{font-size:12px;padding:6px 12px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);cursor:pointer;
  border-radius:var(--radius);transition:.12s}
.eval-tab:hover{background:var(--card2);color:var(--text)}
.eval-tab.active{background:var(--accentbg);border-color:var(--accent);color:var(--accent2)}

.eval-view{display:none;padding:20px;flex:1;overflow-y:auto;min-height:0;min-width:0}
.eval-view.active{display:block;min-height:0}
.eval-view[data-view="exercises"]{padding:0;overflow:hidden}
.eval-view[data-view="exercises"].active{display:flex;flex-direction:row;min-height:0}
.eval-view[data-view="learners"]{padding:0;overflow:hidden}
.eval-view[data-view="learners"].active{display:flex;flex-direction:row;min-height:0}

.photos-filters{display:flex;gap:10px;margin:20px 0}
.photos-filters select,.photos-filters input{
  padding:8px 12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:var(--radius)}

.photos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;margin-top:20px}

.photo-card{
  background:var(--card2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:.2s;
  cursor:pointer}
.photo-card:hover{border-color:var(--accent);box-shadow:0 0 12px rgba(160,96,240,.3)}
.photo-card img{width:100%;height:100px;object-fit:cover;display:block}
.photo-card-info{padding:8px;font-size:11px}
.photo-card-info-type{color:var(--accent2);font-weight:500}
.photo-card-info-tags{color:var(--dim);font-size:9px;margin-top:4px}

/* ── MODAL ────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;
  align-items:center;justify-content:center;z-index:100}
.modal-content{background:var(--card2);border:1px solid var(--border);
  border-radius:var(--radius);max-width:500px;width:90%;max-height:90vh;
  overflow-y:auto}
.modal-header{padding:16px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:14px;margin:0}
.modal-close{border:none;background:transparent;color:var(--text);
  cursor:pointer;font-size:16px;padding:4px;transition:.1s}
.modal-close:hover{color:var(--accent2)}
.modal-body{padding:16px}

/* ── EXERCISES panel ──────────────────────── */
.ex-panel{border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card2);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.ex-list{min-width:0;width:280px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.ex-editor{min-width:0;overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:0}
.ex-header{padding:12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.ex-header h3{font-size:13px;margin:0}
.ex-header h4{font-size:12px;margin:0;color:var(--muted)}

.ex-items{flex:1;overflow-y:auto;min-height:0}

#ex-editor-form{display:flex;flex-direction:column;padding:0;overflow:hidden;flex:1}
#ex-empty-state{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.ex-item{padding:12px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s;font-size:12px}
.ex-item:hover{background:var(--card)}
.ex-item.active{background:var(--accentbg);border-left:3px solid var(--accent)}
.ex-item-title{font-weight:500;color:var(--text)}
.ex-item-diff{font-size:10px;color:var(--muted);margin-top:2px}

.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:11px;font-weight:500;margin-bottom:4px;color:var(--text)}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:8px;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:4px;
  font-family:inherit;font-size:12px}
.form-group textarea{resize:vertical}

.questions-container{display:flex;flex-direction:column;gap:8px}
.question-item{padding:12px;border:1px solid var(--border);
  background:var(--card);border-radius:4px}
.question-item-title{font-size:11px;font-weight:500;margin-bottom:6px;color:var(--accent2)}
.question-item-text{font-size:11px;color:var(--text);margin-bottom:6px;line-height:1.4}
.question-item-keywords{font-size:9px;color:var(--dim)}
.question-item-actions{display:flex;gap:4px;margin-top:6px}
.question-item-actions button{flex:1;padding:4px 8px;font-size:9px}

/* ── PLAYGROUND ────────────────────────── */
.pg-setup{max-width:420px;margin:40px auto;padding:24px}
.pg-setup h3{margin-bottom:4px}

.pg-layout{display:flex;flex-direction:row;height:100%;min-height:0}
.pg-chat-col{flex:1;display:flex;flex-direction:column;min-width:0}
.pg-metrics-col{width:220px;flex-shrink:0;padding:12px;border-left:1px solid var(--border);
  overflow-y:auto;font-size:12px}
.pg-metrics-col h4{font-size:11px;margin-bottom:8px;color:var(--muted)}
.pg-metric{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border)}
.pg-metric b{color:var(--accent2)}

.pg-header{display:flex;align-items:center;gap:12px;padding:8px 16px;
  border-bottom:1px solid var(--border);flex-shrink:0;font-size:13px}

.pg-q-item{padding:6px 8px;border-radius:4px;margin-bottom:4px;font-size:11px;
  background:var(--card);border:1px solid var(--border)}
.pg-q-item.done{border-color:var(--green);opacity:.8}
.pg-q-item.active{border-color:var(--accent);background:var(--accentbg)}
.pg-q-item.pending{opacity:.5}
.pg-q-item .pg-q-score{float:right;font-weight:600}

/* Playground: kill outer scroll + padding like exercises view */
.eval-view[data-view="playground"]{padding:0;overflow:hidden}
.eval-view[data-view="playground"].active{display:flex;flex-direction:column;min-height:0}
#pg-setup,#pg-results{overflow-y:auto;padding:24px;flex:1}
#pg-active{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#pg-active .pg-layout{flex:1;min-height:0}
#pg-active .messages{flex:1;overflow-y:auto;min-height:0}

/* Results */
.pg-results-header{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.pg-results-summary{padding:16px;display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.pg-summary-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center;min-width:120px}
.pg-summary-card .pg-summary-value{font-size:24px;font-weight:700;color:var(--accent2)}
.pg-summary-card .pg-summary-label{font-size:11px;color:var(--muted);margin-top:4px}
.pg-results-questions{padding:16px}
.pg-result-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px}
.pg-result-card h4{font-size:13px;margin-bottom:8px;display:flex;justify-content:space-between}
.pg-result-card h4 .score{color:var(--accent2);font-size:15px}
.pg-kw-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.pg-kw{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:500}
.pg-kw.found{background:rgba(64,184,104,.15);color:var(--green);border:1px solid var(--green)}
.pg-kw.missing{background:rgba(208,72,72,.15);color:var(--red);border:1px solid var(--red)}
.pg-result-meta{font-size:11px;color:var(--muted)}
.pg-results-analysis{padding:16px;border-top:1px solid var(--border)}
.pg-results-analysis h4{margin-bottom:8px}
.pg-analysis-text{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;
  font-size:12px;line-height:1.6;color:var(--text);white-space:pre-wrap}
.autonomy-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}
.autonomy-badge.autonomous{background:rgba(64,184,104,.15);color:var(--green)}
.autonomy-badge.progressing{background:rgba(208,160,48,.15);color:var(--amber)}
.autonomy-badge.needs_help{background:rgba(208,72,72,.15);color:var(--red)}

/* Question inline editor */
.question-edit-form{padding:12px;border-top:1px solid var(--border);margin-top:8px}
.question-edit-form .form-group{margin-bottom:8px}
.question-edit-form textarea{min-height:50px}
.question-edit-actions{display:flex;gap:8px;margin-top:8px}

/* ── PROMPTS ────────────────────────────── */
.prompt-tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.prompt-tag.chat_system{background:rgba(128,96,208,.2);color:var(--accent2)}
.prompt-tag.quiz_evaluator{background:rgba(64,184,104,.15);color:var(--greentext)}
.prompt-tag.quiz_analysis{background:rgba(208,160,48,.15);color:var(--ambertext)}

.prompt-list-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s;font-size:12px}
.prompt-list-item:hover{background:var(--card)}
.prompt-list-item.active{background:var(--accentbg);border-left:3px solid var(--accent)}

.prompt-picker-card{padding:10px 12px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:.15s;background:var(--card)}
.prompt-picker-card:hover{border-color:var(--accent);background:var(--accentbg)}
.prompt-picker-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.eval-view[data-view="prompts"]{padding:0;overflow:hidden}
.eval-view[data-view="prompts"].active{display:flex;flex-direction:row;min-height:0}

/* Timeline apprenants */
.lr-tl-chart{width:100%;overflow:visible;display:block;cursor:default}
.lr-tl-dot-hit{cursor:pointer}
.lr-tl-dot-hit:hover circle{filter:brightness(1.3);r:7}

/* Drawer conversation */
.dr-conv-bubble{padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.5;max-width:88%;margin-bottom:6px;word-break:break-word}
.dr-conv-user{background:var(--accentbg);color:var(--accent2);align-self:flex-end;margin-left:auto;border-bottom-right-radius:3px}
.dr-conv-assistant{background:var(--card);color:var(--fg);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:3px}
#lr-drawer{display:none}
#prompt-editor-form{display:flex;flex-direction:column;padding:0;overflow:hidden;flex:1}
#prompt-empty-state{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}

/* ── LOGS PANEL ─────────────────────────── */
#panel-logs{display:flex}
#panel-logs .logs-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;padding:16px}
.logs-layout{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;padding:16px}

.logs-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.logs-header h2{font-size:16px;font-weight:600;margin:0}
.logs-controls{display:flex;gap:8px;align-items:center}
.logs-controls button,.logs-controls select{
  padding:6px 12px;font-size:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:4px;cursor:pointer;
  transition:.1s
}
.logs-controls button:hover,.logs-controls select:hover{border-color:var(--accent);background:var(--accentbg)}
.btn-refresh{font-size:13px}

.logs-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:10px 0 14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.lf-group{display:flex;flex-direction:column;gap:4px}
.lf-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.lf-row{display:flex;align-items:center;gap:6px}
.lf-sep{color:var(--dim);font-size:11px}
.logs-filters input,.logs-filters select{
  font-family:var(--sans);font-size:12px;padding:5px 8px;
  border:1px solid var(--border);border-radius:4px;
  background:var(--card);color:var(--text);outline:none;transition:.1s
}
.logs-filters input:focus,.logs-filters select:focus{border-color:var(--focus)}
.logs-filters input[type="datetime-local"]{color-scheme:dark;width:160px}
.logs-filters input[type="text"]{width:120px}
.lf-actions{display:flex;gap:6px;align-items:flex-end;padding-bottom:1px}
.lf-btn-apply{
  padding:5px 14px;font-size:12px;font-family:var(--sans);cursor:pointer;
  border:1px solid var(--accent);border-radius:4px;
  background:var(--accentbg);color:var(--accent2);transition:.1s
}
.lf-btn-apply:hover{background:var(--accent);color:#fff}
.lf-btn-reset{
  padding:5px 10px;font-size:12px;font-family:var(--sans);cursor:pointer;
  border:1px solid var(--border);border-radius:4px;
  background:var(--card);color:var(--muted);transition:.1s
}
.lf-btn-reset:hover{border-color:var(--accent);color:var(--text)}

.logs-chart-wrapper{padding:12px 0 4px;border-top:1px solid var(--border);margin-top:12px}
.logs-table th[onclick]:hover{color:var(--accent2);background:var(--accentbg)}
.btn-toggle-off{opacity:.6}
.btn-toggle-on{opacity:1;background:var(--accentbg);border-color:var(--accent)}

.logs-summary{display:flex;gap:12px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.summary-card{
  flex:0 0 auto;padding:12px 16px;border:1px solid var(--border);
  background:var(--card);border-radius:6px;min-width:140px;text-align:center
}
.summary-label{font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase}
.summary-value{font-size:16px;font-weight:600;color:var(--accent2);font-family:var(--mono)}

.logs-content{flex:1;overflow:hidden;display:flex;flex-direction:column}
.logs-split{display:flex;flex:1;gap:12px;overflow:hidden}
.logs-split-left{flex:2;overflow:auto;min-width:0}
.logs-split-right{flex:1;overflow:auto;min-width:240px;border-left:1px solid var(--border);padding-left:12px}
.logs-table-wrapper{flex:1;overflow:auto;border:1px solid var(--border);border-radius:6px;background:var(--card)}

.logs-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--mono)}
.logs-table thead{position:sticky;top:0;background:var(--bg2);border-bottom:2px solid var(--border)}
.logs-table th{padding:8px 12px;text-align:left;font-weight:500;color:var(--muted);border-right:1px solid var(--border)}
.logs-table th:last-child{border-right:none}
.logs-table td{padding:8px 12px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.logs-table td:last-child{border-right:none}
.logs-table tbody tr:hover{background:rgba(128,96,208,.05)}
.logs-table td:first-child{color:var(--accent2);font-weight:500}
.logs-table td:nth-child(5){color:var(--greentext);font-weight:600}
.logs-table td:nth-child(6){color:var(--muted);font-size:11px}

/* ── HISTORY PANEL ──────────────────────── */
#panel-history{display:flex;flex-direction:column;overflow:hidden}
.history-layout{display:grid;grid-template-columns:1fr 1fr 2fr;height:100%;gap:0;overflow:hidden}
.history-col{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden}
.history-col:last-child{border-right:none}

.history-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.history-header h3{font-size:13px;font-weight:600;margin:0 0 4px 0}
.history-header span{font-size:10px;color:var(--muted);display:block}

.history-items{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.history-item{padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:.1s;font-size:12px}
.history-item:hover{background:var(--card2);border-color:var(--focus)}
.history-item.active{background:var(--accentbg);border-color:var(--accent);color:var(--accent2)}
.history-item-title{font-weight:500;margin-bottom:2px}
.history-item-meta{font-size:10px;color:var(--muted);line-height:1.4}
.history-item.active .history-item-meta{color:var(--accent2);opacity:.8}

.history-msg{padding:8px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.history-msg-role{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.history-msg-role.user{color:var(--accent2)}
.history-msg-content{font-size:12px;line-height:1.5;color:var(--text);word-break:break-word}
.history-msg-meta{font-size:9px;color:var(--muted);margin-top:4px}
.empty-state{padding:16px;text-align:center;color:var(--muted);font-size:12px}

/* ── USERS PANEL ─────────────────────────── */
.users-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.users-header h2{margin:0}
.users-table{width:100%;border-collapse:collapse;font-size:13px}
.users-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.users-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.users-table tr:last-child td{border-bottom:none}
.user-row-inactive td{opacity:.5}
.user-name{font-weight:500}
.user-you{font-size:11px;color:var(--muted)}
.user-badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600}
.user-badge.active{background:#22c55e22;color:#22c55e}
.user-badge.inactive{background:#ef444422;color:#ef4444}
.user-badge.role-admin{background:#7c3aed22;color:#7c3aed}
.user-badge.role-student{background:var(--accentbg);color:var(--accent)}
.user-actions{display:flex;gap:6px}
.users-loading{text-align:center;color:var(--muted);padding:24px}
.btn-sm{padding:3px 10px;font-size:12px;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary);cursor:pointer;color:var(--text)}
.btn-sm:hover{background:var(--accentbg);border-color:var(--accent)}
.btn-sm.btn-danger{border-color:#ef444466;color:#ef4444}
.btn-sm.btn-danger:hover{background:#ef444422}
.btn-primary{padding:7px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:13px}
.btn-primary:hover{opacity:.85}
.btn-secondary{padding:7px 16px;background:var(--bg-secondary);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:340px;max-width:480px;width:100%}
.modal-box h3{margin:0 0 16px}
.modal-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.modal-field label{font-size:12px;color:var(--muted);font-weight:600}
.modal-field input,.modal-field select{padding:7px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-secondary);color:var(--text);font-size:13px}
.modal-field input[type=checkbox]{width:auto;align-self:flex-start;margin-top:4px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

.roles-checkboxes{display:flex;gap:16px;flex-wrap:wrap;padding:4px 0}
.role-check{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none}
.role-check input[type=checkbox]{width:14px;height:14px;cursor:pointer}

.pg-avatar-col{flex-shrink:0;width:120px;display:flex;align-items:flex-start;padding-top:8px}
.pg-avatar-col canvas{width:120px;height:160px;border-radius:var(--radius);object-fit:cover}

/* ── ANALYTICS ─────────────────────────────────────────────────── */
.analytics-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--border);
}
.analytics-tab {
  padding: 6px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition: color 0.15s, border-color 0.15s;
}
.analytics-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.analytics-summary {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}
.analytics-summary-item { display: flex; flex-direction: column; }
.analytics-summary-item .label { color: var(--text-muted); font-size: 12px; }
.analytics-summary-item .value { font-weight: 600; font-size: 18px; }
.risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.risk-badge.critical { background: #fee2e2; color: #dc2626; }
.risk-badge.high     { background: #ffedd5; color: #ea580c; }
.risk-badge.medium   { background: #fef9c3; color: #ca8a04; }
.risk-badge.low      { background: #dcfce7; color: #16a34a; }
.risk-badge.unknown  { background: var(--bg-secondary); color: var(--text-muted); }
.risk-factor-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  margin: 1px;
}

/* ── FICHE APPRENANT ───────────────────────────────────────────── */
.learner-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}
.learner-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.risk-banner { border-left: 4px solid #aaa; }
.risk-banner-critical { border-left-color: #dc2626; }
.risk-banner-high     { border-left-color: #ea580c; }
.risk-banner-medium   { border-left-color: #ca8a04; }
.risk-banner-low      { border-left-color: #16a34a; }
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.metric-item { display: flex; flex-direction: column; }
.metric-item .label { font-size: 12px; color: var(--text-muted); }
.metric-item .value { font-size: 20px; font-weight: 600; }
.concepts-row { display: flex; flex-wrap: wrap; gap: 16px; }
.concept-section-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.concept-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin: 2px;
  color: #111;
}
.qt-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qt-label { font-size: 12px; width: 130px; color: var(--text); }
.qt-bar-bg { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; }
.qt-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.qt-pct { font-size: 12px; width: 32px; text-align: right; color: var(--text-muted); }
.note-item {
  padding: 8px 10px;
  border-left: 3px solid var(--border);
  margin-bottom: 8px;
  background: var(--bg);
  border-radius: 0 4px 4px 0;
}
.note-item.note-intervention { border-left-color: #7c3aed; }
.note-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.note-content { font-size: 13px; }
.chat-history-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* ── Dashboard accordion ─────────────────────────────────────────────── */
.analytics-accordion-row td {
  cursor: pointer;
  user-select: none;
}
.analytics-accordion-row:hover td {
  background: var(--hover-bg, rgba(255,255,255,0.04));
}
.analytics-accordion-detail {
  display: none;
  background: var(--panel-bg, #1e2130);
  padding: 14px 20px;
}
.analytics-accordion-detail.open {
  display: block;
}
.accordion-metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.accordion-metric {
  text-align: center;
}
.accordion-metric .label {
  font-size: 11px;
  color: var(--text-muted);
}
.accordion-metric .value {
  font-size: 16px;
  font-weight: 700;
}
.accordion-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Learner history graph ───────────────────────────────────────────── */
#learner-graph-container canvas {
  width: 100% !important;
}
.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.timeline-event:last-child { border-bottom: none; }
.timeline-event .te-icon { font-size: 16px; flex-shrink: 0; }
.timeline-event .te-body { flex: 1; }
.timeline-event .te-time { font-size: 11px; color: var(--text-muted); }
.timeline-event .te-title { font-weight: 600; }
.timeline-event .te-payload { font-size: 11px; color: var(--text-muted); }

@media print {
  #learner-graph-section { page-break-after: avoid; }
  .analytics-tab, #reanalyze-btn, .accordion-actions, .lf-btn-reset { display: none !important; }
}

/* ── TOM SELECT THEME ───────────────────────────────────────── */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  border-radius: 4px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--sans);
  box-shadow: none;
}
.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
  border-color: var(--accent);
}
.ts-wrapper.focus .ts-control {
  border-color: var(--focus, var(--accent));
  box-shadow: none;
  outline: none;
}
.ts-dropdown {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  font-family: var(--sans);
  z-index: 9999;
}
.ts-dropdown .option {
  padding: 6px 10px;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background: var(--accentbg, rgba(91,155,213,0.15));
  color: var(--text);
}
.ts-dropdown .option.selected {
  background: var(--accentbg, rgba(91,155,213,0.15));
}
.ts-dropdown input {
  background: var(--bg);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 12px;
  width: 100%;
}
.ts-wrapper .clear-button {
  color: var(--muted);
}

/* ── HISTORY FILTER BAR ───────────────────────────────────────── */
.history-filter-bar {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-filter-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-filter-bar input[type="text"] {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-family: var(--sans);
  outline: none;
  box-sizing: border-box;
}
.history-filter-bar input[type="text"]:focus {
  border-color: var(--focus, var(--accent));
}
.history-search-results {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.history-search-result-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.history-search-result-item:hover {
  background: var(--accentbg, rgba(91,155,213,0.1));
}
.history-search-result-item .result-user {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}
.history-search-result-item .result-preview {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── HISTORY MARKDOWN TOGGLE ─────────────────────────────── */
.history-md-toggle {
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 10px;
  color: var(--muted);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  line-height: 1.4;
}
.history-md-toggle:hover {
  color: var(--text);
  background: var(--border);
}

/* --- Admin list framework (lf-*) --- */
.lf-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; margin-bottom: 8px;
}
.lf-filter { min-width: 140px; }
.lf-filter-search { min-width: 220px; }
.lf-filter-daterange input { margin-right: 4px; }
.lf-chip {
  padding: 4px 10px; border: 1px solid #c5c5c5; background: #fff;
  border-radius: 999px; cursor: pointer; font-size: 13px;
}
.lf-chip.on { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
.lf-reset {
  margin-left: auto; padding: 4px 10px; background: transparent;
  border: 1px solid #c5c5c5; border-radius: 4px; cursor: pointer;
}
.lf-reset:hover { background: #f3f3f3; }

.lf-table { width: 100%; border-collapse: collapse; }
.lf-table th, .lf-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #eaeaea;
  vertical-align: top;
}
.lf-th-sortable { cursor: pointer; user-select: none; }
.lf-th-sortable:hover { background: #f7f7f7; }
.lf-th-sortable.lf-sort-asc::after { content: ' ↑'; opacity: 0.6; }
.lf-th-sortable.lf-sort-desc::after { content: ' ↓'; opacity: 0.6; }
.lf-row-clickable { cursor: pointer; }
.lf-row-clickable:hover { background: #f9f9f9; }
.lf-loading, .lf-empty, .lf-error { text-align: center; padding: 20px; color: #777; }
.lf-error { color: #c53030; }

.lf-pagination {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 8px 0; margin-top: 8px;
}
.lf-count { margin-right: auto; color: #555; font-size: 13px; }
.lf-page-btn {
  min-width: 28px; padding: 4px 8px; border: 1px solid #c5c5c5;
  background: #fff; border-radius: 4px; cursor: pointer;
}
.lf-page-btn:hover:not(:disabled) { background: #f0f0f0; }
.lf-page-current { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
.lf-page-ellipsis { padding: 0 4px; color: #888; }
.lf-page-size { padding: 4px; border: 1px solid #c5c5c5; border-radius: 4px; }

@media (max-width: 800px) {
  .lf-toolbar { flex-direction: column; align-items: stretch; }
  .lf-reset { margin-left: 0; }
  .lf-table { display: block; overflow-x: auto; }
}

/* === Learner timeline refresh === */

.timeline-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 12px 4px;
  text-align: center;
}

.timeline-day {
  margin-bottom: 12px;
}

.timeline-day-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Override existing .timeline-event with sharper layout */
.timeline-event {
  display: grid;
  grid-template-columns: 50px 24px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
  transition: background 120ms ease;
}

.timeline-event:hover {
  background: rgba(255,255,255,0.03);
}

.timeline-event.te-intervention {
  background: rgba(124,58,237,0.06);
}

.timeline-event .te-time {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 2px;
}

.timeline-event .te-icon {
  font-size: 16px;
  text-align: center;
}

.timeline-event .te-body {
  min-width: 0;
}

.timeline-event .te-title {
  font-size: 13px;
  font-weight: 600;
}

.timeline-event .te-payload {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-adj-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.note-adj-down {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}
.note-adj-up {
  background: rgba(248,113,113,0.15);
  color: #f87171;
}