

@media (max-width: 1023px) {
  .email-folders {
    display: none;
  }

  .email-folders.visible {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    background: var(--sk-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  .email-folder-toggle {
    display: flex;
  }

  .email-list {
    width: 340px;
  }

  .email-thread-msg-header { gap: 6px; }
  .email-analytics-cards { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .screening-card-actions { flex-direction: row; }
}

@media (max-width: 767px) {
  .email-toolbar {
    padding: 6px 10px;
    gap: 6px;
  }

  .email-account-filter {
    padding: 3px 10px;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .email-account-filter::-webkit-scrollbar { display: none; }

  .email-account-chip {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .email-compose-btn {
    display: flex;
    font-size: 0;
    line-height: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    flex-shrink: 0;
  }
  .email-compose-btn svg {
    width: 18px;
    height: 18px;
  }
  .email-compose-btn span {
    display: none;
  }

  .companion-blob {
    display: none !important;
  }

  .email-ask-ai-btn {
    display: none;
  }

  .email-search {
    max-width: none;
    flex: 1;
    min-width: 0;
  }

  .email-toolbar-actions {
    gap: 2px;
    flex-shrink: 0;
  }

  .email-columns {
    position: relative;
  }

  .email-list {
    width: 100%;
    border-right: none;
  }

  .email-reader {
    position: absolute;
    inset: 0;
    background: var(--sk-bg);
    z-index: 10;
    display: none;
  }

  .email-reader.mobile-visible {
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .email-list.mobile-hidden {
    display: none;
  }

  .email-reader-back {
    display: flex;
  }

  .email-action-btn span {
    display: none;
  }

  .email-action-divider {
    display: none;
  }

  .email-ai-summary-line {
    padding: 0 12px;
  }

  .email-chips-list {
    padding: 8px 12px 12px;
  }

  .email-chips-label {
    padding: 8px 12px 0;
  }

  .email-reader-header {
    padding: 12px;
  }

  .email-attachments-header {
    padding: 8px 12px;
  }

  .email-attachments-list {
    padding: 0 12px 12px;
  }

  .email-attachment-name {
    max-width: 120px;
  }

  .email-message-item { min-height: 64px; padding: 12px 16px; }
  .email-message-star svg { width: 20px; height: 20px; }
  .email-action-btn { width: 40px; height: 40px; min-width: 44px; min-height: 44px; }
  .email-action-btn svg { width: 18px; height: 18px; }
  .email-reader-actions { gap: 2px; }
  .email-toolbar-btn { min-width: 44px; min-height: 44px; }

  .email-compose-close { min-width: 44px; min-height: 44px; }
  .email-compose-attach,
  .email-compose-discard { min-width: 44px; min-height: 44px; }
  .email-message-star { min-width: 44px; min-height: 44px; }
  .email-bulk-icon { min-width: 44px; min-height: 44px; }

  .email-compose-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    margin: 0 !important;
  }
  .email-compose-send { position: sticky; bottom: 0; }

  .email-message-item:hover .email-message-hover-actions { display: none; }
  .email-message-item:hover .email-message-meta { visibility: visible; }

  .email-accounts-dialog {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh;
    max-height: 80dvh;
    position: fixed;
    bottom: 0;
  }

  .email-thread-msg-header { padding: 6px 10px; gap: 6px; }
  .email-thread-avatar { width: 20px; height: 20px; font-size: var(--font-size-xs); }
  .email-thread-message.expanded .email-thread-avatar { width: 24px; height: 24px; font-size: var(--font-size-xs); }
  .email-thread-msg-sender { font-size: var(--font-size-xs); }
  .email-thread-msg-snippet { font-size: var(--font-size-xs); }
  .email-thread-msg-date { font-size: var(--font-size-xs); }
  .email-thread-message.expanded .email-thread-msg-body { padding: 0 10px 8px; }
  .email-thread-message.expanded .email-thread-msg-header { padding: 6px 10px; }
  .email-thread-older-btn { padding: 6px 10px; min-height: 32px; font-size: var(--font-size-xs); }
  .email-thread-summary { padding: 10px 12px; }
  .email-thread-summary-header { font-size: var(--font-size-base); }
  .email-thread-overview { font-size: var(--font-size-base); }
  .email-thread-points { font-size: var(--font-size-sm); padding-left: 16px; }
  .email-thread-actions-header { font-size: var(--font-size-base); }

  .email-analytics { padding: 12px; }
  .email-analytics-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .email-stat-card { padding: 10px 8px; }
  .email-stat-value { font-size: 18px; }
  .email-stat-label { font-size: var(--font-size-xs); }
  .email-analytics-hours { height: 60px; gap: 1px; }
  .email-hour-label { font-size: var(--font-size-xs); }
  .email-stat-bar-row { gap: 6px; }
  .email-stat-bar-label { font-size: var(--font-size-xs); min-width: 80px; }
  .email-stat-bar-value { font-size: var(--font-size-xs); }

  .screening-card { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .screening-card-avatar { width: 36px; height: 36px; font-size: var(--font-size-sm); }
  .screening-card-actions { flex-direction: row; width: 100%; margin-top: 4px; }
  .screening-approve-btn,
  .screening-reject-btn { flex: 1; min-height: 40px; font-size: var(--font-size-base); text-align: center; }

  .snooze-until-badge { font-size: var(--font-size-xs); padding: 2px 6px; }
  .snooze-remove-btn { min-width: 36px; min-height: 36px; }

  .follow-up-row .email-message-meta { flex-wrap: wrap; }
  .follow-up-wait { font-size: var(--font-size-xs); }
  .follow-up-actions { gap: 4px; }
  .follow-up-action-btn { min-height: 36px; padding: 6px 10px; font-size: var(--font-size-sm); }

  .reply-later-wait { font-size: var(--font-size-xs); padding: 2px 6px; }
  .reply-later-remove-btn { min-width: 36px; min-height: 36px; }

  .email-more-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100%;
    max-height: 60vh;
    max-height: 60dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 0;
    animation: moreSheetUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes moreSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .email-more-item { padding: 14px 20px; min-height: 48px; font-size: var(--font-size-base); }
  .email-more-item svg { width: 18px; height: 18px; }

  .email-snooze-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100%;
    max-height: 50vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: moreSheetUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .email-snooze-option { padding: 14px 20px; min-height: 48px; font-size: var(--font-size-base); }

  .email-schedule-dropdown {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 0 env(safe-area-inset-bottom, 0) !important;
    margin-bottom: 0 !important;
    animation: moreSheetUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10010 !important;
    overflow-y: auto;
  }
  .email-schedule-option {
    padding: 14px 20px;
    min-height: 48px;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
  }
  .email-schedule-custom {
    padding: 14px 20px;
  }
  .email-schedule-picker {
    min-height: 48px;
    font-size: var(--font-size-md);
    padding: 10px 12px;
    border-radius: var(--radius-md);
  }
  .email-schedule-confirm {
    min-height: 48px;
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    padding: 10px 16px;
  }

  .feed-card { padding: 12px; gap: 10px; }
  .feed-card-avatar { width: 36px; height: 36px; }
  .feed-card-body { gap: 2px; }
  .feed-card-sender { font-size: var(--font-size-sm); }
  .feed-card-headline { font-size: var(--font-size-base); }
  .feed-card-snippet { font-size: var(--font-size-sm); }
  .feed-card-date { font-size: var(--font-size-xs); }

  .email-tour-tooltip:not([data-position="center"]) { max-width: calc(100vw - 24px); left: 12px !important; right: 12px !important; }
  .email-tour-text { font-size: var(--font-size-base); }
  .email-tour-next, .email-tour-skip { min-height: 44px; padding: 10px 16px; font-size: var(--font-size-md); }

  .email-emoji-picker {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60vh;
    max-height: 60dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: emojiSheetUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes emojiSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .email-emoji-search {
    padding: 12px 12px 6px;
  }
  .email-emoji-search-input {
    padding: 10px 12px;
    font-size: var(--font-size-md);
    min-height: 44px;
    box-sizing: border-box;
  }

  .email-emoji-categories {
    padding: 4px 8px;
    gap: 2px;
  }
  .email-emoji-categories button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .email-emoji-grid {
    padding: 6px 8px 8px;
    flex: 1;
    min-height: 0;
  }
  .email-emoji-grid-inner {
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
  }
  .email-emoji-btn {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
  }

  .email-emoji-empty {
    padding: 24px 16px;
    font-size: var(--font-size-md);
  }

  .email-emoji-skin-picker {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: center;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    gap: 6px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: emojiSheetUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .email-emoji-skin-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .email-compose-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 4px 8px;
  }
  .email-compose-toolbar::-webkit-scrollbar { display: none; }

  .email-reader-subject {
    font-size: var(--font-size-lg);
    line-height: 1.25;
  }
  .email-reader-meta { margin-bottom: 8px; }
  .email-reader-from { font-size: var(--font-size-sm); }
  .email-reader-email { font-size: var(--font-size-xs); }

  .cmd-palette-trigger { display: none; }

  .email-reply-chips {
    padding: 8px 12px;
  }
  .email-reply-chip {
    min-height: 44px;
    padding: 8px 14px;
    font-size: var(--font-size-base);
  }

  .email-toast {
    bottom: 72px;
  }
  .email-undo-toast {
    bottom: 72px;
  }

  .email-reader-back {
    min-height: 44px;
  }

  .email-images-load-btn,
  .email-images-always-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: var(--font-size-base);
  }

  .email-reader-from {
    flex-wrap: wrap;
  }
  .email-reader-email {
    width: 100%;
    margin-left: 0;
  }

  .email-attachments-header {
    min-height: 44px;
  }

  .email-reader-subject {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .ect-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .ect-dropdown-toggle {
    font-size: var(--font-size-base);
  }

  .email-schedule-arrow {
    min-width: 44px;
    min-height: 44px;
  }
  .email-ai-write-btn,
  .email-overflow-trigger {
    min-width: 44px;
    min-height: 44px;
  }
  .email-compose-footer .btn {
    min-height: 44px;
  }

  .email-compose-toggle-cc button {
    min-height: 44px;
    font-size: var(--font-size-base);
    padding: 8px 0;
  }

  .email-compose-titlebar {
    border-radius: 0;
  }
  .email-compose-footer {
    border-radius: 0;
  }

  .email-settings-close {
    width: 32px;
    height: 32px;
    padding: 6px;
    box-sizing: content-box;
  }
  .email-settings-close svg {
    width: 16px;
    height: 16px;
  }
  .email-settings-tab {
    min-height: 44px;
    padding: 8px 8px;
    font-size: var(--font-size-xs);
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
  }
  .email-settings-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .email-settings-tab span {
    display: inline;
    font-size: 11px;
  }

  .email-account-disconnect .btn,
  .email-account-disconnect button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
  }

  .email-attachment-download {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .email-account-chip {
    font-size: var(--font-size-xs);
    padding: 6px 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .chip-input-container {
    min-height: 44px;
  }
  .email-from-trigger {
    min-height: 44px;
  }
  .email-compose-field input {
    min-height: 44px;
  }

  .email-context-item {
    min-height: 44px;
    padding: 10px 12px;
  }

  .email-snooze-confirm {
    min-height: 44px;
    padding: 10px 16px;
  }

  .email-settings-form-field select {
    min-height: 44px;
  }

  .email-chip {
    min-height: 44px;
    padding: 8px 14px;
  }

  .email-account-chip {
    min-height: 36px;
    padding: 6px 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  
  .email-ask-ai-btn span { display: none; }
  .email-ask-ai-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .email-search {
    max-width: none;
    flex: 1;
  }

  .email-reader-empty {
    padding: 32px 24px;
  }
  .email-reader-empty svg {
    width: 40px;
    height: 40px;
  }
  .email-reader-empty p {
    font-size: var(--font-size-base);
  }

  .email-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .email-reader-actions {
    gap: 2px;
  }

  .email-reader-close,
  .email-accounts-close {
    width: 36px;
    height: 36px;
  }

  .email-account-chip {
    padding: 5px 12px;
    min-height: 32px;
  }

  .email-reader-header {
    padding: 12px 16px;
    overflow: hidden;
  }
  .email-reader-from {
    min-width: 0;
    overflow: hidden;
  }
  .email-reader-from strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .email-snooze-confirm {
    min-height: 44px;
    padding: 10px 16px;
  }

  .email-chip {
    min-height: 36px;
    padding: 6px 14px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .email-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .email-reader-close {
    width: 36px;
    height: 36px;
  }
  .email-account-chip {
    padding: 4px 10px;
    min-height: 30px;
  }
}

.email-folder-item { min-height: 44px; }
.email-compose-btn { min-height: 44px; }
.email-toolbar-btn { min-height: 44px; min-width: 44px; }
.email-message-star { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
#email-search-input { min-height: 44px; }
#email-toolbar-connect { min-height: 44px; }
#email-add-label-btn { min-height: 44px; }
.email-ask-ai-btn { min-height: 44px; }
.sidebar-toggle { min-height: 44px; min-width: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

@media print {
  .email-toolbar,
  .email-folders,
  .email-list,
  .email-compose,
  .email-accounts-modal,
  .email-reply-chips,
  .email-reader-actions,
  .email-ai-bar,
  .sidebar,
  .mobile-nav {
    display: none !important;
  }

  .email-app {
    height: auto !important;
  }

  .email-columns {
    display: block;
  }

  .email-reader {
    flex: none;
    width: 100%;
  }

  .email-reader-header {
    border: none;
  }

  .email-ai-consent-modal {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-skeleton-avatar, .email-skeleton-line { animation: none; }
}

@media (max-height: 500px) {
  .email-tour-tooltip { max-height: calc(100vh - 80px); overflow-y: auto; padding: 12px 16px; }
  .email-tour-text { font-size: var(--font-size-base); margin-bottom: 8px; }
  .email-tour-step { font-size: var(--font-size-xs); margin-bottom: 4px; }
}

@media (max-width: 767px) {
  .email-compose-field input,
  .email-compose-body,
  .chip-input-typing,
  #email-search-input,
  .imap-wizard-field input,
  .imap-wizard-field select,
  .ai-prompt-input-row input,
  .ai-preview-refine,
  .email-tone-custom-input,
  .cmd-palette-input,
  .email-snooze-picker,
  .email-schedule-picker {
    font-size: 16px;
  }

  .email-compose-footer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .email-accounts-close,
  .email-reader-close {
    width: 32px;
    height: 32px;
    padding: 6px;
    box-sizing: content-box;
    
  }
  .email-accounts-close svg,
  .email-reader-close svg {
    width: 16px;
    height: 16px;
  }
}
