@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Mono:wght@300;400;500&display=swap');

:root {
   --bg: #e8e2d0;
   --bg2: #e0d9c6;
   --bg3: #d8d0bc;
   --card: #f2ede0;
   --card2: #f8f4ea;
   --border: #cdc5af;
   --border2: #bfb69e;
   --text: #28231c;
   --text2: #52493e;
   --muted: #8c8070;
   --muted2: #a89c8c;

   --cl: #9c6b1a;
   --cl-bg: rgba(156, 107, 26, 0.08);
   --gp: #1f6b45;
   --gp-bg: rgba(31, 107, 69, 0.08);
   --ki: #2a5f9e;
   --ki-bg: rgba(42, 95, 158, 0.08);
   --ge: #7040a0;
   --ge-bg: rgba(112, 64, 160, 0.08);
   --ds: #1a5ea8;
   --ds-bg: rgba(26, 94, 168, 0.08);
   --gk: #2a2a2a;
   --gk-bg: rgba(42, 42, 42, 0.08);
   --px: #3d6eaa;
   --px-bg: rgba(61, 110, 170, 0.08);

   --ok: #1f6b45;
   --warn: #9c6b1a;
   --risk: #b03030;
   --info: #2a5f9e;

   --r: 9px;
   --sh: 0 1px 3px rgba(40, 35, 28, 0.10), 0 4px 12px rgba(40, 35, 28, 0.06);
   --sh2: 0 2px 8px rgba(40, 35, 28, 0.12), 0 8px 24px rgba(40, 35, 28, 0.08);
}

/* DARK MODE */
body.dark {
   --bg: #1a1a1a;
   --bg2: #242424;
   --bg3: #2e2e2e;
   --card: #1e1e1e;
   --card2: #262626;
   --border: #3a3a3a;
   --border2: #4a4a4a;
   --text: #e8e2d0;
   --text2: #b0a898;
   --muted: #8c8070;
   --muted2: #6a6050;
   --cl-bg: rgba(156, 107, 26, 0.15);
   --gp-bg: rgba(31, 107, 69, 0.15);
   --ki-bg: rgba(42, 95, 158, 0.15);
   --ge-bg: rgba(112, 64, 160, 0.15);
   --ds-bg: rgba(26, 94, 168, 0.15);
   --gk-bg: rgba(200, 200, 200, 0.1);
   --px-bg: rgba(61, 110, 170, 0.15);
   --sh: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);
   --sh2: 0 2px 8px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .2);
}

body.dark .tb-mark {
   background: var(--card2);
   color: var(--text)
}

body.dark .run-btn {
   background: var(--gp);
   color: white
}

body.dark .msg-u-b {
   background: var(--gp);
   color: white
}

body.dark .snd-btn {
   background: var(--gp);
   color: white
}

body.dark .cons-ic {
   background: var(--gp)
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html,
body {
   height: 100%;
   overflow: hidden
}

body {
   font-family: 'DM Sans', sans-serif;
   background: var(--bg);
   color: var(--text);
   display: flex;
   flex-direction: column;
   font-size: 13px;
   transition: background .3s, color .3s
}

::-webkit-scrollbar {
   width: 3px;
   height: 3px
}

::-webkit-scrollbar-thumb {
   background: var(--border2);
   border-radius: 3px
}

/* TOPBAR */
.tb {
   height: 48px;
   background: var(--card);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   padding: 0 14px;
   gap: 10px;
   flex-shrink: 0;
   box-shadow: 0 1px 0 var(--border)
}

.tb-logo {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-right: 4px
}

.tb-mark {
   width: 28px;
   height: 28px;
   background: var(--text);
   border-radius: 7px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0
}

.tb-name {
   font-family: 'Fraunces', serif;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -.3px
}

.tb-sep {
   width: 1px;
   height: 18px;
   background: var(--border)
}

.proj-pill {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 20px;
   font-size: 11.5px;
   cursor: pointer;
   transition: border-color .15s
}

.proj-pill:hover {
   border-color: var(--gp)
}

.proj-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--gp)
}

.proj-n {
   font-weight: 500
}

.proj-s {
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   color: var(--muted)
}

.tb-sp {
   flex: 1
}

.tb-sync {
   display: flex;
   align-items: center;
   gap: 5px;
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   color: var(--muted)
}

.sync-d {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--gp);
   animation: blink 2s infinite
}

@keyframes blink {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .3
   }
}

.tb-i {
   width: 30px;
   height: 30px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 13px;
   color: var(--text2);
   transition: all .15s
}

.tb-i:hover {
   border-color: var(--gp);
   color: var(--gp)
}

.run-btn {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 6px 14px;
   background: var(--text);
   color: var(--card2);
   border: none;
   border-radius: 7px;
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all .15s;
   letter-spacing: .2px
}

.run-btn:hover {
   background: #3a302a;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(40, 35, 28, .25)
}

/* LAYOUT */
.main {
   display: flex;
   flex: 1;
   overflow: hidden
}

/* SIDEBAR */
.sb {
   width: 196px;
   background: var(--card);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   overflow-y: auto
}

.sb-s {
   padding: 12px 11px 6px
}

.sb-lbl {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   font-weight: 500;
   letter-spacing: 2px;
   color: var(--muted);
   text-transform: uppercase;
   margin-bottom: 7px;
   padding: 0 3px
}

.nav-i {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 6px 9px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12.5px;
   font-weight: 400;
   color: var(--text2);
   transition: all .15s;
   margin-bottom: 1px;
   position: relative
}

.nav-i:hover {
   background: var(--bg2);
   color: var(--text)
}

.nav-i.on {
   background: var(--card2);
   color: var(--text);
   font-weight: 500;
   border: 1px solid var(--border);
   box-shadow: var(--sh)
}

.nav-i.on::before {
   content: '';
   position: absolute;
   left: -1px;
   top: 50%;
   transform: translateY(-50%);
   width: 3px;
   height: 14px;
   background: var(--gp);
   border-radius: 0 2px 2px 0
}

.nav-ic {
   font-size: 13px;
   width: 17px;
   text-align: center;
   opacity: .8
}

.nbadge {
   margin-left: auto;
   padding: 1px 5px;
   border-radius: 9px;
   font-size: 9px;
   font-weight: 600;
   font-family: 'DM Mono', monospace;
   background: var(--gp);
   color: white
}

.nbadge.am {
   background: var(--warn)
}

.nbadge.rd {
   background: var(--risk)
}

.sb-div {
   height: 1px;
   background: var(--border);
   margin: 5px 11px
}

.hi {
   padding: 7px 9px;
   border-radius: 6px;
   cursor: pointer;
   margin-bottom: 2px;
   border: 1px solid transparent;
   transition: all .15s
}

.hi:hover {
   background: var(--card2);
   border-color: var(--border)
}

.hi.on {
   background: var(--card2);
   border-color: var(--border);
   box-shadow: var(--sh)
}

.hi-t {
   font-size: 11px;
   font-weight: 500;
   color: var(--text);
   margin-bottom: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.hi-m {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted)
}

.hi-d {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   flex-shrink: 0
}

.sb-foot {
   padding: 9px 11px;
   margin-top: auto;
   border-top: 1px solid var(--border)
}

.new-s {
   width: 100%;
   padding: 7px;
   background: var(--bg);
   border: 1.5px dashed var(--border2);
   border-radius: 6px;
   font-size: 11.5px;
   font-weight: 500;
   color: var(--text2);
   cursor: pointer;
   transition: all .15s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px
}

.new-s:hover {
   border-color: var(--gp);
   color: var(--gp);
   background: rgba(31, 107, 69, .04)
}

/* WORKSPACE */
.ws {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-width: 0
}

/* PRESET SELECTOR */
.preset-bar {
   display: flex;
   align-items: center;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
   margin-right: 6px
}

.preset-btn {
   padding: 4px 8px;
   font-size: 10px;
   font-weight: 500;
   cursor: pointer;
   color: var(--muted);
   transition: all .15s;
   border-right: 1px solid var(--border);
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: 'DM Mono', monospace
}

.preset-btn:last-child {
   border-right: none
}

.preset-btn:hover {
   color: var(--text);
   background: rgba(40, 35, 28, .05)
}

.preset-btn.on {
   background: var(--card);
   color: var(--text);
   font-weight: 600
}

.preset-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   flex-shrink: 0
}

/* AGENT CONFIG BAR */
.acfg {
   background: var(--card);
   border-bottom: 1px solid var(--border);
   padding: 7px 14px;
   display: flex;
   align-items: center;
   gap: 6px;
   flex-shrink: 0;
   flex-wrap: wrap;
}

.acfg-lbl {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   letter-spacing: 1.5px;
   text-transform: uppercase;
   white-space: nowrap;
   margin-right: 2px
}

.agt-sel {
   display: flex;
   align-items: center;
   gap: 0;
   border: 1.5px solid;
   border-radius: 7px;
   transition: all .2s;
   flex-shrink: 0;
   position: relative
}

.agt-sel.off {
   opacity: .28;
   filter: grayscale(1)
}

.agt-sel:not(.off):hover {
   box-shadow: var(--sh)
}

.agt-toggle {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 4px 8px 4px 7px;
   cursor: pointer;
   font-size: 11.5px;
   font-weight: 600;
   white-space: nowrap;
   border-right: 1px solid;
   transition: background .15s;
   border-radius: 5.5px 0 0 5.5px
}

.agt-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   flex-shrink: 0
}

.agt-ck {
   font-size: 9px
}

.agt-ver {
   display: flex;
   align-items: center;
   gap: 3px;
   padding: 4px 7px;
   cursor: pointer;
   font-size: 10px;
   font-family: 'DM Mono', monospace;
   white-space: nowrap;
   transition: background .15s;
   position: relative;
   border-radius: 0 5.5px 5.5px 0
}

.agt-ver:hover {
   filter: brightness(.95)
}

.ver-dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 7px;
   box-shadow: var(--sh2);
   min-width: 180px;
   z-index: 200;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);
   transition: all .2s;
   max-height: 320px;
   overflow-y: auto
}

.agt-ver.open .ver-dropdown {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.ver-opt {
   padding: 7px 11px;
   font-size: 11.5px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: background .12s
}

.ver-opt:hover {
   background: var(--bg2)
}

.ver-opt.sel {
   font-weight: 600
}

.ver-opt-name {
   font-family: 'DM Sans', sans-serif;
   font-size: 11.5px;
   color: var(--text)
}

.ver-opt-ctx {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   margin-left: auto
}

.ver-opt-badge {
   font-size: 8.5px;
   padding: 1px 5px;
   border-radius: 4px;
   font-family: 'DM Mono', monospace
}

.ver-synth {
   background: rgba(112, 64, 160, .12);
   color: var(--ge)
}

.ver-fast {
   background: rgba(31, 107, 69, .1);
   color: var(--gp)
}

.ver-free {
   background: rgba(40, 35, 28, .08);
   color: var(--muted)
}

/* Colors per agent */
.ac-cl {
   border-color: var(--cl);
   color: var(--cl)
}

.ac-cl .agt-toggle {
   background: var(--cl-bg);
   border-color: var(--cl)
}

.ac-cl .agt-ver {
   background: rgba(156, 107, 26, .05)
}

.ac-gp {
   border-color: var(--gp);
   color: var(--gp)
}

.ac-gp .agt-toggle {
   background: var(--gp-bg);
   border-color: var(--gp)
}

.ac-gp .agt-ver {
   background: rgba(31, 107, 69, .04)
}

.ac-ki {
   border-color: var(--ki);
   color: var(--ki)
}

.ac-ki .agt-toggle {
   background: var(--ki-bg);
   border-color: var(--ki)
}

.ac-ki .agt-ver {
   background: rgba(42, 95, 158, .04)
}

.ac-ge {
   border-color: var(--ge);
   color: var(--ge)
}

.ac-ge .agt-toggle {
   background: var(--ge-bg);
   border-color: var(--ge)
}

.ac-ge .agt-ver {
   background: rgba(112, 64, 160, .04)
}

.ac-ds {
   border-color: var(--ds);
   color: var(--ds)
}

.ac-ds .agt-toggle {
   background: var(--ds-bg);
   border-color: var(--ds)
}

.ac-ds .agt-ver {
   background: rgba(26, 94, 168, .04)
}

.ac-gk {
   border-color: var(--gk);
   color: var(--gk)
}

.ac-gk .agt-toggle {
   background: var(--gk-bg);
   border-color: var(--gk)
}

.ac-gk .agt-ver {
   background: rgba(42, 42, 42, .04)
}

.ac-px {
   border-color: var(--px);
   color: var(--px)
}

.ac-px .agt-toggle {
   background: var(--px-bg);
   border-color: var(--px)
}

.ac-px .agt-ver {
   background: rgba(61, 110, 170, .04)
}

.acfg-sp {
   flex: 1
}

.mode-btn {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 5px 9px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   font-size: 10.5px;
   font-weight: 500;
   color: var(--text2);
   cursor: pointer;
   transition: all .15s;
   white-space: nowrap
}

.mode-btn:hover {
   border-color: var(--gp)
}

.mode-v {
   color: var(--gp);
   font-weight: 600
}

/* Synth/Doc picker */
.sd-pick {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   font-size: 10px;
   font-family: 'DM Mono', monospace;
   color: var(--text2);
   cursor: pointer;
   transition: all .15s;
   white-space: nowrap;
   position: relative;
   flex-shrink: 0
}

.sd-pick:hover {
   border-color: var(--ge);
   color: var(--ge)
}

.sd-pick-dd {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 7px;
   box-shadow: var(--sh2);
   min-width: 140px;
   z-index: 200;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);
   transition: all .2s
}

.sd-pick.open .sd-pick-dd {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.sd-opt {
   padding: 6px 10px;
   font-size: 11px;
   cursor: pointer;
   transition: background .12s;
   display: flex;
   align-items: center;
   gap: 6px
}

.sd-opt:hover {
   background: var(--bg2)
}

.sd-opt.sel {
   font-weight: 600;
   color: var(--ge)
}

/* Add Agent button */
.agt-add-btn {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border: 1.5px dashed var(--border2);
   border-radius: 7px;
   font-size: 11px;
   font-weight: 500;
   color: var(--muted);
   cursor: pointer;
   transition: all .15s;
   white-space: nowrap;
   flex-shrink: 0;
   position: relative
}

.agt-add-btn:hover {
   border-color: var(--gp);
   color: var(--gp);
   background: rgba(31, 107, 69, .04)
}

.add-agent-dd {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 7px;
   box-shadow: var(--sh2);
   min-width: 190px;
   z-index: 200;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);
   transition: all .2s
}

.agt-add-btn.open .add-agent-dd {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.add-dd-item {
   padding: 7px 11px;
   font-size: 11.5px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 7px;
   transition: background .12s
}

.add-dd-item:hover {
   background: var(--bg2)
}

.add-dd-item .agt-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   flex-shrink: 0
}

.add-dd-empty {
   padding: 9px 11px;
   font-size: 10.5px;
   color: var(--muted);
   font-style: italic
}

/* STATUS BAR */
.sbar {
   background: var(--bg2);
   border-bottom: 1px solid var(--border);
   padding: 0 14px;
   height: 32px;
   display: flex;
   align-items: center;
   gap: 0;
   flex-shrink: 0
}

.phase2 {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 0 8px;
   height: 100%;
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted);
   cursor: pointer;
   transition: all .15s;
   border-bottom: 2px solid transparent;
   white-space: nowrap
}

.phase2:hover {
   color: var(--text);
   background: rgba(40, 35, 28, .04)
}

.phase2.done {
   color: var(--gp)
}

.phase2.act {
   color: var(--text);
   border-bottom-color: var(--text);
   font-weight: 500
}

.phase2.pend {
   color: var(--muted2)
}

.ph2-n {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 1.5px solid currentColor;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 8px;
   font-weight: 700
}

.phase2.done .ph2-n {
   background: var(--gp);
   border-color: var(--gp);
   color: white
}

.phase2.act .ph2-n {
   background: var(--text);
   border-color: var(--text);
   color: var(--card2)
}

.ph-ar {
   color: var(--border2);
   font-size: 10px;
   padding: 0 1px
}

.ind-row {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 8px
}

.ind {
   display: flex;
   align-items: center;
   gap: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   white-space: nowrap
}

.ind-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   flex-shrink: 0
}

.ind-bar-w {
   width: 48px;
   height: 3px;
   background: var(--border);
   border-radius: 2px;
   overflow: hidden;
   flex-shrink: 0
}

.ind-bar-f {
   height: 100%;
   border-radius: 2px;
   animation: prog 2s ease-in-out infinite
}

@keyframes prog {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .5
   }
}

.ind-sep {
   width: 1px;
   height: 14px;
   background: var(--border)
}

.cost-ind {
   display: flex;
   align-items: center;
   gap: 3px;
   padding: 2px 6px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   cursor: pointer
}

.cost-ind:hover {
   border-color: var(--gp)
}

.cost-v {
   color: var(--text);
   font-weight: 500
}

.tok-pill {
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 2px 6px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   cursor: pointer
}

.tok-pill:hover {
   border-color: var(--ki)
}

.tok-seg {
   width: 4px;
   height: 10px;
   border-radius: 1px;
   flex-shrink: 0
}

/* Agent micro-status in status bar */
.agt-micro {
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 2px 5px;
   border-radius: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 8px;
   color: var(--muted);
   background: var(--card);
   border: 1px solid var(--border)
}

.agt-micro-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   flex-shrink: 0
}

.agt-micro-dot.pulse {
   animation: blink 1s infinite
}

.agt-micro-dot.sending {
   background: var(--warn)
}

.agt-micro-dot.waiting {
   background: var(--info)
}

.agt-micro-dot.received {
   background: var(--ok)
}

.agt-micro-dot.error {
   background: var(--risk)
}

.agt-micro-dot.idle {
   background: var(--muted2)
}

/* MAIN CONTENT */
.content {
   flex: 1;
   display: flex;
   overflow: hidden
}

/* CONVERSATION */
.convo {
   flex: 1;
   overflow-y: auto;
   padding: 16px 16px 8px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   min-width: 0
}

.msg-u {
   display: flex;
   justify-content: flex-end
}

.msg-u-in {
   max-width: 65%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 3px
}

.msg-u-b {
   background: var(--text);
   color: var(--card2);
   border-radius: 12px 12px 3px 12px;
   padding: 10px 14px;
   font-size: 13px;
   line-height: 1.65
}

.msg-u-m {
   display: flex;
   align-items: center;
   gap: 5px;
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted)
}

.att-b {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 2px 7px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 9px;
   font-size: 10px;
   color: var(--text2)
}

/* AGENT RESPONSE SECTION */
.agt-section {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sec-lbl {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--muted);
   display: flex;
   align-items: center;
   gap: 7px
}

.sec-lbl::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--border)
}

/* VIEW SWITCHER */
.view-sw {
   display: flex;
   align-items: center;
   gap: 0;
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: 7px;
   overflow: hidden;
   flex-shrink: 0
}

.vsw-btn {
   padding: 5px 9px;
   font-size: 10.5px;
   font-weight: 500;
   cursor: pointer;
   color: var(--muted);
   transition: all .15s;
   border-right: 1px solid var(--border);
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 4px
}

.vsw-btn:last-child {
   border-right: none
}

.vsw-btn:hover {
   color: var(--text);
   background: rgba(40, 35, 28, .05)
}

.vsw-btn.on {
   background: var(--card);
   color: var(--text);
   font-weight: 600
}

.vsw-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%
}

.vsw-all {
   font-size: 10px
}

/* Cards grid */
.cards-grid {
   display: grid;
   gap: 8px
}

.cards-grid.g2 {
   grid-template-columns: 1fr 1fr
}

.cards-grid.g1 {
   grid-template-columns: 1fr
}

.cards-grid.g3 {
   grid-template-columns: 1fr 1fr 1fr
}

.acard {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   transition: all .2s;
   cursor: pointer;
   display: flex;
   flex-direction: column
}

.acard:hover {
   box-shadow: var(--sh2);
   transform: translateY(-1px)
}

.acard.focus {
   border-width: 1.5px;
   box-shadow: var(--sh2)
}

.acard.ac-cl.focus {
   border-color: var(--cl)
}

.acard.ac-gp.focus {
   border-color: var(--gp)
}

.acard.ac-ki.focus {
   border-color: var(--ki)
}

.acard.ac-ge.focus {
   border-color: var(--ge)
}

.acard.ac-ds.focus {
   border-color: var(--ds)
}

.acard.ac-gk.focus {
   border-color: var(--gk)
}

.acard.ac-px.focus {
   border-color: var(--px)
}

.acard-h {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 7px 11px;
   border-bottom: 1px solid var(--border)
}

.acard-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0
}

.acard-name {
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: .2px
}

.acard-model {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   margin-left: auto
}

.acard-t {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted2)
}

.acard-inds {
   display: flex;
   align-items: center;
   gap: 3px;
   margin-left: 6px
}

.ci {
   padding: 1px 5px;
   border-radius: 3px;
   font-size: 8.5px;
   font-family: 'DM Mono', monospace;
   font-weight: 500;
   border: 1px solid
}

.ci.ok {
   color: var(--ok);
   border-color: var(--ok);
   background: rgba(31, 107, 69, .08)
}

.ci.warn {
   color: var(--warn);
   border-color: var(--warn);
   background: rgba(156, 107, 26, .08)
}

.ci.risk {
   color: var(--risk);
   border-color: var(--risk);
   background: rgba(176, 48, 48, .08)
}

.ci.info {
   color: var(--info);
   border-color: var(--info);
   background: rgba(42, 95, 158, .08)
}

.acard-body {
   padding: 9px 11px;
   font-size: 12.5px;
   line-height: 1.7;
   color: var(--text2);
   flex: 1;
   position: relative;
   overflow: hidden;
   max-height: 90px;
   transition: max-height .3s ease
}

.acard-body.exp {
   max-height: 400px
}

.acard-body:not(.exp)::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 30px;
   background: linear-gradient(transparent, var(--card))
}

.kp-list {
   display: flex;
   flex-direction: column;
   gap: 3px;
   margin-top: 7px
}

.kp {
   display: flex;
   align-items: flex-start;
   gap: 6px;
   font-size: 11.5px
}

.kp-ic {
   font-size: 11px;
   flex-shrink: 0;
   margin-top: 1px
}

.kp-t {
   color: var(--text2);
   line-height: 1.5
}

.acard-f {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 5px 11px;
   border-top: 1px solid var(--border);
   flex-wrap: wrap
}

.exp-lnk {
   margin-left: auto;
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--info);
   cursor: pointer
}

.score-row {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 6px
}

.score-lbl {
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted);
   width: 60px;
   flex-shrink: 0
}

.score-tr {
   flex: 1;
   height: 4px;
   background: var(--bg3);
   border-radius: 2px;
   overflow: hidden
}

.score-f {
   height: 100%;
   border-radius: 2px
}

.score-v {
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted);
   width: 24px;
   text-align: right
}

/* SINGLE AGENT FOCUS */
.focus-header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: var(--r) var(--r) 0 0;
   border-bottom: none
}

.focus-body {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 0 0 var(--r) var(--r);
   padding: 14px;
   font-size: 13px;
   line-height: 1.8;
   color: var(--text)
}

.focus-body h4 {
   font-family: 'Fraunces', serif;
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   margin: 12px 0 5px
}

.focus-body h4:first-child {
   margin-top: 0
}

.focus-body ul {
   padding-left: 16px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.focus-body li {
   font-size: 12.5px;
   color: var(--text2)
}

/* COMPARE VIEW */
.compare-wrap {
   display: flex;
   flex-direction: column;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden
}

.compare-topic {
   padding: 8px 12px;
   background: var(--card2);
   border-bottom: 1px solid var(--border);
   font-size: 11px;
   font-weight: 600;
   font-family: 'DM Mono', monospace;
   color: var(--text2)
}

.compare-row {
   display: grid;
   gap: 0;
   border-bottom: 1px solid var(--border);
   overflow-x: auto
}

.compare-row:last-child {
   border-bottom: none
}

.compare-row.g7 {
   grid-template-columns: repeat(7, 1fr)
}

.compare-cell {
   padding: 9px 11px;
   border-right: 1px solid var(--border);
   font-size: 11px;
   color: var(--text2);
   line-height: 1.6;
   min-width: 120px
}

.compare-cell:last-child {
   border-right: none
}

.cc-h {
   font-size: 10px;
   font-weight: 600;
   margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 4px
}

/* CONSENSUS */
.cons-block {
   background: var(--card);
   border: 1.5px solid var(--border2);
   border-radius: var(--r);
   overflow: hidden;
   box-shadow: var(--sh)
}

.cons-h {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 9px 13px;
   background: var(--card2);
   border-bottom: 1px solid var(--border)
}

.cons-ic {
   width: 26px;
   height: 26px;
   background: var(--text);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   flex-shrink: 0
}

.cons-title {
   font-family: 'Fraunces', serif;
   font-size: 13px;
   font-weight: 500
}

.cons-sub {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   margin-top: 1px
}

.cons-agents {
   display: flex;
   gap: 3px;
   margin-left: auto
}

.ca-d {
   width: 8px;
   height: 8px;
   border-radius: 50%
}

.cons-b {
   padding: 12px 13px;
   font-size: 13px;
   line-height: 1.75;
   color: var(--text)
}

.cons-b strong {
   color: var(--gp)
}

.cons-b em {
   font-style: normal;
   color: var(--risk);
   font-weight: 500
}

.cons-acts {
   display: flex;
   gap: 5px;
   padding: 8px 13px;
   border-top: 1px solid var(--border);
   flex-wrap: wrap
}

.c-a {
   padding: 5px 12px;
   border-radius: 5px;
   font-size: 11px;
   font-weight: 600;
   font-family: 'DM Sans', sans-serif;
   cursor: pointer;
   border: 1px solid;
   transition: all .15s
}

.c-a.ap {
   color: var(--ok);
   border-color: var(--ok);
   background: rgba(31, 107, 69, .07)
}

.c-a.ap:hover {
   background: rgba(31, 107, 69, .15)
}

.c-a.rj {
   color: var(--risk);
   border-color: var(--risk);
   background: rgba(176, 48, 48, .06)
}

.c-a.dr {
   color: var(--info);
   border-color: var(--info);
   background: rgba(42, 95, 158, .07)
}

.c-a.rr {
   color: var(--muted);
   border-color: var(--border);
   background: var(--bg)
}

/* INPUT */
.inp-area {
   background: var(--card);
   border-top: 1px solid var(--border);
   padding: 10px 14px;
   flex-shrink: 0
}

.att-row {
   display: flex;
   gap: 6px;
   margin-bottom: 8px;
   flex-wrap: wrap;
   align-items: center
}

.att-th {
   width: 44px;
   height: 44px;
   border-radius: 7px;
   border: 1px solid var(--border);
   background: var(--bg);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   transition: all .15s;
   flex-shrink: 0
}

.att-th:hover {
   border-color: var(--border2);
   box-shadow: var(--sh)
}

.att-in {
   text-align: center;
   padding: 3px
}

.att-ic {
   font-size: 16px;
   display: block;
   margin-bottom: 1px
}

.att-nm {
   font-size: 7.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted);
   line-height: 1.2
}

.att-x {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--risk);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 7px;
   cursor: pointer;
   opacity: 0;
   transition: opacity .15s
}

.att-th:hover .att-x {
   opacity: 1
}

.att-add2 {
   width: 44px;
   height: 44px;
   border-radius: 7px;
   border: 1.5px dashed var(--border2);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all .15s;
   color: var(--muted);
   flex-shrink: 0
}

.att-add2:hover {
   border-color: var(--gp);
   color: var(--gp);
   background: rgba(31, 107, 69, .03)
}

.att-add2 span:first-child {
   font-size: 16px;
   margin-bottom: 1px
}

.att-add2 span:last-child {
   font-size: 8px;
   font-family: 'DM Mono', monospace
}

.inp-box {
   background: var(--card2);
   border: 1.5px solid var(--border);
   border-radius: var(--r);
   overflow: hidden;
   transition: border-color .2s, box-shadow .2s;
   box-shadow: var(--sh)
}

.inp-box:focus-within {
   border-color: var(--gp);
   box-shadow: 0 0 0 3px rgba(31, 107, 69, .1), var(--sh)
}

.inp-top {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 5px 10px 0
}

.ctx-pill {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 2px 7px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 9px;
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted);
   cursor: pointer
}

.ctx-pill:hover {
   border-color: var(--gp)
}

.ctx-pill span {
   color: var(--gp);
   font-weight: 500
}

textarea.mta {
   width: 100%;
   background: transparent;
   border: none;
   outline: none;
   font-family: 'DM Sans', sans-serif;
   font-size: 13.5px;
   color: var(--text);
   line-height: 1.65;
   padding: 9px 13px 7px;
   resize: none;
   min-height: 52px;
   max-height: 180px
}

textarea.mta::placeholder {
   color: var(--muted2)
}

.inp-bot {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 5px 9px 7px;
   border-top: 1px solid var(--border)
}

.tg {
   display: flex;
   gap: 2px
}

.ti {
   width: 28px;
   height: 28px;
   border-radius: 5px;
   background: transparent;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 13px;
   color: var(--muted);
   transition: all .15s;
   position: relative
}

.ti:hover {
   background: var(--bg);
   border-color: var(--border);
   color: var(--text)
}

.ti.on {
   background: rgba(31, 107, 69, .09);
   border-color: var(--gp);
   color: var(--gp)
}

.ti[title]:hover::after {
   content: attr(title);
   position: absolute;
   bottom: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
   background: var(--text);
   color: var(--card2);
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   padding: 3px 7px;
   border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
   z-index: 999
}

.inp-sep2 {
   width: 1px;
   height: 18px;
   background: var(--border)
}

.inp-sp {
   flex: 1
}

.char-c {
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted)
}

.sm-sel {
   padding: 5px 9px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   font-size: 10.5px;
   font-weight: 500;
   color: var(--text2);
   cursor: pointer;
   transition: all .15s;
   white-space: nowrap
}

.sm-sel:hover {
   border-color: var(--gp)
}

.snd-btn {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 6px 14px;
   background: var(--text);
   color: var(--card2);
   border: none;
   border-radius: 6px;
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: all .15s
}

.snd-btn:hover {
   background: #3a302a;
   transform: translateY(-1px);
   box-shadow: 0 3px 10px rgba(40, 35, 28, .25)
}

.snd-sc {
   font-size: 9.5px;
   opacity: .65;
   font-family: 'DM Mono', monospace
}

.qr {
   display: flex;
   gap: 5px;
   margin-top: 7px;
   flex-wrap: wrap
}

.qc {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 3px 9px;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 11px;
   font-size: 11px;
   color: var(--text2);
   cursor: pointer;
   transition: all .15s
}

.qc:hover {
   border-color: var(--gp);
   color: var(--gp);
   background: rgba(31, 107, 69, .04)
}

/* RIGHT PANEL */
.rp {
   width: 234px;
   background: var(--card);
   border-left: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   overflow-y: auto
}

.rps {
   padding: 11px 12px 10px;
   border-bottom: 1px solid var(--border)
}

.rpl {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 9px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.rpl-a {
   color: var(--info);
   cursor: pointer;
   font-size: 9px;
   letter-spacing: 0;
   text-transform: none
}

.vr {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 6px;
   font-size: 11px
}

.vr-n {
   width: 44px;
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted);
   flex-shrink: 0
}

.vr-tr {
   flex: 1;
   height: 5px;
   background: var(--bg3);
   border-radius: 3px;
   overflow: hidden
}

.vr-f {
   height: 100%;
   border-radius: 3px
}

.vr-p {
   width: 28px;
   text-align: right;
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   flex-shrink: 0
}

.matrix2 {
   display: grid;
   grid-template-columns: 22px repeat(7, 1fr);
   gap: 2px
}

.mx {
   height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
   font-size: 7.5px;
   font-family: 'DM Mono', monospace;
   font-weight: 500
}

.mx-l {
   color: var(--muted)
}

.mx-h {
   background: rgba(31, 107, 69, .13);
   color: var(--gp)
}

.mx-m {
   background: rgba(156, 107, 26, .11);
   color: var(--warn)
}

.mx-lo {
   background: rgba(176, 48, 48, .09);
   color: var(--risk)
}

.mx-s {
   background: var(--bg3);
   color: var(--muted2)
}

.tgl-r {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 9px
}

.tgl-inf {
   flex: 1;
   margin-right: 8px
}

.tgl-lb {
   font-size: 11.5px;
   font-weight: 500;
   color: var(--text);
   display: flex;
   align-items: center;
   gap: 4px
}

.tgl-sb {
   font-size: 9.5px;
   font-family: 'DM Mono', monospace;
   color: var(--muted);
   margin-top: 1px
}

.tgl2 {
   width: 32px;
   height: 17px;
   border-radius: 9px;
   background: var(--border2);
   cursor: pointer;
   position: relative;
   transition: background .2s;
   flex-shrink: 0;
   margin-top: 2px
}

.tgl2.on {
   background: var(--gp)
}

.tgl2::after {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: white;
   transition: transform .2s;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .15)
}

.tgl2.on::after {
   transform: translateX(15px)
}

.exp-g {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px
}

.ep {
   padding: 7px 6px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   text-align: center;
   cursor: pointer;
   transition: all .15s
}

.ep:hover {
   border-color: var(--gp);
   box-shadow: var(--sh);
   transform: translateY(-1px)
}

.ep-i {
   font-size: 15px;
   display: block;
   margin-bottom: 2px
}

.ep-n {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted)
}

.cr {
   display: flex;
   flex-direction: column;
   gap: 3px
}

.c-r2 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 3px 6px;
   border-radius: 4px;
   background: var(--bg);
   border: 1px solid var(--border)
}

.c-ag {
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted)
}

.c-v {
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   font-weight: 500;
   color: var(--text)
}

.c-tot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 6px;
   margin-top: 2px;
   border-top: 1px solid var(--border);
   font-family: 'DM Mono', monospace;
   font-size: 10.5px
}

.c-tl {
   color: var(--muted)
}

.c-tv {
   color: var(--gp);
   font-weight: 600
}

/* TOAST */
.toast2 {
   position: fixed;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--text);
   color: var(--card2);
   border-radius: 8px;
   padding: 8px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11.5px;
   font-weight: 500;
   box-shadow: var(--sh2);
   z-index: 1000;
   animation: ti2 .25s ease;
   pointer-events: none
}

@keyframes ti2 {
   from {
      opacity: 0;
      transform: translateX(-50%) translateY(6px)
   }

   to {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
   }
}

.toast2 .td {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--gp);
   animation: blink 1.5s infinite
}

/* AGENT ERROR NOTIFICATIONS */
#agent-errors {
   position: fixed;
   top: 56px;
   right: 14px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   z-index: 900;
   pointer-events: none;
   max-width: 340px
}

.aerr {
   background: var(--card2);
   border: 1.5px solid;
   border-radius: 10px;
   box-shadow: var(--sh2);
   pointer-events: all;
   animation: aerr-in .25s cubic-bezier(.22, 1, .36, 1);
   overflow: hidden
}

@keyframes aerr-in {
   from {
      opacity: 0;
      transform: translateX(16px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

.aerr.balance {
   border-color: var(--risk)
}

.aerr.auth {
   border-color: var(--warn)
}

.aerr.rate_limit {
   border-color: var(--ki)
}

.aerr.timeout {
   border-color: var(--muted2)
}

.aerr.unknown {
   border-color: var(--border2)
}

.aerr-head {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 8px 11px 6px
}

.aerr-icon {
   font-size: 15px;
   flex-shrink: 0
}

.aerr-agent {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .2px
}

.aerr-type {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   font-weight: 500;
   padding: 1px 5px;
   border-radius: 4px;
   border: 1px solid;
   margin-left: 2px
}

.aerr-type.balance {
   color: var(--risk);
   border-color: var(--risk);
   background: rgba(176, 48, 48, .08)
}

.aerr-type.auth {
   color: var(--warn);
   border-color: var(--warn);
   background: rgba(176, 122, 24, .08)
}

.aerr-type.rate_limit {
   color: var(--ki);
   border-color: var(--ki);
   background: rgba(42, 95, 158, .08)
}

.aerr-type.timeout {
   color: var(--muted);
   border-color: var(--muted);
   background: rgba(140, 128, 112, .08)
}

.aerr-type.unknown {
   color: var(--muted);
   border-color: var(--muted);
   background: var(--bg)
}

.aerr-x {
   margin-left: auto;
   width: 20px;
   height: 20px;
   border-radius: 4px;
   background: transparent;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   color: var(--muted);
   transition: all .15s
}

.aerr-x:hover {
   background: var(--bg2);
   color: var(--text)
}

.aerr-body {
   padding: 0 11px 8px;
   font-size: 12px;
   line-height: 1.6;
   color: var(--text2)
}

.aerr-actions {
   display: flex;
   gap: 5px;
   padding: 7px 11px;
   border-top: 1px solid var(--border)
}

.aerr-btn {
   padding: 5px 11px;
   border-radius: 5px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid;
   transition: all .15s;
   font-family: 'DM Sans', sans-serif;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.aerr-btn.primary {
   background: var(--risk);
   color: white;
   border-color: var(--risk)
}

.aerr-btn.primary:hover {
   background: #9a2020;
   border-color: #9a2020
}

.aerr-btn.secondary {
   background: transparent;
   color: var(--info);
   border-color: var(--info)
}

.aerr-btn.secondary:hover {
   background: rgba(42, 95, 158, .08)
}

.aerr-btn.muted {
   background: var(--bg);
   color: var(--muted);
   border-color: var(--border)
}

.aerr-btn.muted:hover {
   border-color: var(--muted);
   color: var(--text2)
}

.agt-sel .err-badge {
   position: absolute;
   top: -5px;
   right: -5px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--risk);
   color: white;
   font-size: 8px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1.5px solid var(--card)
}

.acard.error-state {
   border-color: var(--risk) !important;
   border-width: 1.5px !important
}

.acard.error-state .acard-h {
   background: rgba(176, 48, 48, .05)
}

.aerr-card {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   border-radius: 7px;
   background: rgba(176, 48, 48, .06);
   border: 1px solid rgba(176, 48, 48, .2);
   margin: 6px 0
}

.aerr-card-msg {
   font-size: 12px;
   color: var(--text2);
   line-height: 1.5;
   flex: 1
}

.aerr-card-links {
   display: flex;
   flex-direction: column;
   gap: 3px;
   flex-shrink: 0
}

.aerr-card-link {
   font-size: 10px;
   font-family: 'DM Mono', monospace;
   color: var(--info);
   text-decoration: none;
   white-space: nowrap
}

.aerr-card-link:hover {
   text-decoration: underline
}

/* typing */
.typing3 {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 0;
   font-family: 'DM Mono', monospace;
   font-size: 10.5px;
   color: var(--muted)
}

.td3 {
   display: flex;
   gap: 3px
}

.td3 span {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   animation: td-b 1.2s infinite
}

.td3 span:nth-child(1) {
   background: var(--cl)
}

.td3 span:nth-child(2) {
   background: var(--ki);
   animation-delay: .2s
}

.td3 span:nth-child(3) {
   background: var(--ge);
   animation-delay: .4s
}

@keyframes td-b {

   0%,
   100% {
      transform: translateY(0);
      opacity: .3
   }

   50% {
      transform: translateY(-5px);
      opacity: 1
   }
}

/* MODAL OVERLAY */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(40, 35, 28, .5);
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   animation: fadeIn .2s
}

.modal-overlay.show {
   display: flex
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

.modal {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 12px;
   box-shadow: var(--sh2);
   width: 90%;
   max-width: 680px;
   max-height: 85vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   animation: modalIn .25s cubic-bezier(.22, 1, .36, 1)
}

@keyframes modalIn {
   from {
      opacity: 0;
      transform: scale(.95) translateY(10px)
   }

   to {
      opacity: 1;
      transform: scale(1) translateY(0)
   }
}

.modal-head {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 14px 18px;
   border-bottom: 1px solid var(--border);
   background: var(--card2)
}

.modal-title {
   font-family: 'Fraunces', serif;
   font-size: 16px;
   font-weight: 600;
   flex: 1
}

.modal-close {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   background: var(--bg);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 12px;
   color: var(--muted);
   transition: all .15s
}

.modal-close:hover {
   border-color: var(--risk);
   color: var(--risk)
}

.modal-tabs {
   display: flex;
   gap: 0;
   border-bottom: 1px solid var(--border);
   background: var(--card2);
   padding: 0 18px
}

.modal-tab {
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 500;
   color: var(--muted);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all .15s
}

.modal-tab:hover {
   color: var(--text)
}

.modal-tab.on {
   color: var(--text);
   border-bottom-color: var(--gp);
   font-weight: 600
}

.modal-body {
   padding: 18px;
   overflow-y: auto;
   flex: 1
}

/* Settings form elements */
.s-group {
   margin-bottom: 16px
}

.s-label {
   font-size: 11px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 6px;
   display: block;
   font-family: 'DM Mono', monospace;
   letter-spacing: .5px
}

.s-input {
   width: 100%;
   padding: 7px 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
   color: var(--text);
   outline: none;
   transition: border-color .15s
}

.s-input:focus {
   border-color: var(--gp)
}

.s-row {
   display: flex;
   gap: 10px;
   align-items: center
}

.s-btn {
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid;
   transition: all .15s;
   font-family: 'DM Sans', sans-serif
}

.s-btn.primary {
   background: var(--gp);
   color: white;
   border-color: var(--gp)
}

.s-btn.primary:hover {
   background: #165a38
}

.s-btn.secondary {
   background: var(--bg);
   color: var(--text2);
   border-color: var(--border)
}

.s-btn.secondary:hover {
   border-color: var(--gp)
}

.api-key-row {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 7px;
   margin-bottom: 6px
}

.api-key-row .agt-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0
}

.api-key-name {
   font-size: 11px;
   font-weight: 600;
   width: 70px;
   flex-shrink: 0
}

.api-key-input {
   flex: 1;
   padding: 5px 8px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   color: var(--text);
   outline: none
}

.api-key-input:focus {
   border-color: var(--gp)
}

.api-key-status {
   font-size: 12px;
   width: 20px;
   text-align: center
}

.api-key-test {
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 9px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid var(--info);
   color: var(--info);
   background: transparent;
   transition: all .15s;
   font-family: 'DM Mono', monospace
}

.api-key-test:hover {
   background: rgba(42, 95, 158, .08)
}

/* NOTIFICATION PANEL */
.notif-panel {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   width: 320px;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 10px;
   box-shadow: var(--sh2);
   z-index: 500;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);
   transition: all .2s;
   max-height: 400px;
   overflow-y: auto
}

.notif-panel.show {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.notif-head {
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   font-weight: 600;
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: space-between
}

.notif-item {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   padding: 9px 12px;
   border-bottom: 1px solid var(--border);
   transition: background .12s
}

.notif-item:hover {
   background: var(--bg)
}

.notif-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   flex-shrink: 0;
   margin-top: 5px
}

.notif-text {
   flex: 1;
   font-size: 11.5px;
   color: var(--text2);
   line-height: 1.5
}

.notif-time {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   white-space: nowrap;
   flex-shrink: 0
}

.notif-x {
   font-size: 10px;
   color: var(--muted);
   cursor: pointer;
   flex-shrink: 0;
   opacity: 0;
   transition: opacity .15s
}

.notif-item:hover .notif-x {
   opacity: 1
}

/* ANALYTICS VIEW */
.analytics-view {
   display: none;
   flex-direction: column;
   gap: 16px;
   overflow-y: auto;
   padding: 16px;
   flex: 1
}

.analytics-view.show {
   display: flex
}

.an-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--r);
   overflow: hidden
}

.an-card-h {
   padding: 9px 12px;
   border-bottom: 1px solid var(--border);
   background: var(--card2);
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   font-weight: 600;
   color: var(--text);
   letter-spacing: .5px;
   display: flex;
   align-items: center;
   gap: 6px
}

.an-card-b {
   padding: 12px
}

.an-bar-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 6px
}

.an-bar-label {
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--muted);
   width: 55px;
   flex-shrink: 0
}

.an-bar-track {
   flex: 1;
   height: 8px;
   background: var(--bg3);
   border-radius: 4px;
   overflow: hidden
}

.an-bar-fill {
   height: 100%;
   border-radius: 4px;
   transition: width .4s ease
}

.an-bar-val {
   font-family: 'DM Mono', monospace;
   font-size: 9.5px;
   color: var(--text);
   width: 36px;
   text-align: right;
   flex-shrink: 0
}

.an-chart {
   display: flex;
   align-items: flex-end;
   gap: 3px;
   height: 80px;
   padding: 0 4px
}

.an-chart-bar {
   flex: 1;
   border-radius: 3px 3px 0 0;
   transition: height .4s ease;
   min-width: 8px;
   position: relative;
   cursor: pointer
}

.an-chart-bar:hover::after {
   content: attr(data-val);
   position: absolute;
   top: -18px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 8px;
   font-family: 'DM Mono', monospace;
   color: var(--text);
   background: var(--card2);
   padding: 1px 4px;
   border-radius: 3px;
   border: 1px solid var(--border);
   white-space: nowrap
}

.an-chart-labels {
   display: flex;
   gap: 3px;
   padding: 4px 4px 0;
   font-family: 'DM Mono', monospace;
   font-size: 7.5px;
   color: var(--muted)
}

.an-chart-labels span {
   flex: 1;
   text-align: center
}

.an-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 8px
}

.an-mini {
   padding: 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 7px;
   text-align: center
}

.an-mini-v {
   font-family: 'DM Mono', monospace;
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 2px
}

.an-mini-l {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted)
}

.an-decision {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   margin-bottom: 5px
}

.an-dec-status {
   font-size: 10px;
   font-family: 'DM Mono', monospace;
   padding: 2px 6px;
   border-radius: 4px;
   font-weight: 600;
   border: 1px solid
}

.an-dec-status.approved {
   color: var(--ok);
   border-color: var(--ok);
   background: rgba(31, 107, 69, .08)
}

.an-dec-status.rejected {
   color: var(--risk);
   border-color: var(--risk);
   background: rgba(176, 48, 48, .06)
}

.an-dec-status.deferred {
   color: var(--info);
   border-color: var(--info);
   background: rgba(42, 95, 158, .07)
}

.an-dec-text {
   flex: 1;
   font-size: 11.5px;
   color: var(--text2)
}

.an-dec-session {
   font-family: 'DM Mono', monospace;
   font-size: 9px;
   color: var(--muted);
   flex-shrink: 0
}

/* LOG VIEWER */
.log-view {
   display: none;
   flex-direction: column;
   flex: 1;
   overflow: hidden
}

.log-view.show {
   display: flex
}

.log-toolbar {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   background: var(--card);
   border-bottom: 1px solid var(--border)
}

.log-filter {
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 10px;
   font-family: 'DM Mono', monospace;
   cursor: pointer;
   border: 1px solid var(--border);
   color: var(--muted);
   background: var(--bg);
   transition: all .12s
}

.log-filter:hover,
.log-filter.on {
   border-color: var(--gp);
   color: var(--gp)
}

.log-body {
   flex: 1;
   overflow-y: auto;
   background: #1a1815;
   padding: 10px 14px;
   font-family: 'DM Mono', monospace;
   font-size: 11px;
   line-height: 1.8
}

.log-line {
   display: flex;
   gap: 8px;
   padding: 1px 0
}

.log-time {
   color: #6a6050;
   flex-shrink: 0;
   width: 55px
}

.log-phase {
   width: 50px;
   flex-shrink: 0
}

.log-msg {
   flex: 1;
   word-break: break-word
}

.log-ok {
   color: #4a9
}

.log-err {
   color: #e55
}

.log-warn {
   color: #da4
}

.log-info {
   color: #6af
}

.log-dim {
   color: #6a6050
}

/* SHORTCUTS MODAL */
.sc-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 0;
   border-bottom: 1px solid var(--border)
}

.sc-row:last-child {
   border-bottom: none
}

.sc-desc {
   font-size: 12px;
   color: var(--text2)
}

.sc-keys {
   display: flex;
   gap: 3px
}

.sc-key {
   padding: 3px 7px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 4px;
   font-family: 'DM Mono', monospace;
   font-size: 10px;
   color: var(--text);
   box-shadow: 0 1px 0 var(--border2)
}

/* SESSION HISTORY POPOVER */
.hi-popover {
   position: absolute;
   left: calc(100% + 6px);
   top: 0;
   width: 260px;
   background: var(--card2);
   border: 1px solid var(--border);
   border-radius: 9px;
   box-shadow: var(--sh2);
   z-index: 300;
   padding: 10px;
   display: none;
   animation: fadeIn .15s
}

.hi-popover.show {
   display: block
}

.hi-pop-title {
   font-family: 'Fraunces', serif;
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px
}

.hi-pop-row {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
   font-size: 11px;
   color: var(--text2)
}

.hi-pop-agents {
   display: flex;
   gap: 3px;
   margin-top: 4px
}

.hi-pop-acts {
   display: flex;
   gap: 4px;
   margin-top: 8px
}

.hi-pop-btn {
   padding: 4px 10px;
   border-radius: 5px;
   font-size: 10px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid;
   transition: all .12s;
   font-family: 'DM Mono', monospace
}

.hi-pop-btn.view {
   color: var(--gp);
   border-color: var(--gp);
   background: rgba(31, 107, 69, .06)
}

.hi-pop-btn.cmp {
   color: var(--info);
   border-color: var(--info);
   background: rgba(42, 95, 158, .06)
}

.hi-pop-btn.rerun {
   color: var(--muted);
   border-color: var(--border);
   background: var(--bg)
}

/* ═══════════════════════════════════════
   RESIZE HANDLES
   ═══════════════════════════════════════ */
.sb {
   position: relative
}

.rp {
   position: relative
}

.resize-handle {
   position: absolute;
   top: 0;
   width: 6px;
   height: 100%;
   z-index: 10;
   cursor: col-resize;
   transition: background .15s
}

.resize-handle::after {
   content: '';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 2px;
   height: 32px;
   border-radius: 1px;
   background: var(--border2);
   transition: background .15s, height .15s
}

.resize-handle:hover::after,
.resize-handle.active::after {
   background: var(--gp);
   height: 48px
}

.resize-handle:hover,
.resize-handle.active {
   background: rgba(31, 107, 69, 0.06)
}

.sb .resize-handle {
   right: -3px
}

.sb .resize-handle::after {
   right: 2px
}

.rp .resize-handle {
   left: -3px
}

.rp .resize-handle::after {
   left: 2px
}

body.resizing-sb,
body.resizing-rp {
   cursor: col-resize !important;
   user-select: none !important;
   -webkit-user-select: none !important
}

body.resizing-sb *,
body.resizing-rp * {
   cursor: col-resize !important;
   pointer-events: none !important
}

body.resizing-sb .resize-handle,
body.resizing-rp .resize-handle {
   pointer-events: auto !important
}

/* ═══════════════════════════════════════
   DRAGGABLE MODALS
   ═══════════════════════════════════════ */
.modal-head {
   cursor: grab
}

.modal-head:active,
body.dragging-modal .modal-head {
   cursor: grabbing
}

body.dragging-modal {
   user-select: none !important;
   -webkit-user-select: none !important
}

body.dragging-modal * {
   pointer-events: none !important
}

body.dragging-modal .modal,
body.dragging-modal .modal-head,
body.dragging-modal .modal-close {
   pointer-events: auto !important
}

.modal-overlay.dragged {
   align-items: flex-start;
   justify-content: flex-start
}

.modal.dragged {
   position: absolute;
   animation: none
}

/* ═══════════════════════════════════════
   MAXIMIZABLE AGENT CARDS
   ═══════════════════════════════════════ */
.acard-maximize {
   width: 18px;
   height: 18px;
   border-radius: 4px;
   background: transparent;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 10px;
   color: var(--muted);
   transition: all .15s;
   margin-left: 4px;
   flex-shrink: 0
}

.acard-maximize:hover {
   background: var(--bg);
   border-color: var(--border);
   color: var(--text)
}

.acard-maximized-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(40, 35, 28, 0.5);
   z-index: 900;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   animation: fadeIn .2s
}

body.dark .acard-maximized-overlay {
   background: rgba(0, 0, 0, 0.6)
}

.acard-maximized {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 12px;
   box-shadow: var(--sh2);
   width: 100%;
   max-width: 900px;
   max-height: calc(100vh - 48px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   animation: modalIn .25s cubic-bezier(.22, 1, .36, 1)
}

.acard-maximized .acard-h {
   padding: 10px 14px;
   font-size: 14px
}

.acard-maximized .acard-body {
   max-height: none !important;
   overflow-y: auto;
   flex: 1;
   padding: 14px;
   font-size: 13.5px;
   line-height: 1.7
}

.acard-maximized .acard-body::after {
   display: none !important
}

.acard-maximized .acard-f {
   padding: 8px 14px
}