/* Keep top and bottom work areas on the same column rhythm. */
.top-workspace { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .78fr); }

/* On wide workspaces, messaging becomes an overlay drawer rather than consuming a full column. */
@media (min-width: 1500px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .right-column { display: block; min-height: 0; }
  .right-column > .messages {
    position: fixed;
    z-index: 40;
    right: 0;
    top: 184px;
    width: 54px;
    height: 168px;
    min-height: 0;
    overflow: hidden;
    border-radius: 13px 0 0 13px;
    box-shadow: 0 10px 28px #102a4b2c;
    transition: width .2s ease, height .2s ease, box-shadow .2s ease;
  }
  .right-column > .messages::before {
    content: "◔";
    position: absolute;
    top: 15px;
    left: 0;
    width: 54px;
    color: #155ecb;
    font-size: 25px;
    text-align: center;
    font-weight: 700;
  }
  .right-column > .messages::after {
    content: "AK\A MD";
    white-space: pre;
    position: absolute;
    top: 61px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 74px;
    padding-top: 4px;
    border-radius: 15px;
    background: #e7f2e2;
    color: #30733a;
    font-size: 10px;
    font-weight: 800;
    line-height: 32px;
  }
  .right-column > .messages .card-head,
  .right-column > .messages .contact-tabs,
  .right-column > .messages .conversation,
  .right-column > .messages .attachment,
  .right-column > .messages .composer { opacity: 0; visibility: hidden; transition: opacity .12s ease; }
  .right-column > .messages:hover {
    width: 370px;
    height: min(560px, calc(100vh - 208px));
    border-radius: 13px;
    box-shadow: 0 16px 42px #102a4b36;
  }
  .right-column > .messages:hover::before,
  .right-column > .messages:hover::after { display: none; }
  .right-column > .messages:hover .card-head,
  .right-column > .messages:hover .contact-tabs,
  .right-column > .messages:hover .conversation,
  .right-column > .messages:hover .attachment,
  .right-column > .messages:hover .composer { opacity: 1; visibility: visible; }
}

@media (max-width: 1499px) {
  .top-workspace { grid-template-columns: minmax(0, 1.7fr) minmax(270px, .78fr); }
}