:root {
  --kr-scene-page: #ffffff;      
  --kr-scene-panel: #f5f6f9;     
  --kr-scene-line: #e6e8ee;      
  --kr-scene-ink: #1c2230;       
  --kr-scene-muted: #6b7280;
  







  --kr-scene-accent: #0c857a;    
  --kr-scene-surface: #fff;      


  --kr-scene-on-accent: #fff;    
}

.kr-scene { display: flex; width: 100%; height: calc(100vh - 88px); min-height: calc(100vh - 88px); color: var(--kr-scene-ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; }


.kr-scene-stage { flex: 3; position: relative; background: var(--kr-scene-page); }
.kr-scene-canvas { display: block; width: 100%; height: 100%; }


.kr-scene-chat { flex: 2; min-width: 300px; background: var(--kr-scene-panel);
  border-left: 1px solid var(--kr-scene-line); display: flex; flex-direction: column; }
.kr-scene-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kr-b { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.kr-ia { background: var(--kr-scene-surface); border: 1px solid var(--kr-scene-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.kr-me { background: var(--kr-scene-accent); color: var(--kr-scene-on-accent); align-self: flex-end; border-bottom-right-radius: 4px; }
.kr-scene-mode { display: flex; gap: 6px; padding: 10px 16px 0; border-top: 1px solid var(--kr-scene-line); }
.kr-scene-mode-btn { border: 1px solid var(--kr-scene-line); background: var(--kr-scene-surface); color: inherit;
  border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.kr-scene-mode-btn.is-active { background: var(--kr-scene-accent); border-color: var(--kr-scene-accent); color: var(--kr-scene-on-accent); }
.kr-scene-input-row { display: flex; gap: 8px; padding: 12px 16px; }
.kr-scene-input { flex: 1; border: 1px solid var(--kr-scene-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
.kr-scene-input:focus { border-color: var(--kr-scene-accent); }
.kr-scene-send { border: 0; background: var(--kr-scene-accent); color: var(--kr-scene-on-accent); border-radius: 10px; padding: 0 16px; font-weight: 600; cursor: pointer; }

@media (max-width: 720px) { .kr-scene { flex-direction: column; } .kr-scene-stage { min-height: 55vh; } }