/* JudeAI chat on the EDGE engine tokens (engine v1, tokens.css, frozen 15 October 2026).
   Owner, 18 October 2026: "this is awful and doesnt use tokens". Every colour, line, field, control and text here is a token,
   so the chat matches the bank and every other estate screen in each look: light (frost), electric and dark. */
html[data-look="ice"], html[data-look="light"], html:not([data-look]) {
  --e-app:      #E4EDF4;  /* page: deeper than live #F2F7FB so white panels separate clearly */
  --e-rail:     #D7E4EE;  /* rail: live #E3EDF4, deepened to match */
  --e-bar:      #FFFFFF;  /* top bar and action bar */
  --e-panel:    #FFFFFF;  /* panes, tables */
  --e-raised:   #F2F7FB;  /* header rows, grid headers */
  --e-field:    #FFFFFF;
  --e-hover:    #EAF3F9;
  --e-select:   #D9EDF8;
  --e-line:     #C6D6E2;
  --e-line-strong: #93AEC2;
  --e-brand:    #52D8FF;
  --e-brand-ink:#04121C;
  --e-brand-deep:#006B98; /* brand as text or icon on light surfaces (5.5:1 on white) */
  --e-icon:     #0A3D5C;  /* live icon colour */
  --e-text:     #0A1722;  /* live ink */
  --e-text-2:   #102C40;
  --e-text-3:   #2F4858;
  --e-ok:       #096347; --e-warn:#765000; --e-bad:#A91C3B; --e-info:#005B82;
  --e-on-brand-outline: #0A1722;
  --e-word-filter: brightness(0) saturate(100%) invert(7%) sepia(18%) saturate(1800%) hue-rotate(170deg);
  --e-page: linear-gradient(180deg,#EEF4F9 0%,#E4EDF4 100%);
  --e-pill-bg:#FFFFFF; --e-focus:#2AA9DB; --e-accent-ink:#006B98; --e-quiet-ok:#7A93A3; --e-brand-soft:rgba(82,216,255,.25);
  --e-tile: linear-gradient(45deg,#071823,#086696);
  --e-lift: 0 1px 2px rgba(10,23,34,.06), 0 8px 24px -12px rgba(10,23,34,.18);
  --e-glow: 0 30px 60px -30px rgba(24,163,233,.55); --e-glow-sm: 0 8px 20px -10px rgba(24,163,233,.6);
  --e-ring: 0 0 0 4px rgba(42,169,219,.16);
  color-scheme: light;
}
html[data-look="electric"] {
  --e-app:#0A2C47; --e-rail:rgba(7,34,56,.72); --e-bar:rgba(13,53,85,.72); --e-panel:#0F3A5C; --e-raised:#103D60; --e-field:#0D3555;
  --e-hover:#154A72; --e-select:#113C5E;
  --e-line:#2A5F86; --e-line-strong:#4A86B0;
  --e-brand:#52D8FF; --e-brand-ink:#04121C; --e-brand-deep:#7FE3FF; --e-icon:#FFFFFF;
  --e-text:#FFFFFF; --e-text-2:#FFFFFF; --e-text-3:#EAF5FB;
  --e-ok:#7BF0BC; --e-warn:#FFD38A; --e-bad:#FFA3AE; --e-info:#7FE3FF;
  --e-on-brand-outline:#FFFFFF; --e-word-filter:none;
  --e-page: radial-gradient(1100px 760px at 60% 18%,#114A70 0%,#0B3656 45%,#082A44 100%); /* live electric home */
  --e-pill-bg:#134E78; --e-focus:rgba(120,225,255,.6); --e-accent-ink:#7FE3FF; --e-quiet-ok:#A9CCE0; --e-brand-soft:rgba(82,216,255,.25);
  --e-tile: linear-gradient(45deg,#071823,#086696);
  --e-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -14px rgba(0,23,40,.5);
  --e-glow: 0 30px 60px -30px rgba(24,163,233,.7); --e-glow-sm: 0 8px 22px -10px rgba(24,163,233,.75);
  --e-ring: 0 0 0 4px rgba(99,221,255,.10);
  color-scheme: dark;
}
html[data-look="dark"], html[data-look="focus"] {
  --e-app:#0B1B27; --e-rail:rgba(8,21,32,.75); --e-bar:rgba(15,36,51,.75); --e-panel:#112838; --e-raised:#16324A; --e-field:#0F2433;
  --e-hover:#173A54; --e-select:#18394F;
  --e-line:#244A63; --e-line-strong:#3A6A88;
  --e-brand:#52D8FF; --e-brand-ink:#04121C; --e-brand-deep:#52D8FF; --e-icon:#E6F2F9;
  --e-text:#FFFFFF; --e-text-2:#F4F9FC; --e-text-3:#D6E7F0;
  --e-ok:#5EE6A8; --e-warn:#FFC96B; --e-bad:#FF8A98; --e-info:#52D8FF;
  --e-on-brand-outline:#FFFFFF; --e-word-filter:none;
  --e-page: radial-gradient(1100px 760px at 60% 18%,#123A57 0%,#0D2A40 45%,#0B1B27 100%);
  --e-pill-bg:#14304A; --e-focus:rgba(120,225,255,.6); --e-accent-ink:#52D8FF; --e-quiet-ok:#8FB4C9; --e-brand-soft:rgba(82,216,255,.22);
  --e-tile: linear-gradient(45deg,#071823,#086696);
  --e-lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -14px rgba(0,10,20,.55);
  --e-glow: 0 30px 60px -30px rgba(24,163,233,.7); --e-glow-sm: 0 8px 22px -10px rgba(24,163,233,.75);
  --e-ring: 0 0 0 4px rgba(99,221,255,.10);
  color-scheme: dark;
}
html { --e-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* surfaces */
html body.personal-chat { background: var(--e-page) !important; color: var(--e-text) !important; font-family: var(--e-font) !important; }
body.personal-chat .pc-header { background: var(--e-bar) !important; border-bottom: 1px solid var(--e-line) !important; color: var(--e-text) !important; backdrop-filter: blur(14px); }
body.personal-chat .pc-rail { background: var(--e-rail) !important; border-right: 1px solid var(--e-line) !important; }
body.personal-chat .pc-sidebar { background: var(--e-rail) !important; border-right: 1px solid var(--e-line) !important; color: var(--e-text) !important; }
body.personal-chat .pp-pane { background: var(--e-panel) !important; border-left: 1px solid var(--e-line) !important; color: var(--e-text) !important; }
body.personal-chat .jp, body.personal-chat #jp { background: transparent !important; color: var(--e-text) !important; }
body.personal-chat .cw-workbench { background: transparent !important; border-top: 1px solid var(--e-line) !important; }

/* text: no grey text; quiet text uses the third text token */
body.personal-chat :is(.pc-library-section p, .pc-library-section small, .pc-sidebar-footer small, .pp-pane p, .pp-pane small, .pc-conversation small, [class*="hint"], [class*="muted"], [class*="mute"]) { color: var(--e-text-3) !important; }
body.personal-chat :is(.pc-library-section h2, .pc-library-section h3, .pc-library-section > header, .pc-library-section > div:first-child) { color: var(--e-text) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
body.personal-chat ::placeholder { color: var(--e-text-3) !important; opacity: 1 !important; }

/* every field and drop-down: one shape, the field token, the line token; drop-downs get the engine chevron */
body.personal-chat :is(input:not([type="checkbox"]):not([type="radio"]), select, .pc-search, #pc-search) {
  background-color: var(--e-field) !important; color: var(--e-text) !important; border: 1px solid var(--e-line) !important;
  border-radius: 999px !important; box-shadow: none !important; font: 400 14px/1.2 var(--e-font) !important; height: 36px; padding: 0 14px !important; }
body.personal-chat select { -webkit-appearance: none !important; appearance: none !important; padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393AEC2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer; }
body.personal-chat :is(input, select, textarea):focus-visible { outline: none !important; border-color: var(--e-brand) !important; box-shadow: var(--e-ring) !important; }

/* every control: the pill token, the line token, text ink; selected uses the select token with a brand edge */
body.personal-chat :is(.cs-artifacts, #pc-history, .ed-account-control, .pc-starters button, .cw-goal-add, .cw-mode, .pp-pane button:not(.pp-toggle), .jp-mp, .jp .mp, [class*="model-pill"], .pt-c, button[class*="pill"]) {
  background: var(--e-pill-bg) !important; color: var(--e-text) !important; border: 1px solid var(--e-line) !important; border-radius: 999px !important; box-shadow: none !important; }
body.personal-chat :is(.cs-artifacts, #pc-history, .ed-account-control, .pc-starters button, .cw-goal-add, .cw-mode, .pp-pane button, .pt-c):hover { background: var(--e-hover) !important; }
body.personal-chat :is([aria-pressed="true"], [aria-selected="true"], .on, .is-on, .active):is(button) { background: var(--e-select) !important; border-color: var(--e-brand) !important; color: var(--e-text) !important; }
body.personal-chat .pc-starters button { height: 40px; padding: 0 16px !important; font: 500 14px var(--e-font) !important; }

/* the library: rows ink on rail; the open chat uses the select token */
body.personal-chat :is(.pc-library-actions button, .pc-library-actions a) { color: var(--e-text) !important; background: none !important; border: 0 !important; border-radius: 10px !important; }
body.personal-chat :is(.pc-library-actions button, .pc-library-actions a):hover { background: var(--e-hover) !important; }
body.personal-chat .pc-conversation { color: var(--e-text) !important; border-radius: 10px !important; }
body.personal-chat :is(.pc-conversation.on, .pc-conversation[aria-current], .pc-conversation.active, .pc-conversation.sel) { background: var(--e-select) !important; box-shadow: inset 0 0 0 1px var(--e-line-strong) !important; }

/* icons take the icon token */
body.personal-chat :is(.pc-rail, .pc-header, .cs-ib, .jp-ib, .pp-toggle, #pc-sidebar-toggle, #pc-rename) svg { color: var(--e-icon) !important; stroke: currentColor; }
body.personal-chat :is(.cs-ib, .jp-ib, .pp-toggle, #pc-sidebar-toggle, #pc-rename, .pc-row-more, .pc-project-add) { background: none !important; border: 0 !important; color: var(--e-icon) !important; border-radius: 10px !important; }
body.personal-chat :is(.cs-ib, .jp-ib, .pp-toggle, #pc-sidebar-toggle, #pc-rename, .pc-row-more, .pc-project-add):hover { background: var(--e-hover) !important; }
body.personal-chat .pc-rail :is(a, button)[aria-current], body.personal-chat .pc-rail :is(a, button).on { background: var(--e-select) !important; border-radius: 12px !important; }

/* the message box: a raised field with the strong line; focus shows the ring */
body.personal-chat :is(.jp-box, .pt-box) { background: var(--e-field) !important; border: 1px solid var(--e-line-strong) !important; border-radius: 22px !important; box-shadow: var(--e-lift) !important; }
body.personal-chat :is(.jp-box, .pt-box):focus-within { border-color: var(--e-brand) !important; box-shadow: var(--e-ring), var(--e-lift) !important; }
body.personal-chat textarea.jp-in { background: transparent !important; color: var(--e-text) !important; border: 0 !important; font: 400 15px/1.5 var(--e-font) !important; }
body.personal-chat :is(.pt-send, .jp-send) { background: var(--e-brand) !important; color: var(--e-brand-ink) !important; border: 0 !important; border-radius: 50% !important; box-shadow: var(--e-glow-sm) !important; }
body.personal-chat :is(.pt-send, .jp-send) svg { color: var(--e-brand-ink) !important; stroke: currentColor; }
body.personal-chat .cs-ring { color: var(--e-brand) !important; }

/* chat bubbles: Jude on the panel token, the person on the select token */
body.personal-chat :is(.jp-msg .jp-b, .jp-b) { background: var(--e-panel) !important; color: var(--e-text) !important; border: 1px solid var(--e-line) !important; border-radius: 16px !important; box-shadow: none !important; }
body.personal-chat .jp-msg.me .jp-b { background: var(--e-select) !important; border-color: var(--e-line-strong) !important; }

/* approval menu */
body.personal-chat .cw-mode-item { background: var(--e-panel) !important; color: var(--e-text) !important; border: 0 !important; border-radius: 10px !important; }
body.personal-chat .cw-mode-item:hover { background: var(--e-hover) !important; }
body.personal-chat .cw-mode-item small, body.personal-chat .cw-mode-item span + span { color: var(--e-text-3) !important; }

/* status colours from tokens */
body.personal-chat :is(.ok, .is-ok) { color: var(--e-ok) !important; } body.personal-chat :is(.warn, .is-warn) { color: var(--e-warn) !important; } body.personal-chat :is(.bad, .is-bad) { color: var(--e-bad) !important; }
/* one outline only: the search field's wrapper carries the shape, the input inside is bare */
body.personal-chat .pc-search input, body.personal-chat label:has(> #pc-search) input, body.personal-chat #pc-search { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 6px !important; height: 34px; }
body.personal-chat :is(.pc-search, label:has(> #pc-search), div:has(> #pc-search)) { background: var(--e-field) !important; border: 1px solid var(--e-line) !important; border-radius: 999px !important; }
/* the open chat row: one highlight, no inner outline */
body.personal-chat .pc-conversation, body.personal-chat :is(.pc-conversation.on, .pc-conversation[aria-current], .pc-conversation.active, .pc-conversation.sel) { box-shadow: none !important; border: 0 !important; background: transparent !important; }