whisper-design/dist/whisper-design.css

A React component library for building AI chat room UIs.

.avatar{display:inline-flex;align-items:center;justify-content:center;object-fit:cover;flex-shrink:0;font-size:16px;color:#f5f8ff}.avatar--small{width:36px;height:36px;font-size:14px}.avatar--medium{width:40px;height:40px;font-size:16px}.avatar--large{width:44px;height:44px;font-size:20px}.avatar--circle{border-radius:50%}.avatar--square{border-radius:6px}.avatar--primary-gradient{background:linear-gradient(135deg,#4d8eff,#6a11cb)}.avatar--secondary-gradient{background:linear-gradient(135deg,#00f0ff,#00c2ff)}.button{padding:8px 16px;border:none;border-radius:10px;cursor:pointer;font-size:16px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.button:disabled{background-color:#ccc;cursor:not-allowed}.button--primary{background:linear-gradient(135deg,#4d8eff,#6a11cb);color:#f5f8ff}.button--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 12px #4d8eff66}.button--secondary{background-color:#00f0ff;color:#f5f8ff}.button--secondary:hover:not(:disabled){background-color:#00c0cc}.button--circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#4d8eff1a;color:#f5f8ff;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.button--circle:hover{background:#4d8eff;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-bubble{padding:16px 20px;border-radius:16px;position:relative;line-height:1.6;animation:fadeIn .3s ease-out;word-wrap:break-word;white-space:pre-line}.message-bubble.user{background:#4d8eff;border-top-right-radius:6px;box-shadow:0 2px 8px #4d8eff26;color:#f5f8ff}.message-bubble.user:after{content:"";position:absolute;bottom:-8px;right:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #4d8eff}.message-bubble.ai{background:#2a334d;border:1px solid rgba(77,142,255,.15);border-top-left-radius:6px;color:#f5f8ff}.message-bubble.ai:before{content:"";position:absolute;bottom:-8px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #2a334d}.message-bubble--image{padding:0;border-radius:10px;overflow:hidden}.message-bubble--image img{max-width:100%;height:auto;display:block}.message-bubble--code{background-color:#0000004d;border-radius:6px;padding:12px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:12px;overflow-x:auto}.message-bubble--code pre{margin:0}.message-bubble--code code{display:block}.message-bubble .file-attachments{margin-top:12px;display:flex;flex-direction:column;gap:8px}.message-bubble .file-attachments .file-attachment{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#0003;border-radius:6px;border:1px solid rgba(255,255,255,.1);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.message-bubble .file-attachments .file-attachment:hover{background:#0000004d;transform:translateY(-1px)}.message-bubble .file-attachments .file-attachment .file-icon{width:32px;height:32px;border-radius:6px;background:#4d8eff26;display:flex;align-items:center;justify-content:center;color:#4d8eff;font-size:14px}.message-bubble .file-attachments .file-attachment .file-info{flex:1;overflow:hidden}.message-bubble .file-attachments .file-attachment .file-info .file-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.message-bubble .file-attachments .file-attachment .file-info .file-size{font-size:11px;color:#fff9;margin-top:2px}.chat-input-area{padding:24px;border-top:1px solid rgba(77,142,255,.1);background:#0a112680}.chat-input-area .input-container{background:#141e3cb3;border:1px solid rgba(77,142,255,.2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.chat-input-area .input-container:focus-within{border-color:#4d8eff;box-shadow:0 0 12px #4d8eff66}.chat-input-area .input-toolbar{display:flex;align-items:center;gap:8px}.chat-input-area .input-toolbar .tool-button{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f5f8ff;background:transparent;border:none;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.chat-input-area .input-toolbar .tool-button:hover{background:#4d8eff1a;color:#00f0ff}.chat-input-area .message-input{flex:1;background:transparent;border:none;color:#f5f8ff;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;resize:none;min-height:80px;max-height:200px;padding:0 8px}.chat-input-area .message-input:focus{outline:none}.chat-input-area .input-actions{display:flex;justify-content:space-between;align-items:center}.chat-input-area .input-hints{font-size:12px;color:#f5f8ff99}.chat-input-area .send-button{padding:10px 24px;background:linear-gradient(135deg,#4d8eff,#6a11cb);color:#f5f8ff;border:none;border-radius:10px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.chat-input-area .send-button:hover{transform:translateY(-2px);box-shadow:0 0 12px #4d8eff66}.chat-input-area .file-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.chat-input-area .file-list .file-card{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#4d8eff1a;border:1px solid rgba(77,142,255,.2);border-radius:10px;color:#f5f8ff;font-size:12px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.chat-input-area .file-list .file-card:hover{background:#4d8eff26}.chat-input-area .file-list .file-card .file-icon{color:#4d8eff;font-size:16px}.chat-input-area .file-list .file-card .file-info{display:flex;flex-direction:column;gap:2px}.chat-input-area .file-list .file-card .file-info .file-name{font-weight:500;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-input-area .file-list .file-card .file-info .file-size{color:#f5f8ff99;font-size:11px}.chat-input-area .file-list .file-card .file-remove-button{background:none;border:none;color:#f5f8ff99;cursor:pointer;font-size:18px;line-height:1;padding:0;margin-left:4px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.chat-input-area .file-list .file-card .file-remove-button:hover{color:#ff4d7a}.chat-input-area .file-list .file-card .file-remove-button:disabled{opacity:.5;cursor:not-allowed}.file-upload-area{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px dashed rgba(77,142,255,.2);border-radius:10px;background-color:#0a112699;margin-bottom:16px;color:#f5f8ff}.file-upload-area .file-upload-button{border:none;border-radius:10px;cursor:pointer;font-size:16px;transition:all .2s cubic-bezier(.34,1.56,.64,1);background-color:#4d8eff;color:#f5f8ff;align-self:flex-start;padding:4px 8px;font-size:12px}.file-upload-area .file-upload-button:disabled{background-color:#ccc;cursor:not-allowed}.file-upload-area .file-upload-button:hover{background-color:#6aa1ff}.file-upload-area .file-list{display:flex;flex-wrap:wrap;gap:4px}.file-upload-area .file-card{display:flex;align-items:center;padding:4px;border:1px solid rgba(77,142,255,.2);border-radius:10px;background-color:#0a1126cc;font-size:12px;color:#f5f8ff}.file-upload-area .file-card .file-icon{margin-right:4px;font-size:18px;color:#00f0ff}.file-upload-area .file-card .file-preview{width:40px;height:40px;object-fit:cover;border-radius:6px;margin-right:4px}.file-upload-area .file-card .file-info{display:flex;flex-direction:column;flex-grow:1;margin-right:4px}.file-upload-area .file-card .file-info .file-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.file-upload-area .file-card .file-info .file-size{color:#f5f8ff99;font-size:10px}.file-upload-area .file-card .file-remove-button{background:none;border:none;color:#f5f8ff99;cursor:pointer;font-size:18px;padding:0 4px}.file-upload-area .file-card .file-remove-button:hover{color:#ff4d7a}.file-attachment{display:flex;align-items:center;gap:12px;padding:12px;background:#0a112699;border:1px solid rgba(77,142,255,.2);border-radius:10px;margin-top:12px;max-width:300px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);color:#f5f8ff}.file-attachment:hover{background:#4d8eff1a;transform:translateY(-2px);box-shadow:0 4px 12px #00f0ff33}.file-attachment .file-icon{width:40px;height:40px;border-radius:6px;background:#4d8eff26;display:flex;align-items:center;justify-content:center;color:#4d8eff;font-size:18px}.file-attachment .file-info{flex:1;overflow:hidden}.file-attachment .file-info .file-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-attachment .file-info .file-size{font-size:12px;color:#f5f8ff99}.file-attachment .file-download{color:#4d8eff;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.file-attachment .file-download:hover{color:#00f0ff}.message-row{display:flex;gap:16px;align-items:flex-end}.message-row.user{flex-direction:row-reverse}.message-row .message-content{max-width:75%;display:flex;flex-direction:column;gap:8px}.message-row .message-time{font-size:12px;color:#f5f8ff80}.message-row.user .message-time{text-align:right}.chat-messages{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:32px}.chat-messages .loading-more{text-align:center;padding:8px;color:#999}.conversation-item{padding:16px;border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;color:#f5f8ff}.conversation-item:hover{background:#4d8eff1a}.conversation-item.active{background:#4d8eff26;border-left:3px solid #4d8eff}.conversation-item .conversation-info{flex:1;overflow:hidden}.conversation-item .conversation-title{font-weight:500;margin-bottom:4px;display:flex;justify-content:space-between;font-size:16px}.conversation-item .conversation-time{font-size:12px;color:#f5f8ff80}.conversation-item .conversation-preview{font-size:12px;color:#f5f8ffb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item .conversation-badge{position:absolute;top:16px;right:16px;width:8px;height:8px;background:#00f0ff;border-radius:50%;box-shadow:0 0 8px #00f0ff}.chat-container{display:flex;flex-direction:column;background:#0f172acc;border-radius:16px;border:1px solid rgba(77,142,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #4d8eff33;overflow:hidden;height:100%}.chat-container .chat-header{padding:16px 24px;border-bottom:1px solid rgba(77,142,255,.1);display:flex;align-items:center;justify-content:center;color:#f5f8ff}.chat-container .chat-header .chat-title{font-size:18px;font-weight:600;text-align:center}.conversations-panel{background:#0f172acc;border-radius:16px;border:1px solid rgba(77,142,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 12px #4d8eff33;width:300px}.conversations-panel .panel-header{padding:16px;border-bottom:1px solid rgba(77,142,255,.1)}.conversations-panel .panel-header .panel-title{font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#f5f8ff}.conversations-panel .panel-header .panel-title .new-conversation-btn{width:32px;height:32px;background:#4d8eff26;color:#4d8eff;border:1px solid rgba(77,142,255,.3);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.conversations-panel .panel-header .panel-title .new-conversation-btn:hover{background:#4d8eff;color:#f5f8ff;transform:translateY(-1px);box-shadow:0 0 12px #4d8eff66}.conversations-panel .panel-header .search-container{position:relative;margin-top:16px}.conversations-panel .panel-header .search-container .search-input{width:100%;padding:12px 16px 12px 40px;background:#0a112699;border:1px solid rgba(77,142,255,.2);border-radius:10px;color:#f5f8ff;font-size:14px;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-sizing:border-box}.conversations-panel .panel-header .search-container .search-input:focus{outline:none;border-color:#4d8eff;box-shadow:0 0 12px #4d8eff66}.conversations-panel .panel-header .search-container .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#f5f8ff99}.conversations-panel .conversation-list{flex:1;overflow-y:auto;padding:16px}.conversations-panel .conversation-list .conversation-list__empty{text-align:center;color:#999;padding:16px}