*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:#111b21}:root{--wa-header: #075e54;--wa-panel-header: #f0f2f5;--wa-bg-chat: #e5ddd5;--wa-bubble-out: #dcf8c6;--wa-bubble-in: #ffffff;--wa-green-accent: #25d366;--wa-text-grey: #667781;--wa-tick-blue: #34b7f1;--wa-sidebar-bg: #ffffff;--wa-border: #e9edef}.app{display:flex;width:100vw;height:100vh;overflow:hidden}.sidebar{width:30%;min-width:300px;max-width:420px;background:var(--wa-sidebar-bg);display:flex;flex-direction:column;border-right:1px solid var(--wa-border)}.sidebar-header{height:59px;background:var(--wa-panel-header);display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0}.sidebar-icons{display:flex;gap:20px;color:#54656f}.sidebar-search{display:flex;align-items:center;gap:12px;background:var(--wa-panel-header);margin:8px 12px;padding:8px 12px;border-radius:8px;color:#54656f}.sidebar-search input{border:none;background:transparent;outline:none;width:100%;font-size:14px;color:#111b21}.chat-list{overflow-y:auto;flex:1}.chat-list-item{display:flex;align-items:center;gap:15px;padding:12px 16px;cursor:pointer;border-bottom:1px solid #f2f2f2}.chat-list-item--active{background:var(--wa-panel-header)}.chat-list-item__body{flex:1;min-width:0}.chat-list-item__row{display:flex;justify-content:space-between;align-items:center}.chat-list-item__name{font-size:16px;color:#111b21;font-weight:500}.chat-list-item__time{font-size:12px;color:var(--wa-text-grey)}.chat-list-item__preview{font-size:13px;color:var(--wa-text-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:220px}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar--me{background:#8696a0}.avatar--medicard{background:linear-gradient(135deg,#0fb59a,#075e54)}.avatar--sm{width:36px;height:36px}.chat-panel{flex:1;display:flex;flex-direction:column;min-width:0}.chat-header{height:59px;background:var(--wa-panel-header);display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;border-left:1px solid var(--wa-border)}.chat-header__left{display:flex;align-items:center;gap:12px}.chat-header__back{display:none;color:#54656f}.chat-header__name{font-size:16px;color:#111b21;font-weight:500;display:flex;align-items:center;gap:4px}.verified{color:#34b7f1}.chat-header__status{font-size:13px;color:var(--wa-text-grey)}.chat-header__icons{display:flex;gap:22px;color:#54656f}.chat-window{flex:1;overflow:hidden;position:relative;background-color:var(--wa-bg-chat);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d5cbc0' stroke-width='1.4'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Cpath d='M55 12 q12 12 0 24 q-12 -12 0 -24'/%3E%3Cpath d='M95 70 l11 11 m-11 0 l11 -11'/%3E%3Ccircle cx='85' cy='34' r='3.5'/%3E%3Cpath d='M12 80 q17 -6 23 11'/%3E%3Cpath d='M70 95 q10 8 22 2'/%3E%3Ccircle cx='45' cy='95' r='4'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat}.chat-window__scroll{height:100%;overflow-y:auto;padding:20px 6% 12px;display:flex;flex-direction:column}.date-separator{align-self:center;background:#fffc;color:#54656f;font-size:12.5px;padding:5px 12px;border-radius:8px;margin-bottom:10px;box-shadow:0 1px 1px #00000014}.encryption-notice{align-self:center;background:#fff3cb;color:#4b4318;font-size:12.5px;padding:8px 14px;border-radius:8px;margin-bottom:14px;max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.bubble-row{display:flex;margin-bottom:4px}.bubble-row--me{justify-content:flex-end}.bubble-row--them{justify-content:flex-start}.bubble{max-width:65%;padding:6px 9px 8px;border-radius:8px;position:relative;font-size:14.2px;line-height:19px;box-shadow:0 1px .5px #00000021;white-space:pre-wrap;word-wrap:break-word}.bubble--me{background:var(--wa-bubble-out);border-top-right-radius:0}.bubble--them{background:var(--wa-bubble-in);border-top-left-radius:0}.bubble__text{display:block;margin-right:8px}.bubble__text b{font-weight:700}.bubble__meta{float:right;display:flex;align-items:center;gap:3px;margin-top:2px;margin-left:8px;transform:translateY(4px)}.bubble__time{font-size:11px;color:#667781;white-space:nowrap}.tick{color:#8696a0}.tick--read{color:var(--wa-tick-blue)}.bubble--typing{display:flex;align-items:center;gap:4px;padding:12px 14px}.typing-dot{width:7px;height:7px;border-radius:50%;background:#9aa5ab;animation:typing-bounce 1.1s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}.message-input{height:62px;background:var(--wa-panel-header);display:flex;align-items:center;gap:14px;padding:0 16px;flex-shrink:0;border-left:1px solid var(--wa-border)}.message-input__icon{color:#54656f;flex-shrink:0;cursor:pointer}.message-input__field{flex:1;border:none;outline:none;border-radius:8px;padding:9px 12px;font-size:15px;background:#fff}.message-input__send{background:var(--wa-header);color:#fff;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.message-input__send:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 780px){.sidebar{display:none}.chat-header,.message-input{border-left:none}.chat-header__back{display:block}}