/* T3 Code: dockable panels concept. Unofficial mockup, placeholder data. */
@font-face { font-family: "Inter"; src: url("fonts/Inter-var.woff") format("woff"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Cascadia Code"; src: url("fonts/CascadiaCode-var.woff") format("woff"); font-weight: 200 700; font-display: block; }

:root {
  /* sampled from the reference screenshot */
  --bg: #000000;
  --sidebar: #030303;
  --sidebar-border: #141414;
  --panel: #0f0f0f;
  --panel-border: #262626;
  --divider: #1b1b1b;
  --composer: #0e0e0e;
  --composer-border: #1a1a1a;
  --subbar: #111111;
  --subbar-border: #171717;
  --hover: #0a0a0a;
  --badge: #2f2f2f;
  --fg: #f5f5f5;
  --fg-2: #d4d4d4;
  --muted: #a3a3a3;
  --dim: #8f8f8f;
  --icon: #a3a3a3;
  --add: #0a9467;
  --del: #8c3c3e;
  /* accent: the app's blue-violet (send button hue) */
  --accent: 110 105 255;
  --accent-ink: #b9b6ff;
  --win-border: #5b575b;
  --accent-dark: #0c0b24;

  --topbar-h: 40px;
  --sidebar-w: 324px;
  --float-top: 51px;
  --float-right: 18px;
  --float-w: 280px;
  --composer-w: 704px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cascadia Code", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
i[data-icon] { display: inline-flex; width: 16px; height: 16px; flex: none; font-style: normal; }
i[data-icon] svg { width: 100%; height: 100%; display: block; }

/* ---------- window ---------- */
#desktop { position: fixed; inset: 0; background: var(--bg); }
#win {
  position: absolute; inset: 0;
  display: flex;
  background: var(--bg);
  overflow: hidden;
}
/* reference-frame mode: same desktop inset as the screenshot */
.ref-frame #desktop { background: linear-gradient(180deg, #4b2a43 0%, #3a1d30 40%, #20111e 80%, #05070d 100%); }
.ref-frame #win { inset: 6px 9px 4px 3px; border: 1px solid var(--win-border); border-radius: 8px; }

#mainwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#mainrow { flex: 1 1 auto; min-height: 0; display: flex; }
#maincol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
#topbar { position: relative; height: var(--topbar-h); flex: none; display: flex; align-items: center; padding-left: 20px; }
.crumbs { display: flex; align-items: center; height: 26px; position: relative; top: -2px; white-space: nowrap; }
.crumbs .favicon { margin-right: 6px; }
.crumb { color: var(--muted); font-size: 14px; }
.crumb-sep { color: var(--muted); margin: 0 12px 0 13px; font-size: 14px; }
.crumb-current { color: var(--fg); font-weight: 600; }
.tb-right { margin-left: auto; display: flex; align-items: center; height: 100%; }
.tb-icons { display: flex; gap: 4px; margin-right: 13px; }
.tb-btn { width: 28px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: #777777; position: relative; top: -1.5px; }
.tb-btn i { width: 16px; height: 16px; }
.tb-btn.is-active { background: var(--hover); color: #8a8a8a; }
.tb-btn:hover { background: var(--hover); color: #b5b5b5; }
#btn-edit[aria-pressed="true"], #btn-edit[aria-pressed="true"]:hover { background: rgb(var(--accent)); color: var(--accent-dark); }
.win-ctrls { display: flex; height: 36px; align-self: flex-start; }
.wc { width: 46px; height: 36px; display: grid; place-items: center; color: #e8e8e8; }

/* favicon placeholder for project "acme-web" */
.favicon { width: 14px; height: 14px; border-radius: 4px; flex: none; background: #2b2452 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.2 10.6 10.4H3.4z' fill='%23a5a0ff'/%3E%3C/svg%3E") center/100% no-repeat; }

/* ---------- docks ---------- */
.dock { position: relative; display: none; flex: none; min-width: 0; min-height: 0; }
.dock.has-panels { display: flex; flex-direction: column; }
#dock-left.has-panels { width: var(--dock-left-w, var(--sidebar-w)); }
#dock-right.has-panels { width: var(--dock-right-w, 300px); }
#dock-top.has-panels { height: var(--dock-top-h, 220px); }
#dock-bottom.has-panels { height: var(--dock-bottom-h, 220px); }
.dock-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.dock-body > .panel { flex: 1 1 auto; min-width: 0; }
.dock-body > .panel:not(.is-active-tab) { display: none !important; }

.tabstrip { display: flex; gap: 2px; height: 34px; flex: none; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--sidebar-border); background: var(--sidebar); }
#dock-left .tabstrip, #dock-right .tabstrip { padding-top: 0; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--dim); }
.tab i { width: 14px; height: 14px; }
.tab:hover { color: var(--fg-2); background: var(--hover); }
.tab.is-active { color: var(--fg); background: #141414; }

/* ---------- panels: shared ---------- */
.panel { position: relative; }
.grip { display: none; }

/* ---------- threads sidebar ---------- */
#p-threads { display: flex; flex-direction: column; background: var(--sidebar) url("icons/noise.png"); overflow: hidden; }
.dock-v #p-threads, .dock-v #p-git { height: 100%; }
#dock-left #p-threads, #dock-left #p-git, #dock-left #p-composer { border-right: 1px solid var(--sidebar-border); }
#dock-right #p-threads, #dock-right #p-git, #dock-right #p-composer { border-left: 1px solid var(--sidebar-border); }
#dock-top .panel { border-bottom: 1px solid var(--sidebar-border); }
#dock-bottom .panel { border-top: 1px solid var(--sidebar-border); }
.sb-sky { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 110px; background: url("icons/sidebar-sky.png") left top / 420px 110px no-repeat; pointer-events: none; }
.sb-head { position: relative; z-index: 1; height: 38px; flex: none; display: flex; align-items: center; padding-left: 19px; gap: 17px; }
.sb-head-icon { color: #c8c8c8; }
.brand { font-size: 14px; font-weight: 500; color: #a3a3a3; letter-spacing: -0.005em; padding-top: 1px; }
.brand b { color: #ffffff; font-weight: 700; }
.sb-search { position: relative; z-index: 1; height: 32px; flex: none; margin-top: 9px; display: flex; align-items: center; padding: 0 16px 0 15px; color: var(--muted); }
.sb-search > i { color: #a3a3a3; }
.sb-search-label { margin-left: 10px; font-size: 14px; }
.sb-search-actions { margin-left: auto; display: flex; gap: 12px; color: #8f8f8f; }
.sb-scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sb-scroll::-webkit-scrollbar { display: none; }
.sb-active { padding: 19px 19px 0 18px; flex: none; }
.sb-proj { display: flex; align-items: center; height: 16px; color: #8b8b8b; font-size: 12px; }
.sb-proj .favicon { width: 16px; height: 16px; margin-right: 6px; }
.sb-time { margin-left: auto; font-size: 13px; color: var(--dim); }
.sb-title { margin-top: 6px; font-size: 14px; font-weight: 500; color: #c4c4c7; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1px; }
.sb-branch { display: flex; align-items: center; height: 16px; margin-top: 1px; font-size: 12px; color: #8a8a8a; }
.sb-agents { margin-left: auto; display: flex; gap: 3px; color: #6f6f6f; }
.sb-agents i { width: 14px; height: 14px; }
.sb-settled { margin-top: auto; flex: none; padding-top: 24px; }
.sb-settled-head { display: flex; align-items: center; height: 28px; padding: 0 18px 0 19px; font-size: 12px; font-weight: 500; color: var(--muted); }
.sb-count { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 12px; color: var(--dim); }
.sb-count i { width: 12px; height: 12px; }
.sb-list { list-style: none; margin: 2.5px 0 0; padding: 0; }
.sb-list li { display: flex; align-items: center; height: 37px; padding: 0 19px 0 18px; font-size: 14px; color: var(--dim); }
.sb-list .t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 10px; }
.sb-list .d { flex: none; margin-left: 12px; }
.badge { width: 16px; height: 16px; flex: none; border-radius: 4px; background: var(--badge); color: #8a8a8a; font-size: 6.5px; font-weight: 700; display: grid; place-items: center; letter-spacing: .02em; }
.badge-dashed { background: none; border: 1px dashed #4a4a4a; }
.badge-fav { background: #1d1d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2 11.6 11.4H4.4z' fill='%23575575'/%3E%3C/svg%3E") center/100% no-repeat; }
.sb-more { display: flex; align-items: center; height: 37px; padding-left: 18px; color: var(--muted); font-size: 14px; gap: 11px; }
.sb-foot { position: relative; height: 41px; flex: none; margin-top: 7.5px; display: flex; align-items: center; padding: 0 0 0 16px; gap: 20px; color: #8a8a8a; }
.sb-foot-btn { margin-left: auto; margin-right: 6.5px; width: 36px; height: 36px; border-radius: 50%; background: var(--hover); display: grid; place-items: center; color: #d8d8d8; }

/* ---------- git / changes panel ---------- */
#p-git { background: var(--panel); color: var(--fg-2); }
#p-git .git-group { padding: 8px 8px; }
#p-git .git-group:first-of-type { padding-bottom: 7px; }
.git-row { height: 33px; display: flex; align-items: center; padding: 0 10px 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #d4d4d4; }
.git-group + .git-divider + .git-group .git-row { height: 32.5px; }
.git-row:hover { background: #151515; }
.git-row > i, .git-row > .explorer-icon { color: #9a9a9a; margin-right: 10px; }
.git-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.git-right { margin-left: auto; display: flex; align-items: center; gap: 18px; color: #9a9a9a; flex: none; padding-left: 8px; }
.git-muted { color: #8a8a8a; font-weight: 500; }
.git-muted > i { color: #7a7a7a; }
.git-divider { height: 1px; background: var(--divider); }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: -0.02em; word-spacing: -3px; }
.add { color: var(--add); }
.del { color: var(--del); }
.explorer-icon { width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.5a1 1 0 0 1 1-1h3.6l1.4 1.5h6a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z' fill='%23e8a317'/%3E%3Cpath d='M1.5 6h13v7a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z' fill='%23ffc83d'/%3E%3Crect x='5' y='8.5' width='6' height='4' rx='.6' fill='%234aa3df'/%3E%3C/svg%3E") center/16px no-repeat; }
.git-files { display: none; }
/* floating (default) */
.float-panel { position: absolute; z-index: 5; }
.float-panel#p-git { width: var(--float-w); border: 1px solid var(--panel-border); border-radius: 16px; }
/* docked git panel: native sidebar look */
.dock #p-git { background: var(--sidebar) url("icons/noise.png"); display: flex; flex-direction: column; overflow: hidden auto; }
.dock #p-git .git-files { display: block; padding: 6px 8px 12px; border-top: 1px solid var(--divider); }
.git-files-head { height: 30px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted); }
.git-files-head span { margin-left: auto; color: var(--dim); font-weight: 400; }
.git-file { height: 30px; display: flex; align-items: center; padding: 0 10px 0 12px; border-radius: 8px; font-size: 13px; color: #bdbdbd; gap: 10px; }
.git-file i { color: #7a7a7a; }
.git-file .fn { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.git-file .fn em { font-style: normal; color: #6f6f6f; margin-left: 8px; font-size: 12px; }
.git-file:hover { background: #121212; }
.dock-h #p-git { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.dock-h #p-git .git-divider { display: none; }
.dock-h #p-git .git-files { grid-column: 1 / -1; border-top: 1px solid var(--divider); overflow: auto; }

/* ---------- center / composer ---------- */
#center { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 calc(var(--center-pad-r, 0px) + 2px) 107px 0; overflow: hidden; }
#hero { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.hero-title { position: relative; top: 2px; margin: 0; font-size: 31px; line-height: 36px; font-weight: 500; color: var(--fg); letter-spacing: 0; white-space: nowrap; }
.hero-title strong { font-weight: 600; }
.hero-sub { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #ababab; }
#center-slot { width: 100%; max-width: var(--composer-w); margin-top: 18px; }
#center-slot:empty { display: none; }
#p-composer { width: 100%; }
.composer { position: relative; z-index: 1; background: var(--composer); border: 1px solid var(--composer-border); border-top-color: #161616; border-radius: 16px; padding: 16px 16px 17px 9px; }
.composer-input { height: 48px; margin-top: 0; padding-left: 7px; display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; color: #a1a1a1; }
.caret { width: 1px; height: 17px; background: #d0d0d0; margin: 2px 2px 0 0; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer-row { height: 32px; display: flex; align-items: center; gap: .5px; }
.cpill { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #e0e0e0; white-space: nowrap; }
.cpill > i:first-child { margin-right: 7px; color: #a3a3a3; }
.cpill .model-icon { color: #c9c4ff; }
.cpill .chev { width: 14px; height: 14px; margin-left: 4.5px; color: #8f8f8f; }
.cpill:hover { background: #151515; }
.composer-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.clip { color: #8f8f8f; }
.send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #9a9aa0; background: linear-gradient(90deg, #10122d, #1c183f); box-shadow: inset 0 0 0 1px #24253e; }
.send i { width: 14px; height: 14px; }
.composer-sub { margin: -1px 22px 0; height: 32px; background: var(--subbar); border: 1px solid var(--subbar-border); border-top: 0; border-radius: 0 0 16px 16px; display: flex; align-items: center; padding: 0 15px 0 16px; font-size: 12px; color: #9a9a9a; }
.composer-sub i { width: 12px; height: 12px; color: #8a8a8a; }
.composer-sub .chev { width: 10px; height: 10px; margin-left: 4px; }
.cs-left, .cs-right { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cs-right { margin-left: auto; }
/* composer docked into an edge */
.dock #p-composer { background: var(--sidebar) url("icons/noise.png"); padding: 18px 16px 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.dock-h #p-composer { align-items: center; justify-content: center; }
.dock-h #p-composer > :not(.grip) { width: 100%; max-width: var(--composer-w); }
.dock-v #p-composer .cpill > span { overflow: hidden; text-overflow: ellipsis; }
.dock-v #p-composer .composer-row { flex-wrap: wrap; height: auto; row-gap: 4px; }

/* ---------- edit layout mode ---------- */
#edit-pill {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  height: 26px; display: none; align-items: center; gap: 8px; padding: 0 4px 0 11px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-border);
  font-size: 12.5px; color: var(--fg-2); white-space: nowrap; z-index: 30;
}
.editing #edit-pill { display: flex; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .18); }
.pill-sep { color: #5c5c5c; margin: 0 -2px; }
.pill-btn { height: 20px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; cursor: pointer; }
.pill-btn i { width: 12px; height: 12px; }
.pill-done { color: var(--accent-dark); background: rgb(var(--accent)); margin-left: -4px; font-weight: 600; }
.pill-done:hover { background: #8a86ff; }
.pill-reset { color: var(--muted); }
.pill-reset:hover { background: #1a1a1a; color: var(--fg); }
.pill-divider { width: 1px; height: 14px; background: #262626; }

.editing .panel { --ol: rgb(var(--accent) / .26); }
.editing .panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ol); pointer-events: none; z-index: 20; transition: box-shadow .12s; }
.editing .dock .panel::after { inset: 2px; border-radius: 10px; }
.editing #p-composer::after { inset: -6px; border-radius: 20px; box-shadow: 0 0 0 1px var(--ol); }
.editing .panel.is-hover { --ol: rgb(var(--accent) / .62); }
.editing .panel.is-hover::after { box-shadow: inset 0 0 0 1px var(--ol), inset 0 0 0 4px rgb(var(--accent) / .06); }
.editing #p-composer.is-hover::after { box-shadow: 0 0 0 1px var(--ol), 0 0 0 4px rgb(var(--accent) / .07); }

.editing .grip {
  display: grid; place-items: center;
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 40px; height: 16px; border-radius: 999px; z-index: 25;
  background: #161616; border: 1px solid rgb(var(--accent) / .32); color: #6f6f6f;
  cursor: grab; touch-action: none; transition: background .12s, color .12s, border-color .12s;
}
.editing .dock .grip { top: 4px; transform: translateX(-50%); }
.editing #p-composer .grip { top: -6px; }
.editing .dock #p-composer .grip { top: 6px; }
.editing .grip i { width: 16px; height: 16px; }
.editing .panel.is-hover .grip, .editing .grip:hover, .editing .grip:focus-visible { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: var(--accent-dark); outline: none; }
.editing .grip::after { content: attr(data-tip); position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); font-size: 12px; color: var(--fg-2); background: #161616; border: 1px solid #262626; border-radius: 6px; padding: 3px 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.editing .panel.is-hover .grip::after { opacity: 1; }
.dragging, .dragging * { cursor: grabbing !important; }
.panel.is-source { opacity: .32; }
.panel.is-source::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18) !important; }

/* ghost (lifted panel) */
#ghost { position: fixed; z-index: 100; pointer-events: none; opacity: .94; overflow: hidden; border-radius: 14px;
  box-shadow: 0 28px 70px rgb(0 0 0 / .7), 0 8px 24px rgb(0 0 0 / .5), 0 0 0 1px rgb(var(--accent));
  transition: opacity .12s; }
#ghost.ghost-card { background: var(--panel); }
#ghost.ghost-card .panel { background: var(--panel); }
#ghost.is-armed { opacity: .96; }
#ghost.no-target { opacity: .8; box-shadow: 0 28px 70px rgb(0 0 0 / .7), 0 0 0 1px #3a3a3a; }
#ghost .panel { width: 100%; height: 100%; border-radius: 14px; border: 0 !important; }
#ghost .panel::after, #ghost .grip { display: none !important; }
#ghost .grip.ghost-grip { display: grid !important; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 40px; height: 16px; border-radius: 999px; background: rgb(var(--accent)); border: 1px solid rgb(var(--accent)); color: var(--accent-dark); place-items: center; z-index: 3; }
#ghost.no-target .grip.ghost-grip { background: #2a2a2a; border-color: #3a3a3a; color: #9a9a9a; }

/* ---------- drag overlay ---------- */
#overlay { position: absolute; inset: 0; pointer-events: none; z-index: 60; display: none; }
.dragging #overlay { display: block; }
/* idle zones: quiet solid wells; the armed zone goes solid accent with dark ink */
.zone { position: absolute; border-radius: 12px; background: rgb(10 10 12 / .82); border: 1px solid #2b2b30; display: grid; place-items: center; transition: background .08s, border-color .08s; }
.zone-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: #161618; border: 1px solid #2b2b30; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.zone-chip i { width: 14px; height: 14px; }
.zone[data-zone="left"] .zone-chip, .zone[data-zone="right"] .zone-chip { width: 32px; height: 32px; padding: 0; justify-content: center; }
.zone[data-zone="left"] .zone-chip span, .zone[data-zone="right"] .zone-chip span { display: none; }
.zone.is-active { background: rgb(var(--accent)); border-color: rgb(var(--accent)); }
.zone.is-active .zone-chip { background: transparent; border-color: transparent; color: var(--accent-dark); font-weight: 600; }
.zone.is-hidden { display: none; }
#overlay:has(.zone.is-active) .zone:not(.is-active) { opacity: .55; }
.pv-land.label-high span { top: 18px; transform: translateX(-50%); }
.pv-land.label-low span { top: auto; bottom: 18px; transform: translateX(-50%); }
.zone-center { border-radius: 14px; }
.preview-layer { position: absolute; inset: 0; z-index: 2; }
.preview-layer > div { position: absolute; border-radius: 10px; }
/* landing preview: exactly where the panel will sit */
.pv-land { background: rgb(var(--accent) / .14); box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.pv-land.pv-composer { border-radius: 16px; }
.pv-land span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 28px; font-size: 13px; font-weight: 600; color: var(--accent-dark); background: rgb(var(--accent)); border-radius: 999px; padding: 0 12px; white-space: nowrap; }
.pv-land span i { width: 14px; height: 14px; }
.pv-land span b { font-weight: 500; padding-left: 8px; margin-left: 2px; border-left: 1px solid rgb(12 11 36 / .3); }
/* neighbours that will move or resize */
.pv-other { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .34); background: rgb(255 255 255 / .03); }
.pv-composer { border-radius: 16px; }
.dragging #concept-chip { display: none; }

/* ---------- splitters ---------- */
.splitter { position: absolute; z-index: 32; touch-action: none; }
.splitter::before { content: ""; position: absolute; background: transparent; transition: background .1s; }
.splitter-left, .splitter-right { top: 0; bottom: 0; width: 9px; cursor: col-resize; }
.splitter-left { right: -5px; } .splitter-right { left: -5px; }
.splitter-left::before, .splitter-right::before { top: 0; bottom: 0; left: 3px; width: 3px; }
.splitter-top, .splitter-bottom { left: 0; right: 0; height: 9px; cursor: row-resize; }
.splitter-top { bottom: -5px; } .splitter-bottom { top: -5px; }
.splitter-top::before, .splitter-bottom::before { left: 0; right: 0; top: 3px; height: 3px; }
.splitter:hover::before { background: #3a3a40; }
.splitter.is-dragging::before { background: rgb(var(--accent)); }
.dragging .splitter { display: none; }
.resizing-v, .resizing-v * { cursor: col-resize !important; }
.resizing-h, .resizing-h * { cursor: row-resize !important; }
.resizing .panel { pointer-events: none; }

/* ---------- concept chip ---------- */
#concept-chip {
  position: fixed; left: calc(var(--chip-left, 340px)); bottom: var(--chip-bottom, 14px); z-index: 40;
  font-size: 14px; line-height: 20px; color: #9a9a9a; background: rgb(15 15 15 / .9);
  border: 1px solid #222; border-radius: 999px; padding: 5px 12px; pointer-events: none;
}
.no-chip #concept-chip { display: none; }

@media (max-width: 1100px) {
  :root { --sidebar-w: 280px; }
  .hero-title { font-size: 26px; }
}
.pill-btn:focus-visible, .tb-btn:focus-visible, .tab:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; }