/* BIONIC v1.3.9 — Mobile Ultra Compact / The Rule of YOU
 * Scoped to phones. Keeps the desktop layout and all existing client settings.
 * Main visual idea: two short, horizontal glanceable information strips.
 */
@media (max-width: 600px) {
  .bcs-standby .bcs-standby-shell {
    gap: 8px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .bcs-standby .bcs-standby-content { gap: 10px; }
  .bcs-standby .bcs-standby-story { padding: 14px 0 1px; }
  .bcs-standby .bcs-standby-eyebrow { margin-bottom: 10px; }

  /* Reduce long Thai company headings by approximately 17–20%, never desktop. */
  .bcs-standby .bcs-standby-story h1.bcs-headline {
    font-size: clamp(18px, 5.2vw, 27px);
    line-height: 1.24;
    letter-spacing: -0.018em;
    margin-bottom: 10px;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }
  .bcs-standby .bcs-standby-story p.bcs-standby-description {
    font-size: 11.5px;
    line-height: 1.5;
  }
  .bcs-standby .bcs-standby-countdown-heading { margin-top: 11px; }

  /* Two slim widgets on one row; online status remains a short strip below. */
  .bcs-standby .bcs-standby-widgets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .bcs-standby .bcs-standby-glass {
    border-radius: 11px;
    box-shadow: 0 6px 20px rgba(0, 8, 32, .30), inset 0 1px rgba(238, 251, 255, .16);
  }
  .bcs-standby .bcs-standby-clock-card,
  .bcs-standby .bcs-weather {
    grid-column: span 1;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 6px 8px;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }
  /* The card accessible name retains the semantic label for screen readers. */
  .bcs-standby .bcs-standby-clock-card .bcs-standby-widget-title {
    flex: 0 0 15px;
    width: 15px;
    overflow: hidden;
    font-size: 0;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
  }
  .bcs-standby .bcs-standby-clock-card .bcs-standby-widget-title span {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    color: #82e4ff;
  }
  .bcs-standby .bcs-standby-time {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(20px, 5.45vw, 24px);
    font-weight: 450;
    line-height: 1;
    letter-spacing: -.055em;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  /* Date is available in the DOM and on desktops, but removed visually on phones. */
  .bcs-standby .bcs-standby-clock-card .bcs-standby-date,
  .bcs-standby .bcs-standby-clock-card .bcs-mobile-date { display: none !important; }

  .bcs-standby .bcs-weather .bcs-standby-widget-title { display: none; }
  .bcs-standby .bcs-weather-body {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
  }
  .bcs-standby .bcs-weather-symbol { font-size: 21px;line-height: 1;flex: 0 0 auto; }
  .bcs-standby .bcs-weather-details { display: flex; align-items: center; gap: 0; min-width: 0; }
  .bcs-standby .bcs-weather-details strong {
    font-size: clamp(21px, 5.9vw, 25px);
    font-weight: 520;
    letter-spacing: -.045em;
    line-height: 1;
    white-space: nowrap;
  }
  .bcs-standby .bcs-weather-details span,
  .bcs-standby .bcs-weather-foot { display: none; }

  .bcs-standby .bcs-standby-health {
    grid-column: 1/-1;
    min-height: 36px;
    height: 36px;
    padding: 5px 12px;
    gap: 9px;
    border-radius: 11px;
  }
  .bcs-standby .bcs-standby-health .bcs-health-short { font-size: 11px; }
  .bcs-standby .bcs-standby-health .bcs-standby-status-dot { width: 10px;height: 10px;flex-basis:10px; }
  .bcs-standby .bcs-standby-health .bcs-standby-status-dot:after { inset: 2.5px; }
  .bcs-standby .bcs-standby-health .bcs-standby-bars { font-size: 12px; }

  /* Smaller action, safely above typical floating contact/chat buttons. */
  .bcs-standby .bcs-standby-toolbar #bcs-open-wallpapers {
    flex: 0 0 auto;
    width: min(54vw, 186px);
    max-width: 100%;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 11px;
    text-align: center;
  }
  .bcs-standby .bcs-standby-toolbar { padding-bottom: 62px; }
  .bcs-standby .bcs-standby-footer { margin-top: 4px; gap: 7px; padding-top: 10px; }
}
@media (max-width: 360px) {
  .bcs-standby .bcs-standby-shell { padding-left: 14px; padding-right: 14px; }
  .bcs-standby .bcs-standby-story h1.bcs-headline { font-size: clamp(18px, 5.3vw, 21px); }
  .bcs-standby .bcs-standby-clock-card,
  .bcs-standby .bcs-weather { padding-left: 5px; padding-right: 5px; gap: 4px; }
  .bcs-standby .bcs-standby-time { font-size: 20px; }
  .bcs-standby .bcs-weather-symbol { font-size: 19px; }
  .bcs-standby .bcs-weather-details strong { font-size: 21px; }
}