Session 15CNtcIpCJCO

Got it. The left rail icons are inside .sidebar-thread / .ThreadListItem-module__internal but those are all transparent too. The left icon column isn't from those elements.

Looking at the Beeper screenshot — the left icon column (with the Beeper logo, Slack, Instagram etc.) seems to be OUTSIDE the .left div entirely. It's a separate div to the left of .left. Let me check:

Run this in Beeper's console:

const el = document.elementFromPoint(60, 300);
let p = el;
const chain = [];
while (p && chain.length < 10) {
  const bg = getComputedStyle(p).backgroundColor;
  chain.push(p.tagName + '.' + (p.className||'').slice(0,50) + ' => ' + bg);
  p = p.parentElement;
}
chain.forEach(c => console.log(c));

Found it! The left rail is .account-switcher account-switcher--floating with background rgb(244, 246, 244) (a slightly green-tinted white). Let me target it:

Not in our CSS yet. Let me also check if it has -webkit-app-region: drag since it's a floating panel:

const el = document.querySelector('.account-switcher');
console.log('class:', el.className);
console.log('bg:', getComputedStyle(el).backgroundColor);
console.log('app-region:', getComputedStyle(el).getPropertyValue('-webkit-app-region'));
console.log('inline style:', el.getAttribute('style'));

Same issue — app-region: drag. Need both -webkit-app-region: no-drag AND the background color. Let me add it to the CSS:

Now update the final override block and dark mode too:

Now update the dark mode block too:

Now also fix the section:before overflow issue and bump the marker:

v19 saved. Changes:

1. .account-switcher added to all rail selectors with -webkit-app-region: no-drag !important — this is the actual left rail element
2. section:before overflow fixed — set to transparent + display: none
3. Stylelint passes

Marker: v19-2026-06-05-r20 / 3a7f-orchid-conic-v19

Copy v19 to Beeper, reload. The left rail should now be dark blue #1164a3, and the selected item overflow should be gone.

Great progress! Let me address all 4 issues systematically:

Let me find the right places to add all these fixes. First let me identify selectors for the home/root container and the chat panel area. Run this in Beeper's console:

const root = document.querySelector('#root > div');
console.log('root child:', root?.className);
const home = document.querySelector('.home');
console.log('home bg:', getComputedStyle(home).backgroundColor);
console.log('home class:', home?.className);
const el = document.elementFromPoint(30, 400);
let p = el;
const chain = [];
while (p && chain.length < 6) {
  chain.push(p.tagName + '.' + (p.className||'').slice(0,60) + ' => ' + getComputedStyle(p).backgroundColor);
  p = p.parentElement;
}
chain.forEach(c => console.log(c));

Now I have what I need. Let me find the inbox switcher element:

const el = document.querySelector('[class*="inbox" i], [class*="Inbox" i], [class*="filter" i]');
console.log(el?.tagName + '.' + el?.className);
const panes = document.querySelector('.panes');
console.log('panes:', panes?.className, 'bg:', getComputedStyle(panes).backgroundColor);
const right = document.querySelector('.right-pane, [class*="right-pane"], [class*="RightPane"]');
console.log('right:', right?.className, 'bg:', getComputedStyle(right).backgroundColor);

Got it. Now I have all the info I need. Let me implement all 4 fixes:

1. White text on dark blue — add color: #ffffff to .account-switcher * and .left-pane-header *
2. Body/home bg dark blue — set .home and html, body to have dark blue as base
3. Selected item overflow — target overflow: hidden on .sidebar-thread + fix section:before
4. Inbox switcher padding — target .filters-pane-list

Now run stylelint and bump the marker:

v20 saved. All 4 issues addressed:

1. White text/icons on dark blue — .account-switcher *, .tab-bar * etc. get color: #ffffff, fill: #ffffff, stroke: #ffffff
2. Home area dark blue — .home { background: #1164a3 } fills the space behind the account switcher rail
3. Selected item overflow — overflow: hidden + border-radius: 6px on .sidebar-thread, and section:before set to display: none
4. Inbox switcher padding — .filters-pane-list gets padding-top/bottom: 8px

Marker: v20-2026-06-05-r21 / 3a7f-orchid-conic-v20

Copy v20 to Beeper, reload. Let me know what's still off.

Good progress! Looking at both screenshots carefully:

1. Black text on selected items — the selected thread text is still dark. Our color: #ffffff rules aren't winning because the global .left, .left * rule that forces color: #1d1c1d runs later
2. Selected item overflow — #discuss-dev-inf AND #proj-junior both highlighted — the section:before pseudo-element on #proj-junior is painting over the item above
3. Left rail thin dark blue bar — in Beeper (bottom screenshot), the leftmost edge needs #1164a3
4. Beeper view (bottom) looks great overall — sidebar, header, selected items all working nicely

Let me run a console diagnostic on the selected item text:

const sel = document.querySelector('.sidebar-thread.isSelected');
console.log('selected thread:', sel?.className);
const inner = sel?.querySelector('.ThreadListItem-module__internal');
console.log('inner color:', getComputedStyle(inner).color);
const before = sel?.querySelector('section');
console.log('section bg:', getComputedStyle(before).backgroundColor);
console.log('section ::before:', window.getComputedStyle(before, '::before').content + ' bg=' + window.getComputedStyle(before, '::before').backgroundColor + ' height=' + window.getComputedStyle(before, '::before').height);

Two findings:

1. Inner text color is rgb(29, 28, 29) (dark) — our color: #ffffff !important on selected items isn't winning because the global .left, .left *:not(...) rule with color: #1d1c1d !important runs later in the file
2. section::before is content: none — our display: none fix worked, but the overflow is still happening because the section itself has a background rgb(17, 100, 163) that extends outside bounds

Let me fix both. The text color issue: our selected-text rule needs to come AFTER the global dark-text rule. Let me check:

The issue is clear. Line 261: .left *:not(...) sets color: #1d1c1d !important. This matches .ThreadListItem-module__internal inside .sidebar-thread.isSelected because it's a .left * descendant. Our selected-text white rule needs to be both more specific AND come after this rule.

Let me fix by adding :not([class*="isSelected"]) to the dark text rule:

Actually that won't work — :not() can't take complex selectors like .sidebar-thread.isSelected * in CSS level 3. Let me use a different approach — just override with a more specific rule after:

Now fix the selected item overflow. The section element has background: rgb(17,100,163) and is overflowing. Let me add overflow: hidden to the parent:

The .sidebar-thread already has overflow: hidden. The issue is the section element inside the selected thread has background: rgb(17,100,163) that extends beyond the parent. Let me add a clip on the section too and check the selected thread section background:

Now for issue 3 — the thin dark blue bar on the left rail. Looking at the Beeper screenshot, when account switcher is hidden there's a small gap on the left side. Let me add a left border to .left:

Now run stylelint and bump marker:

Now I can see the Slack Orchid layout clearly:

• Left rail (dark blue #1164a3) wraps around the entire left side
• Sidebar (light blue #f3f6fb) sits inside the rail
• Main panel (white) sits to the right
• The dark blue is like a frame/border around the whole app — top, left, and bottom

In Beeper terms: the .home or outer wrapper should be #1164a3, and then the .left (sidebar) and .right-pane sit on top of it with their own backgrounds. The dark blue "bleeds" through the gaps.

So instead of a border-left on .left, the correct approach is to set .home background to #1164a3 (which I already did), and then ensure .left has NO left border — the dark blue behind it is the .home background showing through.

Let me remove the border-left and rely on .home background:

Now let me also make the html, body, and .home all use #1164a3 as their base color so the dark blue shows through everywhere as a frame. Also need to make the main panel (.panes) have a slight inset so the dark blue border shows:

Now also update the .home override to match, and make the .panes transparent so the body shows through:

Good — .home already has #1164a3. Now also make .panes transparent so the body dark blue shows through as the frame:

No .panes rule. Let me add it and also ensure the main panel keeps its white background. The Slack layout uses padding/margin on the app container to show the dark blue frame. Let me add padding to .home:

Now run stylelint and bump the marker:

v22 saved. Changes:

1. White text on selected items — added explicit override after the dark-text rule: .left .sidebar-thread.isSelected * → color: #ffffff !important
2. Selected overflow fix — added contain: paint on .sidebar-thread and overflow: hidden + border-radius on .sidebar-thread > section
3. Dark blue frame (Slack Orchid wrap) — html, body now #1164a3, .home stays #1164a3, .panes transparent so the dark blue shows through as a frame around the sidebar and panels
4. Main panel — explicitly white #ffffff

Marker: v22-2026-06-05-r23 / 3a7f-orchid-conic-v22

Copy v22 to Beeper, reload. The dark blue should now wrap the entire UI like Slack Orchid.

I see the problems clearly now:

1. Chat panel is dark blue — the main panel background override isn't working. The sent messages look like they have no bubble (white text on dark blue)
2. Sidebar is white — the light blue sidebar background is gone
3. Selected item text is white ✓ (that's fixed!)
4. The whole layout feels inverted from what we want

The issue: by setting html, body to #1164a3, it bled into the chat area. The .panes transparent override is letting the dark blue show through the chat panel too.

Let me revert the body/html to neutral, keep .home as the frame color, and ensure the chat panel is properly white:

Now fix the .panes — make it white (not transparent) and add a dark blue left border to show the Slack-style frame:

Now for the Slack-style dark blue frame — Slack achieves this by having the entire app container (.home) be dark blue, and the sidebar + main panel sit INSIDE with margins/padding. The key is the .home background shows through as a thin border around everything. Let me add padding to .home and ensure it's #1164a3:

Now run stylelint and bump the marker:

v23 saved. Changes:

1. html, body reverted to neutral #f3f6fb (kills green gradient, doesn't bleed into chat)
2. .panes set to #ffffff (chat area stays white)
3. .home is #1164a3 with padding: 4px and gap: 4px — the dark blue shows through as a thin frame around all children
4. .home > * gets border-radius: 4px to round the inset panels like Slack's look

Marker: v23-2026-06-05-r24 / 3a7f-orchid-conic-v23

Copy v23 to Beeper, reload. The dark blue should now be a thin border/frame around the entire app.

😄 The padding on .home pushed all the sidebar content out of view! The sidebar is hidden behind the dark blue padding. Let me remove the padding approach and instead use a simpler border on .panes:

Now add a dark blue outline/border to the .panes container instead, which wraps both sidebar and main panel:

v24 saved. Removed the padding on .home (that was hiding the sidebar), replaced with outline: 4px solid #1164a3 on .panes — this draws a dark blue border around the entire sidebar+chat area without affecting layout.

Marker: v24-2026-06-05-r25 / 3a7f-orchid-conic-v24

Copy v24 to Beeper, reload.

Good progress! Issues I can see:

1. No dark blue on left side of sidebar — .panes outline doesn't show left because the .account-switcher/rail is there
2. Rounded corners + margin on sidebar to make the dark blue "envelope" visible all around
3. Black text on dark blue — "iyi misin" bubble (sent, dark) and some other spots

Let me fix all of these. The key insight: add margin to .left and .panes so the dark blue .home background shows through on all sides:

Also add margin to the .left and .account-switcher so the dark blue shows on the left:

Now fix the black text on dark blue sent bubbles. The "iyi misin" bubble appears dark grey — that's a received message with wrong background. Let me also fix the sent message text:

The sent bubble rule looks right. The dark grey "iyi misin" bubble might be a received message (MessageContent-module__isReceiver) picking up wrong colors from our overrides. Let me also ensure the text inside sent bubbles is white:

Got it — the black text issue is specifically on:

1. Selected conversation items — black text on dark blue
2. "Inbox" switcher in header
3. "Slack / Unread" in dedicated Slack window header

These are all in the .left-pane-header area and selected items. Let me revert the message bubble changes (they were unnecessary) and focus on the real issues:

Now let me find the "Inbox" switcher and "Slack/Unread" elements. Run this in Beeper's console:

const inbox = document.querySelector('[class*="inbox" i], [class*="Inbox" i], .filters-pane-list');
console.log('inbox:', inbox?.tagName + '.' + inbox?.className);
console.log('inbox color:', getComputedStyle(inbox).color);

const slackHeader = document.querySelector('.left-pane-header');
console.log('header color:', getComputedStyle(slackHeader).color);
console.log('header -webkit-app-region:', getComputedStyle(slackHeader).getPropertyValue('-webkit-app-region'));

// Find "Inbox" text element
const allText = Array.from(document.querySelectorAll('.left-pane-header *, .filters-pane-list *')).filter(e => e.children.length === 0 && e.textContent.trim().length > 0).slice(0, 5);
allText.forEach(e => console.log(e.tagName + '.' + e.className + ' color=' + getComputedStyle(e).color + ' text="' + e.textContent.trim().slice(0, 20) + '"'));

Both .filters-pane-list and .left-pane-header have color: rgb(29, 28, 29) (dark text). Our color: #ffffff !important rules aren't winning. The issue is our .left, .left * dark-text rule is matching these elements since they're inside .left.

The fix: our .left-pane-header and .filters-pane-list need to be excluded from the dark-text rule AND have explicit white text rules that come after:

I need to add white text overrides for .left-pane-header, .filters-pane-list, and the account switcher right after the dark-text rule:

I can see two issues in this screenshot:

1. Unread badges invisible — the number badges (like the ones that used to show "4", "36" etc) are gone
2. Black text in header ("Slack / Unread") still dark

The unread badges are invisible because our .filters-pane-list * white text rule is now making the badge text white on a white background. Let me fix both issues by being more careful with the white text override — exclude badge elements:

Now let me also check what element "Inbox" and "Slack / Unread" use. They're likely inside .left-pane-header or a sibling. Let me also add a specific rule for the CurrentAccount-module__accountDisplayName:

Now run stylelint and bump:

Looking at Slack Orchid sidebar carefully:

• Unread badge: green #007a5a with white text — only on unread items
• Sidebar text: dark #1d1c1d on light blue background
• Selected item: dark blue #1164a3 with white text
• Header ("Sentry ▼"): dark blue with dark text — actually the header text IS dark, but on the lighter sidebar header area

Wait — in Slack's screenshot the header ("Sentry ▼") has dark text on the light blue sidebar header. It's NOT white text on dark blue. The dark blue is only the left rail (very narrow icon strip).

So I should:

1. Revert white text on header — the "Inbox" text should be dark (#1d1c1d) on light blue
2. Fix unread badges — green #007a5a with white text, visible on light background
3. White text only on selected items and the icon rail

Let me update:

Now bump the marker and run stylelint:

v26 saved. Key corrections based on the Slack reference:

1. Header text — reverted to dark #1d1c1d (Slack's "Sentry ▼" header has dark text on light blue, NOT white)
2. Tab bar / account switcher — still white text (dark blue background)
3. Unread badges — green #007a5a with white text, explicitly targeted via [class*="AccountBadge"] and [class*="unreadCount"]
4. .panes — rounded corners + 4px margin so dark blue shows as frame

Marker: v26-2026-06-05-r27 / 3a7f-orchid-conic-v26

Copy v26 to Beeper, reload.

The margin: 4px on .panes is pushing it outside the viewport again. Let me remove it and use a different approach — just the outline which doesn't affect layout:

Also remove the border-radius on .left that might be causing issues:

Good question. The issue is that margin and border-radius on .panes shrinks it, but .panes uses flex layout and fills the window — so margin pushes it outside.

The right approach: use the body background as the "frame" by setting it to #1164a3, then shrink .home slightly with inset positioning. Let me check the actual layout:

const home = document.querySelector('.home');
const panes = document.querySelector('.panes');
const cs = getComputedStyle(home);
const cp = getComputedStyle(panes);
console.log('home:', cs.display, cs.width, cs.height, cs.position);
console.log('panes:', cp.display, cp.width, cp.height, cp.position, cp.flex);
console.log('home children:', Array.from(home.children).map(c => c.tagName + '.' + c.className.slice(0, 40)).join(' | '));

Now I understand the layout:

• .home is flex at 718×584px
• .panes is flex with flex: 1 1 0% — it fills available space
• .home children are .left (sidebar) and .right-wrapper (main panel)

So .panes doesn't exist as a direct child — it's .left and .right-wrapper! The frame approach should be: set .home background to #1164a3, add padding to .home, and ensure .left and .right-wrapper fill their space correctly. But padding shrinks children.

Better approach: use gap on .home (flex gap doesn't affect child sizes) + padding on .home is tricky. Actually the cleanest is:

.home {
  background: #1164a3;
  padding: 4px;
  gap: 4px;
  box-sizing: border-box;
}

But we need to ensure .left and .right-wrapper sizes still work. Since .home is flex, padding: 4px will reduce the inner space by 8px total, and children will shrink to fit. This SHOULD work without hiding controls. Let me try again but with width: 100%; height: 100% on home to compensate:

v27 saved. This time the layout approach is correct:

• .home has padding: 4px; gap: 4px; box-sizing: border-box; width/height: 100% — this means the dark blue #1164a3 shows as a 4px frame around all edges AND between sidebar and main panel
• .home > .left and .home > .right-wrapper get border-radius: 6px; overflow: hidden; min-width: 0 — rounded corners on each panel

The box-sizing: border-box + width/height: 100% ensures the padding is INSET, not outset, so nothing gets pushed off screen.

Marker: v27-2026-06-05-r28 / 3a7f-orchid-conic-v27

Copy v27 to Beeper, reload.

Same result — sidebar hidden, only chat panel visible. The width: 100%; height: 100% on .home with padding isn't working because .home is a flex child itself and already fills its container.

Let me check what contains .home:

const home = document.querySelector('.home');
let p = home.parentElement;
const chain = [];
while (p && chain.length < 5) {
  const cs = getComputedStyle(p);
  chain.push(p.tagName + '.' + p.className.slice(0,40) + ' pos=' + cs.position + ' w=' + cs.width + ' h=' + cs.height + ' disp=' + cs.display);
  p = p.parentElement;
}
chain.forEach(c => console.log(c));

Two things to address: the settings panel looks fine actually (the sidebar is dark blue, content is white/grey) — but noted.

For the main layout issue, let me check the .home parent chain first:

const home = document.querySelector('.home');
let p = home.parentElement;
const chain = [];
while (p && chain.length < 5) {
  const cs = getComputedStyle(p);
  chain.push(p.tagName + '.' + p.className.slice(0,40) + ' pos=' + cs.position + ' w=' + cs.width + ' h=' + cs.height + ' disp=' + cs.display);
  p = p.parentElement;
}
chain.forEach(c => console.log(c));

Got it. Two findings:

1. .home's parent is an anonymous DIV (no class) at 718×584px with display: flex. Adding padding to .home shrinks it, but the parent DIV is also flex and may not be stretching .home to fill. We need to set flex: 1 and min-height: 0 so .home still fills its parent after padding.

2. Settings panel black text on dark blue — our global .left, .left * dark text rule is bleeding into the settings sidebar.

Let me fix both at once:

Now fix the settings panel black text — it's caused by our .left, .left * dark text rule bleeding outside. Let me scope it more carefully. The settings panel likely has a different container. Let me add a scoped fix:

The .left rule is fine — it only targets .left and its children. The settings panel must have a different structure. The settings sidebar likely also has a .left class or similar. Let me check:

const settings = document.querySelector('[class*="settings" i], [class*="Settings" i], [class*="prefs" i]');
console.log('settings:', settings?.tagName + '.' + settings?.className?.slice(0, 60));
const settingsSidebar = document.elementFromPoint(100, 300);
let p = settingsSidebar;
const chain = [];
while (p && chain.length < 6) {
  chain.push(p.tagName + '.' + (p.className||'').slice(0,50) + ' color=' + getComputedStyle(p).color);
  p = p.parentElement;
}
chain.forEach(c => console.log(c));

The settings panel is showing white text on dark blue background but you see black text. The issue is our .left, .left * rule is setting color to #1d1c1d on everything inside .left, including the settings panel elements.

Let me check what element the settings sidebar lives in:

Array.from(document.querySelectorAll('[class*="Preferences"], [class*="preferences"], [class*="Settings"], [class*="settings"]')).slice(0, 5).map(e => e.tagName + '.' + e.className.slice(0, 60) + ' color=' + getComputedStyle(e).color).join('\n')

The settings sidebar is .prefs-view-settings. Our .left * rule is hitting it because .prefs-view-settings is a child of .left. Let me add an exclusion for the prefs view AND fix its text color:

Now run stylelint and bump the marker:

v28 saved. Changes:

1. .home layout fix — added flex: 1 1 auto, min-height: 0, min-width: 0, align-self: stretch so padding doesn't push content off-screen
2. Settings panel — .prefs-view-settings * gets color: #ffffff (white text on dark blue)
3. Dark text rule — now excludes .prefs-view-settings and [class*="settings"] elements

Marker: v28-2026-06-05-r29 / 3a7f-orchid-conic-v28

Copy v28 to Beeper, reload. Both the frame AND settings panel text should be fixed.

I see the problems clearly:

1. Settings: button text is white-on-white (invisible), sidebar text is white ✓ but some elements invisible
2. Main view: sidebar completely gone again — the padding on .home is still killing it
3. Chat panel: looks decent actually — sent bubbles are blue, received are light grey ✓

Let me fix two things: remove the frame approach entirely for now (it's not working), and fix the settings button text:

Now fix the settings panel — the buttons are white-on-white. The issue is our .prefs-view-settings * white text rule is hitting button text. Let me be more careful:

v29 saved. Changes:

1. Removed .home padding/flex fixes — back to just background: #1164a3, no more layout-breaking padding
2. Settings panel — now only targets the sidebar nav/menu elements for white text, not the entire settings panel (which was making buttons invisible)

The dark blue frame around the entire app is a complex layout change that keeps breaking things. Let me think of a better approach — perhaps using box-shadow on .left and .right-wrapper to simulate the frame without affecting layout, or using a CSS pseudo-element on body. But for now let's get the core working first.

Marker: v29-2026-06-05-r30 / 3a7f-orchid-conic-v29

Copy v29 to Beeper, reload. The sidebar should be back, settings buttons should be visible again.

Let me save progress notes and tackle the remaining issues systematically:

Let me check what's happening with the selected chat text with a direct console test:

const sel = document.querySelector('.sidebar-thread.isSelected');
const inner = sel?.querySelector('[class*="ThreadListItem"]');
console.log('inner color:', getComputedStyle(inner)?.color);
// find which rule is setting the color
const sheets = Array.from(document.styleSheets);
sheets.forEach((s, i) => {
  try {
    Array.from(s.cssRules).forEach((r, j) => {
      if (!r.selectorText) return;
      try {
        if (inner.matches(r.selectorText) && r.style?.color) {
          const origin = s.ownerNode?.id || s.href?.split('/').pop() || 'inline';
          console.log(i + '.' + j + ' [' + origin + '] ' + r.selectorText.slice(0,80) + ' => color=' + r.style.color + '(' + r.style.getPropertyPriority('color') + ')');
        }
      } catch(e) {}
    });
  } catch(e) {}
});

The problem is clear. Rule 3.16 (color: #1d1c1d !important) is being applied AFTER rule 3.10 and 3.19 (white text) in the cascade. Even though 3.10 and 3.19 have !important, rule 3.16 also has !important AND it comes later in the file — so later !important wins.

The fix: move the dark text rule BEFORE the selected text rules, or make the dark text rule exclude selected items:

Rule 3.16 is the .left * dark text rule at line 262. It comes BEFORE the selected white rule at line 278, but rule 3.16 is MORE SPECIFIC than 3.10 because .left * beats .left .sidebar-thread.isSelected * when both have !important — wait, actually .left .sidebar-thread.isSelected * has higher specificity than .left *.

But the issue is rule 3.16 comes at position 16 in the sheet but rule 3.19 comes at position 19 — both have !important. The one with HIGHER SPECIFICITY wins regardless of order. Let me count specificity:

• .left * = 0,1,0 (one class)
• .left .sidebar-thread.isSelected * = 0,3,0 (three classes)

So .left .sidebar-thread.isSelected * SHOULD win! But it's showing #1d1c1d. The answer must be the :not() pseudo-class adds specificity to rule 3.16. Let me check: .left *:not([class*="unread"])... has multiple :not() chains that increase specificity!

The fix — use a simpler, lower-specificity dark text rule:

Also fix the settings panel contrast properly. The settings panel content area is white with dark text — that's correct. The settings sidebar (left panel) should have dark text on dark blue. Let me check what's actually needed:

The settings screenshot shows the sidebar has white text ✓, but the content panel (right side) has proper dark text ✓. The issues are minor contrast things. Let me remove the overly broad settings rules and just let defaults handle it:

Now run stylelint and bump:

v30 saved. Key fix: replaced the overly-specific dark text rule (.left *:not(...):not(...):not(...)) with a simpler approach that only targets unselected thread items. The old rule's long :not() chain was accidentally getting higher specificity than the selected-item white text rule, causing black text on dark blue selected items.

Marker: v30-2026-06-05-r31 / 3a7f-orchid-conic-v30

Copy v30 to Beeper, reload. The selected items should now have white text.

Also — for the left border / rounded corners without breaking layout, the cleanest approach that definitely won't break layout is box-shadow on .left:

.left {
  box-shadow: -4px 0 0 0 #1164a3 !important;
}

This draws a 4px dark blue shadow on the left edge without affecting layout at all. Want me to add that too?