.row-header .title{padding:16px 0 8px;font-size:2rem}.row-header .lead{font-size:1rem}.preview-section{background:#ccc}.phone-container{background-color:#f7f7f7;max-width:414px;margin:20px auto;height:80vh;overflow:hidden;display:flex;flex-direction:column}.status-bar{background-color:#f7f7f7;padding:5px 15px;display:flex;justify-content:space-between;font-size:16px;color:#000}.chat-header{background-color:#f7f7f7;text-align:center;position:relative;border-bottom:1px solid #e5e5e5}.chat-header #chatName{font-size:16px;color:#000}.chat-container{flex:1;overflow-y:auto;padding:15px;background-color:#f7f7f7}.message .delete-btn{position:absolute;top:-10px;right:50px;background:#00000080;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;display:none}.message.right .delete-btn{right:auto;left:50px}.avatar{width:40px;height:40px;border-radius:4px;overflow:hidden}.message.left .avatar{margin-right:20px}.message.right .avatar{margin-left:20px}.avatar img{width:100%;height:100%;object-fit:cover}.bubble{max-width:70%;padding:10px 15px;border-radius:4px;font-size:16px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;position:relative}.bubble:before{content:" ";--r: 2px;height:11px;aspect-ratio:cos(20deg);-webkit-mask:linear-gradient(-90deg,#0000 calc(3*var(--r)/2),#000 0),radial-gradient(var(--r) at calc(100% - 2*var(--r)) 50%,#000 98%,#0000 101%);clip-path:polygon(100% 50%,0 100%,0 0);background:#95ec69;position:absolute;right:-10px;top:15px}.message.left .bubble:before{-webkit-mask:linear-gradient(90deg,#0000 calc(3*var(--r)/2),#000 0),radial-gradient(var(--r) at calc(2*var(--r)) 50%,#000 98%,#0000 101%);clip-path:polygon(0 50%,100% 100%,100% 0);background:#fff;left:-10px;right:auto}.bottom-toolbar{display:flex;justify-content:space-between;flex-direction:column;align-items:center;background-color:#f7f7f7;border-top:1px solid #e5e5e5}.control-panel{padding:20px}.control-panel .card{background-color:#fff;border:1px solid #e5e5e5;color:#000;margin-right:20px}.control-panel .card-header{background-color:#f8f9fa;border-bottom:1px solid #e5e5e5}.control-panel .form-control{background-color:#fff;border:1px solid #ced4da;color:#000}.control-panel .form-control:focus{background-color:#fff;border-color:#80bdff;color:#000}body{background-color:#f7f7f7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#000}.phone-container{background-size:cover;background-position:center;min-height:80vh}.status-bar{background-color:#f7f7f7e6;padding:5px 15px;display:flex;justify-content:space-between;font-size:16px;color:#000}.battery-container{width:25px;height:15px;border:2px solid #b3b3b3;border-radius:3px;padding:1px;position:relative;display:inline-block}.battery-container:after{content:"";position:absolute;width:3px;height:6px;background:#000;right:-5px;top:50%;transform:translateY(-50%);border-radius:0 2px 2px 0}.battery-level{height:100%;background-color:#000;transition:width .3s ease}.battery-container1{width:25px;height:15px;border:2px solid #b3b3b3;border-radius:3px;padding:1px;position:relative;display:inline-block}.battery-container1:after{content:"";position:absolute;width:3px;height:6px;background:#000;right:-5px;top:50%;transform:translateY(-50%);border-radius:0 2px 2px 0}.battery-level1{height:100%;background-color:#000;transition:width .3s ease}.hide{display:none}.android .status-bar{background-color:#2196f3;color:#fff}.android .battery-container{border-color:#fff}.android .battery-container:after{background:#fff}.android .battery-level{background-color:#fff}.android .chat-header{background-color:#2196f3;color:#fff}.android #chatName,.android .back,.android .more{color:#fff}.android .message.right .bubble{background-color:#2196f3;color:#fff}.chat-header{background-color:#f7f7f7e6;padding:15px;text-align:center;position:relative;border-bottom:1px solid #e5e5e5}.chat-header #chatName{font-size:18px;color:#000}.chat-header .back,.chat-header .more{color:#000}.chat-container{flex:1;overflow-y:auto;padding:15px;background-color:transparent}.message{display:flex;align-items:flex-start;margin-bottom:20px;position:relative}.message.right{flex-direction:row-reverse}.message .delete-btn{position:absolute;top:0;left:0;background:#00000080;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;display:none}.message.right .delete-btn{left:auto;right:0}.message:hover .delete-btn{display:block}.bubble{max-width:70%;padding:10px 15px;border-radius:4px;font-size:16px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}.message.left .bubble{background-color:#fff;color:#000}.message.right .bubble{background-color:#95ec69;color:#000}.timestamp{text-align:center;margin:15px 0;color:#999;font-size:14px;cursor:pointer}.timestamp:hover{color:#666}