html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Inter, Segoe UI, sans-serif; color: #172b27; background: linear-gradient(#0b806f 0 126px, #e6ebe9 126px); }
* { box-sizing: border-box; }
button, input { font: inherit; }
.wa-shell { width: min(1450px, calc(100vw - 48px)); height: calc(100dvh - 48px); min-height: 0; max-height: calc(100dvh - 48px); background: #fff; display: grid; grid-template-columns: 340px minmax(420px, 1fr) 260px; grid-template-rows: minmax(0, 1fr); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px #123d3529; }
.conversation-panel, .details-panel { background: #fff; min-width: 0; min-height: 0; overflow: hidden; }
.conversation-panel { border-right: 1px solid #dfe7e4; display: flex; flex-direction: column; }
.panel-header, .chat-header { height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #f6f9f8; border-bottom: 1px solid #e4eae8; }
.panel-header small, .chat-header small { display: block; color: #71827e; margin-top: 3px; }
.panel-header { gap: 8px; padding: 10px 12px; }
.panel-identity { flex: 1 1 auto; min-width: 0; }
.panel-identity strong, .panel-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #087565; background: #d7f3eb; font-weight: 700; }
.brand-avatar { color: white; background: #0b806f; }
.bulk-send-link { margin-left:auto; padding:6px 8px; border-radius:7px; color:#fff; background:#0b806f; font-size:.72rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.bulk-send-link:hover { background:#096d5f; color:#fff; }
.panel-header form { margin:0; }
.logout-button { padding:6px 7px; border:1px solid #cbd8d4; border-radius:7px; color:#526762; background:#fff; font-size:.72rem; font-weight:700; cursor:pointer; }
.logout-button:hover { color:#fff; border-color:#0b806f; background:#0b806f; }
.search { margin: 10px 14px; padding: 9px 12px; color: #82908d; background: #f1f5f4; border-radius: 9px; display: flex; gap: 8px; }
.search input { width: 100%; background: none; border: 0; outline: 0; }
.conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.conversation-item { width: 100%; border: 0; border-left: 4px solid transparent; border-bottom: 1px solid #eef2f1; background: white; display: flex; gap: 12px; padding: 13px 16px 13px 12px; text-align: left; cursor: pointer; }
.conversation-item.conversation-open { border-left-color: #1a9b7d; }
.conversation-item.conversation-closed { border-left-color: #d3a15c; background: #fcfaf7; }
.conversation-item.conversation-closed .avatar { color: #76511f; background: #f7e8d2; }
.conversation-item:hover, .conversation-item.active { background: #edf7f4; }
.conversation-summary { overflow: hidden; flex: 1; }
.conversation-summary div { display: flex; align-items: center; gap: 7px; }
.conversation-title strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-state { flex: none; color: #087565; font-size: .68rem; font-weight: 600; }
.conversation-closed .conversation-state { color: #8a5d25; }
.conversation-state span { font-size: .7rem; }
.conversation-summary time { font-size: .76rem; color: #76908a; }
.conversation-title time { margin-left: auto; }
.conversation-summary p { margin: 5px 0 0; color: #6a7a77; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .88rem; }
.chat-panel { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; background: #efeae2; background-image: radial-gradient(#9ca9a133 1px, transparent 1px); background-size: 18px 18px; }
.chat-header { background: #f6f9f8; }
.chat-header > div:nth-child(2) { flex: 1; }
.status-pill { color: #087565; background: #d9f4ec; border-radius: 20px; padding: 5px 10px; font-size: .78rem; }
.status-pill.closed { color: #7a4d18; background: #f7e8d2; }
.messages { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 7%; display: flex; flex-direction: column; gap: 8px; }
.encryption-note { align-self: center; background: #fff4c7; color: #77682c; font-size: .74rem; padding: 7px 12px; border-radius: 7px; margin-bottom: 10px; }
.encryption-note.live-note { background: #d9f4ec; color: #087565; }
.message-day-group { display: contents; }
.message-date-separator { align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 7px 0; }
.message-date-separator span { padding: 6px 12px; border-radius: 8px; color: #596b67; background: #f7faf9e8; box-shadow: 0 1px 2px #40504b1f; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.bubble { position:relative; max-width: 68%; min-width: 100px; overflow-wrap: anywhere; padding: 9px 11px 5px; border-radius: 9px; box-shadow: 0 1px 2px #40504b26; line-height: 1.4; background: white; }
.message-text { white-space: pre-wrap; }
.unsupported-message { display:block; max-width:310px; color:#76511f; font-size:.85rem; line-height:1.35; }
.reply-action { position:absolute; top:4px; right:5px; width:25px; height:25px; border:0; border-radius:50%; color:#60736e; background:#ffffffd9; opacity:0; cursor:pointer; line-height:1; }.bubble:hover .reply-action, .reply-action:focus { opacity:1; }
.forwarded-label + .reply-action { margin-left:20px; }
.quoted-message { display:flex; flex-direction:column; min-width:180px; margin:0 22px 7px 0; padding:7px 9px; border-left:4px solid #0b806f; border-radius:5px; color:#536963; background:#edf3f180; }.quoted-message strong { color:#087565; font-size:.78rem; }.quoted-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.8rem; }
.bubble.incoming { align-self: flex-start; border-top-left-radius: 2px; }
.bubble.outgoing { align-self: flex-end; background: #d8fdd2; border-top-right-radius: 2px; }
.bubble.reaction { min-width:0; padding:7px 9px 4px; font-size:1.4rem; }
.bubble.reaction .quoted-message { min-width:140px; margin-right:0; font-size:.72rem; }
.bubble footer { font-size: .68rem; color: #7c8985; text-align: right; margin-top: 3px; }
.forwarded-label { display:flex; align-items:center; gap:4px; margin:0 0 5px; color:#71827e; font-size:.76rem; font-style:italic; }.forwarded-icon { font-size:1rem; line-height:1; transform:rotate(-8deg); }
.checks { color: #7c8985; margin-left: 3px; }.checks.read { color: #1688c9; }
.checks.failed { display:inline-grid; width:14px; height:14px; place-items:center; border-radius:50%; color:white; background:#d93025; font-size:10px; font-weight:800; font-style:normal; line-height:1; vertical-align:-2px; }
.media-card { display:block; padding: 9px; margin-bottom: 6px; border-radius: 6px; background: #ffffff88; color:#24423b; text-decoration:none; }.media-card small { display:block; color:#73817e; }
.chat-image, .chat-video { display:block; max-width:100%; max-height:360px; border-radius:7px; margin-bottom:6px; }.chat-audio { width:min(330px, 100%); margin:4px 0; }
.composer { flex: 0 0 auto; width: 100%; min-height: 66px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 16px; background: #f5f8f7; }
.service-window-note { padding: 9px 16px; color: #76511f; background: #fff2dc; border-top: 1px solid #ead8b8; font-size: .82rem; }
.compose-content { flex: 1 1 auto; width: 100%; min-width: 0; }
.message-editor { display: block; width: 100%; height: 44px; min-height: 44px; max-height: 150px; resize: none; overflow-y: auto; border: 1px solid #dfe6e4; border-radius: 22px; padding: 11px 16px; outline: 0; line-height: 1.35; font: inherit; background: white; }
.message-editor:focus { border-color: #9ecfc3; box-shadow: 0 0 0 3px #0b806f12; }
.composer button { border: 0; color: #687a76; background: none; font-size: 1.4rem; cursor: pointer; }.composer .send { color: white; background: #0b806f; width: 42px; height: 42px; border-radius: 50%; }
.file-input { display:none; }.attach-button { flex: 0 0 auto; color:#687a76; font-size:1.6rem; line-height:44px; cursor:pointer; }.attach-button.disabled { opacity:.45; pointer-events:none; }.selected-file { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 10px; color:#526762; font-size:.78rem; }.selected-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.selected-file button { font-size:1rem; }
.emoji-picker-wrap { position:relative; flex:0 0 auto; }.composer .emoji-toggle { width:36px; height:44px; padding:0; font-size:1.55rem; line-height:44px; }.emoji-picker { position:absolute; left:0; bottom:52px; z-index:20; display:grid; grid-template-columns:repeat(4, 42px); gap:4px; padding:8px; border:1px solid #dce6e3; border-radius:12px; background:white; box-shadow:0 8px 28px #183c3430; }.composer .emoji-picker button { width:42px; height:42px; padding:0; border-radius:8px; font-size:1.45rem; }.composer .emoji-picker button:hover, .composer .emoji-picker button:focus { background:#eaf5f2; }
.reply-composer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px; padding:7px 10px; border-left:4px solid #0b806f; border-radius:6px; background:#e8efed; }.reply-composer div { display:flex; flex-direction:column; min-width:0; }.reply-composer strong { color:#087565; font-size:.78rem; }.reply-composer span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#647670; font-size:.8rem; }.reply-composer button { flex:none; font-size:1.1rem; }
.composer button:disabled { opacity: .45; }
.send-error { padding: 9px 16px; color: #8a1f1f; background: #fde7e7; border-top: 1px solid #f3caca; font-size: .86rem; }
.details-panel { border-left: 1px solid #dfe7e4; padding: 32px 22px; text-align: center; overflow-y: auto; }
.profile-avatar { margin: 0 auto 12px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: white; background: #0b806f; }
.details-panel h3 { margin: 0; }.details-panel p, .details-panel small { color: #71827e; }.details-panel hr { border: 0; border-top: 1px solid #e7edeb; margin: 24px 0; }.details-panel label, .details-panel strong, .details-panel code { display: block; text-align: left; }.details-panel label { margin-top: 16px; color: #82908d; font-size: .76rem; }.details-panel code { overflow-wrap: anywhere; }
.template-sender { text-align: left; }
.template-sender label { margin: 0 0 7px; }
.template-sender select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd8d4; border-radius: 7px; background: #fff; color: #213d36; }
.template-sender button { width: 100%; margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 7px; background: #0b806f; color: #fff; font-weight: 700; cursor: pointer; }
.template-sender button:disabled { opacity: .55; cursor: default; }
.template-sender small { display: block; margin-top: 10px; line-height: 1.4; }
.template-sender small code, .template-sender small strong { display: inline; text-align: inherit; }
.empty-state { margin: auto; text-align: center; color: #61736e; }.empty-icon { margin: auto; font-size: 6rem; color: #0b806f; }
@media (max-width: 1050px) { .wa-shell { grid-template-columns: 300px 1fr; }.details-panel { display:none; } }
@media (max-width: 700px) { .app-frame { padding:0!important; }.wa-shell { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; grid-template-columns: 120px minmax(0, 1fr); }.conversation-summary { display:none; }.conversation-item { justify-content:center; }.panel-identity, .panel-header .bulk-send-link, .panel-header form, .search { display:none; }.reply-action { opacity:.72; } }