/* ═══ OM GROUP ERP — AI AGENT UI ═══════════════════════════════════════════
   Uses the ERP design tokens only (--or, --card, --bdr, --txt…). No new
   palette, no external fonts. Scoped under .oma- so nothing leaks into the
   rest of the ERP. */

/* ── Agent character ───────────────────────────────────────────────────────
   The supplied OM Group expression artwork is used verbatim. All plates share
   one coordinate system, so the petals are pixel-identical between states and
   nothing can shift. Transitions animate opacity only; motion animates
   transform only. Nothing layout-triggering, nothing filtered. */
.omc{position:relative;display:block;flex:none;user-select:none;-webkit-tap-highlight-color:transparent}
.omc-react{position:absolute;inset:0;z-index:1;transition:transform .42s cubic-bezier(.22,1,.36,1);will-change:transform}
.omc-disc{position:absolute;inset:0}
.omc-swap{position:absolute;inset:0;will-change:transform;transform-origin:50% 62%}
.omc-breathe{position:absolute;inset:0;animation:omcBreathe 6.8s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
/* One plate, always fully opaque. Expression changes are a single-frame src cut
   hidden inside the .omc-swap dip — never an opacity blend between two faces,
   which is what doubled the eyes and mouth in the previous build. */
.omc-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;backface-visibility:hidden}
.omc-glow{position:absolute;inset:-14%;z-index:0;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .5s ease;background:radial-gradient(circle,rgba(249,115,22,.30) 0%,rgba(249,115,22,.11) 48%,rgba(249,115,22,0) 72%)}
.omc-ripple{position:absolute;inset:0;z-index:2;border-radius:50%;border:1.5px solid rgba(249,115,22,.55);pointer-events:none;animation:omcRipple .64s cubic-bezier(.2,.8,.3,1) forwards}
.omc[data-mode="listening"] .omc-glow{opacity:.55}
.omc[data-mode="thinking"] .omc-glow{opacity:1;animation:omcPulse 1.9s ease-in-out infinite}
.omc[data-mode="thinking"] .omc-breathe{animation-duration:2.6s}
.omc[data-mode="success"] .omc-glow{opacity:.85}
.omc[data-mode="nodata"] .omc-breathe,.omc[data-mode="error"] .omc-breathe{animation-name:omcSigh;animation-duration:3.4s}
.omc[data-hover="1"] .omc-glow{opacity:.42}
@keyframes omcBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.2%) scale(1.024)}}
@keyframes omcSigh{0%,100%{transform:translateY(0) scale(1)}55%{transform:translateY(2.4%) scale(.988)}}
@keyframes omcPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes omcRipple{0%{transform:scale(.72);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .omc-breathe{animation:none!important}
  .omc-swap{transition:none!important;transform:none!important}
  .omc-glow{animation:none!important}
  .omc-ripple{display:none}
  .omc-react{transition-duration:.14s}
}

/* ── Floating agent ────────────────────────────────────────────────────────
   The character floats directly over the ERP: no card, no glass, no border,
   no shadow, no badge. The approved transparent PNG is the whole element, so
   ERP content stays visible through its alpha. Nothing here may introduce a
   background — that is what made it read as a pasted-on widget before. */
.oma-dock{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:900;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .18s cubic-bezier(.22,1,.36,1),opacity .32s cubic-bezier(.22,1,.36,1)}
.oma-dock:hover{transform:translateY(-3px)}
.oma-dock:active{transform:translateY(0)}
.oma-dock:focus-visible{outline:0}
.oma-dock:focus-visible .omc-glow{opacity:.6}
/* Hidden while the panel is up — no pointer target, no stacking conflict. */
.oma-dock.hidden{opacity:0;transform:scale(.7);pointer-events:none;transition-duration:.2s}
.oma-dock.arriving{animation:omaDockIn .42s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes omaDockIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
/* Preference OFF → ON. The agent settles in; OFF unmounts it entirely, so no
   click target, overlay or reserved space is left behind. */
.oma-dock.enabling{animation:omaAgentOn .38s cubic-bezier(.22,1,.36,1) both}
@keyframes omaAgentOn{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}

/* ── Panel shell — owns the expand/collapse motion, panel owns the content ── */
.oma-shell{display:contents}
.oma-shell .oma-panel{animation:omaPanelIn .46s cubic-bezier(.22,1,.36,1) both;transform-origin:100% 100%}
.oma-shell.closing .oma-panel{animation:omaPanelOut .38s cubic-bezier(.4,0,.28,1) both;pointer-events:none}
/* Collapse travels toward the dock's corner rather than fading in place, so it
   reads as one element becoming the other. */
@keyframes omaPanelIn{from{opacity:0;transform:translate(14px,26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes omaPanelOut{from{opacity:1;transform:none}to{opacity:0;transform:translate(14px,26px) scale(.9)}}
/* Content settles a beat after the container, never before it. */
.oma-shell .oma-body,.oma-shell .oma-ft,.oma-shell .oma-scope{animation:omaFadeUp .4s cubic-bezier(.22,1,.36,1) .07s both}
.oma-shell.closing .oma-body,.oma-shell.closing .oma-ft,.oma-shell.closing .oma-scope{animation:none}
@keyframes omaFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Panel ── */
.oma-panel{position:fixed;right:16px;bottom:16px;top:16px;width:420px;max-width:calc(100vw - 32px);z-index:901;background:var(--card);border:1px solid var(--bdr);border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.06),0 24px 60px rgba(0,0,0,.16);display:flex;flex-direction:column;overflow:hidden;font-family:var(--font);will-change:transform,opacity}
.oma-hd{display:flex;align-items:center;gap:14px;padding:14px 12px 14px 16px;border-bottom:1px solid var(--bdr);flex:none}
.oma-hd-t{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--txt);line-height:1.25}
.oma-hd-s{font-size:10.5px;color:var(--txt3);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.oma-hd-sp{flex:1}
.oma-ic{width:30px;height:30px;border-radius:8px;border:1px solid var(--bdr);background:var(--card);color:var(--txt2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.oma-ic:hover{background:var(--or-lt);color:var(--or);border-color:var(--or-bdr)}
.oma-ic.danger:hover{background:#FEF2F2;color:var(--hv-red,#DC2626);border-color:rgba(220,38,38,.35)}

.oma-scope{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;background:#FAFAF8;border-bottom:1px solid var(--bdr);flex:none}
.oma-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--txt2);background:var(--card);border:1px solid var(--bdr);border-radius:99px;padding:3px 9px;line-height:1.5;white-space:nowrap}
.oma-chip b{color:var(--txt);font-weight:700}
.oma-chip.ro{color:#15803D;background:#F0FDF4;border-color:#BBF7D0}

.oma-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:14px}
.oma-body::-webkit-scrollbar{width:8px}
.oma-body::-webkit-scrollbar-thumb{background:#E2E0DC;border-radius:8px;border:2px solid var(--card)}

/* ── Home ── */
.oma-home-t{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--txt);line-height:1.3}
.oma-home-p{font-size:12.5px;color:var(--txt2);line-height:1.55;margin-top:5px}
.oma-qa{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.oma-qa button{display:flex;align-items:center;gap:7px;text-align:left;font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--txt);background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:9px 10px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.oma-qa button:hover{border-color:var(--or-bdr);background:var(--or-lt);transform:translateY(-1px)}
.oma-qa button svg{flex:none;color:var(--or)}
.oma-empty{font-size:11.5px;color:var(--txt3);line-height:1.6;border:1px dashed var(--bdr2);border-radius:10px;padding:10px 12px;margin-top:14px}

/* ── Messages ── */
.oma-msg{display:flex;flex-direction:column;gap:8px}
.oma-user{align-self:flex-end;max-width:86%;background:#1A1917;color:#fff;font-size:12.5px;line-height:1.5;padding:8px 12px;border-radius:13px 13px 4px 13px}
.oma-ag{display:flex;gap:12px;align-items:flex-start}
.oma-ag-b{flex:1;min-width:0;font-size:12.5px;line-height:1.62;color:var(--txt)}
.oma-ag-b h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);margin:13px 0 5px}
.oma-ag-b p{margin:0 0 7px}
.oma-ag-b ul{margin:0 0 8px;padding-left:16px}
.oma-ag-b li{margin-bottom:4px}
.oma-ag-b strong{font-weight:700}
.oma-ag-b .oma-note{border-left:2px solid var(--warn);background:#FFFBEB;padding:7px 10px;border-radius:0 8px 8px 0;font-size:12px;color:#78350F;margin:0 0 8px}
.oma-ag-b .oma-scopeline{font-size:10.5px;color:var(--txt3);border-top:1px solid var(--bdr);padding-top:7px;margin-top:10px;line-height:1.5}

.oma-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;margin:2px 0 10px}
.oma-kpi{border:1px solid var(--bdr);border-radius:11px;padding:9px 11px;background:var(--card)}
.oma-kpi-l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3)}
.oma-kpi-v{font-size:17px;font-weight:700;letter-spacing:-.025em;color:var(--txt);margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.2}
.oma-kpi-s{font-size:10.5px;color:var(--txt2);margin-top:2px}

.oma-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.oma-act{font-family:var(--font);font-size:11px;font-weight:600;color:var(--or);background:var(--or-lt);border:1px solid var(--or-bdr);border-radius:99px;padding:5px 11px;cursor:pointer;transition:background .15s,color .15s}
.oma-act:hover{background:var(--or);color:#fff}
.oma-act.ask{color:var(--txt);background:var(--bg2,rgba(120,120,128,.08));border-color:var(--bdr)}
.oma-act.ask:hover{background:var(--or);border-color:var(--or);color:#fff}

.oma-tools{font-size:10px;color:var(--txt3);margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;white-space:nowrap}
.oma-tools i{font-style:normal;flex:none}
.oma-tool{background:#F5F4F2;border-radius:5px;padding:2px 6px;font-weight:600;letter-spacing:.02em}

.oma-think{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt2);font-weight:600;white-space:normal}
.oma-think i{animation:omaStage .34s cubic-bezier(.22,1,.36,1) both;font-style:normal;flex:1;min-width:0}
.oma-think em{display:inline-flex;gap:4px;align-items:center;flex:none}
.oma-think em span{width:5px;height:5px;border-radius:50%;background:var(--or);animation:omaDot 1.1s infinite}
.oma-think em span:nth-child(2){animation-delay:.15s}
.oma-think em span:nth-child(3){animation-delay:.3s}
@keyframes omaDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.oma-err{border:1px solid #FECACA;background:#FEF2F2;color:#991B1B;font-size:11.5px;line-height:1.55;border-radius:10px;padding:9px 11px}

/* ── Level 50 · approval card ── */
.oma-appr{border:1px solid var(--bdr);border-radius:13px;background:var(--card);margin:4px 0 10px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.oma-appr.risky{border-color:#FDBA74}
.oma-appr.spent{opacity:.62}
.oma-appr-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#FAFAF8;border-bottom:1px solid var(--bdr)}
.oma-appr-t{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--txt);flex:1;min-width:0}
.oma-appr-risk{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 7px;color:var(--txt2);background:#F1F1EF;border:1px solid var(--bdr);flex:none}
.oma-appr-risk.r-medium{color:#9A5B00;background:#FFF7ED;border-color:#FED7AA}
.oma-appr-risk.r-high,.oma-appr-risk.r-critical{color:#B42318;background:#FEF3F2;border-color:#FECDCA}
.oma-appr-ctx{padding:8px 12px 0;font-size:11px;color:var(--txt2)}
.oma-appr-rows{padding:8px 12px 2px;display:flex;flex-direction:column;gap:5px}
.oma-appr-row{display:flex;gap:10px;align-items:baseline;font-size:12px}
.oma-appr-row .k{flex:none;width:104px;color:var(--txt3);font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.oma-appr-row .v{flex:1;min-width:0;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.oma-appr-row .v em{font-style:normal;font-weight:500;color:var(--txt3);font-size:10.5px}
.oma-appr-diff{padding:8px 12px 2px;display:flex;flex-direction:column;gap:4px}
.oma-appr-diff-h,.oma-appr-diff-r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:11.5px;align-items:baseline}
.oma-appr-diff-h{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--bdr);padding-bottom:4px}
.oma-appr-diff-r .was{color:var(--txt2);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.oma-appr-diff-r .now{color:#15803D;font-weight:700}
.oma-appr-src{padding:6px 12px 0;font-size:10px;color:var(--txt3);display:flex;flex-wrap:wrap;gap:4px 12px}
.oma-appr-checks{padding:8px 12px 0;display:flex;flex-wrap:wrap;gap:4px 8px}
.oma-appr-ck{font-size:10px;font-weight:600;color:#15803D}
.oma-appr-ck.warn{color:#9A5B00}
.oma-appr-warn{margin:8px 12px 0;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:6px 9px;font-size:11px;color:#78350F;line-height:1.5}
.oma-appr-impact{margin:8px 12px 0;background:#F5F7FF;border:1px solid #DBE3FF;border-radius:8px;padding:6px 9px;font-size:11px;color:#293B72;line-height:1.5}
.oma-appr-foot{padding:9px 12px 0;font-size:10.5px;color:var(--txt3)}
.oma-appr-btns{display:flex;flex-wrap:wrap;gap:7px;padding:10px 12px 12px}
.oma-appr-b{font-family:var(--font);font-size:11.5px;font-weight:700;border-radius:9px;padding:9px 14px;min-height:38px;cursor:pointer;border:1px solid var(--bdr);background:var(--card);color:var(--txt);transition:background .15s,color .15s,border-color .15s}
.oma-appr-b.approve{background:var(--or);border-color:var(--or);color:#fff;flex:1;min-width:150px}
.oma-appr-b.approve:hover{background:var(--or2)}
.oma-appr-b.modify:hover{border-color:var(--txt2)}
.oma-appr-b.deny{color:#B42318}
.oma-appr-b.deny:hover{background:#FEF3F2;border-color:#FECDCA}
.oma-appr-b:disabled{opacity:.45;cursor:not-allowed}
.oma-chip.wr{color:#9A5B00;background:#FFF7ED;border-color:#FED7AA}

/* ── Level 50 · guide ── */
.oma-guide{flex:none;border-bottom:1px solid var(--bdr);background:var(--card);max-height:52%;overflow-y:auto}
.oma-guide-hd{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 8px}
.oma-guide-t{font-size:13px;font-weight:700;color:var(--txt)}
.oma-guide-s{font-size:11px;color:var(--txt2);margin-top:2px}
.oma-guide-tabs{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 10px}
.oma-guide-tab{font-family:var(--font);font-size:10.5px;font-weight:600;border-radius:99px;padding:5px 10px;min-height:28px;cursor:pointer;border:1px solid var(--bdr);background:var(--card);color:var(--txt2)}
.oma-guide-tab.on{background:var(--or);border-color:var(--or);color:#fff}
.oma-guide-bd{padding:0 14px 14px}
.oma-guide-blurb{font-size:11.5px;color:var(--txt2);line-height:1.55;margin-bottom:8px}
.oma-guide-ex{display:flex;flex-direction:column;gap:5px}
.oma-guide-ex button{font-family:var(--font);text-align:left;font-size:11.5px;color:var(--txt);background:#FAFAF8;border:1px solid var(--bdr);border-radius:9px;padding:8px 10px;min-height:36px;cursor:pointer;line-height:1.45}
.oma-guide-ex button:hover{border-color:var(--or);background:var(--or-lt)}
.oma-guide-rules{margin-top:10px;display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--txt3);line-height:1.5}
.oma-guide-lim{margin-top:10px;border-top:1px solid var(--bdr);padding-top:8px;display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:var(--txt2);line-height:1.5}
.oma-guide-lim-h{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3)}
.oma-ic.on{color:var(--or)}
@media(max-width:600px){.oma-appr-row{flex-direction:column;gap:1px}.oma-appr-row .k{width:auto}.oma-appr-b.approve{min-width:100%}}

/* ── Composer ── */
.oma-ft{flex:none;border-top:1px solid var(--bdr);padding:10px 12px 12px;background:var(--card)}
.oma-in{display:flex;align-items:flex-end;gap:7px;border:1.5px solid var(--bdr);border-radius:12px;padding:6px 6px 6px 11px;background:#F9FAFB;transition:border-color .15s,box-shadow .2s,background .15s}
.oma-in:focus-within{border-color:var(--or);box-shadow:0 0 0 3px rgba(249,115,22,.10);background:#fff}
.oma-in textarea{flex:1;border:0;outline:0;background:transparent;resize:none;font-family:var(--font);font-size:12.5px;line-height:1.5;color:var(--txt);max-height:96px;padding:5px 0}
.oma-in textarea::placeholder{color:var(--txt3)}
.oma-send{flex:none;width:32px;height:32px;border-radius:9px;border:0;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,opacity .15s}
.oma-send:hover{background:var(--or2)}
.oma-send:disabled{opacity:.35;cursor:not-allowed}
.oma-ft-note{font-size:9.5px;color:var(--txt3);text-align:center;margin-top:7px;letter-spacing:.02em}

@media (max-width:1180px){ .oma-panel{width:392px} }
@media (max-width:600px){
  .oma-panel{right:0;left:0;top:0;bottom:0;width:auto;max-width:none;border-radius:0;border:0}
  .oma-shell .oma-panel{transform-origin:100% 100%}
  .oma-dock{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:78px;height:78px}
  .oma-qa{grid-template-columns:1fr}
}
/* Landscape phones: keep the dock clear of the thumb rail and any bottom bar. */
@media (max-height:520px) and (orientation:landscape){
  .oma-dock{width:64px;height:64px;right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .oma-shell .oma-panel,.oma-shell.closing .oma-panel,.oma-shell .oma-body,.oma-shell .oma-ft,.oma-shell .oma-scope,.oma-dock.arriving,.oma-dock.enabling{animation:none!important}
  .oma-dock{transition-duration:.01ms!important}
}


/* ── Profile menu: agent preference ────────────────────────────────────────
   Lives inside the existing .ud dropdown and inherits its metrics, so it reads
   as a native row of that menu rather than a bolted-on setting. */
.ud-pref{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;font-size:12px;color:var(--txt);cursor:pointer;user-select:none;border-top:1px solid var(--bdr2);transition:background .1s}
.ud-pref:hover{background:#F9FAFB}
.ud-pref-l{display:flex;align-items:center;gap:7px;min-width:0}
.ud-pref-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ud-sw{position:relative;flex:none;width:38px;height:22px;border-radius:99px;background:#E4E2DE;transition:background .28s cubic-bezier(.22,1,.36,1)}
.ud-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ud-sw.on{background:var(--or)}
.ud-sw.on::after{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){.ud-sw,.ud-sw::after{transition-duration:.01ms}}
@keyframes omaStage{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.oma-think i{animation:none}}