.ct-page {
  --u: min(1px, calc(100vw / 1443));

  
  --ct-fill: rgba(0, 0, 0, 0.536);
  --ct-grad: linear-gradient(255deg, #61b5e9 0%, #2d4aed 100%);
  --ct-panel: rgba(0, 0, 0, .64);

  --ct-plate-fr: linear-gradient(180deg, #6ced00, #098b00);
  --ct-plate-cs: linear-gradient(180deg, #5e2581, #ee00ff);
  --ct-plate-pm: linear-gradient(180deg, #ffcd00, #fb5c00);
  --ct-plate-gp: linear-gradient(180deg, #a50021, #f70057);
  --ct-plate-cm: linear-gradient(180deg, #fb0fdc, #fb3200);
  --ct-plate-cr: linear-gradient(180deg, #00d4ff, #1500ff);
  --ct-plate-ms: linear-gradient(180deg, #00ffd9, #ef00d3);
  --ct-plate-vh: linear-gradient(180deg, #ff0004, rgba(0, 0, 0, 0.97));

  position: relative;
  z-index: 2;
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(90 * var(--u));
  font-family: var(--display);
  color: #fff;
}

.ct-shell {
  display: grid;
  grid-template-columns: calc(280 * var(--u)) 1fr;
  grid-template-rows: 1fr auto;
  gap: calc(18 * var(--u));
  padding: calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(14 * var(--u));
  background: var(--ct-fill);
}

.ct-shell.is-loading { opacity: .75; }

.ct-shell {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.ct-shell input,
.ct-nick,
.ct-handle,
.ct-peer-link {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.ct-shell img { -webkit-user-drag: none; }

.ct-rail {
  grid-row: 1 / span 2;
  min-width: 0;
  overflow-y: auto;
  max-height: calc(760 * var(--u));
}

.ct-list { margin: 0; padding: 0; list-style: none; }
.ct-list li + li { margin-top: calc(8 * var(--u)); }

.ct-contact {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  width: 100%;
  padding: calc(12 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(12 * var(--u));
  background: rgba(0, 0, 0, .5);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.ct-contact:hover { background: rgba(0, 0, 0, .62); }

.ct-contact.is-open {
  border-color: #61b5e9;
  background: rgba(97, 181, 233, .12);
}

.ct-ava {
  position: relative;
  flex: 0 0 auto;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: 50%;
  background: #d9d9d9;
  overflow: hidden;
}

.ct-ava img { width: 100%; height: 100%; object-fit: cover; }

.ct-ava::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(2 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border: calc(2 * var(--u)) solid #05070d;
  border-radius: 50%;
  background: #a6a6a6;
}

.ct-ava[data-status="online"]::after { background: #00ff22; }
.ct-ava[data-status="busy"]::after   { background: #ff0000; }

.ct-meta { display: grid; min-width: 0; gap: calc(2 * var(--u)); }

.ct-nick {
  font-size: calc(19 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
}

.ct-handle, .ct-status, .ct-preview {
  font-size: calc(13 * var(--u));
  line-height: 1.2;
  color: rgba(255, 255, 255, .72);
}

.ct-status { text-transform: uppercase; }

.ct-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .55);
}

.ct-rail-empty {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  line-height: 1.35;
  color: rgba(255, 255, 255, .7);
}

.ct-room {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: min(calc(620 * var(--u)), 76vh);
  border-radius: calc(12 * var(--u));
  background: var(--ct-panel);
}

.ct-room-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.ct-room-title {
  flex: 1;
  margin: 0;
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.ct-rail-toggle { display: none; }

.ct-room-head.has-bell::before,
.ct-room-head.has-del::before {
  content: "";
  flex: 0 0 calc(40 * var(--u));
}

.ct-room-head.has-bell.has-del::before { flex-basis: calc(92 * var(--u)); }

.ct-notify {
  position: relative;
  flex: 0 0 auto;
}

.ct-del[hidden] { display: none; }

.ct-del:hover,
.ct-del:focus-visible {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, .6);
}

.ct-del:disabled { opacity: .5; cursor: default; }

.ct-bell,
.ct-del {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: calc(10 * var(--u));
  background: rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

.ct-bell svg,
.ct-del svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.ct-bell:hover,
.ct-bell[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.ct-bell[data-on="true"] {
  color: #61b5e9;
  border-color: rgba(97, 181, 233, .6);
}

.ct-bell[data-on="true"] svg path:first-child { fill: rgba(97, 181, 233, .3); }

.ct-notify-panel {
  position: absolute;
  top: calc(100% + 8 * var(--u));
  right: 0;
  z-index: 6;
  display: grid;
  gap: calc(12 * var(--u));
  width: max(240px, calc(300 * var(--u)));
  padding: calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(12 * var(--u));
  background: rgba(6, 10, 22, .98);
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .55);
  text-align: left;
}

.ct-notify-text {
  margin: 0;
  font-family: var(--ui);
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
  overflow-wrap: anywhere;
}

.ct-notify-go,
.ct-notify-off {
  justify-self: start;
  padding: max(8px, calc(10 * var(--u))) max(14px, calc(18 * var(--u)));
  border: 0;
  border-radius: 999px;
  background: var(--ct-grad);
  color: #fff;
  font-family: var(--display);
  font-size: max(12px, calc(15 * var(--u)));
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.ct-notify-off {
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
}

.ct-notify-go.is-busy { opacity: .5; pointer-events: none; }
.ct-notify-off:disabled { opacity: .5; cursor: default; }

.ct-log {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: calc(18 * var(--u));
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.ct-msg {
  max-width: 66%;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, .1);
  align-self: flex-start;
}

.ct-msg.is-mine {
  align-self: flex-end;
  background: rgba(45, 74, 237, .55);
}

.ct-body {
  margin: 0;
  font-family: var(--ui);
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ct-msg.is-sticker {
  padding: 0;
  background: none;
}

.ct-sticker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(8 * var(--u)) calc(4 * var(--u));
  max-width: 100%;
  align-self: flex-start;
}

.ct-sticker-row.is-mine {
  align-self: flex-end;
  justify-content: flex-end;
}

.ct-sticker-row .ct-msg {
  max-width: none;
  align-self: auto;
}

.ct-sticker {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(118 * var(--u));
  margin: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: calc(8 * var(--u));
  background: rgba(0, 0, 0, .536);
}

.ct-sticker.is-pending {
  aspect-ratio: 146.3 / 150;
  background: rgba(255, 255, 255, .06);
}

.ct-sticker-art {
  position: relative;
  aspect-ratio: 146.3 / 118.7;
}

.ct-sticker-icon {
  position: absolute;
  top: calc(6 * var(--u));
  left: calc(6 * var(--u));
  width: calc(100% - 12 * var(--u));
  height: calc(100% - 12 * var(--u));
  object-fit: contain;
}

.ct-sticker-name {
  min-height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(3 * var(--u)) calc(5 * var(--u));
  border-radius: 0 0 calc(7 * var(--u)) calc(7 * var(--u));
  box-sizing: border-box;
  font-family: var(--display);
  font-size: calc(11 * var(--u));
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: var(--ct-plate, var(--ct-grad));
}

.ct-sticker.is-lost .ct-sticker-name { border-radius: calc(7 * var(--u)); }

.ct-sticker-badge-box {
  position: absolute;
  top: calc(-10 * var(--u));
  left: calc(-10 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(6 * var(--u));
  background: rgba(24, 28, 40, .94);
}

.ct-sticker-badge {
  display: block;
  width: auto;
  height: calc(12 * var(--u));
}

.ct-time {
  display: block;
  margin-top: calc(4 * var(--u));
  font-family: var(--ui);
  font-size: calc(11 * var(--u));
  color: rgba(255, 255, 255, .6);
  text-align: right;
}

.ct-room-empty {
  margin: auto;
  padding: calc(24 * var(--u));
  max-width: 70%;
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.ct-compose {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.ct-emoji-btn,
.ct-sticker-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: calc(10 * var(--u));
  background: rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

.ct-emoji-btn svg,
.ct-sticker-btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.ct-emoji-btn:hover,
.ct-emoji-btn[aria-expanded="true"],
.ct-sticker-btn:hover,
.ct-sticker-btn[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.ct-emoji {
  position: absolute;
  left: calc(18 * var(--u));
  bottom: calc(100% - 1px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(8, max(32px, calc(38 * var(--u))));
  gap: calc(2 * var(--u));
  max-height: calc(300 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(8 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(12 * var(--u));
  background: rgba(6, 10, 22, .98);
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .55);
}

.ct-emoji-item {
  width: max(32px, calc(38 * var(--u)));
  height: max(32px, calc(38 * var(--u)));
  padding: 0;
  border: 0;
  border-radius: calc(8 * var(--u));
  background: none;
  font-size: max(18px, calc(22 * var(--u)));
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease;
}

.ct-emoji-item:hover { background: rgba(255, 255, 255, .12); }

.ct-stickers {
  position: absolute;
  left: calc(18 * var(--u));
  bottom: calc(100% - 1px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: max(320px, calc(440 * var(--u)));
  padding: calc(10 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(12 * var(--u));
  background: rgba(6, 10, 22, .98);
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .55);
  box-sizing: border-box;
}

.ct-stickers[hidden] { display: none; }

.ct-sticker-search {
  width: 100%;
  box-sizing: border-box;
  padding: max(8px, calc(9 * var(--u))) max(10px, calc(12 * var(--u)));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: calc(10 * var(--u));
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-family: var(--ui);
  font-size: max(13px, calc(14 * var(--u)));
}

.ct-sticker-search::placeholder { color: rgba(255, 255, 255, .62); }

.ct-sticker-note {
  margin: 0;
  font-family: var(--ui);
  font-size: max(12px, calc(13 * var(--u)));
  color: rgba(255, 255, 255, .72);
}

.ct-sticker-note:empty { display: none; }

.ct-sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  max-height: max(240px, calc(300 * var(--u)));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ct-sticker-grid:empty { display: none; }

.ct-sticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  width: 100%;
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, .05);
  color: #fff;
  cursor: pointer;
  transition: background .12s ease;
}

.ct-sticker-item:hover { background: rgba(255, 255, 255, .14); }

.ct-sticker-item img {
  width: 100%;
  height: max(44px, calc(56 * var(--u)));
  object-fit: contain;
}

.ct-sticker-cap {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  font-family: var(--ui);
  font-size: max(10px, calc(11 * var(--u)));
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .82);
}

.ct-input, .ct-review-input {
  flex: 1;
  min-width: 0;
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: calc(10 * var(--u));
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-family: var(--ui);
  font-size: calc(15 * var(--u));
}

.ct-input::placeholder, .ct-review-input::placeholder {
  
  color: rgba(255, 255, 255, .62);
}

.ct-send, .ct-review-send {
  padding: calc(11 * var(--u)) calc(22 * var(--u));
  border: 0;
  border-radius: calc(999 * var(--u));
  background: var(--ct-grad);
  color: #fff;
  font-family: var(--display);
  font-size: calc(16 * var(--u));
  text-transform: uppercase;
  cursor: pointer;
}

.ct-send:disabled { opacity: .5; cursor: default; }

.ct-review {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  flex-wrap: wrap;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--ct-panel);
}

.ct-review-label {
  font-size: calc(20 * var(--u));
  text-transform: uppercase;
}

.ct-stars {
  display: flex;
  gap: calc(4 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
}

.ct-star { position: relative; cursor: pointer; line-height: 1; }

.ct-star input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ct-star span[aria-hidden] {
  display: block;
  font-size: calc(26 * var(--u));
  color: rgba(255, 255, 255, .28);
  transition: color .12s ease;
}

.ct-stars:has(input:checked) .ct-star span[aria-hidden] { color: #61b5e9; }
.ct-stars:has(input:checked) .ct-star:has(~ .ct-star input:checked) span[aria-hidden] { color: #61b5e9; }
.ct-star:has(input:checked) ~ .ct-star span[aria-hidden] { color: rgba(255, 255, 255, .28); }

.ct-star input:focus-visible + span[aria-hidden] { outline: 2px solid #fff; outline-offset: 2px; }

.ct-review-status {
  margin: 0;
  font-size: calc(14 * var(--u));
  color: rgba(255, 255, 255, .8);
}

.ct-gate {
  margin: calc(60 * var(--u)) auto;
  max-width: calc(560 * var(--u));
  padding: calc(28 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(14 * var(--u));
  background: var(--ct-fill);
  font-size: calc(19 * var(--u));
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.ct-empty {
  margin: calc(24 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.ct-peer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--u));
}

.ct-peer-link:hover { text-decoration-thickness: calc(2 * var(--u)); }

.ct-page :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .55);
}

.ct-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ct-shell.is-empty .ct-room-empty { display: none; }

@media (max-width: 900px) {
  .ct-page { --u: 1px; padding: 16px 10px 40px; }

  .ct-gate { margin: 40px auto; padding: 22px 18px; font-size: 18px; }
  .ct-empty { font-size: 16px; }

  .ct-shell.is-empty .ct-log { display: none; }
  .ct-shell.is-empty .ct-room-empty { display: block; font-size: 16px; }

  .ct-shell {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 12px;
    min-height: 0;
    padding: 10px;
    border-radius: 14px;
    overflow: hidden;
  }

  .ct-rail {
    position: absolute;
    z-index: 3;
    inset: 58px auto 10px 10px;
    width: min(300px, 78%);
    max-height: none;
    padding: 10px;
    border-radius: 12px;
    background: #0a0e1a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    transform: translateX(calc(-100% - 20px));
    transition: transform .2s ease;
  }

  .ct-shell.rail-open .ct-rail { transform: none; }

  .ct-shell::after {
    content: "";
    position: absolute;
    inset: 58px 0 0;
    z-index: 2;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .ct-shell.rail-open::after { opacity: 1; pointer-events: auto; }

  .ct-rail-toggle {
    display: block;
    flex: 0 0 auto;
    width: 26px;
    padding: 4px 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ct-rail-toggle span {
    display: block;
    height: 3px;
    border-radius: 16px;
    background: #d9d9d9;
  }

  .ct-rail-toggle span + span { margin-top: 3px; }

  .ct-room { height: 62vh; min-height: 320px; border-radius: 12px; }
  .ct-room-head { padding: 10px 12px; gap: 10px; }
  .ct-room-title { font-size: 17px; }
  .ct-room-head.has-bell::before,
  .ct-room-head.has-del::before { display: none; }
  .ct-bell, .ct-del { width: 36px; height: 36px; border-radius: 10px; }
  .ct-bell svg, .ct-del svg { width: 20px; height: 20px; }
  .ct-notify-panel {
    top: calc(100% + 8px);
    width: min(300px, calc(100vw - 48px));
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
  }
  .ct-notify-text { font-size: 14px; }
  .ct-notify-go, .ct-notify-off { padding: 9px 16px; font-size: 13px; }
  .ct-log { padding: 12px; gap: 8px; }
  .ct-msg { max-width: 86%; padding: 10px 12px; border-radius: 12px; }
  .ct-body { font-size: 14px; }
  .ct-time { font-size: 10px; }
  .ct-room-empty { font-size: 14px; padding: 16px; }

  .ct-compose { padding: 10px 12px; gap: 8px; }

  .ct-emoji-btn, .ct-sticker-btn { width: 40px; height: 40px; border-radius: 10px; }
  .ct-emoji-btn svg, .ct-sticker-btn svg { width: 22px; height: 22px; }

  .ct-stickers {
    left: 12px;
    right: 12px;
    width: auto;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
  }

  .ct-sticker-search { font-size: 16px; padding: 9px 12px; border-radius: 10px; }
  .ct-sticker-grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 6px;
    max-height: 40vh;
  }
  .ct-sticker-item { gap: 4px; padding: 6px 4px; border-radius: 8px; }
  .ct-sticker-item img { height: 48px; }
  .ct-sticker-cap { font-size: 10px; }

  .ct-sticker { width: 96px; margin: 8px 0 0 8px; }
  .ct-sticker-name { font-size: 10px; min-height: 22px; }
  .ct-sticker-badge-box { top: -8px; left: -8px; width: 24px; height: 24px; }
  .ct-sticker-badge { height: 10px; }
  .ct-sticker-row { gap: 6px 4px; }

  .ct-emoji {
    left: 12px;
    right: 12px;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2px;
    max-height: 46vh;
    padding: 8px;
    border-radius: 12px;
  }

  .ct-emoji-item { width: auto; height: 40px; border-radius: 8px; font-size: 24px; }
  .ct-input, .ct-review-input { font-size: 16px; padding: 10px 12px; }
  .ct-send, .ct-review-send { font-size: 14px; padding: 10px 16px; }

  .ct-review { grid-column: 1; gap: 10px; padding: 12px; }
  .ct-review-label { font-size: 16px; }
  .ct-review-input { flex-basis: 100%; order: 3; }
  .ct-star span[aria-hidden] { font-size: 22px; }

  .ct-nick { font-size: 16px; }
  .ct-handle, .ct-status, .ct-preview { font-size: 12px; }
  .ct-ava { width: 40px; height: 40px; }
  .ct-ava::after { width: 11px; height: 11px; border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-page *, .ct-rail { transition: none !important; }
}