.chat-components-demo{padding:24px;max-width:95%;margin:0 auto;overflow-y:auto;height:calc(100vh - 48px)}.chat-components-demo .demo-header{text-align:center;margin-bottom:32px}.chat-components-demo .demo-header h1{font-size:28px;color:var(--btn-primary);margin-bottom:8px}.chat-components-demo .demo-header p{font-size:16px;color:var(--tag-default-text);margin-bottom:24px}.chat-components-demo .components-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:32px;min-height:fit-content}.chat-components-demo .component-card{border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:all .3s ease;min-height:200px}.chat-components-demo .component-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.chat-components-demo .component-card .ant-card-head{background-color:var(--tag-default-bg);border-bottom:2px solid var(--border-default)}.chat-components-demo .component-card .ant-card-head .ant-card-head-title{font-weight:600;font-size:16px}.chat-components-demo .component-card .component-preview{min-height:120px;padding:16px;background-color:#fafafa;border-radius:4px;margin-bottom:16px;border:1px dashed #d9d9d9;overflow:hidden}.chat-components-demo .component-card .component-info p{margin:8px 0;font-size:14px;line-height:1.5}.chat-components-demo .component-card .component-info p strong{color:var(--color-success)}.chat-components-demo .component-card .component-info p code{background-color:#f0f0f0;padding:2px 4px;border-radius:3px;font-family:Courier New,monospace}.chat-components-demo .demo-footer{text-align:center;padding:24px;background-color:#f0f2f5;border-radius:8px;margin-bottom:24px}.chat-components-demo .demo-footer p{margin:8px 0;font-size:14px;color:var(--tag-default-text)}.chat-components-demo .demo-footer p strong{color:var(--btn-primary)}.chat-components-demo .demo-footer p code{background-color:#fff;padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;color:#c41d7f}.chat-components-demo .icon-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:32px}.chat-components-demo .icon-gallery .icon-gallery-item{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:8px;border:1px solid #e8e8e8;transition:all .2s ease}.chat-components-demo .icon-gallery .icon-gallery-item:hover{border-color:var(--btn-primary);box-shadow:0 2px 8px #276ff526}.chat-components-demo .icon-gallery .icon-gallery-item .icon-gallery-preview{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px}.chat-components-demo .icon-gallery .icon-gallery-item .icon-gallery-info{display:flex;flex-direction:column;gap:2px;min-width:0}.chat-components-demo .icon-gallery .icon-gallery-item .icon-gallery-info code{font-size:13px;font-family:SF Mono,Monaco,Andale Mono,monospace;color:#c41d7f;font-weight:500}.chat-components-demo .icon-gallery .icon-gallery-item .icon-gallery-info span{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.chat-components-demo{padding:16px;height:calc(100vh - 32px)}.chat-components-demo .components-grid{grid-template-columns:1fr;gap:16px}.chat-components-demo .demo-header h1{font-size:24px}.chat-components-demo .component-card{min-height:180px}.chat-components-demo .component-card .component-preview{min-height:100px;padding:12px}}