/* The redesign skin — scoped to html.fm-next, so the live console is untouched
   without ?ui=next (Mark, 2026-09-04). The Messages look: a soft backdrop, two
   raised panels, the blue accent. No section rail — the operator lenses live
   behind the account at the foot of the column (web/next.js). Domains read as a
   LIST, agents as a GRID (Mark). Still to come: the ⓘ menu, the document tabs,
   the iMessage bubbles, the phone. */

html.fm-next {
  --accent: #0A84FF; --accent-strong: #0066d6; --fm-online: #30D158;
  --fm-back: radial-gradient(900px 520px at 82% 6%, rgba(255,228,196,.55) 0, rgba(255,228,196,0) 60%), radial-gradient(820px 620px at 10% 96%, rgba(207,208,255,.55) 0, rgba(207,208,255,0) 60%), linear-gradient(155deg, #e9ebf0 0, #dfe1e8 55%, #e6e2ee 100%);
  --fm-card-radius: 15px; --fm-card-shadow: 0 18px 44px rgba(20,20,45,.16), 0 3px 10px rgba(0,0,0,.08);
}
html.fm-next.theme-dark, html.fm-next.theme-cosmic {
  --fm-back: radial-gradient(900px 520px at 82% 6%, rgba(58,44,78,.7) 0, rgba(58,44,78,0) 60%), radial-gradient(820px 620px at 10% 96%, rgba(30,43,74,.7) 0, rgba(30,43,74,0) 60%), linear-gradient(155deg, #20222b 0, #191a22 55%, #221a2b 100%);
  --fm-card-shadow: 0 18px 44px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.4);
}

/* The backdrop, and the two raised panels floating on it. */
html.fm-next #app > .flex-1 > .fm-shell.flex-row { background: var(--fm-back); padding: 12px; gap: 12px; }
html.fm-next #dock.fm-leftcard { border-radius: var(--fm-card-radius); overflow: hidden; box-shadow: var(--fm-card-shadow); border: .5px solid rgba(255,255,255,.14); background: var(--bg-primary); display: flex; flex-direction: column; }
html.fm-next #viewer.fm-rightcard { border-radius: var(--fm-card-radius); overflow: hidden; box-shadow: var(--fm-card-shadow); border: .5px solid rgba(255,255,255,.12); background: var(--bg-primary); }
html.fm-next #bandbar { display: none; }             /* the top band's lenses moved behind the account */
html.fm-next #dock .fm-corner-user { display: none; } /* the account button lives in the account bar */

/* The account bar at the foot of the column, and its menu of operator lenses. */
html.fm-next .fm-nacct { flex: none; border-top: .5px solid var(--border-default); padding: 7px 9px; }
html.fm-next .fm-nacct-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--text-dim); }
html.fm-next .fm-nacct-btn:hover { background: var(--bg-hover); }
html.fm-next .fm-nacct-av { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #8a94a6, #5b6472); color: #fff; font: 700 12px system-ui, sans-serif; }
html.fm-next .fm-nacct-av img { width: 100%; height: 100%; object-fit: cover; }
html.fm-next .fm-nacct-id { flex: 1; min-width: 0; text-align: left; }
html.fm-next .fm-nacct-id b { display: block; font: 600 13.5px system-ui, sans-serif; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.fm-next .fm-nacct-id i { font: 500 11px system-ui, sans-serif; font-style: normal; color: var(--text-dim); }
.fm-nacctmenu { position: fixed; z-index: 90; min-width: 212px; padding: 7px; border-radius: 14px; background: var(--popup-bg); border: 1px solid var(--popup-border); box-shadow: 0 16px 44px rgba(0,0,0,.42); animation: fm-nacct-in .12s ease-out; }
.fm-nacctmenu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: 10px; color: var(--text-strong); font: 500 14px system-ui, sans-serif; text-align: left; cursor: pointer; }
.fm-nacctmenu button:hover { background: var(--bg-hover); }
.fm-nacctmenu .fm-mi-ic { width: 22px; text-align: center; font-size: 16px; }
.fm-nacctmenu .fm-mi-sep { height: 1px; background: var(--border-default); margin: 5px 8px; }
@keyframes fm-nacct-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Domains as a LIST (Mark, 2026-09-04): the comb becomes one column, each disc
      a conversation row; the selected one is the blue row. ── */
html.fm-next #comb { grid-template-columns: 1fr !important; row-gap: 2px !important; column-gap: 0 !important; padding: 6px 8px; }
html.fm-next #comb::before { content: "Domains"; display: block; padding: 4px 6px; font: 700 11px system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
html.fm-next .fm-disc { flex-direction: row !important; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; transform: none !important; }
html.fm-next .fm-disc-c { width: 42px !important; height: 42px !important; flex: none; }
html.fm-next .fm-disc-nm { flex: 1; min-width: 0; margin: 0; text-align: left; font: 600 14.5px/1.2 system-ui, sans-serif; letter-spacing: -.01em; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.fm-next .fm-disc-via { font: 500 11px system-ui, sans-serif; color: var(--text-dim); }
html.fm-next .fm-disc-sel { background: var(--accent) !important; }
html.fm-next .fm-disc-sel .fm-disc-nm, html.fm-next .fm-disc-sel .fm-disc-via { color: #fff; }
html.fm-next .fm-disc-badge { background: #FF3B30; color: #fff; border: 2px solid var(--bg-primary); font-weight: 700; }
html.fm-next #agents-pane { scrollbar-width: thin; }

/* The domain header the next.js draws, above the view menu. */
html.fm-next .fm-ndhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 2px; }
html.fm-next .fm-ndhead-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
html.fm-next .fm-ndhead-n { font: 700 16px/1 system-ui, sans-serif; letter-spacing: -.014em; color: var(--text-strong); }
html.fm-next .fm-ndhead-s { font: 600 12px system-ui, sans-serif; color: var(--fm-online); }
html.fm-next .fm-ndhead { align-items: center; }
html.fm-next .fm-agsize { display: inline-flex; gap: 1px; margin-left: 10px; padding: 2px; border-radius: 8px; background: var(--bg-well); }
html.fm-next .fm-agsize button { width: 22px; height: 20px; border: 0; background: none; border-radius: 6px; color: var(--text-dim); font: 700 10px system-ui, sans-serif; cursor: pointer; }
html.fm-next .fm-agsize button.on { background: var(--accent); color: #fff; }

/* The view menu: Team · Artifacts · Knowledge · Triggers · Services — words with a
   blue underline; Knowledge sits beside Artifacts (Mark). New agent moved to the
   Team list, so it hides here. */
html.fm-next #domtabs { gap: 16px; padding: 4px 16px 0; border-bottom: .5px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
html.fm-next #domtabs::-webkit-scrollbar { display: none; }
html.fm-next .fm-domtab { flex: none; flex-direction: row; align-items: baseline; gap: 5px; padding: 4px 0 9px; border-radius: 0; background: none !important; color: var(--text-dim); white-space: nowrap; }
html.fm-next .fm-domtab-l { order: 1; max-width: none !important; overflow: visible !important; text-overflow: clip; font: 600 13.5px system-ui, sans-serif; }
html.fm-next .fm-domtab-ic { order: 2; position: static; width: auto; height: auto; min-width: 0; background: none !important; box-shadow: none; }
html.fm-next .fm-domtab-ic svg { display: none; }
html.fm-next .fm-domtab-n { position: static !important; inset: auto; min-width: 0; height: auto; padding: 0; border: 0 !important; background: none !important; box-shadow: none; color: var(--text-dim); font: 600 11px system-ui, sans-serif; }
html.fm-next .fm-domtab.is-on { color: var(--accent); position: relative; }
html.fm-next .fm-domtab.is-on .fm-domtab-n { color: var(--accent); }
html.fm-next .fm-domtab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5px; height: 2px; border-radius: 2px; background: var(--accent); }
html.fm-next .fm-domtab[data-tab="Team"] { order: 1; }
html.fm-next .fm-domtab[data-tab="Artifacts"] { order: 2; }
html.fm-next .fm-domtab[data-tab="Knowledge"] { order: 3; }
html.fm-next .fm-domtab[data-tab="Triggers"] { order: 4; }
html.fm-next .fm-domtab[data-tab="Services"] { order: 5; }
html.fm-next .fm-domtab[data-tab="New agent"] { display: none; }

/* ── Agents as a GRID (Mark, 2026-09-04): the Team list becomes tiles — an avatar
      with an online dot and the name; the selected one is ringed blue. ── */
html.fm-next #dock[data-ag="small"]  { --fm-agcell: 66px;  --fm-agav: 40px; }
html.fm-next #dock[data-ag="medium"] { --fm-agcell: 84px;  --fm-agav: 52px; }
html.fm-next #dock[data-ag="big"]    { --fm-agcell: 104px; --fm-agav: 64px; }
html.fm-next .fm-teamtable { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--fm-agcell, 84px), 1fr)) !important; gap: 15px 4px !important; padding: 16px 10px; }
html.fm-next .tree-row { display: flex !important; flex-direction: column !important; grid-column: auto !important; align-items: center; gap: 7px; padding: 6px 2px; border-radius: 12px; min-width: 0; }
html.fm-next .tree-ava { position: relative; width: var(--fm-agav, 52px); height: var(--fm-agav, 52px); }
html.fm-next .tree-ava .tree-icon-img, html.fm-next .tree-ava img { width: var(--fm-agav, 52px) !important; height: var(--fm-agav, 52px) !important; }
html.fm-next .tree-ava::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--fm-online); border: 2.5px solid var(--bg-primary); }
html.fm-next .tree-ava:has(.is-asleep)::after { background: var(--text-dim); }
html.fm-next .tree-namestack { align-items: center; text-align: center; }
html.fm-next .tree-name { max-width: 100%; font: 600 11.5px/1.15 system-ui, sans-serif; text-align: center; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
html.fm-next .tree-sub { display: none; }   /* the model/spend line is noise on a tile */
html.fm-next .tree-row.sel { background: none; }
html.fm-next .tree-row.sel .tree-ava { box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 6px var(--accent); border-radius: 50%; }
html.fm-next .tree-row.sel .tree-name { color: var(--accent); }

/* On a phone, drop the card insets — the one-column phone layout is a later
   increment. */
@media (max-width: 700px) {
  html.fm-next #app > .flex-1 > .fm-shell.flex-row { padding: 0; gap: 0; }
  html.fm-next #dock.fm-leftcard, html.fm-next #viewer.fm-rightcard { border-radius: 0; box-shadow: none; border: 0; }
}