.shell{
  height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr 400px;
  gap: 16px;
  padding: 16px;
  background: #f6f7fb;
}

.left,.center,.right{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
  overflow: hidden;
}

.left{display:flex;flex-direction:column;}
.leftTop{padding:14px;display:grid;gap:10px;border-bottom:1px solid #eef0f5;}
.leftList{padding:10px;overflow:auto;flex:1;}
.leftFooter{padding:12px;border-top:1px solid #eef0f5;display:grid;gap:8px;}

.center{display:flex;flex-direction:column;}
.centerHeader{
  padding:12px 14px;
  border-bottom:1px solid #eef0f5;
  display:flex;align-items:center;gap:10px;
}
.titleBlock{flex:1;min-width:0;}
.chatTitle{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chatStatus{font-size:12px;color:#6b7280;margin-top:2px;}

.messages{flex:1;overflow:auto;padding:14px;background:linear-gradient(#fff,#fbfcff);}
.composer{padding:12px;border-top:1px solid #eef0f5;display:flex;gap:10px;}

.right{padding:14px;overflow:auto;}
.card{border:1px solid #eef0f5;border-radius:16px;padding:14px;margin-bottom:12px;background:#fff;}
.cardTitle{font-weight:700;margin-bottom:10px;}

.input{
  width:100%;
  padding:12px 12px;
  border:1px solid #e6e8ef;
  border-radius:12px;
  outline:none;
}
.input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12);}

.btnPrimary{
  background:#2563eb;color:#fff;border:0;
  padding:10px 14px;border-radius:12px;
  font-weight:700;cursor:pointer;
}
.btnGhost{
  background:#f5f7ff;border:1px solid #e6e8ff;color:#1f2a44;
  padding:10px 12px;border-radius:12px;cursor:pointer;
}
.iconBtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid #eef0f5;background:#fff;cursor:pointer;
}

.muted{color:#6b7280;font-size:13px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width: 1100px){
  .shell{grid-template-columns: 280px 1fr;}
  .right{display:none;} /* open via drawer later */
}
@media (max-width: 850px){
  .shell{grid-template-columns: 1fr;}
  .left{display:none;} /* open via drawer later */
}