Decoder2704/python-chatbot-jay
0
1.ui-pill {2 display: inline-flex;3 align-items: center;4 justify-content: center;5 margin: 0;6 font: inherit;7 font-weight: var(--font-weight-semibold);8 white-space: nowrap;9 border: none;10 background: transparent;11}12 13.ui-pill--indigo {14 padding: 0.4rem 0.85rem;15 font-size: 0.8125rem;16 font-weight: var(--font-weight-semibold);17 color: #4338ca;18 background: rgba(99, 102, 241, 0.08);19 border: 1px solid rgba(99, 102, 241, 0.2);20 border-radius: var(--radius-pill);21 transition:22 background var(--duration-normal) var(--ease-standard),23 border-color var(--duration-normal) var(--ease-standard),24 transform var(--duration-fast) var(--ease-standard);25}26 27.ui-pill--indigo:hover {28 background: rgba(99, 102, 241, 0.12);29 border-color: rgba(99, 102, 241, 0.3);30}31 32.ui-pill--badge {33 padding: 0.35rem 0.85rem;34 margin-bottom: var(--space-5);35 font-size: var(--font-size-sm);36 font-weight: var(--font-weight-semibold);37 letter-spacing: var(--letter-wide);38 text-transform: uppercase;39 color: #4f46e5;40 background: rgba(99, 102, 241, 0.1);41 border: 1px solid rgba(99, 102, 241, 0.2);42 border-radius: var(--radius-pill);43}44 45.ui-pill--suggestion {46 padding: 0.35rem 0.75rem;47 font-size: 0.8125rem;48 font-weight: 500;49 font-family: inherit;50 color: #4338ca;51 background: rgba(99, 102, 241, 0.08);52 border: 1px solid rgba(99, 102, 241, 0.2);53 border-radius: var(--radius-pill);54 cursor: pointer;55 transition:56 background var(--duration-normal) var(--ease-standard),57 border-color var(--duration-normal) var(--ease-standard),58 transform var(--duration-fast) var(--ease-standard),59 box-shadow var(--duration-normal) var(--ease-standard);60}61 62.ui-pill--suggestion:hover:not(:disabled) {63 background: rgba(99, 102, 241, 0.16);64 border-color: rgba(99, 102, 241, 0.32);65 transform: translateY(-1px);66 box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);67}68 69.ui-pill--suggestion:active:not(:disabled) {70 transform: translateY(0);71}72 73.ui-pill--suggestion:focus-visible {74 outline: none;75 box-shadow: var(--focus-ring);76}77 78.ui-pill--suggestion:disabled {79 opacity: 0.5;80 cursor: not-allowed;81}82 83.ui-pill--topic {84 width: 100%;85 box-sizing: border-box;86 text-align: left;87 padding: 0.5rem 0.75rem;88 font-size: 0.8125rem;89 font-weight: 500;90 font-family: inherit;91 color: #334155;92 background: #f8fafc;93 border: 1px solid rgba(99, 102, 241, 0.15);94 border-radius: var(--radius-pill);95 cursor: pointer;96 transition:97 background var(--duration-normal) var(--ease-standard),98 border-color var(--duration-normal) var(--ease-standard),99 transform var(--duration-fast) var(--ease-standard),100 box-shadow var(--duration-normal) var(--ease-standard);101}102 103.ui-pill--topic:hover:not(:disabled) {104 background: rgba(99, 102, 241, 0.1);105 border-color: rgba(99, 102, 241, 0.38);106 transform: translateY(-1px);107 box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);108}109 110.ui-pill--topic:active:not(:disabled) {111 transform: translateY(0);112}113 114.ui-pill--topic:focus-visible {115 outline: none;116 box-shadow: var(--focus-ring);117}118 119.ui-pill--topic:disabled {120 opacity: 0.5;121 cursor: not-allowed;122}123 124/* Same look as topic chips, non-interactive (sidebar labels, etc.) */125.ui-pill--topic-label {126 width: 100%;127 box-sizing: border-box;128 text-align: left;129 padding: 0.5rem 0.75rem;130 font-size: 0.8125rem;131 font-weight: 500;132 color: #334155;133 background: #f8fafc;134 border: 1px solid rgba(99, 102, 241, 0.15);135 border-radius: var(--radius-pill);136 cursor: default;137 user-select: none;138}139 140.ui-pill--marketing {141 display: inline-flex;142 padding: 0.35rem 0.75rem;143 margin-bottom: 1.25rem;144 font-size: 0.65rem;145 font-weight: 800;146 letter-spacing: 0.12em;147 text-transform: uppercase;148 color: #4f46e5;149 background: rgba(99, 102, 241, 0.12);150 border: 1px solid rgba(99, 102, 241, 0.25);151 border-radius: var(--radius-pill);152}153