/* ═══════════════════════════════════════════════════════ Prompt Injection Lab — styles.css (v5) ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* ── Scrollbar ──────────────────────────────────────── */ :root { --sb-bg: #e5e7eb; --sb-thumb: #d1d5db; } .dark { --sb-bg: #1f2937; --sb-thumb: #374151; } * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-bg); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--sb-bg); } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 99px; } /* ── Mode toggle ────────────────────────────────────── */ .mode-btn { transition: background .15s, color .15s, box-shadow .15s; } .mode-active { background: #14b8a6; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); } .mode-inactive { background: transparent; color: #6b7280; } .dark .mode-inactive { color: #9ca3af; } .mode-inactive:hover { color: #374151; } .dark .mode-inactive:hover { color: #e5e7eb; } /* ═══════════════════════════════════════════════════════ HELP BUTTON ( ? ) ═══════════════════════════════════════════════════════ */ .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid #9ca3af; background: #f3f4f6; color: #4b5563; font-size: 0.65rem; font-weight: 800; line-height: 1; cursor: pointer; flex-shrink: 0; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; vertical-align: middle; user-select: none; } .help-btn:hover { border-color: #14b8a6; background: #ccfbf1; color: #0d9488; box-shadow: 0 0 0 3px rgba(20,184,166,.18); } .dark .help-btn { background: #334155; border-color: #64748b; color: #cbd5e1; } .dark .help-btn:hover { border-color: #14b8a6; background: rgba(20,184,166,.15); color: #2dd4bf; box-shadow: 0 0 0 3px rgba(20,184,166,.2); } /* ═══════════════════════════════════════════════════════ TOOLTIP PORTAL Rendered at level; absolutely positioned. ═══════════════════════════════════════════════════════ */ .tooltip-portal { position: absolute; z-index: 9999; width: 16rem; /* 256px — wide enough for 2–3 lines */ pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } .tooltip-portal.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .tooltip-text { background: #1e293b; color: #e2e8f0; font-size: 0.72rem; line-height: 1.55; font-family: 'DM Sans', sans-serif; padding: 0.55rem 0.75rem; border-radius: 0.6rem; box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12); } .dark .tooltip-text { background: #0f172a; color: #cbd5e1; box-shadow: 0 4px 20px rgba(0,0,0,.5); } /* Arrow triangle */ .tooltip-arrow { position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; } /* Arrow pointing UP (tooltip is below the button) */ .tooltip-arrow[data-pos="top"] { top: -5px; border-bottom: 6px solid #1e293b; border-top: none; } .dark .tooltip-arrow[data-pos="top"] { border-bottom-color: #0f172a; } /* Arrow pointing DOWN (tooltip is above the button) */ .tooltip-arrow[data-pos="bottom"] { bottom: -5px; border-top: 6px solid #1e293b; border-bottom: none; } .dark .tooltip-arrow[data-pos="bottom"] { border-top-color: #0f172a; } /* ═══════════════════════════════════════════════════════ PULL-TAB + RIGHT PANEL ═══════════════════════════════════════════════════════ */ .lab-panel-outer { display: flex; flex-direction: row; align-items: stretch; position: relative; } .lab-panel-tab { width: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 10; } .lab-panel-tab::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 3.5rem; background: #ffffff; border: 1px solid #e5e7eb; border-right: none; border-radius: 8px 0 0 8px; box-shadow: -2px 0 6px rgba(0,0,0,.06); transition: background .15s, border-color .15s; } .dark .lab-panel-tab::before { background: #1e293b; border-color: #334155; box-shadow: -2px 0 8px rgba(0,0,0,.3); } .lab-panel-tab:hover::before { background: #f0fdfa; border-color: #99f6e4; } .dark .lab-panel-tab:hover::before { background: rgba(20,184,166,.1); border-color: rgba(20,184,166,.3); } .lab-panel-tab svg { position: relative; z-index: 1; color: #9ca3af; transition: color .15s, transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none; } .dark .lab-panel-tab svg { color: #6b7280; } .lab-panel-tab:hover svg { color: #14b8a6; } .lab-panel { width: 20rem; flex-shrink: 0; overflow: hidden; transition: width .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; } .lab-panel.panel-closed { width: 0; opacity: 0; border-left-width: 0; pointer-events: none; } .lab-panel.panel-open { width: 20rem; opacity: 1; pointer-events: auto; } /* ── Chat bubbles ───────────────────────────────────── */ .bubble-user { background: #14b8a6; color: #fff; border-radius: 1.25rem 1.25rem .25rem 1.25rem; padding: .625rem 1rem; max-width: 72%; font-size: .875rem; line-height: 1.55; word-break: break-word; white-space: pre-wrap; } .bubble-assistant { background: #fff; color: #1f2937; border-radius: 1.25rem 1.25rem 1.25rem .25rem; padding: .625rem 1rem; max-width: 80%; font-size: .875rem; line-height: 1.55; border: 1px solid #e5e7eb; word-break: break-word; white-space: pre-wrap; } .dark .bubble-assistant { background: #1e293b; color: #e2e8f0; border-color: #334155; } /* ── Avatars ────────────────────────────────────────── */ .avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; flex-shrink: 0; letter-spacing: .02em; } .avatar-user { background: #14b8a6; color: #fff; } .avatar-assistant { background: #e5e7eb; color: #374151; } .dark .avatar-assistant { background: #334155; color: #cbd5e1; } /* ── Injection badge ────────────────────────────────── */ .injection-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; width: fit-content; } .badge-vulnerable { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .dark .badge-vulnerable { background: rgba(120,53,15,.3); color: #fcd34d; border-color: rgba(146,64,14,.6); } .badge-defended { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .dark .badge-defended { background: rgba(6,64,32,.3); color: #34d399; border-color: rgba(6,95,70,.6); } /* ── Explanation text ───────────────────────────────── */ .explanation-text { font-size: .7rem; color: #6b7280; line-height: 1.5; max-width: 36rem; } .dark .explanation-text { color: #94a3b8; } /* ── Lab textarea ───────────────────────────────────── */ .lab-textarea { font-family: 'JetBrains Mono', monospace; } /* ── Injection warning bar ──────────────────────────── */ .injection-warning { padding: .5rem .65rem; border-radius: .6rem; background: #fffbeb; border: 1px solid #fde68a; color: #d97706; font-size: .72rem; font-weight: 600; } .dark .injection-warning { background: rgba(120,53,15,.15); border-color: rgba(251,191,36,.25); color: #fbbf24; } /* ── Composer ───────────────────────────────────────── */ .composer-textarea { font-family: 'DM Sans', sans-serif; } /* ── Thinking dots ──────────────────────────────────── */ .thinking-dots { display: flex; align-items: center; gap: 5px; } .thinking-dots span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: thinking-bounce 1.2s ease-in-out infinite; } .thinking-dots span:nth-child(1) { animation-delay: 0s; } .thinking-dots span:nth-child(2) { animation-delay: .2s; } .thinking-dots span:nth-child(3) { animation-delay: .4s; } @keyframes thinking-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } } /* ── Message entrance ───────────────────────────────── */ @keyframes msg-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .msg-enter { animation: msg-slide-up .22s cubic-bezier(.4,0,.2,1) both; } /* ── Starter pills ──────────────────────────────────── */ .starter-pill { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: .75rem; font-weight: 500; cursor: pointer; transition: border-color .12s, background .12s, color .12s, box-shadow .12s; } .starter-pill:hover { border-color: #14b8a6; color: #0d9488; background: #f0fdfa; box-shadow: 0 0 0 2px rgba(20,184,166,.08); } .dark .starter-pill { background: #1e293b; border-color: #334155; color: #94a3b8; } .dark .starter-pill:hover { border-color: #14b8a6; color: #2dd4bf; background: rgba(20,184,166,.08); } /* ── Send button press ──────────────────────────────── */ #sendBtn:not(:disabled):active { transform: scale(.93); } /* ═══════════════════════════════════════════════════════ TICKER TAPE (horizontal scrolling suggestions) ═══════════════════════════════════════════════════════ */ .ticker-wrap { width: 100%; overflow: hidden; padding: 4px 0; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 32s linear infinite; } .ticker-track:hover { animation-play-state: paused; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* exactly half — 2× duplicated items */ } .ticker-item { display: inline-block; padding: 0.3rem 1.2rem; margin-right: 0.5rem; border-radius: 999px; background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.2); color: #14b8a6; font-size: 0.72rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; user-select: none; } .ticker-item:hover { background: rgba(20,184,166,.18); border-color: rgba(20,184,166,.45); transform: translateY(-1px); } .dark .ticker-item { background: rgba(20,184,166,.06); border-color: rgba(20,184,166,.15); color: #2dd4bf; } .dark .ticker-item:hover { background: rgba(20,184,166,.15); border-color: rgba(20,184,166,.35); } /* ═══════════════════════════════════════════════════════ SUGGESTION CHIPS ROW (after first message) ═══════════════════════════════════════════════════════ */ .suggestion-scroll { scrollbar-width: none; -ms-overflow-style: none; } .suggestion-scroll::-webkit-scrollbar { display: none; } .sugg-chip { display: inline-flex; align-items: center; white-space: nowrap; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 0.72rem; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: border-color .12s, background .12s, color .12s; } .sugg-chip:hover { border-color: #14b8a6; color: #0d9488; background: #f0fdfa; } .dark .sugg-chip { background: #1e293b; border-color: #334155; color: #94a3b8; } .dark .sugg-chip:hover { border-color: #14b8a6; color: #2dd4bf; background: rgba(20,184,166,.08); } .sugg-chip-attack { border-color: #fca5a5; color: #b91c1c; background: #fff7f7; } .sugg-chip-attack:hover { border-color: #ef4444; background: #fef2f2; color: #991b1b; } .dark .sugg-chip-attack { background: rgba(185,28,28,.12); border-color: #7f1d1d; color: #fca5a5; } .dark .sugg-chip-attack:hover { border-color: #ef4444; color: #fecaca; background: rgba(239,68,68,.15); } /* ═══════════════════════════════════════════════════════ MOBILE RESPONSIVENESS Desktop (>1024px) is untouched — only ≤768px targeted. ═══════════════════════════════════════════════════════ */ /* ── Tablet + Phone ≤768px ─────────────────────────── */ @media (max-width: 768px) { /* ─── HEADER LAYOUT ──────────────────────────────── Row 1 (top, centered): Theme · Reset · Lab Inputs Row 2 (left): Title Row 3 (full-width): Mode toggle ──────────────────────────────────────────────────── */ header { flex-wrap: wrap; row-gap: 0.4rem; padding: 0.5rem 0.75rem 0.45rem; align-items: center; } /* Row 1 — controls group moves to very top, centered */ header > div:last-child { order: 1; width: 100%; justify-content: center; gap: 0.75rem; padding-bottom: 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .dark header > div:last-child { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Row 2 — title */ header > span { order: 2; width: 100%; text-align: center; font-size: 0.8rem; } /* Row 3 — mode toggle, full width, centered */ header #modeToggle { order: 3; width: 100%; justify-content: center; padding: 0.25rem; } /* ─── LAB PANEL — fixed right-side overlay on mobile ─ */ #labPanelOuter { position: fixed; top: 0; right: 0; height: 100%; z-index: 300; width: auto; } /* Dim backdrop when panel is open */ #labPanelOuter::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: -1; } #labPanelOuter:has(.panel-open)::before { opacity: 1; pointer-events: auto; } /* ─── PULL-TAB ARROW — keep visible on mobile ──────── The tab sticks out from the right edge as a floating handle the user can always tap. ──────────────────────────────────────────────────── */ .lab-panel-tab { display: flex !important; /* never hidden — was incorrectly set to none */ position: relative; z-index: 310; width: 1.75rem; /* slightly wider for easier tapping */ min-height: 5rem; /* tall enough to hit with a thumb */ cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Pill shape: taller and slightly wider on mobile */ .lab-panel-tab::before { width: 1.4rem; height: 4rem; border-radius: 10px 0 0 10px; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.12); } /* Panel drawer */ .lab-panel { width: 88vw !important; max-width: 340px; height: 100%; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .lab-panel.panel-closed { width: 0 !important; opacity: 0; pointer-events: none; } .lab-panel.panel-open { width: 88vw !important; max-width: 340px; opacity: 1; pointer-events: auto; } /* ─ Tooltip: prevent off-screen overflow ─ */ .tooltip-portal { width: min(16rem, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); } /* ─ Chat bubbles: wider on small screens ─ */ .bubble-user { max-width: 88%; } .bubble-assistant { max-width: 94%; } /* ─ Chat transcript: reduce side padding ─ */ #chatTranscript { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* ─ Empty state: more compact ─ */ #emptyState { min-height: 48vh; gap: 1.25rem; padding: 0.5rem 0; } #emptyState .w-full.max-w-md { max-width: 100%; } /* ─ Injection guide bar ─ */ #injGuideBar .flex.items-start.gap-3 { gap: 0.5rem; } #injGuideBar #copyInlineInjection { flex-shrink: 0; align-self: flex-start; margin-top: 0.25rem; } /* ─ Chip scroll arrows: min 44px tap target ─ */ #chipsScrollLeft, #chipsScrollRight { width: 2.25rem !important; height: 2.25rem !important; min-width: 2.25rem; min-height: 2.25rem; } /* ─ Composer area ─ */ #composerArea { padding: 0.625rem 0.75rem 0.75rem; } #composerBox { padding: 0.625rem 0.875rem; } /* ─ Explanation text ─ */ .explanation-text { max-width: 100%; } /* ─ Lab panel textarea ─ */ #untrustedContent { min-height: 8rem; font-size: 11px; } } /* ── Small phones ≤480px ───────────────────────────── */ @media (max-width: 480px) { /* Controls row: tighter gap */ header > div:last-child { gap: 0.5rem; } /* Buttons in controls row: compact */ #resetBtn, #labPanelToggle { padding: 0.35rem 0.65rem; font-size: 0.7rem; } /* Mode toggle buttons */ #modeToggle button { padding: 0.35rem 0.85rem; font-size: 0.7rem; } /* Empty state */ #emptyState h1 { font-size: 1.75rem !important; line-height: 1.2; } #emptyState p.text-base { font-size: 0.8rem; } #emptyState p.text-sm { font-size: 0.72rem; } #welcomeInjectionCode { font-size: 9.5px; padding: 0.375rem 0.625rem; } /* Attack label */ #attackLabel { font-size: 7.5px; white-space: normal; text-align: center; max-width: 5rem; line-height: 1.25; } /* Composer */ #composerRow { gap: 0.5rem; } #composerArea { padding: 0.5rem 0.625rem 0.625rem; } #composerBox { padding: 0.5rem 0.75rem; } /* Chips */ .sugg-chip { font-size: 0.68rem; padding: 0.3rem 0.7rem; } /* Panel wider */ .lab-panel.panel-open { width: 92vw !important; max-width: 92vw; } /* Inline injection bar: stack vertically */ #injGuideBar .flex.items-start { flex-direction: column; } #injGuideBar #copyInlineInjection { align-self: flex-end; } #inlineInjectionCode { font-size: 9px; } /* Footer disclaimer */ #composerArea .text-center { font-size: 8.5px; } } /* ── Tiny phones ≤375px (iPhone SE / 6/7/8) ────────── */ @media (max-width: 375px) { header { padding: 0.4rem 0.5rem; } /* Controls row: icon-only for Lab Inputs */ #labPanelToggle span { display: none; } #labPanelToggle { padding: 0.3rem 0.45rem; } /* Slightly smaller controls gap */ header > div:last-child { gap: 0.35rem; } /* Mode toggle */ #modeToggle button { padding: 0.3rem 0.7rem; font-size: 0.68rem; } /* Empty state */ #emptyState { gap: 0.875rem; } #emptyState h1 { font-size: 1.5rem !important; } #emptyState .w-14 { width: 3rem; height: 3rem; border-radius: 0.875rem; } /* Composer */ #composerRow { gap: 0.35rem; } #composerArea { padding: 0.4rem 0.5rem 0.5rem; } /* Attack */ #attackBtn { padding: 0.45rem 0.6rem; font-size: 0.68rem; } #attackLabel { font-size: 7px; max-width: 4.5rem; } /* Chips arrows */ #chipsScrollLeft, #chipsScrollRight { width: 2rem !important; height: 2rem !important; min-width: 2rem; min-height: 2rem; } /* Panel nearly full-width */ .lab-panel.panel-open { width: 96vw !important; max-width: 96vw; } /* Bubbles */ .bubble-user { max-width: 92%; } .bubble-assistant { max-width: 97%; } } /* ── Touch: ensure minimum 44px tap targets everywhere ── */ @media (hover: none) and (pointer: coarse) { .sugg-chip { min-height: 2.25rem; padding-top: 0.45rem; padding-bottom: 0.45rem; } .ticker-item { min-height: 2rem; padding-top: 0.4rem; padding-bottom: 0.4rem; } .mode-btn { min-height: 2rem; } #sendBtn { width: 2.5rem; height: 2.5rem; } #attackBtn { min-height: 2.25rem; } #resetBtn, #labPanelToggle, #themeToggle { min-height: 2.25rem; min-width: 2.25rem; } .help-btn { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; } .lab-panel-tab { min-height: 6rem; } /* extra tall touch area for the tab arrow */ }