@media (max-width: 1100px) {
  .app-main {
    padding: 0 14px 28px;
    gap: 12px;
  }
  .chat-container {
    height: 400px;
  }
  .platform-header {
    min-height: 250px;
    padding: 16px;
  }
  .brand-hero {
    padding: 36px 20px 24px;
  }
  .brand-title {
    font-size: 28px;
    letter-spacing: 0.14em;
  }
  .brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
}

@media (max-width: 900px) {
  .app-main {
    padding: 0 10px 20px;
    gap: 10px;
  }
  .chat-container {
    height: 360px;
  }
  .platform-header {
    min-height: 240px;
    padding: 14px;
    gap: 12px;
  }
  .platform-title-main {
    font-size: 16px;
    letter-spacing: 0.12em;
  }
  .stream-title-text {
    font-size: 12px;
    min-height: 34px;
  }
  .stat-value {
    font-size: 15px;
  }
  .cell-value {
    font-size: 15px;
  }
  .uptime-inline {
    font-size: 10.5px;
    padding-left: 7px;
  }
  .metrics-panel {
    padding: 10px;
  }
  .metrics-row {
    gap: 8px;
  }
  .stream-stats-row {
    gap: 8px;
  }
  .stat-label,
  .cell-label {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .metrics-panel-global {
    max-width: 620px;
  }
  .brand-hero {
    padding: 28px 16px 18px;
    gap: 12px;
  }
  .brand-title {
    font-size: 24px;
    letter-spacing: 0.12em;
  }
  .brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .brand-subtitle {
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}

@media (max-width: 640px) {
  .app-main {
    grid-template-columns: 1fr;
    padding: 0 10px 20px;
    gap: 12px;
  }
  .metrics-panel-global {
    grid-column: 1;
    max-width: 100%;
  }
  .platform-column {
    gap: 10px;
  }

  .brand-hero {
    padding: 24px 14px 16px;
    gap: 10px;
  }
  .brand-title {
    font-size: 19px;
    letter-spacing: 0.1em;
  }
  .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .brand-subtitle {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .platform-header {
    min-height: 210px;
    padding: 14px 12px;
    gap: 10px;
  }
  .platform-title-main {
    font-size: 15px;
    letter-spacing: 0.14em;
    padding-bottom: 10px;
  }
  .stream-title-text {
    font-size: 12.5px;
    min-height: 34px;
  }
  .stream-category {
    font-size: 9.5px;
  }
  .stat-value {
    font-size: 14px;
  }
  .cell-value {
    font-size: 14px;
  }
  .cell-delta {
    font-size: 11px;
  }
  .live-indicator {
    font-size: 10px;
    padding: 5px 12px;
  }
  .uptime-inline {
    font-size: 10px;
    padding-left: 6px;
  }

  .chat-container {
    height: 340px;
  }
  .chat-message {
    font-size: 12.5px;
    padding: 6px 9px;
    gap: 8px;
    margin: 2px 5px;
  }
  .chat-message .msg-user {
    max-width: 100px;
  }
  .chat-message .msg-time {
    font-size: 10px;
  }
  .chat-event-badge {
    font-size: 11px;
    padding: 4px 11px;
  }

  .metrics-panel {
    padding: 10px;
  }
  .metrics-row {
    gap: 8px;
  }
  .metrics-cell {
    padding: 10px 6px;
  }
}

@media (max-width: 380px) {
  .chat-message {
    font-size: 12px;
    padding: 5px 8px;
  }
  .chat-message .msg-user {
    max-width: 80px;
  }
  .stat-value,
  .cell-value {
    font-size: 13px;
  }
  .platform-title-main {
    font-size: 14px;
  }
  .brand-title {
    font-size: 17px;
  }
}