/* ───────────────────────────────────────────────────────────────────────── * Empty-state "What can I help you with?" overlay. * Lives outside the Gradio container (appended to ) so we don't need * !important to win against framework styles. * ───────────────────────────────────────────────────────────────────────── */ #examples-overlay { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: var(--hy-bg); pointer-events: none; overflow-y: auto; } .examples-wrapper { display: flex; flex-direction: column; align-items: center; margin: auto; pointer-events: auto; padding: 40px 20px; } .examples-heading { font-size: 22px; font-weight: 600; color: var(--hy-text); margin: 0 0 28px; letter-spacing: -0.01em; } /* 1-2-1 "diamond" layout for exactly 4 example cards. * row 1: card #1 (centered, spans both columns) * row 2: card #2 (right-aligned in left col) | card #3 (left-aligned in right col) * row 3: card #4 (centered, spans both columns) * Using CSS grid with explicit nth-child placements rather than flex- * wrap, because flex-wrap on equal-width children can only produce * 1xN, 2x2, or 4x1 — never 1-2-1. */ .examples-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 480px); column-gap: 20px; row-gap: 14px; justify-content: center; width: min(1020px, 100%); } .example-btn:nth-child(1), .example-btn:nth-child(4) { grid-column: 1 / span 2; justify-self: center; } .example-btn:nth-child(2) { grid-column: 1; justify-self: end; } .example-btn:nth-child(3) { grid-column: 2; justify-self: start; } .example-btn { /* Outer card: flex container that vertically + horizontally centers * its single inner ``.example-btn-text`` child. We CANNOT also be * a ``-webkit-box`` here (that's the inner element's job, see * below) — line-clamp and flex centering need separate elements. */ display: flex !important; align-items: center; justify-content: center; overflow: hidden !important; box-sizing: border-box !important; width: 460px; /* 14px font * 1.5 line-height = 21px per line. 2 lines = 42px. * + 14px*2 padding-y = 28px. + 1px*2 border = 2px. Total 72px. */ height: 72px; background: var(--hy-bg); border: 1px solid var(--hy-border); border-radius: 18px; padding: 14px 20px; font-size: 14px; line-height: 1.5; color: var(--hy-text); cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; text-align: center; } /* Inner text element: owns the 2-line clamp + auto ellipsis. The * ``!important`` triplet defends against framework-level resets that * would otherwise silently change ``display`` and let a 3rd line * bleed into view. */ .example-btn-text { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word; width: 100%; text-align: center; } /* On narrow screens the diamond would overflow horizontally — collapse * to a single centered column instead. */ @media (max-width: 1020px) { .examples-grid { grid-template-columns: minmax(0, 1fr); } .example-btn:nth-child(1), .example-btn:nth-child(2), .example-btn:nth-child(3), .example-btn:nth-child(4) { grid-column: 1; justify-self: center; } .example-btn { width: 100%; max-width: 520px; } } .example-btn:hover { background: var(--hy-bg-muted); border-color: var(--hy-border-strong); color: var(--hy-text-strong); box-shadow: var(--hy-shadow); transform: translateY(-1px); } .dark .example-btn:hover { border-color: rgba(107, 159, 255, 0.35); box-shadow: 0 0 8px rgba(107, 159, 255, 0.08); }