/* /modules/integrations/css/chat_integrations.css */
.ms-integrations {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
  transition: height var(--ci-transition-ms, 1000ms) linear;
  will-change: height;
}

.ms-integrations.is-closing {
  pointer-events: none;
}

.ms-ci-slot {
  position: relative;
  width: 100%;
  max-height: var(--ci-preview-height, 120px);
  overflow: hidden;
  z-index: 8;
}

.ms-ci-slot.is-visible {
  cursor: pointer;
}

.ms-ci-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 100%;
    padding: 10px;
    border: var(--brd-box);
    border-radius: var(--br);
    background: rgb(16 26 38 / 50%);
    transition: background .2s ease;
}
.ms-ci-card:hover {
    background: var(--bg-box-modal);
}

.ms-ci-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.ms-ci-card-main.has-media {
  grid-template-columns: auto minmax(0, 1fr);
}

.ms-ci-media {
  width: 58px;
  height: 58px;
  border-radius: var(--br);
  overflow: hidden;
}

.ms-ci-media img,
.ms-ci-media video,
.ms-ci-gallery-item img,
.ms-ci-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ms-ci-media--youtube {
  position: relative;
}

.ms-ci-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--br);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.ms-ci-content {
  min-width: 0;
}

.ms-ci-topic {
  font-size: 12px;
  line-height: 1.2;
  color: #7fb7ff;
}

.ms-ci-topic-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ms-ci-card .ms-ci-topic-line {
  padding-right: 28px;
}

.ms-ci-card.has-progress .ms-ci-body {
  padding-right: 108px;
}

.ms-ci-preview-progress {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
}

.ms-ci-progress-list {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  flex: 0 0 auto;
}

.ms-ci-progress-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #7fb7ff;
}

.ms-ci-progress-ring,
.ms-ci-progress-check {
  display: block;
  width: 16px;
  height: 16px;
}

.ms-ci-progress-ring {
  overflow: visible;
  transform: rotate(-90deg);
}

.ms-ci-progress-track,
.ms-ci-progress-value {
  fill: none;
  stroke-width: 2;
}

.ms-ci-progress-track {
  stroke: rgba(127, 183, 255, .22);
}

.ms-ci-progress-value {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .12s linear;
}

.ms-ci-progress-indicator.is-complete {
  color: #36c878;
}

.ms-ci-progress-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ms-ci-check-draw .34s ease-out forwards;
}

@keyframes ms-ci-check-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-ci-progress-value {
    transition: none;
  }

  .ms-ci-progress-check path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.ms-ci-title {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  overflow-wrap: anywhere;
}

.ms-ci-body {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.82);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ms-ci-slot .ms-ci-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-ci-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--br);
  color: #fff;
  background: rgba(255,255,255,.07);
  cursor: pointer;
}

.ms-ci-close .ms-icon {
  width: 16px;
  height: 16px;
}

.ms-ci-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ms-ci-youtube {
  aspect-ratio: 16 / 9;
  width: min(500px, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: var(--br);
  background: #000;
}

.ms-ci-body .ms-ci-youtube,
.ms-ci-body .ms-ci-full-media {
  margin-top: 10px;
}

.ms-ci-youtube iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ms-ci-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.ms-ci-gallery-item {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--br);
  background: rgba(255,255,255,.06);
}

.ms-ci-full-media {
  width: fit-content;
  max-width: min(500px, 100%);
  max-height: 400px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: var(--br);
}

.ms-ci-full-media img,
.ms-ci-full-media video {
  display: block;
  width: auto;
  max-width: min(500px, 100%);
  max-height: 400px;
  object-fit: contain;
}

.ms-ci-link {
  color: #7fb7ff;
  position: relative;
  z-index: 2;
}

.ms-ci-modal .ms-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70dvh;
  overflow-y: auto;
}

.ms-modal.ms-ci-modal {
  position: relative;
  max-height: min(920px, calc(var(--ms-modal-viewport-height, 100dvh) - 16px));
  overflow: visible;
}

.ms-modal.ms-ci-current-modal {
  width: min(680px, 100%);
  height: auto;
  max-height: min(820px, calc(var(--ms-modal-viewport-height, 100dvh) - 16px));
  overflow: hidden;
}

.ms-ci-modal-title-stack {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  line-height: 1.2;
}

.ms-ci-modal-title-stack > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-modal-title-stack > span + span {
  color: #7fb7ff;
  font-size: 12px;
  font-weight: 400;
}

.ms-ci-modal-head-id {
  align-self: center;
  justify-self: start;
}

.ms-ci-header-settings {
  position: relative;
  flex: 0 0 auto;
  color: #2378dc;
}

.ms-ci-feed-filter-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #152034;
  border-radius: 999px;
  background: #ff9f32;
  color: #111821;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  pointer-events: none;
}

.ms-ci-head-button {
  color: #2378dc;
}

.ms-ci-head-button .ms-icon {
  width: 23px;
  height: 23px;
  color: currentColor;
}

.ms-ci-add-integration-icon .ms-ci-add-mark {
  stroke-width: 2;
}

.ms-panel--chat {
  position: relative;
}

.ms-ci-dialog-page {
  position: absolute;
  inset: 0;
  z-index: 45;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.ms-ci-dialog-head {
  flex: 0 0 auto;
  height: var(--ms-workspace-header-height, 51px);
  min-height: var(--ms-workspace-header-height, 51px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-bottom: 1px solid rgb(35 120 220 / 15%);
  background: transparent;
}

.ms-shell.is-ci-dialog-page .ms-chat-empty {
  visibility: hidden;
}

.ms-ci-dialog-back {
  justify-self: start;
}

.ms-ci-dialog-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-dialog-title-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.ms-ci-dialog-title-stack > span,
.ms-ci-dialog-title-stack > small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-dialog-title-stack > small {
  color: #7fb7ff;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}

.ms-ci-dialog-head .ms-ci-header-settings {
  justify-self: end;
}

.ms-ci-dialog-head-spacer {
  display: block;
  width: 30px;
  height: 30px;
}

.ms-ci-dialog-id {
  align-self: center;
  justify-self: end;
  color: #7fb7ff;
  font-size: 12px;
  line-height: 18px;
}

.ms-ci-dialog-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ms-ci-feed-dialog-body {
  padding: 10px;
}

.ms-ci-management-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 18px;
}

.ms-ci-dialog-page[data-ci-dialog-route="create"] > .ms-ci-dialog-footer {
  justify-content: flex-start;
}

.ms-ci-management-subpage {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.ms-ci-management-list-body {
  padding: 12px 14px 18px;
}

.ms-ci-dialog-page.has-ci-management-subpage > .ms-ci-dialog-head,
.ms-ci-dialog-page.has-ci-management-subpage > .ms-ci-dialog-body,
.ms-ci-dialog-page.has-ci-management-subpage > .ms-ci-dialog-footer {
  visibility: hidden;
  pointer-events: none;
}

.ms-ci-feed-settings-body {
  padding: 14px;
}

.ms-ci-feed-detail-body {
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 22px;
}

.ms-ci-dialog-footer {
  flex: 0 0 auto;
  height: var(--ms-workspace-footer-height, 38px);
  min-height: var(--ms-workspace-footer-height, 38px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 768px) {
  .ms-shell.is-ci-dialog-page .ms-panel--list {
    display: none;
  }

  .ms-shell.is-ci-dialog-page .ms-panel--chat {
    display: flex;
  }
}

.ms-modal.ms-ci-feed-page {
  width: min(820px, 100%);
  height: min(820px, 100%);
  overflow: hidden;
}

.ms-ci-feed-page .ms-modal-body {
  max-height: none;
  padding: 10px;
  gap: 10px;
  overscroll-behavior: contain;
}

.ms-ci-feed-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ms-ci-feed-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(127, 183, 255, .14);
  border-radius: var(--br);
  background: rgb(30 40 60 / 15%);
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}

.ms-ci-feed-card:hover,
.ms-ci-feed-card:focus-visible {
  border-color: rgba(35, 120, 220, .3);
  background: rgb(0 45 70 / 25%);
  outline: none;
}

.ms-ci-feed-card:active {
  transform: scale(.995);
}

.ms-ci-feed-card-header,
.ms-ci-feed-card-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
}

.ms-ci-feed-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 0 11px;
}

.ms-ci-feed-card-footer {
  min-height: 20px;
  background: transparent;
}

.ms-ci-feed-author,
.ms-ci-feed-author-copy,
.ms-ci-feed-footer-actions,
.ms-ci-feed-status-list {
  display: flex;
  min-width: 0;
  align-items: center;
}

.ms-ci-feed-topic {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #7fb7ff;
  font-size: 11px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-feed-id {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  color: rgba(255, 255, 255, .58);
}

.ms-ci-feed-id > span {
  margin-left: 2px;
}

.ms-ci-feed-topic-filter {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ms-ci-feed-topic-filter:hover,
.ms-ci-feed-topic-filter:focus-visible {
  color: #a9ceff;
  outline: none;
  text-decoration: underline;
}

.ms-ci-feed-title {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ms-ci-vertical-drag { will-change: transform, opacity; }
.ms-ci-dismiss-backdrop { pointer-events: none !important; }
.ms-ci-dialog-page.ms-ci-vertical-drag { background: linear-gradient(135deg, #182b42, #111820); }
.ms-ci-payment-card {
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  overflow: hidden;
  background: rgb(18 32 50);
}
.ms-ci-payment-card > h3 { margin: 0; padding: 11px 12px 7px; color: #5ab3ff; font-size: 13px; line-height: 18px; font-weight: 650; }
.ms-ci-payment-integration { padding: 0 12px 10px; font-size: 16px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.ms-ci-payment-breakdown { padding: 10px 12px; display: grid; gap: 8px; border-top: 1px solid rgba(255,255,255,.055); }
.ms-ci-payment-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.45; color: #91a0b5; }
.ms-ci-payment-review-row > :last-child { text-align: right; }
.ms-ci-payment-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.055); padding: 10px 12px; font-size: 16px; color: #eef4fb; }
.ms-ci-payment-bottom { display: grid; gap: 12px; margin-top: 10px; }
.ms-ci-payment-confirmation .ms-ci-payment-total { border-top: 0; font-size: 18px; }
.ms-ci-payment-method { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.055); font-size: 13px; color: #91a0b5; }
.ms-ci-payment-method strong { font-weight: 500; color: #eef4fb; }
.ms-ci-payment-question { margin: 6px 2px; color: #eef4fb; font-size: 15px; line-height: 1.5; }
.ms-ci-payment-fee-note { margin-top: 8px; color: #91a0b5; font-size: 12px; }
.ms-ci-reward-filter { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: #eef4fb; cursor: pointer; }
.ms-ci-reward-filter input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #2378dc; }
.ms-ci-reward-filter > span { display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.ms-ci-reward-filter small { color: #91a0b5; font-size: 12px; }
.ms-ci-payment-balance { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 2px; font-size: 12px; line-height: 1.5; color: #91a0b5; }
.ms-ci-payment-balance strong { color: #eef4fb; font-weight: 500; }
.ms-ci-payment .ms-ci-payment-actions { display: grid; gap: 10px; }
.ms-ci-payment .ms-primary-btn, .ms-ci-payment .ms-secondary-btn {
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 10px 12px;
  border: 1px solid rgba(35,120,220,.3); border-radius: 10px;
  font: inherit; font-size: 14px; line-height: 20px; color: #eef4fb; background: transparent;
}
.ms-ci-payment .ms-primary-btn { background: rgba(35,120,220,.12); color: #78baff; }
.ms-ci-payment button:focus-visible { outline: 2px solid #5ab3ff; outline-offset: 2px; }
.ms-ci-payment button:disabled { opacity: .55; }
.ms-ci-payment .ms-ci-payment-status { font-size: 13px; line-height: 1.5; }

.ms-ci-autoplay-setting { display:flex; align-items:center; gap:12px; cursor:pointer; padding:10px 0; }
.ms-ci-autoplay-setting > span:first-child { flex:1; }
.ms-ci-autoplay-setting small { display:block; color:var(--muted, #8b9aaa); margin-top:4px; }
.ms-ci-autoplay-setting input { position:absolute; opacity:0; width:1px; height:1px; }
.ms-ci-autoplay-switch { width:38px; height:22px; border-radius:12px; background:#445266; flex:none; position:relative; transition:background .15s; }
.ms-ci-autoplay-switch::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; top:3px; left:3px; background:white; transition:transform .15s; }
.ms-ci-autoplay-setting input:checked + .ms-ci-autoplay-switch { background:#2378dc; }
.ms-ci-autoplay-setting input:checked + .ms-ci-autoplay-switch::after { transform:translateX(16px); }
.ms-ci-autoplay-setting input:focus-visible + .ms-ci-autoplay-switch { outline:2px solid #82c4ff; outline-offset:3px; }
.ms-ci-feed-card.has-feed-sound { position:relative; }
.ms-ci-feed-card.has-feed-sound .ms-ci-feed-card-header { padding-right:57px; }
.ms-ci-feed-media-toolbar { position:absolute; top:9px; right:11px; display:flex; align-items:center; min-height:32px; padding:0; background:transparent; }
.ms-ci-feed-sound { display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; padding:5px; border:0; border-radius:5px; background:transparent; color:#d9e7f7; cursor:pointer; }
.ms-ci-feed-sound svg { width:22px; height:22px; }
.ms-ci-feed-sound:hover { background:rgb(35 120 220 / 20%); }
.ms-ci-feed-preview-open { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
.ms-ci-feed-body-media.is-preview-playing .ms-ci-feed-play, .ms-ci-feed-body-media.is-manual .ms-ci-feed-play, .ms-ci-feed-body-media.is-manual .ms-ci-feed-preview-open { display:none; }
.ms-ci-feed-body-media.is-manual .ms-ci-feed-media-visual video { pointer-events:auto; }
.ms-ci-feed-body-media--youtube .ms-ci-feed-media-visual { min-height:200px; }

.ms-ci-feed-body-media {
  width: 100%;
  max-width: 500px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--br);
  background: transparent;
}

.ms-ci-feed-media-visual {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ci-media-ratio, 16 / 9);
  max-height: min(60vh, 460px);
  max-height: min(60svh, 460px);
  overflow: hidden;
  border-radius: var(--br);
  background: rgb(0 0 0 / 15%);
}

.ms-ci-feed-media-visual img,
.ms-ci-feed-media-visual video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Use the image's intrinsic size, even when attachment dimensions are missing
   or stale. Max constraints only shrink it; the wrapper must not reserve a
   full-width video frame around a small icon. */
.ms-ci-feed-body-media--image .ms-ci-feed-media-visual {
  display: flex;
  width: fit-content;
  aspect-ratio: auto;
  background: transparent;
}

.ms-ci-feed-body-media--image .ms-ci-feed-media-visual img {
  position: static;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 460px);
  max-height: min(60svh, 460px);
  border-radius: var(--br);
  object-fit: scale-down;
}

.ms-ci-feed-body-media--youtube .ms-ci-feed-media-visual img {
  object-fit: cover;
}

.ms-ci-feed-media-visual iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ms-ci-feed-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ms-ci-feed-play svg {
  display: block;
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 25%));
}

.ms-ci-feed-body-media--youtube .ms-ci-feed-play svg {
  width: 68px;
  height: 48px;
}

.ms-ci-feed-youtube-meta {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 109px;
  gap: 4px;
  padding: 9px 0 0;
  overflow: hidden;
}

.ms-ci-feed-youtube-site {
  flex: 0 0 auto;
  color: #91a0b5;
  font-size: 12px;
  line-height: 16px;
}

.ms-ci-feed-youtube-title,
.ms-ci-feed-youtube-description {
  flex: 0 0 auto;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ms-ci-feed-youtube-title {
  color: #eef4fb;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ms-ci-feed-youtube-description {
  color: #91a0b5;
  font-size: 12px;
  line-height: 18px;
}

.ms-ci-feed-excerpt {
  display: -webkit-box;
  min-width: 0;
  min-height: 0;
  max-height: 84px;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 21px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.ms-ci-feed-author {
  gap: 8px;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
}

.ms-ci-feed-author-button {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ms-ci-feed-author img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 10px;
  object-fit: contain;
}

.ms-ci-feed-author-copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  overflow: hidden;
}

.ms-ci-feed-author-copy strong,
.ms-ci-feed-author-copy small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-feed-author-copy strong {
  color: #858585;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.ms-ci-feed-author-copy small {
  color: rgba(255, 255, 255, .35);
  font-size: 9px;
  line-height: 12px;
}

.ms-ci-feed-footer-actions {
  min-width: 34px;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.ms-ci-feed-status-list {
  gap: 0;
}

.ms-ci-feed-status {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.ms-ci-feed-status.is-complete {
  color: #36c878;
}

.ms-ci-feed-status.is-pending {
  color: #ff9f32;
}

.ms-ci-feed-pending-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.ms-ci-feed-pending-icon circle,
.ms-ci-feed-pending-icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ms-ci-feed-icon-draw .42s ease-out forwards;
}

.ms-ci-feed-pending-icon path {
  animation-delay: .16s;
}

@keyframes ms-ci-feed-icon-draw {
  to { stroke-dashoffset: 0; }
}

.ms-ci-feed-loader {
  min-height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

.ms-ci-feed-loader.is-loading {
  min-height: 52px;
  padding-bottom: 8px;
}

.ms-ci-feed-loader .ms-ci-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.ms-ci-feed-settings {
  display: flex;
  width: min(520px, 100%);
  margin: 0 auto;
  flex-direction: column;
  gap: 12px;
}

.ms-ci-feed-settings-note {
  padding: 9px 10px;
  border: 1px solid rgba(127, 183, 255, .14);
  border-radius: var(--br);
  background: rgba(35, 120, 220, .07);
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  line-height: 17px;
}

.ms-ci-feed-settings-clear {
  align-self: flex-end;
  background: rgba(128, 43, 47, .42);
  box-shadow: 0 0 0 1px rgba(255, 104, 112, .48);
  color: #ffd2d5;
}

.ms-ci-settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.ms-ci-settings-heading > h3 {
  margin: 0;
  color: #68b9f8;
  font-size: 14px;
}

.ms-ci-settings-heading > .ms-ci-feed-settings-clear {
  align-self: center;
  flex: 0 0 auto;
}

.ms-ci-feed-settings-clear:hover,
.ms-ci-feed-settings-clear:active {
  background: rgba(151, 49, 55, .58);
}

@media (prefers-reduced-motion: reduce) {
  .ms-ci-feed-pending-icon circle,
  .ms-ci-feed-pending-icon path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.ms-ci-current-modal .ms-modal-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(650px, calc(var(--ms-modal-viewport-height, 100dvh) - 124px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ms-ci-current-modal .ms-modal-actions {
  align-items: center;
}

.ms-ci-full-footer-progress {
  display: inline-flex;
  align-items: center;
}

.ms-ci-current-detail {
  min-height: 0;
}

.ms-ci-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-ci-create-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-ci-create-head {
  padding: 4px 0 2px;
}

.ms-ci-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.ms-ci-form.is-opening {
    background: var(--bg-box-modal);
    border-radius: var(--br);
    box-shadow: var(--sh-sub);
    border: var(--brd-box);
    padding: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: max-height .28s ease, opacity .24s ease, transform .28s ease;
}

.ms-ci-form.is-opening.is-open {
  max-height: 1300px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
}

.ms-ci-add-center {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.ms-ci-create-head--split {
  justify-content: space-between;
  gap: 8px;
}

.ms-ci-add-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
}

.ms-ci-add-toggle .ms-icon {
  width: 18px;
  height: 18px;
}

.ms-ci-disabled-note {
  padding: 9px 10px;
  border-radius: var(--br);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.35;
}

.ms-ci-loading {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.ms-ci-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: #2378dc;
  animation: ms-ci-spin .8s linear infinite;
}

@keyframes ms-ci-spin {
  to { transform: rotate(360deg); }
}

.ms-ci-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ms-ci-field > span {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.78);
}

.ms-int-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-int-root {
  position: relative;
  background: var(--bg-box-modal);
  border: var(--brd-box);
  border-radius: var(--br);
}

.ms-int-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 150px;
  max-height: 350px;
  overflow-y: auto;
  border: none;
  outline: none;
  padding: 10px 10px 0;
  border-radius: var(--br);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: auto;
}

.ms-int-input:empty::before {
  content: attr(data-placeholder);
  opacity: .55;
  pointer-events: none;
}

.ms-int-tools-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 2px 10px;
  height: 30px;
}

.ms-int-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.ms-int-tool-set {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.ms-int-upload {
  position: relative;
}

.ms-int-btn {
  height: 24px;
  padding: 5px 0;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ms-int-btn svg,
.ms-int-btn .ms-icon {
  width: 22px;
  height: 22px;
  stroke: gray;
  transition: stroke .3s ease;
}

.ms-int-btn:hover svg,
.ms-int-btn:hover .ms-icon {
  stroke: rgb(35 150 255);
}

.ms-int-upload-menu {
  position: absolute;
  z-index: 10000;
  left: 0;
  bottom: calc(100%);
  min-width: 150px;
  padding: 8px;
  border-radius: var(--br);
  background: rgb(12 16 28 / 90%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

.ms-int-upload-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--br);
  background: transparent;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ms-int-upload-menu__item:hover,
.ms-int-upload-menu__item:focus-visible {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.ms-int-picker-panel {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 0px);
    left: 0;
    width: min(355px, 95vw);
    max-width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--br);
    background: var(--bg-box-modal);
    border: var(--brd-box);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);
    user-select: none;
}

.ms-int-picker-head {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(12,16,28,.5);
}

.ms-int-picker-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 3px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.ms-int-picker-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.ms-int-picker-sec {
  margin-bottom: 12px;
}

.ms-int-picker-sec__title {
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
  margin-bottom: 8px;
}

.ms-int-picker-grid--emoji {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.ms-int-picker-empty {
  padding: 8px;
  font-size: 13px;
  opacity: .7;
}

.ms-int-emoji-select {
  font-size: 18px;
  line-height: 1;
  text-align: center;
  padding: 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.ms-int-emoji-select:hover,
.ms-int-emoji-select:focus-visible {
  transform: scale(1.3);
  background: rgba(255,255,255,.08);
}

.ms-int-input .ms-int-inline-media {
  position: relative;
  display: inline-flex;
  max-width: min(220px, 100%);
  margin: 4px 4px 4px 0;
  vertical-align: middle;
}

.ms-int-inline-youtube__poster {
  position: relative;
  display: inline-flex;
}

.ms-int-inline-youtube .ms-ci-play {
  pointer-events: none;
}

.ms-int-inline-media__media {
  display: block;
  max-width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: var(--br);
}

.ms-ci-inline-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--br);
  background: rgba(0,0,0,.54);
  color: #fff;
  cursor: pointer;
}

.ms-ci-inline-remove .ms-icon {
  width: 14px;
  height: 14px;
}

.ms-ci-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.ms-ci-attach {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 28px 6px 6px;
  border-radius: var(--br);
  background: rgba(255,255,255,.06);
}

.ms-ci-attach-media {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--br);
  background: rgba(0,0,0,.22);
}

.ms-ci-attach-media img,
.ms-ci-attach-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-ci-attach-name {
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-attach-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--br);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

.ms-ci-attach-remove .ms-icon {
  width: 13px;
  height: 13px;
}

.ms-ci-upload-progress {
  width: min(420px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgb(35 120 220 / 24%);
  border-radius: var(--br);
  background: rgb(35 120 220 / 8%);
}

.ms-ci-upload-progress[hidden] {
  display: none !important;
}

.ms-ci-upload-progress__head,
.ms-ci-upload-progress__label {
  display: flex;
  align-items: center;
}

.ms-ci-upload-progress__head {
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: #aeb8c5;
  font-size: 12px;
}

.ms-ci-upload-progress__label {
  min-width: 0;
  gap: 7px;
}

.ms-ci-upload-progress__label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-upload-progress__label i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #7fd7ff;
  box-shadow: 0 0 0 0 rgb(127 215 255 / 55%);
  animation: ms-ci-upload-pulse 1s ease-in-out infinite;
}

.ms-ci-upload-progress__head strong {
  color: #7fd7ff;
  font-size: 12px;
  font-weight: 600;
}

.ms-ci-upload-progress__track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
}

.ms-ci-upload-progress__track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #7fd7ff;
  transition: width .16s ease;
}

@keyframes ms-ci-upload-pulse {
  0%, 100% { transform: scale(.86); opacity: .65; }
  50% { transform: scale(1.15); opacity: 1; }
}

.ms-ci-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.ms-ci-limit {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: var(--brd-box);
    border-radius: var(--br);
    background: var(--bg-box-modal);
}

.ms-ci-limit.is-off {
  opacity: .5;
}

.ms-ci-limit-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.84);
}

.ms-ci-limit input[type="number"] {
  width: 100%;
}

.ms-ci-total {
  padding: 8px 10px;
  border-radius: var(--br);
  background: rgba(35,120,220,.13);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.ms-ci-subtitle {
  margin-top: 4px;
}

.ms-ci-own-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-ci-own-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: -webkit-fill-available;
  padding: 8px 16px;
  border: var(--brd-box);
  border-radius: var(--br);
  background: var(--bg-box-modal);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}

.ms-ci-own-row > div {
  min-width: 0;
}

.ms-ci-own-row.has-media {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.ms-ci-own-row:hover {
  background: rgb(0 45 70 / 20%);
}

.ms-ci-own-row.is-active {
  border: 1px solid rgba(64, 211, 132, .42);
}

.ms-ci-own-row.is-paused {
  border: 1px solid rgba(255, 190, 76, .55);
}

.ms-ci-own-row.is-finished {
  border: 1px solid rgba(255, 98, 98, .42);
}

.ms-ci-own-row.is-pending {
  border: 1px solid rgba(255, 190, 76, .55);
}

.ms-ci-own-thumb {
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--br);
}
.ms-ci-own-row[data-ci-panel-source="viewed"] {
    border: var(--brd-box);
}
.ms-ci-own-thumb img,
.ms-ci-own-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ms-ci-own-row.is-new {
  animation: ms-ci-own-in .42s ease both;
}

@keyframes ms-ci-own-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ms-ci-own-row strong,
.ms-ci-own-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-own-row span,
.ms-ci-own-stats,
.ms-ci-empty {
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

.ms-ci-own-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ms-ci-own-action {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.ms-ci-own-action--icon {
  width: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ms-ci-own-action--icon .ms-icon {
  color: tomato;
}

.ms-ci-own-action.is-danger {
    border: 1px solid rgba(255, 100, 100, .4);
    background: rgba(255, 80, 80, .07);
    box-shadow: none;
    color: tomato;
}
.ms-ci-own-action.is-danger:hover {
    background: rgba(255, 80, 80, .25);
}

.ms-ci-own-action--icon.is-pause {
    border: 1px solid rgba(35, 120, 220, .55);
    background: rgba(35, 120, 220, .1);
    box-shadow: none;
    color: #2378dc;
}
.ms-ci-own-action--icon.is-pause:hover {
    background: rgba(35, 120, 220, .28);
}
.ms-ci-own-action--icon.is-pause .ms-icon {
    color: #2378dc;
}

.ms-ci-own-action--icon.is-success {
    border: 1px solid rgba(64, 211, 132, .42);
    background: rgba(64, 211, 132, .08);
    box-shadow: none;
    color: #5ee29c;
}
.ms-ci-own-action--icon.is-success:hover {
    background: rgba(64, 211, 132, .22);
}
.ms-ci-own-action--icon.is-success .ms-icon {
    color: #5ee29c;
}

.ms-ci-payment-due {
  font-weight: 600;
  color: #ffd17a !important;
}

.ms-ci-usd-hint {
  display: block;
  margin-top: 3px;
  color: #a5b5c8;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.ms-ci-payment-total .ms-ci-usd-hint { text-align: right; }

.ms-ci-reward-notice {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 190, 76, .4);
  border-radius: var(--br);
  background: rgba(255, 190, 76, .1);
  color: #ffe2a8;
  font-size: 13px;
  line-height: 1.4;
}

.ms-ci-payment {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ms-ci-payment-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--br);
  background: var(--bg-box-modal);
}

.ms-ci-payment-amount span {
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

.ms-ci-payment-status {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-line;
}

.ms-ci-payment-state.is-waiting .ms-ci-payment-status {
  color: orange;
}

.ms-ci-payment-status.is-error {
  color: #ff9c9c;
}

.ms-ci-payment-fee-info {
  display: grid;
  gap: 3px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.4;
}

.ms-ci-payment-fee-info strong {
  color: #dbe7ff;
  font-weight: 500;
}

.ms-ci-payment-state {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.ms-ci-payment-spinner-large {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.12);
  border-top-color: #2378dc;
  animation: ms-ci-spin .8s linear infinite;
}

.ms-ci-payment-success-mark {
  width: 100px;
  height: 100px;
  display: block;
}

.ms-ci-payment-error-mark {
  width: 100px;
  height: 100px;
  display: block;
}

.ms-ci-payment-success-mark svg,
.ms-ci-payment-error-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-ci-payment-success-mark circle,
.ms-ci-payment-success-mark path,
.ms-ci-payment-error-mark circle,
.ms-ci-payment-error-mark path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-ci-payment-success-mark circle,
.ms-ci-payment-success-mark path {
  stroke: #25d366;
}

.ms-ci-payment-error-mark circle,
.ms-ci-payment-error-mark path {
  stroke: #ff6262;
}

.ms-ci-payment-success-mark circle,
.ms-ci-payment-error-mark circle {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: ms-ci-payment-circle .55s ease-out forwards;
}

.ms-ci-payment-success-mark path {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: ms-ci-payment-check .42s ease-out .42s forwards;
}

.ms-ci-payment-error-mark path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: ms-ci-payment-check .42s ease-out .42s forwards;
}

.ms-ci-payment-success-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ms-ci-payment-success-copy strong {
  color: #25d366;
  font-size: 16px;
  font-weight: 600;
}

.ms-ci-payment-success-copy span {
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

@keyframes ms-ci-payment-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes ms-ci-payment-check {
  to { stroke-dashoffset: 0; }
}

.ms-ci-payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-ci-payment-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ms-ci-payment-actions .ms-ci-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.ms-ci-archive-toggle {
  min-width: 76px;
}

.ms-ci-detail-overlay {
  position: absolute;
  inset:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  z-index: 40;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: inherit;
  background: rgba(0,0,0,.58);
}

.ms-ci-detail-card {
  position: relative;
  width: min(680px, 100%);
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(35,120,220,.28);
  border-radius: var(--br);
  background: rgba(13, 24, 38, .98);
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
}

.ms-ci-detail-card--preview {
  gap: 0;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

.ms-ci-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ms-ci-detail-id {
  min-width: 30px;
  color: #7fb7ff;
  font-size: 12px;
  font-weight: 400;
}

.ms-ci-detail-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.ms-ci-detail-heading .ms-ci-title,
.ms-ci-detail-heading .ms-ci-topic {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-detail-heading .ms-ci-title {
  color: #fff;
  font-weight: 700;
}

.ms-ci-detail-heading .ms-ci-topic {
  font-size: 12px;
}

.ms-ci-detail-head .ms-ci-close {
  position: static;
}

.ms-ci-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(650px, calc(var(--ms-modal-viewport-height, 100dvh) - 166px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overscroll-behavior: contain;
}

.ms-ci-detail-card--preview .ms-ci-detail-scroll {
  max-height: none;
}

.ms-ci-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.ms-ci-detail-body {
  font-size: 14px;
}

.ms-ci-panel-card {
    width: -webkit-fill-available;
    position: absolute;
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* Report is a compact dialog, not a full-width management panel. */
[data-ci-panel-source="payment"] > .ms-ci-panel-card { border-radius: 10px; }
[data-ci-panel-source="payment"] > .ms-ci-panel-card,
[data-ci-panel-source="report"] > .ms-ci-panel-card {
  position: relative;
  box-sizing: border-box;
  width: min(560px, 100%);
  min-width: 0;
  max-width: 100%;
}

[data-ci-panel-source="report"] .ms-ci-report-form select,
[data-ci-panel-source="report"] .ms-ci-report-form textarea {
  max-width: 100%;
}

[data-ci-panel-source="report"] .ms-ci-report-target {
  overflow-wrap: anywhere;
}

.ms-ci-panel-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ms-ci-panel-head .ms-ci-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-ci-panel-head .ms-ci-close {
  position: static;
}
.ms-ci-panel-head.has-back { grid-template-columns: 32px minmax(0, 1fr) 32px; }
.ms-ci-panel-head.has-back .ms-ci-title { text-align: center; }
.ms-ci-panel-card { position: relative; overflow: hidden; }
.ms-ci-panel-leaving { position: absolute; left: 0; right: 0; pointer-events: none; background: #0b1926; }

.ms-ci-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ms-ci-panel-loading {
  min-height: 150px;
}

.ms-ci-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.ms-ci-topic-settings {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  margin-top: 2px;
  padding: 8px;
  border-radius: var(--br);
  background: rgba(255,255,255,.04);
}

.ms-ci-topic-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .ms-ci-card-main.has-media {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .ms-ci-media {
    width: 52px;
    height: 52px;
  }

  .ms-ci-limits,
  .ms-ci-own-row {
    grid-template-columns: 1fr;
  }

  .ms-ci-own-row.has-media {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ms-ci-own-row.has-media .ms-ci-own-stats,
  .ms-ci-own-row.has-media .ms-ci-own-actions {
    grid-column: 2;
  }
}

.ms-ci-detail-menu-wrap{position:relative;display:flex;justify-self:end}.ms-ci-detail-menu-toggle.ms-icon-btn{width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--muted,#9aa8ba);box-shadow:none}.ms-ci-detail-menu-toggle.ms-icon-btn:hover,.ms-ci-detail-menu-toggle.ms-icon-btn.is-active{background:rgb(35 120 220 / 20%)}.ms-ci-detail-menu{position:absolute;z-index:18;top:calc(100% + 6px);right:0;min-width:148px;padding:5px;border:1px solid rgba(54,137,231,.28);border-radius:10px;background:#101c2b;box-shadow:0 14px 34px rgba(0,0,0,.36)}.ms-ci-detail-menu[hidden]{display:none}.ms-ci-detail-menu button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#f0f5fb;text-align:left}.ms-ci-detail-menu button:hover{background:rgba(255,255,255,.08)}.ms-ci-detail-menu .ms-icon{width:19px;height:19px;color:#ef6c72}.ms-ci-detail-footer-left{min-width:0;display:flex;align-items:center;gap:3px}.ms-ci-detail-footer-left>.ms-ci-detail-id{min-width:0;flex:0 0 auto;color:var(--muted,#91a1b5);font-size:12px}.ms-ci-feedback{display:inline-flex;align-items:center;gap:10px;margin-left:auto}.ms-ci-feedback.is-readonly{pointer-events:none}.ms-ci-feedback-btn{display:inline-flex;min-width:0;padding:0;border:0;border-radius:0;align-items:center;justify-content:center;gap:3px;background:transparent;color:var(--muted,#9cadc0);box-shadow:none}.ms-ci-feedback-btn .ms-icon{width:19px;height:19px}.ms-ci-feedback-btn span{font-size:12px;color:var(--muted,#9cadc0)}.ms-ci-feedback-btn.is-active{border:0;background:transparent;color:var(--muted,#9cadc0)}.ms-ci-feedback-btn.is-active .ms-icon{color:#30c479}.ms-ci-feedback-btn.is-dislike.is-active{border:0;background:transparent;color:var(--muted,#9cadc0)}.ms-ci-feedback-btn.is-dislike.is-active .ms-icon{color:#e47c84}.ms-ci-feed-footer-actions{display:flex;align-items:center;gap:8px}.ms-ci-report-form{display:flex;flex-direction:column;gap:13px;padding:4px}.ms-ci-report-target{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:9px;background:rgba(255,255,255,.04)}.ms-ci-report-target span,.ms-ci-report-form .ms-ci-field>span{font-size:12px;color:var(--muted,#91a1b5)}.ms-ci-report-form select,.ms-ci-report-form textarea{box-sizing:border-box;width:100%;padding:11px;border:1px solid rgba(54,137,231,.3);border-radius:9px;background:#101b2a;color:#eef4fb;font:inherit}.ms-ci-report-form textarea{resize:vertical;min-height:110px}.ms-ci-report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:3px}

.ms-ci-detail-head, .ms-ci-dialog-head, .ms-ci-current-modal > .ms-modal-head {position:relative; z-index:20; flex:none;}
.ms-ci-detail-menu {
  box-sizing: border-box;
  width: max-content;
  overflow: auto;
  overscroll-behavior: contain;
}
.ms-ci-detail-menu .ms-icon { width: 17px; height: 17px; flex: 0 0 17px; color: inherit; }
.ms-ci-detail-menu button.is-danger { color: #ffb1a8; }
.ms-ci-detail-menu button[data-ci-report-open] .ms-icon { color: #ef6c72; }
.ms-ci-detail-menu:not([hidden]) {
  transform-origin: top right;
  animation: ms-ci-detail-menu-open 170ms cubic-bezier(.2,.8,.2,1) both;
}

.ms-ci-detail-menu.is-closing {
  pointer-events: none;
  animation: ms-ci-detail-menu-close 140ms ease-in both;
}

@keyframes ms-ci-detail-menu-open {
  from { opacity: 0; transform: translate3d(var(--ci-menu-x, 5px),var(--ci-menu-y, -5px),0) scale(.82); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes ms-ci-detail-menu-close {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 0; transform: translate3d(var(--ci-menu-x, 5px),var(--ci-menu-y, -5px),0) scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-ci-detail-menu:not([hidden]),
  .ms-ci-detail-menu.is-closing { animation: none; }
}
.ms-ci-views { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: var(--muted, #91a1b5); font-size: 12px; line-height: 1; white-space: nowrap; }
.ms-ci-views .ms-icon { width: 16px; height: 16px; color: inherit; }
.ms-ci-detail-footer-left > .ms-ci-views { margin-left: 6px; }
/* Full integration: fixed author and title; only the body owns scrolling. */
.ms-ci-detail-author-slot {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
button.ms-ci-detail-author {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.ms-ci-detail-author:hover,
button.ms-ci-detail-author:active {
  background: transparent;
  box-shadow: none;
}
button.ms-ci-detail-author:focus-visible {
  outline: 1px solid #7fb7ff;
  outline-offset: 3px;
}
.ms-ci-detail-author-avatar {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}
.ms-ci-detail-author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
.ms-ci-detail-author-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.ms-ci-detail-author-copy strong,
.ms-ci-detail-author-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-ci-detail-author-copy strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
}
.ms-ci-detail-author-status {
  font-size: 10px;
  line-height: 13px;
  color: #7c8895;
}
.ms-ci-detail-author-status.is-online { color: #39b87f; }
.ms-ci-detail-author-status[hidden] { display: none; }
.ms-ci-detail-heading-fixed {
  flex: 0 0 auto;
  min-width: 0;
  padding: 12px 14px 0;
  border: 0;
  background: transparent;
  text-align: center;
  overflow-wrap: anywhere;
}
.ms-ci-detail-heading-fixed .ms-ci-detail-title {
  margin: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.ms-ci-detail-heading-fixed .ms-ci-topic {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
}

.ms-ci-detail-head > .ms-ci-detail-author-slot { justify-self: stretch; }
.ms-ci-dialog-head > .ms-ci-detail-author-slot { align-self: center; }
.ms-ci-link-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #26384b);
  border-radius: var(--br, 5px);
  background: var(--panel, #142130);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  margin: 8px 0;
}
.ms-ci-link-preview-image { display: block; width: auto; max-width: 100%; max-height: 260px; object-fit: contain; align-self: center; }
.ms-ci-feed-link-preview {
  width: 100%;
  max-width: 500px;
  min-width: 0;
}
.ms-ci-link-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(127, 183, 255, .08); color: var(--accent, #58b0fb); }
.ms-ci-link-thumb-placeholder svg { width: 24px; height: 24px; }
.ms-ci-link-preview-copy { display: flex; flex-direction: column; gap: 5px; padding: 10px; overflow-wrap: anywhere; white-space: normal; }
.ms-ci-link-preview-copy > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-ci-link-preview-copy small { color: var(--text-muted, #91a4b7); }
.ms-int-inline-link { display: block; position: relative; max-width: 500px; }
.ms-int-inline-link .ms-ci-link-preview-copy { padding-right: 30px; }
.ms-int-inline-link, .ms-int-input .ms-int-inline-youtube {
  position: relative; display: block; width: min(100%, 500px); max-width: 100%; margin: 8px 0;
}
.ms-ci-youtube-draft {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%;
  padding: 8px 30px 8px 8px; border: 1px solid var(--border, #26384b);
  border-radius: var(--br, 5px); background: rgba(127, 183, 255, .06); color: inherit;
}
.ms-ci-youtube-draft > img { display: block; width: 96px; max-width: 28%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; flex: none; border-radius: var(--br, 5px); }
.ms-ci-youtube-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; white-space: normal; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.ms-ci-youtube-copy strong { color: var(--text, #edf3ff); font-size: 14px; line-height: 1.3; }
.ms-ci-youtube-copy > span { font-size: 12px; line-height: 1.35; color: var(--text-muted, #91a4b7); }
.ms-ci-youtube-copy small { font-size: 11px; color: var(--text-muted, #91a4b7); }
.ms-ci-youtube-copy .ms-ci-youtube-label { color: #7fb7ff; }
.ms-ci-youtube-draft .ms-ci-youtube-copy { gap: 2px; }
.ms-ci-youtube-draft strong, .ms-ci-youtube-draft [data-ci-youtube-description] {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ms-ci-youtube-draft strong { font-size: 13px; }
.ms-ci-youtube-copy [hidden] { display: none; }
.ms-ci-youtube-card > .ms-ci-youtube { width: 100%; margin: 0; border: 0; border-radius: 0; }
.ms-ci-youtube-card > .ms-ci-youtube-copy { padding: 10px; }
.ms-ci-youtube-card .ms-ci-youtube-copy > span:not([hidden]) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-ci-feed-body-media--youtube { box-sizing: border-box; border: 1px solid var(--border, #26384b); background: var(--panel, #142130); }
.ms-ci-feed-body-media--youtube .ms-ci-feed-media-visual { border-radius: 0; }
.ms-ci-feed-body-media--youtube .ms-ci-feed-youtube-meta { padding: 10px; margin: 0; height: auto; }
.ms-ci-limits + .ms-ci-total { margin-top: 12px; }
.ms-ci-settings-group { margin: 0; padding: 0; border: 1px solid var(--border, #26384b); border-radius: 10px; background: rgba(20,33,48,.7); overflow: hidden; }
.ms-ci-settings-group > h3 { margin: 0; padding: 12px; color: #68b9f8; font-size: 14px; }
.ms-ci-settings-group > .ms-ci-field, .ms-ci-settings-group > .ms-ci-reward-filter, .ms-ci-settings-group > .ms-ci-autoplay-setting { margin: 0; padding: 12px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.055); }
.ms-ci-settings-group > :last-child { border-bottom: 0; }
.ms-ci-settings.ms-ci-settings-group { gap: 0; }
.ms-ci-settings-group > .ms-setting-row { margin: 0; padding: 12px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.055); background: transparent; }
.ms-ci-settings-group > .ms-setting-row:last-child { border-bottom: 0; }

/* Full integration only: mobile uses the available width; desktop caps players
   and link cards. Feed cards, images and the editor keep their own layout. */
[data-ci-media-owner] .ms-ci-youtube,
[data-ci-media-owner] .ms-ci-full-media:has(> video) {
  width: 100%;
  max-width: 100%;
}
[data-ci-media-owner] .ms-ci-full-media > video {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 769px) {
  [data-ci-media-owner] .ms-ci-link-preview,
  [data-ci-media-owner] .ms-ci-youtube,
  [data-ci-media-owner] .ms-ci-full-media:has(> video) {
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
  }
}
.ms-ci-animated-emoji { display: inline-block; width: 1.65em; height: 1.65em; vertical-align: middle; }
.ms-ci-animated-emoji img { width: 100%; height: 100%; object-fit: contain; }
[data-ci-emoji] .ms-ci-animated-emoji { width: 36px; height: 36px; }
[data-ci-emoji][hidden] { display: none !important; }
.ms-ci-draft-edit .ms-ci-draft-title,
.ms-ci-draft-edit .ms-ci-draft-topic select,
.ms-ci-draft-edit .ms-ci-topic-select {
  width:100%; box-sizing:border-box; background:transparent; color:inherit;
  border:0; border-radius:0; outline:0; padding:6px 0;
  font:inherit; box-shadow:inset 0 -1px rgba(145,160,180,.24); transition:box-shadow .15s ease;
}
.ms-ci-draft-edit .ms-ci-draft-title {font-size:15px; font-weight:600; text-align:center;}
.ms-ci-draft-edit .ms-ci-draft-topic {display:block; width:min(100%,160px); margin:4px auto 0; color:var(--muted,#90a0b3); font-size:12px; text-align:center;}
.ms-ci-draft-edit .ms-ci-draft-topic select {color:var(--text,#e7edf5); color-scheme:dark; text-align:center;}
.ms-ci-draft-edit > .ms-ci-detail-heading-fixed {flex:none;}
.ms-ci-draft-edit [data-ci-editor] {
  flex:0 0 auto; box-sizing:border-box; width:100%; min-height:52px; max-height:none;
  padding:10px 0; border:0; border-radius:0; background:transparent; outline:0;
  overflow:visible; box-shadow:inset 0 -1px rgba(145,160,180,.24);
  transition:box-shadow .15s ease;
}
.ms-ci-draft-edit .ms-ci-draft-title:focus,
.ms-ci-draft-edit .ms-ci-draft-topic select:focus,
.ms-ci-draft-edit .ms-ci-topic-select:focus-visible,
.ms-ci-draft-edit .ms-ci-topic-select[aria-expanded="true"],
.ms-ci-draft-edit [data-ci-editor]:focus {box-shadow:inset 0 -1px var(--accent,#58b0fb);}
.ms-ci-draft-edit > .ms-modal-body,
.ms-ci-draft-edit > .ms-ci-detail-scroll {
  display:flex; flex-direction:column; flex:1 1 0; min-height:0; max-height:none;
  overflow:auto; overscroll-behavior:contain; gap:0; padding:10px 16px;
}
.ms-ci-draft-edit > .ms-modal-actions,
.ms-ci-draft-edit > .ms-ci-detail-footer {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  flex:none; gap:10px; padding:10px 16px;
}
.ms-ci-draft-tools,.ms-ci-draft-actions {display:flex; align-items:center; gap:8px;}
.ms-ci-form[hidden] {display:none !important;}
.ms-ci-create-page .ms-ci-limits {margin-top:12px; gap:12px;}
.ms-ci-draft-edit input[type="number"] {box-sizing:border-box; width:100%; padding:8px; border:1px solid var(--border,#26384b); border-radius:5px; background:rgba(127,183,255,.06); color:inherit; font:inherit;}
.ms-ci-create-page .ms-ci-draft-actions [data-ci-create-cancel] {background:rgba(100,42,42,.22); color:#efb7b2; box-shadow:0 0 0 1px rgba(211,105,97,.32);}
.ms-ci-create-page .ms-ci-draft-actions [data-ci-submit] {background:rgba(32,109,74,.22); color:#ade0c3; box-shadow:0 0 0 1px rgba(64,174,116,.32);}
.ms-ci-draft-actions [data-ci-draft-cancel] {background:rgba(100,42,42,.22); color:#efb7b2; box-shadow:0 0 0 1px rgba(211,105,97,.32);}
.ms-ci-draft-actions [data-ci-draft-save] {background:rgba(32,109,74,.22); color:#ade0c3; box-shadow:0 0 0 1px rgba(64,174,116,.32);}
.ms-ci-draft-actions [data-ci-draft-cancel]:hover {background:rgba(100,42,42,.36);}
.ms-ci-draft-actions [data-ci-draft-save]:hover {background:rgba(32,109,74,.36);}
.ms-ci-draft-edit [data-ci-draft-status] {flex:none; max-height:25%; overflow:auto; font-size:13px; color:var(--muted,#90a0b3); padding:8px 0;}
.ms-ci-draft-edit [data-ci-draft-status]:empty {display:none;}
.ms-ci-draft-edit .ms-ci-detail-menu-wrap {visibility:hidden;}
.ms-modal.ms-ci-draft-edit, .ms-ci-detail-card.ms-ci-draft-edit {
  display:flex; flex-direction:column; box-sizing:border-box;
  height:auto;
  max-height:min(820px,calc(var(--ci-editor-viewport-height,100dvh) - 16px)); min-height:0; overflow:hidden;
}
.ms-ci-draft-edit > .ms-modal-body, .ms-ci-draft-edit > .ms-ci-detail-scroll {flex:0 1 auto;}
.ms-modal.ms-ci-sized-detail, .ms-ci-detail-card.ms-ci-sized-detail {
  box-sizing:border-box; height:auto; min-height:var(--ci-dialog-min-height,0px);
  max-height:var(--ci-dialog-max-height,calc(100dvh - 24px)); overflow:hidden;
}
.ms-ci-sized-detail > .ms-modal-body, .ms-ci-sized-detail > .ms-ci-detail-scroll {flex:1 1 auto; min-height:0; max-height:none; overflow:auto;}
.ms-ci-sized-detail > .ms-modal-head, .ms-ci-sized-detail > .ms-ci-detail-head,
.ms-ci-sized-detail > .ms-ci-detail-heading-fixed, .ms-ci-sized-detail > .ms-modal-actions,
.ms-ci-sized-detail > .ms-ci-detail-footer {flex:none;}
[data-ci-emoji][data-ci-floating] {
  position:absolute; inset:auto; top:0; left:0; box-sizing:border-box;
  width:355px; max-width:calc(100% - 16px); height:300px; max-height:none; min-height:0;
  z-index:100; background:var(--bg-box-modal,#101a26); border:1px solid rgba(54,137,231,.28);
  border-radius:5px; overflow:hidden;
}
[data-ci-emoji][data-ci-floating] > .ms-compose-picker-head {flex:0 0 auto;}
[data-ci-emoji][data-ci-floating] > [data-ci-emoji-scroll] {flex:1 1 0; min-height:0; overflow:auto; overscroll-behavior:contain;}
.ms-ci-draft-edit .ms-ci-topic-select {position:relative; padding:6px 24px 6px 8px; min-height:30px; text-align:center; color:var(--text,#e7edf5); cursor:pointer;}
.ms-ci-topic-select::after {content:""; position:absolute; right:8px; top:12px; width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);}
.ms-ci-topic-options {display:flex;flex-direction:column;gap:2px;position:absolute; z-index:110; width:160px; max-height:240px; overflow:auto; box-sizing:border-box; border:1px solid rgba(54,137,231,.28); border-radius:5px; background:#122031; color:#e7edf5; padding:4px; box-shadow:0 8px 24px #0005; overscroll-behavior:contain;}
.ms-ci-topic-options > button {display:block; width:100%; min-height:26px; padding:4px 10px; border:0; border-radius:5px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;}
.ms-ci-topic-options > button[aria-selected="true"] {background:#24517b66; color:#8dcbff;}
.ms-ci-topic-options > button:focus-visible {outline:2px solid #58b0fb; outline-offset:-2px;}
[data-ci-emoji] .ms-compose-picker-grid--emoji {display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; padding:6px;}
[data-ci-emoji] .ms-emoji-btn {display:flex; align-items:center; justify-content:center; width:100%; height:42px; padding:3px; border:0; border-radius:8px; font-size:32px; line-height:1; background:transparent; color:inherit; cursor:pointer;}
[data-ci-emoji] .ms-ci-animated-emoji {display:inline-flex; width:32px; height:32px; flex:none;}
[data-ci-emoji] .ms-emoji-cats {display:flex; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; gap:3px; padding:4px 6px; scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x; overscroll-behavior-x:contain; user-select:none; cursor:grab;}
[data-ci-emoji] .ms-emoji-cats::-webkit-scrollbar {display:none; width:0; height:0;}
[data-ci-emoji] .ms-emoji-cats.is-dragging {cursor:grabbing;}
[data-ci-emoji] .ms-emoji-cat {flex:0 0 28px; width:28px; min-width:28px; height:30px; padding:2px; border-radius:7px; font-size:17px; cursor:inherit;}
.ms-ci-static-emoji {display:inline-block; font-size:1.65em; line-height:1; vertical-align:middle; white-space:nowrap;}

.ms-ci-own-action--icon.is-danger, .ms-ci-own-action--icon.is-danger:focus, .ms-ci-own-action--icon.is-danger:hover {border:1px solid rgba(255,100,100,.4); box-shadow:none;}
.ms-ci-own-action--icon.is-danger:focus-visible {outline:2px solid #ff9c9c; outline-offset:2px;}
.ms-ci-detail-menu, .ms-ci-detail-menu button {border-radius:5px;}
.ms-ci-own-action[data-ci-edit-unpaid] .ms-icon {color:var(--accent,#58b0fb);}
.ms-ci-draft-edit .ms-ci-detail-author-slot {display:flex; align-items:center; justify-content:center; min-width:0;}
.ms-ci-edit-heading {margin:0; text-align:center; font-size:16px; font-weight:600; color:var(--text,#e7edf5);}
.ms-ci-picker-dock {flex:0 0 auto; height:0; min-height:0; margin:0 16px; overflow:hidden; transition:height 170ms cubic-bezier(.2,.8,.2,1);}
.ms-ci-picker-dock.is-open {height:min(260px,calc(var(--ci-editor-viewport-height,100dvh) * .46));}
[data-ci-emoji][data-ci-docked] {position:relative; inset:auto; box-sizing:border-box; display:flex; flex-direction:column; width:355px; max-width:100%; height:100%; max-height:100%; border:1px solid rgba(54,137,231,.28); border-radius:5px; background:var(--bg-box-modal,#101a26); overflow:hidden;}
[data-ci-emoji][data-ci-docked] > .ms-compose-picker-head, [data-ci-emoji][data-ci-docked] > .ms-ci-picker-pages {flex:none;}
[data-ci-emoji][data-ci-docked] > [data-ci-emoji-scroll] {flex:1 1 0; min-height:0; overflow:auto; overscroll-behavior:contain;}
[data-ci-emoji][data-ci-floating]:not([hidden]), [data-ci-emoji][data-ci-docked]:not([hidden]) {animation:ms-ci-detail-menu-open 170ms cubic-bezier(.2,.8,.2,1) both;}
[data-ci-emoji].is-closing {pointer-events:none; animation:ms-ci-detail-menu-close 140ms ease-in both !important;}
.ms-ci-unsaved-layer {position:absolute; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:16px; background:#06101bcc;}
.ms-ci-unsaved {box-sizing:border-box; max-width:420px; padding:18px; border:1px solid rgba(54,137,231,.28); border-radius:5px; color:var(--text,#e7edf5); background:var(--bg-box-modal,#101a26); box-shadow:0 12px 32px #0005;}
.ms-ci-unsaved h3 {margin:0 0 12px; font-size:16px;}
.ms-ci-unsaved p {margin:0 0 20px;}
.ms-ci-unsaved .ms-ci-draft-actions {justify-content:flex-end; flex-wrap:wrap;}
.ms-ci-unsaved [data-ci-discard] {border:1px solid #b76a65; background:#733b3b44; color:#ffc1bb; box-shadow:none;}
@media (prefers-reduced-motion:reduce) {
  .ms-ci-picker-dock {transition:none;}
  [data-ci-emoji][data-ci-floating]:not([hidden]), [data-ci-emoji][data-ci-docked]:not([hidden]), [data-ci-emoji].is-closing {animation:none !important;}
}
[data-ci-emoji] .ms-compose-picker-tabs {display:flex; gap:4px; padding:3px;}
[data-ci-emoji] .ms-compose-picker-tab {flex:1; border-radius:5px;}
[data-ci-emoji] button:focus-visible {outline:2px solid #58b0fb; outline-offset:-2px;}
[data-ci-emoji] .is-active {background:#24517b66; color:#8dcbff;}
.ms-ci-picker-pages {display:flex; align-items:center; justify-content:space-between; gap:6px; flex:none; min-height:32px; padding:2px 6px; border-top:1px solid #90a0b326; color:#90a0b3; font-size:12px;}
.ms-ci-picker-pages > button {width:32px; height:30px; border:0; border-radius:6px; font-size:24px; line-height:1; color:#8dcbff; background:transparent;}
.ms-ci-picker-pages > button:disabled {opacity:.3; cursor:default;}
@media (hover:hover) {
  .ms-ci-topic-options > button:hover, [data-ci-emoji] .ms-emoji-btn:hover {background:#24517b66;}
}
@media (hover:none) {
  .ms-ci-detail-menu-toggle:hover:not(.is-active) {background:transparent;}
}

/* Lifecycle dates and per-condition counters; no animated layout or media work. */
.ms-ci-own-stats { display:flex; align-items:flex-start; gap:7px; }
.ms-ci-own-stats .ms-ci-counter { display:flex; flex-direction:column; gap:3px; white-space:nowrap; }
.ms-ci-own-stats .ms-ci-counter-separator { flex:0 0 auto; }
.ms-ci-counter.is-remaining { color:#49bd8c; }
.ms-ci-counter.is-complete, .ms-ci-cancelled-label, .ms-ci-completed-label { color:#ed7272; }
.ms-ci-counter small, .ms-ci-own-date, .ms-ci-completion-date { font-size:11px; }
.ms-ci-counter small { white-space:normal; color:inherit; }
.ms-ci-counter small .ms-ci-counter-date { display:inline-block; white-space:nowrap; font-size:inherit; color:inherit; overflow:visible; }
.ms-ci-own-date { display:block; margin-top:4px; opacity:.8; }
.ms-ci-history-date { display:block; }
.ms-ci-own-row .ms-ci-history-date { font-size:11px; }
.ms-ci-full-media[data-ms-image-viewer], .ms-ci-gallery-item[data-ms-image-viewer] { cursor:zoom-in; }
.ms-ci-history-actions { grid-column:1 / -1; width:100%; justify-content:space-between; }
.ms-ci-refund-summary p { margin:0 0 12px; }

/* Own cards: controls stay in the body; dates and usage share a quiet footer. */
.ms-ci-own-row.has-footer { grid-template-columns:minmax(0,1fr) auto; }
.ms-ci-own-row.has-footer.has-media { grid-template-columns:44px minmax(0,1fr) auto; }
.ms-ci-own-row.has-footer > .ms-ci-own-actions { grid-column:-2 / -1; gap:8px; }
.ms-ci-own-footer {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:start;
  column-gap:12px;
  margin:0 -16px -8px;
  padding:8px 16px;
  border-radius:0 0 var(--br) var(--br);
  cursor:inherit;
}
.ms-ci-own-dates { display:flex; flex-direction:column; gap:3px; }
.ms-ci-own-footer .ms-ci-own-date { margin:0; white-space:nowrap; line-height:1.4; }
.ms-ci-own-footer > .ms-ci-payment-due { justify-self:end; text-align:right; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.ms-ci-own-footer .ms-ci-payment-due .ms-ci-usd-hint { text-align:right; }
.ms-ci-own-footer .ms-ci-own-stats {
  display:grid;
  grid-template-columns:minmax(0,max-content) auto minmax(0,max-content);
  justify-self:end;
  align-items:start;
  max-width:100%;
  gap:6px;
  line-height:1.4;
}
.ms-ci-own-footer .ms-ci-counter { overflow:visible; }
.ms-ci-own-footer .ms-ci-counter:first-child { align-items:flex-end; text-align:right; }
.ms-ci-own-footer .ms-ci-counter:last-child { align-items:flex-start; text-align:left; }
.ms-ci-own-footer .ms-ci-counter small { max-width:100%; }
@media (max-width:480px) {
  .ms-ci-own-footer { column-gap:8px; }
  .ms-ci-own-footer .ms-ci-own-date,
  .ms-ci-own-footer .ms-ci-counter small { font-size:10px; }
}