.mail-shell {
  grid-template-columns: 244px minmax(320px, var(--message-list-width, 460px)) 10px minmax(0, 1fr);
}

.message-list { border-right: 0; }

.list-resizer {
  position: relative;
  z-index: 2;
  cursor: col-resize;
  background: var(--line);
  touch-action: none;
  outline: 0;
}

.list-resizer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 30px;
  border-radius: 99px;
  background: #b8c9bb;
  content: '';
  transform: translate(-50%, -50%);
  transition: background .16s, height .16s;
}

.list-resizer:hover::after,
.list-resizer:focus-visible::after,
.list-resizer.dragging::after { height: 72px; background: var(--accent); }

.message-html {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  margin-top: 24px;
  background: #fff;
}

@media (max-width: 900px) {
  .mail-shell { grid-template-columns: 70px minmax(320px, var(--message-list-width, 420px)) 10px minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .list-resizer { display: none; }
  .message-html { min-height: calc(100svh - 220px); }
}