/*
  IMPORTANT: This application MUST be placed in the /jwc folder.
  Server access URL will be ip/jwc
  DO NOT change this path structure under any circumstances.
*/
/*
  Responsive Styles for Shared Components and Index Page Layout
*/

/* 响应式调整 */
@media (max-width: 1100px) { /* 中等屏幕/较小笔记本 */
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 变为2列 */
    gap: var(--spacing-md);
  }
}

/* Rules specific to the index page initial view */
@media (max-width: 960px) {
  /* Add specific index page adjustments for this breakpoint if needed */
}

@media (max-width: 768px) {
  /* Base variable adjustments */
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
  }
  /* Layout adjustments */
  .app-header { height: 56px; padding: 0 calc(env(safe-area-inset-right, 0) + var(--spacing-md)) 0 calc(env(safe-area-inset-left, 0) + var(--spacing-md)); }
  .app-logo { width: 32px; height: 32px; }
  .app-title, .app-subtitle { font-size: 16px; }
  .title-divider { margin: 0 var(--spacing-sm); height: 16px; }
  .user-dropdown { padding: 6px 12px; font-size: 13px; }

  .main-wrapper { padding: var(--spacing-lg) var(--spacing-sm); }
  .main-content { gap: var(--spacing-lg); }

  /* Initial Content adjustments (index.html) */
  .chat-input-wrapper { /* Style for initial sticky state on index page */
    max-width: calc(100% - var(--spacing-md));
    bottom: var(--spacing-md);
  }
  .suggestion-bubbles { gap: var(--spacing-sm); }
  .welcome-title { font-size: 1.4rem; }
  .welcome-text { font-size: 1rem; }

  /* Card grid and card adjustments for single column layout on smaller screens */
  .card-grid {
    grid-template-columns: 1fr; /* 变为1列，垂直堆叠 */
    gap: var(--spacing-lg);
  }

  /* Card adjustments */
  .card-header { padding: var(--spacing-md); gap: var(--spacing-sm); }
  .card-icon { width: 36px; height: 36px; font-size: 18px; }
  .card-header h3 { font-size: 16px; }
  .card-body { padding: var(--spacing-md); }
  .card-header-link { padding: 4px 6px; }
  .card-header-link i { font-size: 13px; }
  .resources-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: var(--spacing-sm); }

  /* Component adjustments (shared or index-specific) */
  .input-container { padding: var(--spacing-sm); padding-left: var(--spacing-md); }
  .send-button { width: 40px; height: 40px; min-width: 40px; }
  .send-button i { font-size: 16px; }
  .suggestion-bubble { padding: 6px var(--spacing-md); font-size: 12px; }
  .suggestion-bubble i { font-size: 12px; }
  .resource-item i { font-size: 20px; }
  .resource-item span { font-size: 11px; }

  /* Chat view specific adjustments were moved to chat_*.css */

  /* Responsive adjustments for the input area with context toggles */
  .input-main-area {
    /* On smaller screens, ensure the textarea doesn't get overly squashed by buttons */
    min-width: 0; /* Allow shrinking */
  }
  .context-toggle-buttons {
    flex-wrap: wrap; /* Allow buttons to wrap onto the next line */
    gap: var(--spacing-xs); /* Reduce gap when wrapped */
    justify-content: flex-start; /* Keep alignment when wrapped */
    margin-bottom: var(--spacing-xs); /* Ensure space below if wrapped */
  }
  .context-toggle-button {
    padding: var(--spacing-xs) var(--spacing-sm); /* Slightly smaller padding */
    font-size: 12px; /* Slightly smaller font */
  }
  .context-toggle-button i {
    font-size: 13px; /* Adjust icon size accordingly */
  }
}

@media (max-width: 600px) { /* 平板竖屏/大手机 */
   /* Further index-specific adjustments for this size */

   /* Chat input adjustments for very small screens */
   .input-container {
     padding: var(--spacing-xs); /* Reduce padding further */
   }
   .chat-input {
     font-size: 14px; /* Slightly smaller font for input */
   }
   .send-button {
     margin-left: var(--spacing-xs); /* Reduce margin next to send button */
   }
   .context-toggle-button {
    font-size: 11px; /* Even smaller font for tiniest screens if buttons are still too big */
    padding: 4px 6px; /* Tighter padding */
   }
   .context-toggle-button i {
    font-size: 12px;
   }
}

@media (max-width: 480px) {
  /* Layout adjustments */
  .app-header { padding: 0 calc(env(safe-area-inset-right, 0) + var(--spacing-sm)) 0 calc(env(safe-area-inset-left, 0) + var(--spacing-sm)); }
  .app-title { display: none; }
  .title-divider { display: none; }
  .app-subtitle { font-size: 15px; margin-left: var(--spacing-xs); }
  .user-dropdown span { display: none; }
  .user-dropdown { padding: var(--spacing-sm); }
  .dropdown-arrow { margin-left: 0; }

  /* Card adjustments (index page) */
  .card-grid { gap: var(--spacing-md); } /* 调整单列时间距 */
  /* Further index-specific adjustments for small screens */
}