/*
 * Assistant responsive layout V1.
 * Layout-only overrides: no color, typography, border, shadow, or animation changes.
 * Standard phone widths from 341px through 640px intentionally inherit the existing mobile UI unchanged.
 * Breakpoints: compact phone <= 340px, tablet 641-1023px, PC >= 1024px.
 */

@media (max-width: 340px) {
  header {
    min-width: 0;
  }

  header .title {
    flex: 1 1 auto;
  }

  .msg.bot .bubble,
  .msg.bot .card,
  .msg.bot .card-header,
  .msg.bot .card-content {
    min-width: 0;
  }

  .msg.bot .card-title,
  .msg.bot .card-title .card-name {
    min-width: 0;
  }

  #textInput,
  #voicePanel {
    min-width: 0;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  #appShell {
    max-width: 860px;
  }

  header {
    padding-left: clamp(24px, 5vw, 48px);
    padding-right: clamp(24px, 5vw, 48px);
  }

  #announcementBar,
  .expire-tip {
    padding-left: clamp(28px, 6vw, 56px);
    padding-right: clamp(28px, 6vw, 56px);
  }

  #messages {
    padding: 24px clamp(28px, 6vw, 56px) 16px;
  }

  .msg.bot {
    width: min(100%, 720px);
  }

  .msg.user .bubble {
    max-width: min(72%, 640px);
  }

  #attachBar,
  #inputBar {
    padding-left: clamp(28px, 6vw, 56px);
    padding-right: clamp(28px, 6vw, 56px);
  }

  .sub-drawer-panel,
  .debug-history-panel {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  #voiceBubble {
    max-width: min(560px, 80vw);
  }

  #pwaTip {
    width: min(560px, calc(100vw - 32px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .module-hub {
    right: max(18px, calc((100vw - 860px) / 2 + 18px));
  }
}

@media (min-width: 1024px) {
  #appShell {
    max-width: 1280px;
  }

  header {
    padding-left: max(40px, calc((100% - 920px) / 2));
    padding-right: max(40px, calc((100% - 920px) / 2));
  }

  #announcementBar,
  .expire-tip {
    padding-left: max(40px, calc((100% - 920px) / 2));
    padding-right: max(40px, calc((100% - 920px) / 2));
  }

  #messages {
    padding: 28px max(40px, calc((100% - 920px) / 2)) 20px;
  }

  .msg.bot {
    width: min(100%, 820px);
  }

  .msg.user .bubble {
    max-width: min(68%, 720px);
  }

  #attachBar,
  #inputBar {
    padding-left: max(40px, calc((100% - 920px) / 2));
    padding-right: max(40px, calc((100% - 920px) / 2));
  }

  .sub-drawer-panel,
  .debug-history-panel {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  #voiceBubble {
    max-width: min(640px, 72vw);
  }

  #pwaTip {
    width: min(600px, calc(100vw - 48px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .module-hub {
    right: max(24px, calc((100vw - 1280px) / 2 + 24px));
  }

  .module-hub-panel {
    width: 300px;
  }
}

@media (max-width: 1023px) and (max-height: 560px) and (orientation: landscape) {
  #messages {
    padding-top: 12px;
  }

  .module-hub {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
}