/* ============================================================ RTI Wiki — Claude-style site shell (2026-05-06) Loads on opt-in pages: Provides: cream background, left sidebar, top-bar, hides legacy nav. Page-level widget CSS continues to apply within .claude-content. ============================================================ */ :root { --c-bg: #faf8f3; --c-bg-soft: #f5f0e6; --c-bg-hover: #efeadc; --c-ink: #2b2820; --c-ink-soft: #4a463c; --c-muted: #8a8473; --c-line: #e6e1d6; --c-line-soft: #f0ebe0; --c-accent: #c94f28; --c-accent-soft: #fdeee5; --c-card: #ffffff; --c-sidebar-w: 280px; } body.claude-shell { margin: 0; padding: 0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif; color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; } /* Hide legacy chrome that the shell replaces */ body.claude-shell .rti-site-header, body.claude-shell #rti-site-header, body.claude-shell .rti-shell-header { display: none !important; } /* Layout */ body.claude-shell .claude-app { display: flex; min-height: 100vh; background: var(--c-bg); } /* Sidebar */ body.claude-shell .claude-sidebar { width: var(--c-sidebar-w); flex-shrink: 0; background: var(--c-bg); border-right: 1px solid var(--c-line-soft); padding: 18px 14px 14px; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; transition: width .25s ease, padding .25s ease, transform .25s ease; } body.claude-shell .claude-sidebar::-webkit-scrollbar { width: 6px; } body.claude-shell .claude-sidebar::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; } body.cs-collapsed.claude-shell .claude-sidebar { width: 64px; padding: 12px 8px; border-right: 1px solid var(--c-line-soft); overflow-x: hidden; overflow-y: auto; } body.cs-collapsed.claude-shell .cs-toggle-floating { display: none !important; } /* Hide labels, sections, plan-meta when collapsed — clip everything past icon */ body.cs-collapsed.claude-shell .cs-brand, body.cs-collapsed.claude-shell .cs-section, body.cs-collapsed.claude-shell .cs-user-meta, body.cs-collapsed.claude-shell .cs-user-icons, body.cs-collapsed.claude-shell .cs-item .cs-shortcut { display: none !important; } /* Items: keep icon centered, clip text via overflow + nowrap + 0 font-size on text */ body.cs-collapsed.claude-shell .cs-newchat, body.cs-collapsed.claude-shell .cs-item { justify-content: center !important; padding: 9px 8px !important; gap: 0 !important; font-size: 0 !important; /* hide raw text nodes */ overflow: hidden; white-space: nowrap; } body.cs-collapsed.claude-shell .cs-item svg, body.cs-collapsed.claude-shell .cs-newchat .cs-plus { font-size: initial !important; } body.cs-collapsed.claude-shell .cs-newchat .cs-plus { width: 34px; height: 34px; font-size: 20px !important; font-weight: 400; } body.cs-collapsed.claude-shell .cs-item svg { width: 20px !important; height: 20px !important; } /* Header: center the toggle */ body.cs-collapsed.claude-shell .cs-header { padding: 4px 0 12px !important; justify-content: center !important; } body.cs-collapsed.claude-shell .cs-user { padding: 8px 0 !important; justify-content: center !important; gap: 0 !important; } body.cs-collapsed.claude-shell .cs-avatar { width: 34px; height: 34px; } body.claude-shell .cs-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 16px; } body.claude-shell .cs-brand { font: 500 28px/1 "Charter", "Source Serif 4", "Source Serif Pro", "Crimson Text", "Georgia", ui-serif, serif; color: var(--c-ink); letter-spacing: -0.012em; display: inline-flex; align-items: center; gap: 8px; } body.claude-shell .cs-toggle, body.claude-shell .cs-toggle-floating { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; } body.claude-shell .cs-toggle:hover, body.claude-shell .cs-toggle-floating:hover { background: var(--c-bg-hover); } body.claude-shell .cs-toggle svg, body.claude-shell .cs-toggle-floating svg { width: 18px; height: 18px; } body.claude-shell .cs-toggle-floating { display: none; position: fixed; top: 16px; left: 16px; z-index: 75; background: var(--c-card); border: 1px solid var(--c-line); box-shadow: 0 2px 8px rgba(43,40,32,0.06); } body.claude-shell .cs-newchat { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; cursor: pointer; font: 500 17px Inter, system-ui, sans-serif; color: var(--c-ink); margin-bottom: 8px; transition: background .12s; text-decoration: none; } body.claude-shell .cs-newchat:hover { background: var(--c-bg-hover); } body.claude-shell .cs-newchat .cs-plus { width: 30px; height: 30px; border-radius: 50%; background: #efeadc; color: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; flex-shrink: 0; } body.claude-shell .cs-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; cursor: pointer; font: 500 17px Inter, system-ui, sans-serif; color: var(--c-ink-soft); margin: 1px 0; transition: background .12s, color .12s; position: relative; text-decoration: none; } body.claude-shell .cs-item:hover { background: var(--c-bg-hover); color: var(--c-ink); } body.claude-shell .cs-item.active { background: var(--c-card); color: var(--c-ink); box-shadow: 0 1px 2px rgba(43,40,32,0.04), 0 0 0 1px rgba(43,40,32,0.04); } body.claude-shell .cs-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-ink-soft); stroke-width: 2; } body.claude-shell .cs-item.active svg { color: var(--c-ink); } body.claude-shell .cs-item .cs-shortcut { margin-left: auto; font: 500 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--c-muted); } body.claude-shell .cs-section { font: 600 14px Inter, system-ui, sans-serif; color: var(--c-muted); padding: 18px 14px 6px; margin: 0; } body.claude-shell .cs-spacer { flex: 1; } body.claude-shell .cs-user { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--c-line-soft); margin-top: 6px; cursor: pointer; } body.claude-shell .cs-user:hover { background: var(--c-bg-hover); } body.claude-shell .cs-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #5096a8, #3e7a8a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px Inter; flex-shrink: 0; } body.claude-shell .cs-user-meta { flex: 1; min-width: 0; font: 500 15.5px Inter, system-ui, sans-serif; color: var(--c-ink); line-height: 1.3; } body.claude-shell .cs-user-meta .cs-plan { display: block; font: 500 12.5px Inter; color: var(--c-muted); margin-top: 1px; } body.claude-shell .cs-burger { display: none; position: fixed; top: 14px; left: 14px; width: 42px; height: 42px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 10px; z-index: 80; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(43,40,32,0.06); } /* Main area */ body.claude-shell .claude-main { flex: 1; min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); position: relative; min-width: 0; } body.claude-shell .claude-topbar { display: flex; align-items: center; justify-content: flex-end; padding: 14px 22px 0; min-height: 48px; } body.claude-shell .claude-topbar .ghost-btn { width: 34px; height: 34px; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--c-muted); cursor: pointer; } body.claude-shell .claude-topbar .ghost-btn:hover { background: var(--c-bg-hover); color: var(--c-ink-soft); } body.claude-shell .claude-content { flex: 1; padding: 30px 24px 60px; width: 100%; max-width: 1100px; margin: 0 auto; } /* Mobile */ @media (max-width: 880px) { body.claude-shell .cs-burger { display: inline-flex; } body.claude-shell .claude-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; width: 300px; transform: translateX(-100%); transition: transform .24s ease-out; box-shadow: 0 0 0 9999px rgba(43,40,32,0); pointer-events: none; } body.cs-open.claude-shell .claude-sidebar { transform: translateX(0); box-shadow: 0 0 0 9999px rgba(43,40,32,0.30); pointer-events: auto; } body.claude-shell .claude-main { width: 100%; } body.claude-shell .claude-content { padding: 70px 20px 60px; } } /* === Topbar tool-picker (Claude-style "model selector" in top-right) === */ body.claude-shell .topbar-tool-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-right: 8px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-card); font: 500 14.5px Inter, system-ui, sans-serif; color: var(--c-ink-soft); cursor: pointer; transition: border-color .12s, background .12s, color .12s; } body.claude-shell .topbar-tool-pill:hover { border-color: #d6cfbe; background: var(--c-bg); color: var(--c-ink); } body.claude-shell .topbar-tool-pill svg { width: 14px; height: 14px; } body.claude-shell .topbar-tool-wrap { position: relative; } body.claude-shell .tool-picker { position: absolute; top: calc(100% + 10px); right: 0; min-width: 380px; max-width: 90vw; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 24px 56px rgba(43,40,32,0.20), 0 2px 6px rgba(43,40,32,0.08); padding: 8px; display: none; z-index: 200; max-height: 70vh; overflow-y: auto; } body.claude-shell .tool-picker.open { display: block; } body.claude-shell .tp-section { font: 600 12.5px Inter, system-ui, sans-serif; color: var(--c-muted); padding: 10px 12px 4px; } body.claude-shell .tp-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--c-ink); transition: background .12s; } body.claude-shell .tp-item:hover { background: var(--c-bg-hover); } body.claude-shell .tp-item.current { background: var(--c-bg-soft); position: relative; } body.claude-shell .tp-item.current::after { content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c-accent); font-size: 14px; font-weight: 700; } body.claude-shell .tp-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--c-bg-soft); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); } body.claude-shell .tp-icon svg { width: 18px; height: 18px; } body.claude-shell .tp-text { flex: 1; min-width: 0; padding-right: 18px; } body.claude-shell .tp-name { display: block; font: 600 15px Inter, system-ui, sans-serif; color: var(--c-ink); margin-bottom: 1px; } body.claude-shell .tp-desc { display: block; font: 400 13px Inter, system-ui, sans-serif; color: var(--c-muted); line-height: 1.4; } @media (max-width: 720px) { body.claude-shell .tool-picker { min-width: 280px; right: 8px; max-width: calc(100vw - 24px); } body.claude-shell .topbar-tool-pill .tp-tool-name { display: none; } } /* Tool-picker modal styles (centered, with backdrop) */ body.claude-shell .tool-picker-backdrop { position: fixed; inset: 0; background: rgba(43, 40, 32, 0.30); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: none; z-index: 950; } body.claude-shell .tool-picker-backdrop.open { display: block; } body.claude-shell .tool-picker { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scale(.96); right: auto !important; bottom: auto !important; min-width: 460px !important; max-width: min(92vw, 540px) !important; max-height: min(76vh, 640px) !important; z-index: 1000 !important; box-shadow: 0 30px 80px rgba(43,40,32,0.30), 0 4px 12px rgba(43,40,32,0.10) !important; transition: transform .18s ease, opacity .18s ease; opacity: 0; pointer-events: none; } body.claude-shell .tool-picker.open { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; pointer-events: auto; } @media (max-width: 560px) { body.claude-shell .tool-picker { min-width: 0 !important; max-width: calc(100vw - 24px) !important; } } /* ============================================================ GREEN TINGE — PIO Reply Analyser palette extension (2026-05-06) Applies to all body.claude-shell pages. ============================================================ */ body.claude-shell { --c-action: #0b6b58; --c-action-deep: #094d40; --c-action-soft: #eef7f2; --c-action-line: rgba(11,107,88,0.20); } /* Sidebar active item → green-tinted */ body.claude-shell .cs-item.active { background: var(--c-action-soft); color: var(--c-action-deep); box-shadow: 0 1px 2px rgba(11,107,88,0.10), 0 0 0 1px var(--c-action-line); } body.claude-shell .cs-item.active svg { color: var(--c-action); } /* New RTI plus circle */ body.claude-shell .cs-newchat:hover { background: var(--c-action-soft); } body.claude-shell .cs-newchat .cs-plus { background: var(--c-action-soft); color: var(--c-action-deep); } /* Topbar tool-pill hover */ body.claude-shell .topbar-tool-pill:hover { background: var(--c-action-soft); border-color: var(--c-action-line); color: var(--c-action-deep); } /* Tool-picker current → green */ body.claude-shell .tool-picker .tp-item.current { background: var(--c-action-soft); } body.claude-shell .tool-picker .tp-item.current::after { color: var(--c-action); } body.claude-shell .tool-picker .tp-icon { background: var(--c-action-soft); color: var(--c-action); } body.claude-shell .tool-picker .tp-icon svg { color: var(--c-action); stroke: var(--c-action); } /* Sidebar user avatar — replace tealish with brand green */ body.claude-shell .cs-avatar { background: linear-gradient(135deg, #0b6b58, #094d40); } /* Help button hover (top-right) */ body.claude-shell .claude-topbar .ghost-btn:hover { background: var(--c-action-soft); color: var(--c-action-deep); } /* ============================================================ Hide legacy blue widgets on Claude-shell pages ============================================================ */ body.claude-shell #rti-wa-fab, body.claude-shell #rti-wa-copy, body.claude-shell #rti-chat-fab, body.claude-shell #rti-chat-panel, body.claude-shell #rti-chatbot-css-injected, body.claude-shell .rti-auth-zone, body.claude-shell .rti-auth-pill, body.claude-shell .rti-auth-avatar, body.claude-shell #rti-aw-pill, body.claude-shell #rti-aw-guest, body.claude-shell #rti-aw-logout, body.claude-shell .rti-floating-cta, body.claude-shell #rti-pwa-install, body.claude-shell .rti-share-bar, body.claude-shell #rti-share-bar, body.claude-shell .rti-pagebar, body.claude-shell #rti-pagebar, body.claude-shell .rti-bot-fab, body.claude-shell #rti-bot-fab { display: none !important; } /* ============================================================ Belt-and-braces: hide ANY legacy widget DOM that might still inject (defense-in-depth even after script tag strip) ============================================================ */ body.claude-shell #rti-a11y-launcher, body.claude-shell #rti-a11y-panel, body.claude-shell .rti-a11y-toolbar, body.claude-shell #rti-live-bar, body.claude-shell #rti-tool-counter, body.claude-shell #rti-tc-time, body.claude-shell #rti-tc-today, body.claude-shell #rti-tc-total, body.claude-shell #rti-tts-lang, body.claude-shell .rti-saved-floating, body.claude-shell .rti-past-drafts, body.claude-shell #rti-past-drafts, body.claude-shell .rti-engagement-gate, body.claude-shell #rti-engagement-gate, body.claude-shell #rti-pwa-install-banner, body.claude-shell .rti-pwa-banner, body.claude-shell .rti-toolnav, body.claude-shell .toolnav { display: none !important; } /* === Auth-only pages: strip ad-block + footer + injected cards === */ body.claude-shell.auth-only .claude-ad, body.claude-shell.auth-only #rti-sitewide-footer, body.claude-shell.auth-only #tools-footer-rti, body.claude-shell.auth-only .rti-footer, body.claude-shell.auth-only .tool-footer-cards, body.claude-shell.auth-only .tools-footer-band, body.claude-shell.auth-only .footer-inject-cards, body.claude-shell.auth-only [class*="footer"], body.claude-shell.auth-only [id*="footer"], body.claude-shell.auth-only .three-col-cards, body.claude-shell.auth-only .related-cards { display: none !important; }