:root {
  --orange: #d76825;
  --orange-hi: #ff8b3d;
  --orange-hot: #ffad64;
  --orange-mid: #9c431d;
  --orange-low: #4e210f;

  --green: #5ff09a;
  --blue: #41a8ff;
  --red: #ff5454;

  --black: #000000;
  --near-black: #040302;
  --panel-solid: #2b170d;
  --panel-deep: #1b0d07;

  --text-main: #dc7135;
  --text-muted: #784020;
}


* {
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}


body {
  overflow: hidden;

  color: var(--text-main);

  background:
    #000;

  font-family:
    "DejaVu Sans Mono",
    "Liberation Mono",
    monospace;
}


button,
input,
textarea {
  font-family: inherit;
}


button {
  cursor: pointer;
}


.hidden {
  display: none !important;
}


/* =====================================================
   LOGIN
   ===================================================== */

#loginScreen {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      #1c0c05 0%,
      #050201 42%,
      #000 100%
    );
}


.login-box {
  width: min(430px, 90vw);

  padding: 34px;

  background:
    rgba(0,0,0,.94);

  border:
    1px solid var(--orange);

  box-shadow:
    0 0 42px
    rgba(215,104,37,.12);
}


.login-logo {
  color: var(--orange-hi);

  font-size: 52px;

  letter-spacing: 11px;
}


.login-subtitle {
  margin:
    4px 0 30px;

  font-size: 9px;

  letter-spacing: 2px;

  opacity: .55;
}


.login-box input {
  width: 100%;

  margin: 6px 0;

  padding: 13px;

  color: var(--orange-hot);

  background: #070504;

  border:
    1px solid var(--orange-mid);

  outline: none;
}


.login-box input:focus {
  border-color:
    var(--orange-hi);
}


.login-box button {
  width: 100%;

  margin-top: 14px;

  padding: 12px;

  color: var(--orange-hi);

  background: #160a05;

  border:
    1px solid var(--orange);
}


#loginStatus {
  margin-top: 14px;

  font-size: 10px;
}


/* =====================================================
   APPLICATION
   ===================================================== */

#app {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns:
    300px minmax(0, 1fr);
}


/* =====================================================
   SIDEBAR
   ===================================================== */

#sidebar {
  position: relative;

  z-index: 50;

  overflow-y: auto;

  padding: 14px;

  background: #030303;

  border-right:
    1px solid var(--orange-low);
}


.sidebar-header {
  margin-bottom: 15px;

  padding-bottom: 14px;

  border-bottom:
    1px solid var(--orange-low);
}


.magi-wordmark {
  color: var(--orange-hi);

  font-size: 29px;

  letter-spacing: 7px;
}


#userDisplay {
  margin-top: 5px;

  font-size: 9px;

  color: #8f4a25;
}


.sidebar-action {
  width: 100%;

  margin-bottom: 8px;

  padding: 10px;

  color: var(--orange);

  background: #0b0604;

  border:
    1px solid var(--orange-low);
}


.sidebar-action:hover {
  color: var(--orange-hi);

  border-color:
    var(--orange);
}


.section-title {
  margin:
    22px 0 8px;

  color: #88411f;

  font-size: 9px;

  letter-spacing: 2px;
}


/* PROJECT */

.project {
  margin-bottom: 8px;
}


.project-header {
  display: grid;

  grid-template-columns:
    25px minmax(0,1fr) 31px;

  align-items: center;

  gap: 3px;
}


.project-toggle,
.project-add {
  height: 28px;

  padding: 0;

  color: var(--orange);

  background: transparent;

  border:
    1px solid transparent;
}


.project-toggle:hover,
.project-add:hover {
  border-color:
    var(--orange-low);

  color:
    var(--orange-hi);
}


.project-toggle {
  font-size: 11px;

  transition:
    transform .15s ease;
}


.project.collapsed
.project-toggle {
  transform:
    rotate(-90deg);
}


.project-name {
  min-width: 0;

  overflow: hidden;

  padding: 7px 4px;

  color: #c45d2b;

  font-size: 11px;

  text-overflow: ellipsis;

  white-space: nowrap;

  cursor: pointer;
}


.project-name:hover {
  color:
    var(--orange-hi);
}


.project-chats {
  margin:
    2px 0 3px 14px;

  overflow: hidden;

  border-left:
    1px solid #3b180c;
}


.project.collapsed
.project-chats {
  display: none;
}


.chat-item {
  overflow: hidden;

  padding:
    8px 9px;

  color: #a54c25;

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;

  border-left:
    1px solid transparent;

  cursor: pointer;
}


.chat-item:hover {
  color: var(--orange-hi);

  background: #140805;
}


.chat-item.active {
  color: #ffb276;

  background: #251006;

  border-left:
    2px solid var(--orange-hi);
}


/* =====================================================
   MAIN AREA
   ===================================================== */

#main {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse at center,
      #070301 0%,
      #010101 55%,
      #000 100%
    );
}


/* =====================================================
   OUTER REFERENCE-STYLE FRAME
   ===================================================== */

#systemFrame {
  position: absolute;

  z-index: 10;

  inset:
    12px 17px 108px 17px;

  pointer-events: none;
}


.frame-line {
  position: absolute;

  left: 16px;
  right: 16px;

  height: 1px;

  background:
    rgba(215,104,37,.78);
}


.frame-top {
  top: 14px;
}


.frame-bottom {
  bottom: 14px;
}


.frame-corner {
  position: absolute;

  width: 58px;
  height: 58px;
}


.corner-tl {
  top: 0;
  left: 0;

  border-top:
    3px solid var(--orange);

  border-left:
    3px solid var(--orange);
}


.corner-tr {
  top: 0;
  right: 0;

  border-top:
    3px solid var(--orange);

  border-right:
    3px solid var(--orange);
}


.corner-bl {
  bottom: 0;
  left: 0;

  border-bottom:
    3px solid var(--orange);

  border-left:
    3px solid var(--orange);
}


.corner-br {
  bottom: 0;
  right: 0;

  border-bottom:
    3px solid var(--orange);

  border-right:
    3px solid var(--orange);
}


/* =====================================================
   HUDS
   ===================================================== */

#operationHud {
  position: absolute;

  z-index: 4;

  top: 35px;
  left: 42px;

  width: 260px;

  pointer-events: none;
}


.hud-kicker {
  margin-bottom: 4px;

  color: var(--orange-hi);

  font-size: 13px;

  letter-spacing: 2px;
}


.hud-main-row {
  color: var(--orange-hi);

  font-size: 24px;

  letter-spacing: 2px;
}


.hud-label {
  opacity: .7;
}


.hud-small-row {
  margin-top: 4px;

  color: #b75b2a;

  font-size: 9px;

  letter-spacing: 1px;
}


.hud-small-row strong {
  color: var(--orange-hi);
}


#statusHud {
  position: absolute;

  z-index: 4;

  top: 35px;
  right: 42px;

  width: 270px;

  pointer-events: none;
}


.hud-status-line {
  display: grid;

  grid-template-columns:
    10px auto 1fr;

  align-items: center;

  gap: 7px;

  color: var(--orange-hi);

  font-size: 11px;
}


.status-light {
  width: 7px;
  height: 7px;

  display: block;

  border-radius: 50%;
}


.status-green {
  background: var(--green);

  box-shadow:
    0 0 8px rgba(95,240,154,.75);
}


.hud-muted {
  color: #945020;

  text-align: right;
}


.progress-row {
  display: grid;

  grid-template-columns:
    1fr 86px;

  align-items: center;

  gap: 10px;

  margin-top: 10px;
}


.progress-frame {
  height: 12px;

  padding: 2px;

  border:
    1px solid var(--orange);
}


.progress-fill {
  width: 0%;
  height: 100%;

  background:
    var(--orange-hi);

  transition:
    width .25s ease;
}


.hud-right {
  text-align: right;
}


.network-line {
  display: flex;

  justify-content: space-between;

  margin-top: 11px;

  padding: 5px 7px;

  color: #b15d2d;

  border:
    1px solid var(--orange-low);

  font-size: 8px;

  letter-spacing: 1px;
}


/* =====================================================
   MAGI DISPLAY
   ===================================================== */

#magiDisplay {
  position: absolute;

  z-index: 2;

  inset:
    95px 34px 95px 34px;

  overflow: visible;

  pointer-events: none;
}


/*
   The outer panel is the border.
   The inner panel is inset, preventing
   clip-path from chopping the outline.
*/

.magi-panel {
  --panel-shape:
    polygon(
      5% 0,
      100% 0,
      95% 100%,
      0 100%
    );

  position: absolute;

  padding: 0;

  background:
    var(--orange);

  clip-path:
    var(--panel-shape);

  transition:
    opacity .25s ease,
    filter .25s ease;
}


.panel-surface {
  position: absolute;

  inset: 2px;

  overflow: hidden;

  background:
    var(--panel-solid);

  clip-path:
    var(--panel-shape);

  transition:
    background .25s ease;
}


.panel-content {
  position: absolute;

  inset:
    50px 56px 42px 56px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.panel-index {
  position: absolute;

  z-index: 2;

  top: 15px;
  right: 25px;

  color: #975127;

  font-size: 9px;

  letter-spacing: 2px;
}


.panel-accent {
  position: absolute;

  z-index: 3;

  top: 17px;
  left: 24px;

  width: 28px;
  height: 3px;

  opacity: .9;
}


.accent-green {
  background: var(--green);
}


.accent-blue {
  background: var(--blue);
}


.accent-red {
  background: var(--red);
}


.panel-name {
  color: var(--orange-hot);

  font-size:
    clamp(25px, 3vw, 52px);

  line-height: 1;

  letter-spacing:
    clamp(3px, .45vw, 8px);

  white-space: nowrap;
}


.panel-status {
  margin-top: 10px;

  color: #a5572b;

  font-size: 9px;

  letter-spacing: 3px;
}


/* PANEL POSITIONS */

.panel-melchior {
  left: 3%;
  top: 15%;

  width: 40%;
  height: 27%;
}


.panel-balthasar {
  right: 3%;
  top: 15%;

  width: 40%;
  height: 27%;
}


.panel-casper {
  left: 28%;
  bottom: 4%;

  width: 44%;
  height: 27%;
}


/* ACTIVE */

.magi-panel.active {
  filter:
    brightness(1.28);
}


.magi-panel.active
.panel-surface {
  background:
    #3c1b0b;
}


.magi-panel.active
.panel-status {
  color:
    var(--orange-hi);

  animation:
    statusPulse .75s
    infinite alternate;
}


@keyframes statusPulse {
  from {
    opacity: .45;
  }

  to {
    opacity: 1;
  }
}


/* =====================================================
   CONNECTORS
   ===================================================== */

.connector {
  position: absolute;

  z-index: 0;

  height: 2px;

  background:
    var(--orange);

  opacity: .75;

  transform-origin:
    left center;
}


.connector-melchior {
  left: 40%;
  top: 45%;

  width: 13%;

  transform:
    rotate(25deg);
}


.connector-balthasar {
  right: 40%;
  top: 45%;

  width: 13%;

  transform:
    rotate(-25deg);

  transform-origin:
    right center;
}


.connector-casper {
  left: 50%;
  top: 54%;

  width: 13%;

  transform:
    rotate(90deg);

  transform-origin:
    left center;
}


/* =====================================================
   CENTER MAGI CORE
   ===================================================== */

#magiCore {
  --core-shape:
    polygon(
      13% 0,
      87% 0,
      100% 50%,
      87% 100%,
      13% 100%,
      0 50%
    );

  position: absolute;

  z-index: 3;

  left: 50%;
  top: 49%;

  width: 215px;
  height: 118px;

  transform:
    translate(-50%, -50%);

  background:
    var(--orange);

  clip-path:
    var(--core-shape);

  transition:
    opacity .25s ease,
    filter .25s ease;
}


.core-surface {
  position: absolute;

  inset: 2px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    #070403;

  clip-path:
    var(--core-shape);
}


.core-name {
  color: var(--orange-hi);

  font-size: 34px;

  line-height: 1;

  letter-spacing: 8px;
}


.core-small {
  color: #925026;

  font-size: 7px;

  letter-spacing: 4px;
}


/* =====================================================
   CHAT-SELECTED BACKGROUND MODE
   ===================================================== */

body.chat-selected
.magi-panel {
  opacity: .20;
}


body.chat-selected
.magi-panel.active {
  opacity: .70;

  filter:
    brightness(1.4);
}


body.chat-selected
#magiCore {
  opacity: .17;
}


body.chat-selected
.connector {
  opacity: .14;
}


body.chat-selected
#operationHud,
body.chat-selected
#statusHud {
  opacity: .48;
}


/* =====================================================
   CHAT LAYER
   ===================================================== */

#chatLayer {
  position: relative;

  z-index: 30;

  width: 100%;
  height: 100%;

  display: grid;

  grid-template-rows:
    minmax(0,1fr) auto;
}


#chatArea {
  overflow-y: auto;

  padding:
    95px 42px 12px;
}


/* EMPTY */

#emptyState {
  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  pointer-events: none;
}


.ready-label {
  margin-top: 75px;

  color: #a45429;

  font-size: 10px;

  letter-spacing: 5px;
}


#newChatContext {
  margin-top: 9px;

  color: #683018;

  font-size: 8px;

  letter-spacing: 3px;
}


/* CONVERSATION */

#conversationView {
  width:
    min(980px, 100%);

  min-height: 100%;

  margin:
    0 auto;
}


.conversation-header {
  position: sticky;

  z-index: 20;

  top: -1px;

  padding:
    5px 0 15px;

  margin-bottom: 16px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.86) 70%,
      transparent 100%
    );
}


#conversationTitle {
  padding-bottom: 12px;

  color: var(--orange-hi);

  border-bottom:
    1px solid rgba(215,104,37,.42);

  font-size: 14px;

  letter-spacing: 2px;
}


/* =====================================================
   CHATGPT-LIKE MESSAGE ALIGNMENT
   ===================================================== */

#messages {
  display: flex;

  flex-direction: column;

  gap: 18px;

  padding:
    4px 0 40px;
}


.message {
  width: fit-content;

  max-width: min(75%, 760px);

  padding:
    13px 16px;

  color: #d98b60;

  background:
    rgba(12,7,4,.86);

  border:
    1px solid rgba(215,104,37,.18);

  line-height: 1.55;

  white-space: pre-wrap;

  overflow-wrap: anywhere;

  box-shadow:
    0 4px 18px rgba(0,0,0,.28);
}


/* MAGI LEFT */

.message.assistant {
  align-self: flex-start;

  color: #e8a277;

  background:
    rgba(30,13,6,.82);

  border-left:
    3px solid var(--orange-hi);

  border-radius:
    2px 12px 12px 12px;
}


/* USER RIGHT */

.message.user {
  align-self: flex-end;

  color: #efc0a1;

  background:
    rgba(52,25,12,.88);

  border-right:
    3px solid var(--orange-hot);

  border-radius:
    12px 2px 12px 12px;
}


/* =====================================================
   COMPOSER
   ===================================================== */

#composer {
  position: relative;

  z-index: 30;

  padding:
    12px 28px 18px;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.96) 25%
    );
}


.composer-shell {
  width:
    min(920px, 100%);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) 92px;

  gap: 8px;

  padding: 7px;

  background:
    rgba(8,4,2,.96);

  border:
    1px solid var(--orange-mid);

  box-shadow:
    0 0 24px
    rgba(215,104,37,.08);
}


#messageInput {
  min-height: 46px;
  max-height: 180px;

  resize: none;

  padding: 13px;

  color: #ee9561;

  background: #050302;

  border: none;

  outline: none;

  line-height: 1.45;
}


#messageInput::placeholder {
  color: #653019;
}


#sendButton {
  color: var(--orange-hi);

  background: #1a0b05;

  border:
    1px solid var(--orange-mid);
}


#sendButton:hover {
  border-color:
    var(--orange-hi);
}


#sendButton:disabled {
  opacity: .35;

  cursor: default;
}


.composer-hint {
  width:
    min(920px,100%);

  margin:
    6px auto 0;

  color: #552711;

  text-align: right;

  font-size: 7px;

  letter-spacing: 1px;
}


/* =====================================================
   PROJECT DIALOG
   ===================================================== */

dialog {
  width:
    min(420px, 90vw);

  padding: 25px;

  color: var(--orange);

  background: #070302;

  border:
    1px solid var(--orange);

  box-shadow:
    0 0 50px
    rgba(215,104,37,.17);
}


dialog::backdrop {
  background:
    rgba(0,0,0,.84);
}


.dialog-title {
  margin-bottom: 18px;

  color: var(--orange-hi);

  font-size: 15px;

  letter-spacing: 3px;
}


dialog input {
  width: 100%;

  padding: 12px;

  color: var(--orange-hot);

  background: #080403;

  border:
    1px solid var(--orange-mid);

  outline: none;
}


.dialog-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;

  margin-top: 17px;
}


.dialog-actions button {
  padding: 10px;

  color: var(--orange);

  background: #130804;

  border:
    1px solid var(--orange-mid);
}


/* =====================================================
   SMALLER DISPLAYS
   ===================================================== */

@media (max-width: 1100px) {

  #app {
    grid-template-columns:
      235px minmax(0,1fr);
  }

  #operationHud {
    left: 28px;
  }

  #statusHud {
    right: 28px;
  }

  .panel-content {
    inset:
      42px 35px 35px;
  }

  .panel-name {
    font-size:
      clamp(21px, 3vw, 38px);
  }

}


@media (max-width: 800px) {

  #operationHud,
  #statusHud {
    transform:
      scale(.82);

    transform-origin:
      top left;
  }

  #statusHud {
    transform-origin:
      top right;
  }

  .panel-content {
    inset:
      35px 25px 28px;
  }

  .panel-name {
    font-size: 19px;
  }

  #magiCore {
    width: 150px;
    height: 92px;
  }

  .core-name {
    font-size: 23px;
  }

}


/* =====================================================
   MAGI UI REFINEMENT PASS
   ===================================================== */


/* ---------- CURRENT OPERATION ---------- */

#operationHud {
  width: 340px;
}

.hud-main-row {
  font-size: 20px;
  white-space: nowrap;
}

.hud-extra-row {
  margin-top: 3px;

  display: grid;
  grid-template-columns: 72px minmax(0,1fr);

  color: #9a4b24;

  font-size: 8px;
  letter-spacing: 1px;
}

.hud-extra-row strong {
  overflow: hidden;

  color: var(--orange-hi);

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- CUSTOM MAGI SCROLLBARS ---------- */

#messages,
#sidebar {
  scrollbar-width: thin;

  scrollbar-color:
    var(--orange-mid)
    #060301;
}

#messages::-webkit-scrollbar,
#sidebar::-webkit-scrollbar {
  width: 9px;
}

#messages::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track {
  background: #060301;

  border-left:
    1px solid #251006;
}

#messages::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to bottom,
      #6d3015,
      #b44e1e
    );

  border:
    2px solid #060301;
}

#messages::-webkit-scrollbar-thumb:hover,
#sidebar::-webkit-scrollbar-thumb:hover {
  background:
    var(--orange-hi);
}


/* ---------- KEEP CHAT TITLE FIXED ---------- */

#chatArea {
  overflow: hidden;
}

#conversationView {
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.conversation-header {
  position: relative;
  top: auto;

  flex:
    0 0 auto;

  margin-bottom: 8px;

  background:
    rgba(0,0,0,.97);
}

#messages {
  flex:
    1 1 auto;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    8px 12px 40px 0;
}


/* ---------- MAGI PANEL WIDTH BASE — v0.2.1 ---------- */

/* Preserve the final upper-panel width from the old refinement pass. */
.panel-melchior,
.panel-balthasar {
  width: 39%;
}


/* ---------- CHAT SIDEBAR ACTIONS ---------- */

.chat-row {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) 26px;

  align-items: center;
}

.chat-row .chat-item {
  min-width: 0;
}

.chat-more {
  width: 24px;
  height: 24px;

  padding: 0;

  opacity: 0;

  color: #9a4d27;

  background: transparent;

  border:
    1px solid transparent;

  font-size: 17px;
  line-height: 18px;

  transition:
    opacity .12s ease,
    color .12s ease,
    border-color .12s ease;
}

.chat-row:hover .chat-more,
.chat-more:focus {
  opacity: 1;
}

.chat-more:hover {
  color: var(--orange-hi);

  border-color:
    var(--orange-low);
}

.chat-pin {
  margin-right: 6px;

  color: var(--orange-hi);

  font-size: 8px;

  opacity: .75;
}


/* ---------- THREE-DOT MENU ---------- */

.chat-action-menu {
  position: fixed;

  z-index: 1000;

  width: 150px;

  padding: 5px;

  background: #090402;

  border:
    1px solid var(--orange-mid);

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.65);
}

.chat-action-menu button {
  width: 100%;

  padding: 9px 10px;

  color: #c96331;

  background: transparent;

  border: 0;

  text-align: left;

  font-size: 10px;
}

.chat-action-menu button:hover {
  color: var(--orange-hi);

  background: #211006;
}

.chat-action-menu .danger {
  color: #d65743;
}

.chat-action-menu .danger:hover {
  color: #ff725c;

  background: #260905;
}


/* ---------- CUSTOM MODALS ---------- */

.magi-modal-overlay {
  position: fixed;

  z-index: 2000;

  inset: 0;

  display: grid;
  place-items: center;

  background:
    rgba(0,0,0,.78);
}

.magi-modal {
  width:
    min(430px,90vw);

  padding: 23px;

  color: var(--orange);

  background: #080402;

  border:
    1px solid var(--orange);

  box-shadow:
    0 0 45px
    rgba(215,104,37,.16);
}

.magi-modal-title {
  margin-bottom: 17px;

  color: var(--orange-hi);

  font-size: 15px;

  letter-spacing: 3px;
}

.magi-modal-text {
  margin-bottom: 16px;

  color: #aa5a32;

  font-size: 10px;

  line-height: 1.5;
}

.magi-modal input {
  width: 100%;

  padding: 12px;

  color: var(--orange-hot);

  background: #040302;

  border:
    1px solid var(--orange-mid);

  outline: none;
}

.magi-modal-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;

  margin-top: 17px;
}

.magi-modal-actions button {
  padding: 10px;

  color: var(--orange);

  background: #120704;

  border:
    1px solid var(--orange-mid);
}

.magi-modal-actions .danger {
  color: #ff725c;

  border-color: #742619;
}


/* ---------- STATUS LIGHT STATES ---------- */

.status-light.status-busy {
  background: var(--orange-hi);

  box-shadow:
    0 0 8px
    rgba(255,139,61,.8);
}

.status-light.status-error {
  background: #ff4f44;

  box-shadow:
    0 0 8px
    rgba(255,79,68,.8);
}


/* =====================================================
   MAGI CHAT / PANEL NORMALIZATION — v0.2.1
   ===================================================== */

body.chat-selected .conversation-header {
  margin-bottom: 4px !important;
  position: relative !important;
  z-index: 20 !important;
  background: rgba(0,0,0,.96) !important;
}

body.chat-selected #messages {
  padding-top: 0 !important;
  padding-bottom: 28px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.chat-selected .message {
  margin-top: 8px !important;
}

body.chat-selected #conversationView {
  justify-content: flex-start !important;
}

body.chat-selected .conversation-title {
  z-index: 20 !important;
}

.magi-panel {
  isolation: isolate;
}

.panel-melchior .panel-content::before,
.panel-melchior .panel-content::after,
.panel-balthasar .panel-content::before,
.panel-balthasar .panel-content::after,
.panel-casper .panel-content::before,
.panel-casper .panel-content::after {
  display: none !important;
  content: none !important;
}

.top-status-band,
.magi-top-band,
#topBand {
  min-height: 76px !important;
}


/* MAGI FINAL GEOMETRY CLEANUP V1 */


/* =====================================================
   LOGIN: REMEMBER ME
   ===================================================== */

.remember-row {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 9px;

  color: #9c4d27;

  font-size: 9px;

  letter-spacing: 1px;

  cursor: pointer;
}

.remember-row input {
  width: 13px !important;
  height: 13px;

  margin: 0 !important;

  accent-color: var(--orange-hi);
}


/* =====================================================
   REMOVE DUPLICATE CORNER GRAPHICS
   ===================================================== */

/*
   The HTML already contains .panel-accent and
   .panel-index for ALL THREE agents.

   Kill the pseudo-elements added by the old cleanup.
*/

.panel-melchior::before,
.panel-melchior::after,
.panel-balthasar::before,
.panel-balthasar::after,
.panel-casper::before,
.panel-casper::after {
  display: none !important;
  content: none !important;
}


/* =====================================================
   CLEAN PANEL SHAPES

   One clipped solid surface instead of an inset clipped
   surface, which was creating those dark corner wedges.
   ===================================================== */

.magi-panel {
  background: #351c10 !important;

  box-shadow: none !important;

  filter:
    drop-shadow(
      0 0 0.8px
      rgba(255,139,61,.95)
    ) !important;

  overflow: visible !important;
}


.panel-surface {
  inset: 0 !important;

  background:
    #351c10 !important;

  background-image:
    none !important;

  clip-path:
    none !important;

  overflow:
    visible !important;
}


/* Keep all three as clean trapezoids */

.panel-melchior,
.panel-balthasar {
  --panel-shape:
    polygon(
      2% 0,
      98% 0,
      94% 100%,
      6% 100%
    ) !important;
}


.panel-casper {
  --panel-shape:
    polygon(
      6% 0,
      94% 0,
      98% 100%,
      2% 100%
    ) !important;

  left:
    28.5% !important;

  width:
    43% !important;
}


/* =====================================================
   ONE CORNER MARKER PER AGENT
   ===================================================== */

.panel-accent {
  display: block !important;

  position: absolute !important;

  z-index: 20 !important;

  top: 12px !important;
  left: 17px !important;

  width: 19px !important;
  height: 2px !important;

  opacity: 1 !important;
}


.panel-index {
  display: block !important;

  position: absolute !important;

  z-index: 20 !important;

  top: 10px !important;
  right: 17px !important;

  color:
    #a05228 !important;

  font-size:
    8px !important;

  letter-spacing:
    1px !important;

  opacity: 1 !important;
}


#panel-melchior .panel-accent {
  background:
    #69dc94 !important;
}


#panel-balthasar .panel-accent {
  background:
    #61a9e8 !important;
}


#panel-casper .panel-accent {
  background:
    #e26959 !important;
}


/* =====================================================
   CENTER ALL AGENT LABELS
   ===================================================== */

.panel-content {
  inset:
    30px 45px 27px !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  text-align:
    center !important;
}


.panel-name,
.panel-status {
  width:
    100% !important;

  text-align:
    center !important;
}


/* =====================================================
   CENTRAL MAGI CORE

   These are the REAL selectors from index.html.
   ===================================================== */

#magiCore {
  width:
    190px !important;

  height:
    100px !important;

  z-index:
    15 !important;
}


#magiCore .core-surface {
  inset:
    1px !important;

  display:
    grid !important;

  grid-template-rows:
    16px 38px 16px !important;

  align-content:
    center !important;

  justify-items:
    center !important;

  padding:
    9px 20px !important;

  overflow:
    hidden !important;
}


#magiCore .core-name {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--orange-hi) !important;

  font-size:
    28px !important;

  line-height:
    38px !important;

  letter-spacing:
    7px !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


#magiCore .core-small {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #9d522a !important;

  font-size:
    6px !important;

  line-height:
    16px !important;

  letter-spacing:
    3px !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


#magiCore #coreStatus {
  color:
    #b76031 !important;
}


/*
   This was the OTHER text visually colliding with MAGI.
   The composer already says "Enter inquiry", so the
   duplicated empty-state labels are unnecessary.
*/

#emptyState .ready-label,
#emptyState #newChatContext {
  display:
    none !important;
}


/* =====================================================
   MAGI SCHEMATIC STACKING — v0.2.1
   ===================================================== */

/* Dynamic SVG connectors sit at z=1; panels/core cover their endpoints. */
.magi-panel {
  z-index: 2 !important;
}

#magiCore {
  z-index: 3 !important;
}


/* =====================================================
   MOVE CHAT HIGHER
   ===================================================== */

body.chat-selected #chatArea {
  padding-top:
    28px !important;
}


body.chat-selected .conversation-header {
  margin-bottom:
    4px !important;

  padding-top:
    0 !important;
}


body.chat-selected #messages {
  padding-top:
    2px !important;
}


/* =====================================================
   CUSTOM SCROLLBAR — STRONGER VERSION
   ===================================================== */

#messages {
  scrollbar-width:
    thin;

  scrollbar-color:
    #9f481f #070302;
}


#messages::-webkit-scrollbar {
  width:
    8px;
}


#messages::-webkit-scrollbar-track {
  background:
    #070302;

  border-left:
    1px solid #2b1108;
}


#messages::-webkit-scrollbar-thumb {
  background:
    #8f3e1c;

  border:
    2px solid #070302;
}


#messages::-webkit-scrollbar-thumb:hover {
  background:
    var(--orange-hi);
}




/* MAGI CONNECTOR + PROJECT CONTROL PASS V1 */


/* =====================================================
   BIGGER AGENT NUMBERS
   ===================================================== */

#panel-melchior .panel-index,
#panel-balthasar .panel-index,
#panel-casper .panel-index {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  color: #bd6936 !important;

  opacity: .95 !important;
}


/* Upper panels have shallow top taper */

#panel-melchior .panel-index,
#panel-balthasar .panel-index {
  top: 12px !important;
  right: 24px !important;
}


#panel-melchior .panel-accent,
#panel-balthasar .panel-accent {
  top: 13px !important;
  left: 24px !important;

  width: 21px !important;
  height: 2px !important;
}


/*
   CASPER has a stronger taper at its top edge,
   so its corner decorations need to sit farther inward.
*/

#panel-casper .panel-accent {
  display: block !important;

  top: 13px !important;
  left: 52px !important;

  width: 21px !important;
  height: 2px !important;

  background: #e26959 !important;

  opacity: 1 !important;
}


#panel-casper .panel-index {
  display: block !important;

  top: 11px !important;
  right: 52px !important;

  font-size: 12px !important;

  color: #bd6936 !important;

  opacity: .95 !important;
}


/* =====================================================
   REMOVE OLD CSS CONNECTORS COMPLETELY
   ===================================================== */

.connector {
  display: none !important;
}


/* =====================================================
   DYNAMIC SVG CONNECTORS
   ===================================================== */

#magiConnectorSvg {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;

  opacity: .9;

  transition:
    opacity .2s ease;
}


#magiConnectorSvg line {
  stroke: #a64d22;

  stroke-width: 1.25;

  vector-effect:
    non-scaling-stroke;

  shape-rendering:
    geometricPrecision;
}




/* =====================================================
   PROJECT THREE-DOT CONTROL
   ===================================================== */

.project-header {
  grid-template-columns:
    25px minmax(0,1fr) 30px 26px !important;
}


.project-more {
  width: 24px;
  height: 24px;

  padding: 0;

  opacity: 0;

  color: #914521;

  background: transparent;

  border: 1px solid transparent;

  font-size: 17px;
  line-height: 18px;

  transition:
    opacity .12s ease,
    color .12s ease,
    border-color .12s ease;
}


.project-header:hover .project-more,
.project-more:focus {
  opacity: 1;
}


.project-more:hover {
  color: var(--orange-hi);

  border-color:
    var(--orange-low);
}


/* Uses the same visual language as chat ⋯ menu */

.project-action-menu {
  position: fixed;

  z-index: 1100;

  width: 165px;

  padding: 5px;

  background: #090402;

  border:
    1px solid var(--orange-mid);

  box-shadow:
    0 12px 35px rgba(0,0,0,.68);
}


.project-action-menu button {
  width: 100%;

  padding: 9px 10px;

  color: #c96331;

  background: transparent;

  border: 0;

  text-align: left;

  font-size: 10px;
}


.project-action-menu button:hover {
  color: var(--orange-hi);

  background: #211006;
}


.project-action-menu .danger {
  color: #d65743;
}


.project-action-menu .danger:hover {
  color: #ff725c;

  background: #260905;
}




/* =====================================================
   MAGI CONTROLS + MESSAGE EDIT — v0.2.2
   ===================================================== */

/* CASPER's trapezoid starts 6% inward; keep its markers just
   inside the actual top edge. */
#panel-casper .panel-accent {
  left: calc(6% + 12px) !important;
  top: 13px !important;
}

#panel-casper .panel-index {
  right: calc(6% + 12px) !important;
  top: 11px !important;
}

/* Keep the SVG schematic visible behind an active chat. */
body.chat-selected #magiConnectorSvg {
  opacity: .48 !important;
}


/* Metadata row retained for the original composer container. */
.composer-meta {
  width: min(920px, 100%);
  margin: 6px auto 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.composer-hint {
  width: auto !important;
  margin: 0 !important;
  flex: 1;
  text-align: right;
}


/* -------------------------
   EFFORT CONTROL
   ------------------------- */
.effort-control {
  display: grid !important;
  grid-template-columns: auto 150px 82px !important;
  align-items: center !important;
  column-gap: 12px !important;

  min-width: 330px !important;
}

.effort-title {
  color: #673119;
  font-size: 7px;
  letter-spacing: 1px;
  white-space: nowrap;
}

#effortSlider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 150px !important;
  height: 16px;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  cursor: pointer;
}

#effortSlider::-webkit-slider-runnable-track {
  height: 4px;

  border: 1px solid rgba(214, 106, 37, .85);

  background:
    linear-gradient(
      90deg,
      rgba(215, 104, 37, .95) 0%,
      rgba(255, 176, 108, .95) 100%
    );

  box-shadow:
    0 0 6px rgba(215, 104, 37, .18);
}

#effortSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 12px;
  height: 12px;
  margin-top: -5px;

  border-radius: 50%;
  border: 1px solid rgba(255, 196, 140, .95);

  background: #ffd2aa;

  box-shadow:
    0 0 0 1px rgba(215, 104, 37, .35),
    0 0 8px rgba(255, 176, 108, .35);
}

#effortSlider::-moz-range-track {
  height: 4px;

  border: 1px solid rgba(214, 106, 37, .85);
  background: #5b2813;

  box-shadow:
    0 0 6px rgba(215, 104, 37, .18);
}

#effortSlider::-moz-range-progress {
  height: 4px;

  background: #ff873c;
  border: 1px solid #d76525;
}

#effortSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;

  border-radius: 50%;
  border: 1px solid rgba(255, 196, 140, .95);

  background: #ffd2aa;

  box-shadow:
    0 0 0 1px rgba(215, 104, 37, .35),
    0 0 8px rgba(255, 176, 108, .35);
}

#effortLabel {
  width: 82px !important;
  min-width: 82px !important;

  margin: 0 !important;
  padding-left: 4px !important;

  overflow: visible !important;

  color: var(--orange-hi) !important;

  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1px;

  text-align: left !important;
  white-space: nowrap !important;
}


/* -------------------------
   WEB MODE CONTROL
   ------------------------- */
.web-mode-control {
  display: grid;
  grid-template-columns: auto 82px;
  align-items: center;
  gap: 8px;
}

.web-mode-title {
  color: #673119;
  font-size: 7px;
  letter-spacing: 1px;
}

#webModeSelect {
  height: 22px;

  color: var(--orange-hi);
  background: #100704;

  border: 1px solid #6c3015;

  font-size: 7px;
  letter-spacing: 1px;

  outline: none;
}

#webModeSelect:focus {
  border-color: var(--orange-hi);
}


/* -------------------------
   STOP / MESSAGE EDIT
   ------------------------- */
#sendButton.stop-mode {
  color: #ff7967 !important;
  border-color: #a63729 !important;
  background: #250805 !important;

  box-shadow:
    inset 0 0 10px rgba(255, 70, 50, .08);
}

.message {
  position: relative;
}

.message-edit {
  position: absolute;
  top: -9px;
  right: 8px;

  padding: 3px 7px;
  opacity: 0;

  color: #a8532b;
  background: #090402;
  border: 1px solid #54240f;

  font-size: 7px;
  letter-spacing: 1px;

  transition: opacity .12s ease;
}

.message.user:hover .message-edit {
  opacity: 1;
}

.message-edit:hover {
  color: var(--orange-hi);
  border-color: var(--orange);
}

.message.user.editing {
  width: min(78%, 760px);
  padding: 12px;
}

.message-edit-input {
  width: 100%;
  min-height: 90px;
  max-height: 300px;

  resize: vertical;
  padding: 11px;

  color: #efc0a1;
  background: #090503;
  border: 1px solid #82401d;
  outline: none;

  line-height: 1.5;
}

.message-edit-input:focus {
  border-color: var(--orange-hi);
}

.message-edit-note {
  margin-top: 7px;

  color: #85401f;
  font-size: 8px;
  line-height: 1.4;
}

.message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;

  margin-top: 9px;
}

.message-edit-actions button {
  padding: 6px 9px;

  color: #b65d30;
  background: #100704;
  border: 1px solid #54240f;

  font-size: 8px;
}

.message-edit-actions button:hover {
  color: var(--orange-hi);
  border-color: var(--orange);
}


@media (max-width: 760px) {
  .composer-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .composer-hint {
    width: 100% !important;
    text-align: left;
  }
}


/* =====================================================
   MAGI WEB RESEARCH ACTIVITY — v0.2.2
   ===================================================== */

.web-research-activity {
  align-self: flex-start;

  max-width: 660px;

  margin:
    5px 0 10px 8px;

  padding:
    7px 10px;

  border-left:
    1px solid #87401d;

  color:
    #a9552c;

  font-size:
    8px;

  letter-spacing:
    .55px;

  line-height:
    1.6;
}

.web-research-activity.complete {
  opacity: .72;
}

.web-research-line {
  white-space:
    normal;
}


/* =====================================================
   MAGI WEB SOURCES — v0.2.1
   ===================================================== */

.web-source-panel {
  align-self: flex-start;
  display: flex;
  flex-direction: column;

  width: min(900px, 88%) !important;
  max-width: 900px !important;

  gap: 8px !important;
  margin: 16px 0 28px 18px !important;
  padding: 14px 16px !important;

  position: relative;

  border: 1px solid var(--orange) !important;
  border-left: 4px solid var(--orange-hi) !important;

  background: rgba(38, 17, 8, .92) !important;

  box-shadow:
    0 0 16px
    rgba(220, 105, 40, .12);
}

.web-source-heading {
  color: var(--orange-hi) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;

  padding-bottom: 8px;

  border-bottom:
    1px solid #6d3217;
}

.web-source-heading::before {
  content: "◇ ";
}

.web-source-link {
  display: block !important;

  padding: 7px 9px !important;

  color: #d87943 !important;
  background: rgba(10, 4, 2, .5);

  border: 1px solid #45200f;

  font-size: 9px !important;
  line-height: 1.45 !important;
  letter-spacing: .35px;

  text-decoration: none !important;
  overflow-wrap: anywhere;
}

.web-source-link:hover {
  color: #ffd0aa !important;
  border-color: var(--orange) !important;
  background: rgba(71, 30, 12, .55);
}


/* ==========================================================
   MAGI AGENT ERROR STATE
   ========================================================== */

.magi-agent-error {
  position: relative;

  outline:
    1px solid
    rgba(255, 42, 42, .95) !important;

  box-shadow:
    0 0 22px
    rgba(255, 20, 20, .48) !important;

  animation:
    magiAgentErrorFlash
    .65s
    steps(2, end)
    8;
}

.magi-agent-error::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 40;

  border:
    1px solid
    rgba(255, 40, 40, .72);

  background:
    rgba(100, 0, 0, .08);

  pointer-events:
    none;
}

.magi-error-badge {
  color:
    #ff4545 !important;

  font-weight:
    700;

  text-shadow:
    0 0 7px
    rgba(255, 0, 0, .75);
}

@keyframes magiAgentErrorFlash {
  0% {
    filter:
      brightness(1);
  }

  50% {
    filter:
      brightness(1.8);
  }

  100% {
    filter:
      brightness(1);
  }
}


/* ==========================================================
   MAGI ATTACHMENTS
   ========================================================== */

.magi-attachment-button {
  position: relative;
  z-index: 1002;

  min-width: 58px;
  height: 28px;

  margin-right: 5px;

  padding:
    0 9px;

  color:
    #c86632;

  background:
    #0a0301;

  border:
    1px solid #54240f;

  font-size:
    7px;

  letter-spacing:
    1px;

  cursor:
    pointer;
}

.magi-attachment-button:hover {
  color:
    #ff9d5f;

  border-color:
    #b65320;
}

.magi-attachment-tray {
  display: none;

  position: relative;
  z-index: 1002;

  gap: 6px;

  margin:
    0 0 5px 0;

  padding:
    5px 7px;

  border:
    1px solid #40200f;

  background:
    rgba(8, 3, 1, .96);
}

.magi-attachment-tray.has-files {
  display: flex;
  flex-wrap: wrap;
}

.magi-attachment-chip {
  display: flex;
  align-items: center;

  max-width: 240px;

  gap: 7px;

  padding:
    4px 6px;

  color:
    #d3723d;

  border:
    1px solid #653018;

  background:
    #100603;

  font-size:
    8px;
}

.magi-attachment-chip span {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.magi-attachment-remove {
  flex: 0 0 auto;

  padding: 0;

  color:
    #bc542d;

  background:
    transparent;

  border: 0;

  font-size:
    14px;

  cursor:
    pointer;
}

.magi-attachment-remove:hover {
  color:
    #ff634d;
}

.magi-file-drag {
  outline:
    1px dashed
    #d86d35 !important;

  box-shadow:
    0 0 14px
    rgba(216, 109, 53, .2);
}


/* ==========================================================
   MAGI LIVE / FLOATING AGENT STATUS — v0.2.1
   ========================================================== */

.magi-live-agent-badge {
  position: fixed !important;

  right: 10px;
  bottom: 8px;

  z-index: 9000 !important;

  min-height: 10px;
  width: max-content !important;

  display: block !important;

  padding: 2px 5px !important;
  margin: 0 !important;

  transform: translateX(-50%) !important;

  color: #ff9857;
  background: rgba(5, 2, 1, .88);

  border:
    1px solid
    rgba(133, 54, 20, .55);

  font-size: 7px;
  line-height: 1.25;
  letter-spacing: 1px;

  text-align: center !important;
  text-transform: uppercase;
  white-space: nowrap !important;

  pointer-events: none !important;
}

.magi-web-active {
  box-shadow:
    0 0 18px
    rgba(255, 120, 45, .28) !important;

  filter:
    brightness(1.12) !important;
}


/* ==========================================================
   MAGI COMPOSER DOCK — v0.2
   ========================================================== */

/*
 * The dock lives on document.body and is bottom-anchored.
 * A taller multiline editor therefore grows upward while the
 * effort/web controls remain attached underneath it.
 */
#magiComposerDock {
  position: fixed !important;

  left:
    var(--magi-composer-left) !important;

  bottom:
    8px !important;

  width:
    var(--magi-composer-width) !important;

  z-index:
    7000 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    5px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  visibility:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;

  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;

  transition:
    none !important;
}


body.magi-composer-ready
#magiComposerDock {
  visibility:
    visible !important;

  opacity:
    1 !important;

  pointer-events:
    auto !important;
}


/* ATTACH | MESSAGE | SEND */
#magiComposerRow {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    70px
    minmax(0, 1fr)
    70px !important;

  align-items:
    stretch !important;

  gap:
    5px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  background:
    transparent !important;

  border:
    none !important;

  outline:
    none !important;

  box-shadow:
    none !important;
}


#magiComposerRow::before,
#magiComposerRow::after {
  display:
    none !important;

  content:
    none !important;
}


#magiComposerRow
#magiAttachmentButton {
  grid-column:
    1 !important;

  position:
    relative !important;

  width:
    70px !important;

  min-width:
    70px !important;

  height:
    auto !important;

  margin:
    0 !important;

  align-self:
    stretch !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}


#magiComposerRow
textarea,
#magiComposerRow
input[type="text"],
#magiComposerRow
[contenteditable="true"] {
  grid-column:
    2 !important;

  position:
    relative !important;

  left:
    auto !important;

  top:
    auto !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    40px !important;

  max-height:
    165px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  overflow-y:
    auto !important;

  color:
    #d26c38 !important;

  background:
    #080301 !important;

  border:
    1px solid #6b2e14 !important;

  outline:
    none !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


#magiComposerRow
#sendButton,
#magiComposerRow
button:last-child {
  grid-column:
    3 !important;

  position:
    relative !important;

  width:
    70px !important;

  min-width:
    70px !important;

  height:
    auto !important;

  margin:
    0 !important;

  align-self:
    stretch !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}


/* Attachment chips remain directly above the input row. */
#magiAttachmentTray {
  position:
    relative !important;

  left:
    auto !important;

  top:
    auto !important;

  bottom:
    auto !important;

  width:
    100% !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  z-index:
    auto !important;

  background:
    #050201 !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}


/* Effort and Web stay beneath the editor and move with it. */
#magiComposerControls {
  position:
    relative !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    22px !important;

  width:
    100% !important;

  min-height:
    18px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;
}


#magiComposerControls
.effort-control,
#magiComposerControls
.web-mode-control {
  position:
    static !important;

  left:
    auto !important;

  right:
    auto !important;

  top:
    auto !important;

  bottom:
    auto !important;

  inset:
    auto !important;

  margin:
    0 !important;

  transform:
    none !important;
}


/* ==========================================================
   MAGI v0.2.3 — ATTACHMENT / WEB UI HOTFIX
   ========================================================== */

/*
 * The original composer shell is left behind after its live
 * controls are moved into #magiComposerDock.  Do not render
 * that now-empty bordered rectangle behind the dock.
 */
body.magi-composer-ready #composer .composer-shell {
  display: none !important;
}

/*
 * Legitimate web research should remain visible without
 * dominating the conversation area.
 */
.web-source-panel {
  width: min(720px, 74%) !important;
  max-width: 720px !important;
  gap: 4px !important;
  margin: 10px 0 16px 10px !important;
  padding: 8px 10px !important;
  border-left-width: 2px !important;
  box-shadow: none !important;
}

.web-source-heading {
  padding-bottom: 5px !important;
  font-size: 8px !important;
  letter-spacing: 1.4px !important;
}

.web-source-link {
  padding: 4px 6px !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
}

.web-research-activity.complete {
  margin-bottom: 6px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ==========================================================
   MAGI FLOATING STATUS BADGE POSITION FIX v0.2.4
   ========================================================== */

.magi-live-agent-badge {


}


/* ==========================================================
   MAGI FLOATING STATUS BADGE POSITION FIX v0.2.4
   ========================================================== */

.magi-live-agent-badge {
  right: auto !important;
  bottom: auto !important;

  height: auto !important;
  min-height: 0 !important;

  box-sizing: border-box !important;
}




/* ==========================================================
   MAGI WEB STATUS POSITION FIX v0.2.5
   ========================================================== */

/*
 * Web activity is purely visual.
 * It must NEVER alter MAGI panel positioning.
 */
.magi-panel.magi-web-active {
  position: absolute !important;
}


/*
 * Badge coordinates come entirely from JavaScript.
 */
.magi-live-agent-badge {
  right: auto !important;
  bottom: auto !important;

  height: auto !important;
  min-height: 0 !important;
}




/* ==========================================================
   MAGI STATUS + WEB TRACE CLEANUP v0.2.6
   ========================================================== */

/*
 * Agent activity belongs in the existing panel-status field.
 * The old floating status badge is retired completely.
 */
.magi-live-agent-badge {
  display: none !important;
}


/*
 * The detailed live web-search trace duplicated information
 * already available in MELCHIOR's status and the operation HUD.
 *
 * Keeping it out of the visual layout also prevents it from
 * falling behind the fixed composer/frame.
 */
.web-research-activity,
#webResearchActivity {
  display: none !important;
}


/*
 * Web activity may highlight MELCHIOR, but must never alter
 * the panel's geometry.
 */
.magi-panel.magi-web-active {
  position: absolute !important;
}


/*
 * Preserve the normal internal panel layout while active.
 */
.magi-panel.magi-web-active .panel-content {
  position: absolute !important;
}


/* =====================================================
   MAGI MEMORY V1
   ===================================================== */

body.magi-memory-open {
  overflow: hidden;
}

.magi-memory-overlay {
  position: fixed;
  z-index: 2100;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(0,0,0,.88);
}

.magi-memory-window {
  width:
    min(1120px, 96vw);

  height:
    min(760px, 92vh);

  min-height: 520px;

  display: grid;

  grid-template-rows:
    auto auto auto auto minmax(0,1fr);

  color:
    var(--orange);

  background:
    #050302;

  border:
    1px solid
    var(--orange);

  box-shadow:
    0 0 55px
    rgba(215,104,37,.16);
}

.magi-memory-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    20px 22px 17px;

  border-bottom:
    1px solid
    var(--orange-low);

  background:
    linear-gradient(
      90deg,
      #160904,
      #070302 55%,
      #030202
    );
}

.magi-memory-kicker {
  margin-bottom: 5px;

  color:
    #8e461f;

  font-size: 8px;

  letter-spacing: 3px;
}

.magi-memory-heading {
  color:
    var(--orange-hi);

  font-size: 24px;

  letter-spacing: 5px;
}

.magi-memory-header-actions {
  display: flex;

  gap: 8px;
}

.magi-memory-header button,
.magi-memory-actions button {
  padding:
    8px 11px;

  color:
    var(--orange);

  background:
    #100604;

  border:
    1px solid
    var(--orange-mid);

  font-size: 8px;

  letter-spacing: 1px;
}

.magi-memory-header button:hover,
.magi-memory-actions button:hover {
  color:
    var(--orange-hi);

  border-color:
    var(--orange);
}

.magi-memory-policy {
  display: flex;

  flex-wrap: wrap;

  gap:
    10px 22px;

  padding:
    9px 22px;

  color:
    #97502a;

  background:
    #090403;

  border-bottom:
    1px solid #32150a;

  font-size: 7px;

  letter-spacing: 1.2px;
}

.magi-memory-policy span:first-child {
  color:
    var(--green);
}

.magi-memory-toolbar {
  display: grid;

  grid-template-columns:
    minmax(220px,1fr)
    150px
    180px
    130px;

  gap: 8px;

  padding:
    13px 22px 10px;
}

.magi-memory-toolbar input,
.magi-memory-toolbar select,
.magi-memory-editor input,
.magi-memory-editor select,
.magi-memory-editor textarea {
  width: 100%;

  color:
    var(--orange-hot);

  background:
    #080403;

  border:
    1px solid
    var(--orange-mid);

  outline: none;
}

.magi-memory-toolbar input,
.magi-memory-toolbar select {
  height: 34px;

  padding:
    0 10px;

  font-size: 8px;
}

.magi-memory-toolbar input:focus,
.magi-memory-toolbar select:focus,
.magi-memory-editor input:focus,
.magi-memory-editor select:focus,
.magi-memory-editor textarea:focus {
  border-color:
    var(--orange-hi);
}

.magi-memory-summary {
  display: flex;

  justify-content: space-between;

  gap: 16px;

  padding:
    0 22px 10px;

  color:
    #88431f;

  font-size: 8px;

  letter-spacing: 1.2px;
}

#magiMemoryStatus.error,
#magiMemoryEditorStatus.error {
  color:
    var(--red);
}

.magi-memory-list {
  min-height: 0;

  overflow-y: auto;

  padding:
    0 22px 22px;

  display: grid;

  align-content: start;

  gap: 10px;
}

.magi-memory-empty {
  padding:
    34px 20px;

  color:
    #653018;

  text-align: center;

  border:
    1px dashed
    #3f1a0c;

  font-size: 9px;

  letter-spacing: 2px;
}

.magi-memory-card {
  padding:
    13px 14px 12px;

  background:
    rgba(24,10,5,.75);

  border:
    1px solid
    #48200e;

  border-left:
    3px solid
    #713317;
}

.magi-memory-card.pinned {
  border-left-color:
    var(--orange-hi);

  box-shadow:
    inset 4px 0 18px
    rgba(215,104,37,.08);
}

.magi-memory-card.expired {
  opacity: .58;
}

.magi-memory-card-top {
  display: grid;

  grid-template-columns:
    auto minmax(0,1fr) auto;

  align-items: center;

  gap: 9px;

  margin-bottom: 8px;
}

.magi-memory-type {
  color:
    var(--orange-hi);

  font-size: 8px;

  letter-spacing: 1.7px;
}

.magi-memory-scope {
  overflow: hidden;

  color:
    #80502f;

  font-size: 8px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.magi-memory-state {
  color:
    var(--green);

  font-size: 7px;

  letter-spacing: 1px;
}

.magi-memory-card.expired
.magi-memory-state {
  color:
    var(--red);
}

.magi-memory-title {
  margin-bottom: 7px;

  color:
    #ef9b68;

  font-size: 12px;

  letter-spacing: .5px;
}

.magi-memory-content {
  max-height: 125px;

  overflow-y: auto;

  color:
    #c77c51;

  font-size: 10px;

  line-height: 1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}

.magi-memory-meta {
  margin-top: 9px;

  color:
    #653519;

  font-size: 7px;

  letter-spacing: .7px;
}

.magi-memory-actions {
  display: flex;

  justify-content: flex-end;

  gap: 6px;

  margin-top: 10px;
}

.magi-memory-actions
button.danger {
  color:
    #ff725c;

  border-color:
    #742619;
}

.magi-memory-actions
button:disabled {
  opacity: .35;

  cursor: not-allowed;
}

.magi-memory-editor {
  width:
    min(680px, 92vw);

  max-width: 680px;
}

.magi-memory-editor-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 13px;
}

.magi-memory-editor-grid
label {
  min-width: 0;
}

.magi-memory-editor-grid
label.wide {
  grid-column:
    1 / -1;
}

.magi-memory-editor-grid
label > span {
  display: block;

  margin-bottom: 5px;

  color:
    #8f4a25;

  font-size: 8px;

  letter-spacing: 1.2px;
}

.magi-memory-editor input,
.magi-memory-editor select {
  height: 38px;

  padding:
    0 10px;
}

.magi-memory-editor textarea {
  min-height: 190px;

  resize: vertical;

  padding:
    10px;

  line-height: 1.5;
}

.magi-memory-editor-status {
  min-height: 18px;

  margin-top: 10px;

  color:
    #81411f;

  font-size: 8px;

  letter-spacing: 1px;
}

@media (
  max-width: 820px
) {
  .magi-memory-overlay {
    padding: 8px;
  }

  .magi-memory-window {
    width: 100%;
    height: 96vh;
  }

  .magi-memory-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .magi-memory-toolbar {
    grid-template-columns:
      1fr 1fr;
  }

  .magi-memory-editor-grid {
    grid-template-columns:
      1fr;
  }

  .magi-memory-editor-grid
  label.wide {
    grid-column:
      auto;
  }
}


/* =====================================================
   MAGI MEMORY SUGGESTIONS V1
   ===================================================== */

.magi-memory-proposal {
  align-self: flex-start;
  width: min(760px, 82%);
  margin: -4px 0 18px 8px;
  padding: 13px 14px;
  color: #c9784a;
  background: rgba(18,8,4,.96);
  border: 1px solid #6b2f14;
  border-left: 4px solid var(--orange-hi);
  box-shadow: 0 0 18px rgba(215,104,37,.09);
  transition: opacity .18s ease, transform .18s ease;
}

.magi-memory-proposal.saved {
  border-left-color: var(--green);
}

.magi-memory-proposal.dismissed {
  opacity: 0;
  transform: translateY(-4px);
}

.magi-memory-proposal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #4c1f0d;
}

.magi-memory-proposal-header span:first-child {
  color: var(--orange-hi);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.magi-memory-proposal-state {
  color: var(--green);
  font-size: 7px;
  letter-spacing: 1px;
  text-align: right;
}

.magi-memory-proposal-meta {
  margin-top: 9px;
  color: #8c4825;
  font-size: 7px;
  letter-spacing: 1.2px;
}

.magi-memory-proposal-title {
  margin-top: 8px;
  color: #f19a66;
  font-size: 11px;
}

.magi-memory-proposal-content {
  margin-top: 7px;
  color: #d7895b;
  font-size: 9px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.magi-memory-proposal-reason {
  margin-top: 9px;
  padding-top: 8px;
  color: #795039;
  border-top: 1px solid #35160a;
  font-size: 7px;
  line-height: 1.45;
}

.magi-memory-proposal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.magi-memory-proposal-actions button {
  padding: 7px 10px;
  color: var(--orange);
  background: #0e0503;
  border: 1px solid var(--orange-mid);
  font-size: 8px;
  letter-spacing: 1px;
}

.magi-memory-proposal-actions button:hover:not(:disabled) {
  color: var(--orange-hi);
  border-color: var(--orange);
}

.magi-memory-proposal-actions button.dismiss {
  color: #8b4930;
  border-color: #4a2012;
}

.magi-memory-proposal-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .magi-memory-proposal {
    width: 94%;
  }

  .magi-memory-proposal-header {
    flex-direction: column;
  }

  .magi-memory-proposal-state {
    text-align: left;
  }
}


/* =====================================================
   MAGI MEMORY MODAL HOTFIX V1
   Confirm dialogs must render above the Memory overlay.
   ===================================================== */

.magi-modal-overlay {
  z-index: 2400 !important;
}


/* =====================================================
   MAGI MEMORY RETRIEVAL V1
   ===================================================== */

/*
 * Retrieval is intentionally quiet in chat. The Memory
 * window shows that retrieval is automatic while saving
 * still requires explicit approval.
 */

.magi-memory-policy span:last-child {
  color: var(--blue);
}


/* =====================================================
   MAGI MEMORY UPDATE DETECTION V1
   ===================================================== */

.magi-memory-proposal.update {
  border-left-color:
    var(--blue);
}

.magi-memory-proposal-diff {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 10px;
}

.magi-memory-diff-block {
  min-width: 0;

  padding: 10px;

  background:
    rgba(5,3,2,.7);

  border:
    1px solid #44200f;
}

.magi-memory-diff-block.old {
  opacity: .72;
}

.magi-memory-diff-block.new {
  border-color:
    #315a70;
}

.magi-memory-diff-label {
  margin-bottom: 7px;

  color: #855033;

  font-size: 7px;

  letter-spacing: 1.3px;
}

.magi-memory-diff-block.new
.magi-memory-diff-label {
  color: var(--blue);
}

@media (max-width: 820px) {
  .magi-memory-proposal-diff {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   MAGI MEMORY QUALITY / MAINTENANCE V1
   ===================================================== */

.magi-memory-proposal.merge {
  border-left-color:
    var(--green);
}

.magi-memory-merge-stack {
  display: grid;

  gap: 7px;

  margin-top: 10px;

  padding: 10px;

  background:
    rgba(5,3,2,.58);

  border:
    1px solid #315a3f;
}

.magi-memory-merge-source {
  padding: 8px 9px;

  background:
    rgba(18,8,4,.52);

  border:
    1px solid #3e1b0d;

  opacity: .76;
}

.magi-memory-merge-replacement {
  margin-top: 10px;

  padding: 10px;

  background:
    rgba(8,18,12,.42);

  border:
    1px solid #315a3f;
}

.magi-memory-proposal.merge
.magi-memory-proposal-state {
  color:
    var(--green);
}


/* =====================================================
   MAGI MEMORY CONTROLS V1
   ===================================================== */

.magi-memory-controls {
  display: grid;

  grid-template-columns:
    minmax(180px,1fr)
    auto
    auto
    auto
    auto;

  align-items: center;

  gap: 9px;

  padding:
    11px 22px;

  background:
    #070302;

  border-bottom:
    1px solid #32150a;
}

.magi-memory-runtime-state {
  color:
    var(--green);

  font-size: 8px;

  letter-spacing: 1.2px;
}

.magi-memory-runtime-state.disabled {
  color:
    var(--red);
}

.magi-memory-control {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #a4572d;

  font-size: 8px;

  letter-spacing: .8px;

  white-space: nowrap;
}

.magi-memory-control input {
  width: 14px;
  height: 14px;

  accent-color:
    var(--orange-hi);
}

.magi-memory-control input:disabled
+ span {
  opacity: .38;
}

.magi-memory-clear-all {
  padding:
    7px 9px;

  color:
    #ff725c;

  background:
    #120403;

  border:
    1px solid #742619;

  font-size: 7px;

  letter-spacing: .8px;

  white-space: nowrap;
}

.magi-memory-clear-all:hover {
  color:
    #ff9b8b;

  border-color:
    var(--red);
}

@media (max-width: 1050px) {
  .magi-memory-controls {
    grid-template-columns:
      1fr 1fr;
  }

  .magi-memory-runtime-state {
    grid-column:
      1 / -1;
  }
}

@media (max-width: 680px) {
  .magi-memory-controls {
    grid-template-columns:
      1fr;
  }

  .magi-memory-runtime-state {
    grid-column:
      auto;
  }
}