/* Quo look-alike: light gray sidebar, emoji inbox tiles, purple accent, soft rounded cards. */
.quo { display: grid; grid-template-columns: 112px 150px minmax(0, 1fr); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px; color: #1f1f24; background: #fff; }
.quo.is-contacts { grid-template-columns: 112px minmax(0, 1fr); }
.quo-side { background: #f7f7f8; border-right: 1px solid #ececef; padding: 10px 6px; display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: auto; }
.quo-me { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; font-size: 11.5px; }
.quo-me b { line-height: 1.15; }
.quo-nav { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: none;
  color: #3b3b44; font-size: 12px; text-align: left; cursor: pointer; }
.quo-nav .ico { width: 14px; height: 14px; color: #55555f; }
.quo-nav.dim { cursor: default; }
.quo-nav.on, .quo-nav:hover:not(.dim) { background: #ececef; }
.quo-label { margin: 10px 6px 4px; color: #77777f; font-size: 11px; }
.quo-inbox { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px; border: 0; border-radius: 9px; background: none;
  text-align: left; cursor: pointer; }
.quo-inbox:hover { background: #efeff2; }
.quo-inbox.on { background: #e9e9ed; }
.quo-tile { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e6e6ea; display: grid; place-items: center; font-size: 13px; }
.quo-inbox-t { min-width: 0; flex: 1; }
.quo-inbox-t b { display: block; font-weight: 500; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-short { display: none; }
.quo-inbox-t small { display: block; color: #8a8a93; font-size: 10px; white-space: nowrap; }
.quo-badge { flex: none; font-style: normal; min-width: 16px; height: 16px; border-radius: 999px; background: #f2482b; color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; }

.quo-list, .quo-contacts { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #ececef; }
.quo-tabs { display: flex; align-items: center; gap: 10px; padding: 10px 10px 6px; font-size: 14px; }
.quo-tabs span { color: #9a9aa3; font-weight: 600; }
.quo-icons { margin-left: auto; display: flex; gap: 6px; color: #7C5CFC !important; }
.quo-count { margin-left: auto; font-size: 11px; font-weight: 500 !important; }
.quo-pills { display: flex; gap: 4px; padding: 0 8px 8px; border-bottom: 1px solid #ececef; overflow: hidden; }
.quo-pills span { padding: 2px 7px; border-radius: 999px; border: 1px solid #e3e3e8; color: #3b3b44; font-size: 10.5px; white-space: nowrap; }
.quo-pills span.on { background: #f1f1f4; }
.quo-items { flex: 1; min-height: 0; padding: 4px; }
.quo-item { display: flex; gap: 7px; width: 100%; align-items: flex-start; padding: 7px 6px; border: 0; border-radius: 10px; background: none;
  text-align: left; cursor: pointer; }
.quo-item:hover { background: #f6f6f8; }
.quo-item.on { background: #f1f1f4; }
.quo-item-t { flex: 1; min-width: 0; }
.quo-item-top { display: flex; gap: 4px; align-items: baseline; }
.quo-item-top b { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; }
.quo-item-top small { color: #8a8a93; font-size: 10px; white-space: nowrap; }
.quo-prev { display: block; color: #66666f; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quo-dot { flex: none; align-self: center; font-style: normal; min-width: 16px; height: 16px; border-radius: 999px; background: #2a9df4; color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.quo-av { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.quo-av.unknown { background: #a6b0c0; font-size: 12px; }

.quo-thread { display: flex; flex-direction: column; min-width: 0; }
.quo-thread.empty { display: grid; place-items: center; color: #8a8a93; }
.quo-thead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #ececef; margin: 2px; }
.quo-thead b { display: block; font-size: 13px; }
.quo-thead small { display: block; color: #8a8a93; font-size: 11px; }
.quo-msgs { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.quo-msg { display: flex; flex-direction: column; max-width: 88%; padding: 2px; }
.quo-msg.me { align-self: flex-end; align-items: flex-end; }
.quo-msg.them { align-self: flex-start; }
.quo-bubble { padding: 6px 10px; border-radius: 14px; line-height: 1.35; }
.me .quo-bubble { background: #7C5CFC; color: #fff; border-bottom-right-radius: 4px; }
.them .quo-bubble { background: #f1f1f4; border-bottom-left-radius: 4px; }
.quo-msg small { color: #9a9aa3; font-size: 10px; margin: 2px 4px 0; }
.quo-compose { margin: 6px 8px 8px; padding: 7px 10px; border: 1px solid #dcd3ff; border-radius: 10px; color: #9a9aa3; }

.quo-search { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; padding: 5px 8px; border-radius: 8px; background: #f4f4f6; color: #8a8a93; }
.quo-contact { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 9px; cursor: pointer; }
.quo-contact:hover, .quo-contact.on { background: #f4f4f6; }
.quo-contact span { color: #66666f; font-variant-numeric: tabular-nums; }

/* Narrow windows: the sidebar becomes a strip of inbox tiles across the top. */
@container (max-width: 470px) {
  .quo, .quo.is-contacts { grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .quo-side { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 4px; padding: 5px 6px; border-right: 0; border-bottom: 1px solid #ececef; overflow: hidden; }
  .quo-me, .quo-nav.dim, .quo-label, .quo-inbox-t small { display: none; }
  .quo-nav { width: auto; flex: none; padding: 4px 6px; }
  .quo-inbox { width: auto; flex: 1; min-width: 0; padding: 3px 5px; }
  .quo-inbox-t b { font-size: 11px; }
  .q-full { display: none; }
  .q-short { display: inline; }
  .quo-inbox:not(.on) { flex: none; }
  .quo-inbox:not(.on) .quo-inbox-t { display: none; }
  .quo-tabs { padding: 7px 8px 5px; font-size: 13px; }
  .quo-icons { display: none !important; }
  .quo-item-top small { display: none; }
  .quo-item { gap: 6px; padding: 7px 4px; }
  .quo-av { width: 24px; height: 24px; }
  .quo-pills span:nth-child(3) { display: none; }
  .quo-contacts { grid-column: 1 / -1; }
}