/* crm-window.css — the countdown above the composer. See crm-window.js.
 *
 * Four states, and the colour is the message: there is time, it is getting on,
 * it is nearly gone, it has gone. Each carries its own tinted ground rather
 * than coloured text on grey, because a thin coloured line on a dark panel is
 * the first thing an eye skips.
 */

.crm-win {
  --win-bg: rgba(18, 161, 80, .12);
  --win-line: rgba(18, 161, 80, .38);
  --win-ink: #0f8a4a;

  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 6px;
  padding: 6px 12px;
  border: 1px solid var(--win-line);
  border-radius: 999px;
  background: var(--win-bg);
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--win-ink);
  width: fit-content;
  max-width: calc(100% - 24px);
}

.crm-win__ic {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  flex: 0 0 auto;
}

/* The number is the point of the chip, so it is the only bold thing in it and
   it never shifts as the digits change. */
.crm-win__t {
  /* Tabular figures matter more now that a digit changes every second: without
     them the whole chip would twitch sideways once a second. */
  min-width: 7ch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  direction: ltr;
  unicode-bidi: embed;
}

.crm-win__n {
  color: inherit;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- states */

/* Orange, not amber: amber sits next to the brand lime and reads as another
   shade of "fine". This one has to look like a different instruction. */
.crm-win.is-soon {
  --win-bg: rgba(194, 65, 12, .13);
  --win-line: rgba(194, 65, 12, .42);
  --win-ink: #c2410c;
}

.crm-win.is-last {
  --win-bg: rgba(185, 28, 28, .13);
  --win-line: rgba(185, 28, 28, .42);
  --win-ink: #b91c1c;
}

.crm-win.is-shut {
  --win-bg: rgba(85, 96, 108, .14);
  --win-line: rgba(85, 96, 108, .34);
  --win-ink: #55606c;
}

/* Under an hour the chip breathes, once every two seconds. Slow enough to
   notice and not fast enough to nag - and stopped for anybody who has asked
   the system for less movement. */
@media (prefers-reduced-motion: no-preference) {
  .crm-win.is-last { animation: crm-win-pulse 2s ease-in-out infinite; }
}

@keyframes crm-win-pulse {
  0%, 100% { border-color: var(--win-line); }
  50% { border-color: rgba(185, 28, 28, .85); }
}

/* ------------------------------------------------------------ dark mode */

:root.dark .crm-win,
.dark .crm-win,
[data-theme="dark"] .crm-win {
  --win-bg: rgba(74, 222, 128, .12);
  --win-line: rgba(74, 222, 128, .34);
  --win-ink: #4ade80;
}

:root.dark .crm-win.is-soon,
.dark .crm-win.is-soon,
[data-theme="dark"] .crm-win.is-soon {
  --win-bg: rgba(251, 146, 60, .14);
  --win-line: rgba(251, 146, 60, .40);
  --win-ink: #fb923c;
}

:root.dark .crm-win.is-last,
.dark .crm-win.is-last,
[data-theme="dark"] .crm-win.is-last {
  --win-bg: rgba(252, 165, 165, .14);
  --win-line: rgba(252, 165, 165, .40);
  --win-ink: #fca5a5;
}

:root.dark .crm-win.is-shut,
.dark .crm-win.is-shut,
[data-theme="dark"] .crm-win.is-shut {
  --win-bg: rgba(152, 161, 173, .12);
  --win-line: rgba(152, 161, 173, .28);
  --win-ink: #98a1ad;
}

/* The platform's own red bar, once ours is saying the same thing better. */
[data-crm-window-hidden] { display: none !important; }