*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:Arial,sans-serif}*{box-sizing:border-box}html,body,#root{background:#eef2f7;height:100%;margin:0;font-family:Arial,sans-serif}.app{flex-direction:column;height:100%;display:flex}.topbar{background:#fff;border-bottom:1px solid #dbe1ea;justify-content:space-between;align-items:center;height:68px;padding:0 18px;display:flex}.logoBlock{align-items:center;gap:10px;display:flex}.logo{width:42px;height:42px}.searchTop{border:1px solid #dbe1ea;border-radius:8px;outline:none;width:360px;max-width:100%;padding:10px 14px}.layout{flex:1;min-height:0;display:flex}.sidebar{color:#fff;background:#162338;flex-direction:column;flex:0 0 380px;padding:14px;display:flex}.sidebar h2{margin:0 0 10px}.sim{color:#fff;cursor:pointer;background:#24344d;border:none;border-radius:8px;width:100%;margin-bottom:8px;padding:12px;transition:all .2s}.sim:hover{background:#30476a}.sim.active{background:#2563eb}.sim.offline{opacity:.45}.form{margin-top:20px}.form label{margin-bottom:12px;display:block}.form input,.form textarea{resize:vertical;border:none;border-radius:8px;width:100%;margin-top:6px;padding:10px}.form textarea{min-height:170px}.sendBtn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;width:100%;margin-top:12px;padding:13px;font-size:16px}.sendBtn:hover{background:#1d4ed8}.sendBtn:disabled{opacity:.5;cursor:not-allowed}.content{flex:1;padding:10px;overflow-y:auto}.message{background:#edf2f7;border-radius:8px;margin-bottom:6px;padding:8px 12px}.smsRow{align-items:center;gap:14px;display:flex}.phoneCol{width:150px;font-size:13px;font-weight:700}.textCol{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.metaCol{text-align:right;width:120px;font-size:11px}.status{font-weight:700}.status.sent{color:orange}.status.delivered{color:#16a34a}.status.pending{color:gray}.status.failed{color:red}.time{opacity:.6}@media (width<=1100px){.sidebar{flex-basis:320px}.phoneCol{width:120px}}@media (width<=768px){.topbar{flex-direction:column;align-items:stretch;gap:12px;height:auto;padding:12px}.searchTop{width:100%}.layout{flex-direction:column}.sidebar{flex:none;width:100%}.content{flex:1;width:100%}.smsRow{flex-direction:column;align-items:flex-start;gap:4px}.phoneCol,.metaCol,.textCol{text-align:left;width:100%}}
