daisyui/components/chat.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.chat-image{grid-row:span 2/span 2;align-self:flex-end}.chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.chat-start{grid-template-columns:auto 1fr;place-items:start}.chat-start .chat-header,.chat-start .chat-footer{grid-column-start:2}.chat-start .chat-image{grid-column-start:1}.chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.chat-end{grid-template-columns:1fr auto;place-items:end}.chat-end .chat-header,.chat-end .chat-footer{grid-column-start:1}.chat-end .chat-image{grid-column-start:2}.chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.sm\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.sm\:chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.sm\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.sm\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.sm\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.sm\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.sm\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.sm\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.sm\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.sm\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.sm\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.sm\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.sm\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.sm\:chat-start{grid-template-columns:auto 1fr;place-items:start}.sm\:chat-start .chat-header,.sm\:chat-start .chat-footer{grid-column-start:2}.sm\:chat-start .chat-image{grid-column-start:1}.sm\:chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.sm\:chat-end{grid-template-columns:1fr auto;place-items:end}.sm\:chat-end .chat-header,.sm\:chat-end .chat-footer{grid-column-start:1}.sm\:chat-end .chat-image{grid-column-start:2}.sm\:chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.md\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.md\:chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.md\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.md\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.md\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.md\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.md\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.md\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.md\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.md\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.md\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.md\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.md\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.md\:chat-start{grid-template-columns:auto 1fr;place-items:start}.md\:chat-start .chat-header,.md\:chat-start .chat-footer{grid-column-start:2}.md\:chat-start .chat-image{grid-column-start:1}.md\:chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.md\:chat-end{grid-template-columns:1fr auto;place-items:end}.md\:chat-end .chat-header,.md\:chat-end .chat-footer{grid-column-start:1}.md\:chat-end .chat-image{grid-column-start:2}.md\:chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.lg\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.lg\:chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.lg\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.lg\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.lg\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.lg\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.lg\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.lg\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.lg\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.lg\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.lg\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.lg\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.lg\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.lg\:chat-start{grid-template-columns:auto 1fr;place-items:start}.lg\:chat-start .chat-header,.lg\:chat-start .chat-footer{grid-column-start:2}.lg\:chat-start .chat-image{grid-column-start:1}.lg\:chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.lg\:chat-end{grid-template-columns:1fr auto;place-items:end}.lg\:chat-end .chat-header,.lg\:chat-end .chat-footer{grid-column-start:1}.lg\:chat-end .chat-image{grid-column-start:2}.lg\:chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.xl\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.xl\:chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.xl\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.xl\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.xl\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.xl\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.xl\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.xl\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.xl\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.xl\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.xl\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.xl\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.xl\:chat-start{grid-template-columns:auto 1fr;place-items:start}.xl\:chat-start .chat-header,.xl\:chat-start .chat-footer{grid-column-start:2}.xl\:chat-start .chat-image{grid-column-start:1}.xl\:chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.xl\:chat-end{grid-template-columns:1fr auto;place-items:end}.xl\:chat-end .chat-header,.xl\:chat-end .chat-footer{grid-column-start:1}.xl\:chat-end .chat-image{grid-column-start:2}.xl\:chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.\32 xl\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.\32 xl\:chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:.8125rem}.\32 xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.\32 xl\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.\32 xl\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}}@layer daisyui.l1.l2{.\32 xl\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.\32 xl\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.\32 xl\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.\32 xl\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.\32 xl\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.\32 xl\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.\32 xl\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.\32 xl\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.\32 xl\:chat-start{grid-template-columns:auto 1fr;place-items:start}.\32 xl\:chat-start .chat-header,.\32 xl\:chat-start .chat-footer{grid-column-start:2}.\32 xl\:chat-start .chat-image{grid-column-start:1}.\32 xl\:chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}.\32 xl\:chat-end{grid-template-columns:1fr auto;place-items:end}.\32 xl\:chat-end .chat-header,.\32 xl\:chat-end .chat-footer{grid-column-start:1}.\32 xl\:chat-end .chat-image{grid-column-start:2}.\32 xl\:chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}}