*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6f9;color:#17202a}.app{height:100vh;display:grid;grid-template-columns:320px 1fr 300px}.sidebar,.details{background:#fff;border-right:1px solid #e2e6ea}.details{border-left:1px solid #e2e6ea;border-right:0;padding:22px}.brand{padding:22px;font-size:21px;font-weight:700;border-bottom:1px solid #eee}.brand span{font-weight:400;color:#667}.search{padding:12px}.search input{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px}.conversation-list{overflow:auto;height:calc(100vh - 105px)}.conv{padding:15px;border-bottom:1px solid #eee;cursor:pointer}.conv:hover,.conv.active{background:#f0f6ff}.conv .name{font-weight:700}.conv .last{font-size:13px;color:#68737d;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv .meta{font-size:11px;color:#9aa2a9;margin-top:7px}.chat{display:grid;grid-template-rows:70px 1fr 75px;background:#f7f9fb}.chat header{background:#fff;border-bottom:1px solid #e2e6ea;padding:16px 22px}.chat header small{display:block;color:#87919b;margin-top:4px}.messages{padding:25px;overflow:auto;display:flex;flex-direction:column;gap:9px}.bubble{max-width:70%;padding:11px 14px;border-radius:14px;line-height:1.35;box-shadow:0 1px 2px #0001}.in{align-self:flex-start;background:#fff;border-top-left-radius:4px}.out{align-self:flex-end;background:#dff4ff;border-top-right-radius:4px}.time{font-size:10px;color:#88919a;margin-top:5px;text-align:right}.composer{background:#fff;border-top:1px solid #e2e6ea;padding:12px;display:flex;gap:10px}.composer textarea{flex:1;resize:none;border:1px solid #ddd;border-radius:10px;padding:11px}.composer button{width:100px;border:0;border-radius:10px;background:#1677ff;color:white;font-weight:700}.composer button:disabled{opacity:.5}.details h3{margin-top:0}.empty{margin:auto;color:#89939d}.detail-card{padding:14px;background:#f7f9fb;border-radius:12px;margin-bottom:12px}.order{padding:10px;border:1px solid #e5e7eb;border-radius:10px;margin-top:8px}