/* apps/referral.css (modern redesign) */

/* Global font definition */
.referral-title,
.referral-intro,
.referral-card,
.referral-output-segmented button,
.referral-submit-btn,
.referral-copy-pill,
.referral-file-item,
.referral-output-description,
#referral-text,
#referral-output-type {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Title & intro */
.referral-title {  
  font-size: clamp(1.8rem, 3vw, 2.4rem);  
  letter-spacing: -.5px;  
  margin: 0 0 .75rem;  
  font-weight: 600;
}

.referral-intro {  
  margin-top: 0;  
  margin-bottom: 1.75rem;  
  font-size: .95rem;  
  color: #b4b4b4;  
  max-width: 62ch;  
}

/* Card */
.referral-card {  
  position: relative;  
  background: linear-gradient(135deg, rgba(46,46,46,.9), rgba(28,28,28,.85));  
  backdrop-filter: blur(12px) saturate(140%);  
  -webkit-backdrop-filter: blur(12px) saturate(140%);  
  border: 1px solid rgba(255,255,255,0.08);  
  border-radius: 20px;  
  padding: clamp(1rem, 2vw, 2rem);  
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.03) inset;  
  overflow: hidden;  
  animation: referralFadeIn .6s ease forwards;  
}

@keyframes referralFadeIn {  
  from { opacity: 0; transform: translateY(12px); }  
  to { opacity: 1; transform: translateY(0); }  
}

/* Drop zone */
.referral-file-drop-zone {  
  border: 1.5px dashed #3d3d3d;  
  border-radius: 16px;  
  padding: 1.75rem 1.25rem;  
  text-align: center;  
  background: linear-gradient(145deg,#242424,#1a1a1a);  
  color: #e2e2e2;  
  cursor: pointer;  
  transition: background .35s ease, border-color .35s ease, transform .25s ease;  
  position: relative;  
  margin-bottom: 1.15rem;  
  isolation: isolate;  
}

.referral-file-drop-zone input[type="file"] {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  opacity: 0;  
  cursor: pointer;  
  z-index: 1;  
}

.referral-file-drop-zone::before {  
  content: "";  
  position: absolute;  
  inset: 0;  
  border-radius: inherit;  
  background: radial-gradient(circle at 30% 20%, rgba(1,230,205,0.06), transparent 60%);  
  opacity: 0;  
  transition: opacity .4s ease;  
  z-index: 0;  
}

.referral-file-drop-zone:hover::before,  
.referral-file-drop-zone.hover::before {  
  opacity: 1;  
}

.referral-file-drop-zone:hover,  
.referral-file-drop-zone.hover {  
  background: linear-gradient(145deg,#1f1f1f,#171717);  
  border-color: #01e6cd;  
  transform: translateY(-2px);  
}

.referral-drop-inner {  
  position: relative;  
  z-index: 1;  
  display: flex;  
  flex-direction: column;  
  gap: .5rem;  
  align-items: center;  
}

.referral-drop-icon {  
  font-size: 2.2rem;  
  background: linear-gradient(135deg,#01e6cd,#00b8a3);  
  background-clip: text;  
  -webkit-background-clip: text;  
  color: transparent;  
}

.referral-file-drop-zone .referral-drop-text {  
  font-size: .95rem;  
  font-weight: 500;  
  line-height: 1.3;  
  max-width: 38ch;  
  color: #d8d8d8;  
}

.referral-drop-hint {
  font-size: 0.8rem;
  color: #999999;
  font-weight: 400;
  margin-top: 0.25rem;
  opacity: 0.85;
}

/* Submit button */
.referral-submit-btn {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: .55rem;  
  width: 100%;  
  padding: .9rem 1.15rem;  
  background: linear-gradient(92deg,#02d7bf,#019a87);  
  color: #0b2824;  
  border: 1px solid #06665b;  
  border-radius: 12px;  
  font-size: .95rem;  
  font-weight: 600;  
  cursor: pointer;  
  position: relative;  
  overflow: hidden;  
  transition: background .35s ease, transform .18s ease, box-shadow .25s ease, border-color .35s ease;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 0 0 rgba(1,200,175,0);  
}

.referral-submit-btn::after {  
  content: "";  
  position: absolute;  
  inset: 0;  
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 60%);  
  mix-blend-mode: overlay;  
  opacity: .25;  
  transition: opacity .4s ease;  
  pointer-events: none;  
}

.referral-submit-btn:hover {  
  background: linear-gradient(92deg,#04e4ca,#01a894);  
  transform: translateY(-1px);  
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.55), 0 0 0 0 rgba(1,200,175,0.35);  
}

.referral-submit-btn:focus-visible {  
  outline: none;  
  box-shadow: 0 0 0 3px rgba(0,30,27,0.9), 0 0 0 5px rgba(2,221,192,0.45);  
}

.referral-submit-btn:hover::after {  
  opacity: .38;  
}

.referral-submit-btn:active {  
  transform: translateY(0);  
  background: linear-gradient(92deg,#02c5ae,#018676);  
  box-shadow: 0 1px 3px rgba(0,0,0,0.55);  
}

.referral-submit-btn:disabled {  
  opacity: .6;  
  cursor: not-allowed;  
  filter: grayscale(.2);  
  box-shadow: none;  
}

/* Result area - Clean & Simple - Dark Theme */
#referral-result {  
  margin-top: 1.5rem;
}

.referral-result-block {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.referral-result-block:last-child {
  margin-bottom: 0;
}

.referral-result-header {  
  background: #222222;
  border-bottom: 1px solid #333333;
  padding: 1rem 1.25rem;
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
}

.referral-result-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.referral-result-label { 
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.referral-result-sub { 
  font-size: 0.75rem;
  color: #888888;
  margin: 0;
}

.referral-copy-actions { 
  display: flex; 
  gap: 0.5rem; 
  align-items: center; 
}

.referral-copy-pill { 
  background: #2a2a2a;
  border: 1px solid #404040;
  color: #cccccc;
  display: inline-flex; 
  align-items: center; 
  gap: 0.375rem; 
  padding: 0.5rem 0.75rem; 
  border-radius: 6px; 
  font-size: 0.75rem; 
  cursor: pointer; 
  font-weight: 500; 
  transition: all 0.15s ease;
  text-decoration: none;
}

.referral-copy-pill:hover { 
  background: #363636;
  border-color: #555555;
  color: #ffffff;
}

.referral-copy-pill:active { 
  background: #1f1f1f;
  transform: translateY(1px);
}

.referral-copy-pill.copied { 
  background: #0d4f3c;
  color: #4ade80;
  border-color: #166534;
}

.referral-copy-pill .material-icons { 
  font-size: 16px; 
  line-height: 1; 
}

.referral-copy-pill.disabled { 
  opacity: 0.4; 
  cursor: not-allowed; 
  pointer-events: none;
}

.referral-full-text { 
  background: #1a1a1a;
  padding: 1.25rem; 
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.875rem; 
  line-height: 1.6;
  color: #e5e5e5;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: none;
  outline: none;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #444444 #1a1a1a;
}

.referral-full-text::-webkit-scrollbar {
  width: 8px;
}

.referral-full-text::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.referral-full-text::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 4px;
}

.referral-full-text::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .referral-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .referral-copy-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .referral-copy-pill span:last-child { 
    display: none; 
  }
  
  .referral-copy-pill { 
    padding: 0.5rem; 
  }
  
  .referral-full-text { 
    font-size: 0.8rem; 
    padding: 1rem;
  }
}

/* Histórico de Prontuários */
.referral-history-section {
  margin-top: 2rem;
  background: linear-gradient(135deg, rgba(46,46,46,.9), rgba(28,28,28,.85));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  animation: referralFadeIn .6s ease forwards;
}

.referral-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.2s ease;
}

.referral-history-header:hover {
  background: rgba(0,0,0,0.3);
}

.referral-history-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
}

.referral-history-title .material-icons {
  color: #01e6cd;
  font-size: 1.3rem;
}

.referral-history-toggle {
  background: none;
  border: none;
  color: #cccccc;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.referral-history-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.referral-history-toggle.expanded {
  transform: rotate(180deg);
}

.referral-history-content {
  padding: 1.5rem;
}

.referral-history-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #888888;
}

.referral-history-empty .material-icons {
  font-size: 3rem;
  color: #666666;
  margin-bottom: 1rem;
}

.referral-history-empty p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.referral-history-empty small {
  font-size: 0.85rem;
  opacity: 0.8;
}

.referral-history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.referral-history-item {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s ease;
}

.referral-history-item:hover {
  border-color: #444444;
  background: #1f1f1f;
}

.referral-history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.referral-history-item-header:hover {
  opacity: 0.8;
}

.referral-history-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.referral-history-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.referral-history-item-meta {
  font-size: 0.75rem;
  color: #888888;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.referral-history-item-actions {
  display: flex;
  gap: 0.5rem;
}

.referral-history-action-btn {
  background: #2a2a2a;
  border: 1px solid #404040;
  color: #cccccc;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.15s ease;
}

.referral-history-action-btn:hover {
  background: #363636;
  border-color: #555555;
  color: #ffffff;
}

.referral-history-action-btn.copied {
  background: #0d4f3c;
  color: #4ade80;
  border-color: #166534;
}

.referral-history-item-preview {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.75rem;
  max-height: 150px;
  overflow-y: auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #e0e0e0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Sync button */
.referral-sync-btn {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 8px;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.referral-sync-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.referral-sync-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.referral-sync-btn .material-icons {
  font-size: 16px;
  flex-shrink: 0;
}

/* Sync badges */
.sync-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

.sync-badge:contains("📱") {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.sync-badge:contains("☁️") {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .referral-history-header {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .referral-history-title {
    font-size: 1rem;
    flex: 1;
    min-width: 0;
  }
  
  .referral-sync-btn {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  
  .referral-history-toggle {
    order: 2;
    margin-left: auto;
  }
  
  .referral-history-content {
    padding: 1rem;
  }
  
  .referral-history-item {
    padding: 1rem;
  }
  
  .referral-history-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .referral-history-action-btn span:last-child {
    display: none;
  }
  
  /* Badges em mobile */
  .sync-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
    margin-left: 0.25rem;
  }
}

/* Media query específica para iPhone 13 Pro Max e similares */
@media (max-width: 428px) {
  .referral-sync-btn {
    font-size: 0.85rem;
    padding: 0.65rem 0.85rem;
  }
  
  .referral-sync-btn .material-icons {
    font-size: 14px;
  }
  
  .referral-history-header {
    padding: 0.875rem;
  }
}

/* Para dispositivos muito pequenos */
@media (max-width: 360px) {
  .referral-sync-btn span:last-child {
    display: none;
  }
  
  .referral-sync-btn {
    min-width: 48px;
    padding: 0.65rem;
    justify-content: center;
  }
}

/* Textarea */
#referral-text {  
  width: 100%;  
  min-height: 160px;  
  padding: 1.1rem 1.2rem;  
  margin-bottom: 1.15rem;  
  background: #1a1a1a;  
  color: #f0f0f0;  
  border: 1px solid #333333;  
  border-radius: 12px;  
  resize: vertical;  
  line-height: 1.6;  
  font-size: 0.95rem;  
  font-weight: 400;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;  
}

#referral-text::placeholder {
  color: #777777;
  font-weight: 400;
  opacity: 0.8;
}

#referral-text:hover {  
  border-color: #444444;  
  background: #1d1d1d;
}

#referral-text:focus {  
  border-color: #01e6cd;  
  outline: none;  
  box-shadow: 0 0 0 3px rgba(1,230,205,0.12);  
  background: #1f1f1f;  
}

/* Select (hidden on large screens in favor of segmented) */
#referral-output-type {  
  display: none;  
  width: 100%;  
  padding: .65rem 1rem;  
  margin-bottom: 1.15rem;  
  background-color: #1b1b1b;  
  color: #e2e2e2;  
  border: 1px solid #313131;  
  border-radius: 14px;  
  appearance: none;  
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23e2e2e2" d="M7 10l5 5 5-5H7z"/></svg>');  
  background-repeat: no-repeat;  
  background-position: right 0.85rem center;  
  background-size: 1rem;  
  cursor: pointer;  
  transition: border-color .35s ease, background .35s ease;  
}

#referral-output-type:focus {  
  border-color: #01e6cd;  
  outline: none;  
}

/* Segmented control */
.referral-output-wrapper {  
  margin-bottom: 1.15rem;  
}

/* Output description */
.referral-output-description {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #999999;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  transition: all 0.3s ease;
  opacity: 0.9;
}

.referral-output-segmented {  
  display: flex;  
  background: #171717;  
  padding: .35rem;  
  border-radius: 16px;  
  border: 1px solid #2a2a2a;  
  gap: .35rem;  
  position: relative;  
  font-size: .8rem;  
  user-select: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.referral-output-segmented button {  
  flex: 1;  
  background: none;  
  border: none;  
  color: #c7c7c7;  
  padding: .65rem .5rem;  
  border-radius: 12px;  
  cursor: pointer;  
  font-weight: 500;  
  font-size: .8rem;  
  line-height: 1.2;  
  letter-spacing: .2px;  
  position: relative;  
  transition: color .35s ease;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.referral-output-segmented button:hover {  
  color: #f0f0f0;  
}

.referral-output-segmented button.active {  
  color: #081f1c;  
  font-weight: 600;  
}

.referral-output-segmented .seg-indicator {  
  position: absolute;  
  top: .35rem;  
  bottom: .35rem;  
  left: .35rem;  
  width: calc((100% - .7rem)/3);  
  background: linear-gradient(90deg,#01e6cd,#00b8a3);  
  border-radius: 12px;  
  transition: transform .45s cubic-bezier(.65,.05,.36,1);  
  box-shadow: 0 4px 10px -4px rgba(1,230,205,0.5);  
  z-index: 0;  
}

.referral-output-segmented button {  
  z-index: 1;  
}

/* Loading overlay */
.referral-loading-overlay {  
  position: absolute;  
  inset: 0;  
  background: rgba(16,16,16,0.78);  
  backdrop-filter: blur(4px);  
  -webkit-backdrop-filter: blur(4px);  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  gap: 1.2rem;  
  opacity: 0;  
  pointer-events: none;  
  transition: opacity .4s ease;  
  z-index: 40;  
}

.referral-card.loading .referral-loading-overlay {  
  opacity: 1;  
  pointer-events: all;  
}

.referral-spinner {  
  width: 52px;  
  height: 52px;  
  border: 4px solid rgba(1,230,205,0.15);  
  border-top-color: #01e6cd;  
  border-radius: 50%;  
  animation: spin 1s linear infinite;  
}

@keyframes spin {  
  to { transform: rotate(360deg); }  
}

.referral-shimmer-lines {  
  width: 80%;  
  max-width: 420px;  
  display: flex;  
  flex-direction: column;  
  gap: .6rem;  
}

.referral-shimmer-lines .shimmer {  
  height: 12px;  
  border-radius: 6px;  
  background: linear-gradient(90deg,#202020 0%,#303030 40%,#202020 80%);  
  background-size: 200% 100%;  
  animation: shimmer 1.4s ease-in-out infinite;  
}

@keyframes shimmer {  
  0% { background-position: 200% 0; }  
  100% { background-position: -200% 0; }  
}

.referral-shimmer-lines .line1 { width: 100%; }
.referral-shimmer-lines .line2 { width: 85%; }
.referral-shimmer-lines .line3 { width: 70%; }

/* Copy icon */
.copy-icon {  
  font-size: 20px;  
  margin-top: 8px;  
  display: inline-block;  
  color: #ccc;  
  transition: color 0.2s ease;  
}

.copy-icon:hover {  
  color: #4caf50;  
}

/* Accessibility helpers */
.visually-hidden {  
  position: absolute !important;  
  height: 1px;  
  width: 1px;  
  overflow: hidden;  
  clip: rect(1px,1px,1px,1px);  
  white-space: nowrap;  
}

/* File preview */
.referral-files-preview {
  background: linear-gradient(145deg, #1f1f1f, #171717);
  border: 1px solid #2c2c2c;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  animation: referralSlideIn 0.3s ease;
}

@keyframes referralSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.referral-files-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #01e6cd;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.referral-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.referral-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(145deg, #242424, #1a1a1a);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 0.75rem;
  color: #e2e2e2;
  font-size: 0.9rem;
}

.referral-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.referral-file-info .material-icons {
  color: #01e6cd;
  font-size: 1.1rem;
}

.referral-file-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.875rem;
}

.referral-file-remove {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.referral-file-remove:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.referral-file-remove .material-icons {
  font-size: 1.1rem;
}

/* Separator */
.referral-or-separator {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: .75rem;  
  color: #5e5e5e;  
  font-size: .7rem;  
  text-transform: uppercase;  
  letter-spacing: 2px;  
  margin: .3rem 0 1.1rem;  
  position: relative;  
}

.referral-or-separator::before,  
.referral-or-separator::after {  
  content: "";  
  flex: 1;  
  height: 1px;  
  background: linear-gradient(90deg,transparent,#2a2a2a 40%,#2a2a2a 60%,transparent);  
}

/* Responsive */
@media (max-width: 640px) {  
  .referral-card {  
    padding: 1.1rem 1rem 1.25rem;  
    border-radius: 18px;  
  }  
  .referral-file-drop-zone {  
    padding: 1.45rem 1rem;  
  }  
  .referral-drop-icon { font-size: 1.9rem; }  
  .referral-output-segmented button { 
    padding: .6rem .3rem; 
    font-size: .65rem; 
    letter-spacing: .1px;
  }
}

/* iPhone Pro Max and larger mobile devices */
@media (max-width: 428px) {
  .referral-output-segmented button { 
    padding: .6rem .25rem; 
    font-size: .6rem; 
    letter-spacing: 0;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {  
  .referral-submit-btn,  
  .referral-file-drop-zone,  
  .referral-output-segmented .seg-indicator {  
    transition: none !important;  
  }  
  .referral-spinner { animation: spin 1.25s linear infinite; }  
  .referral-card { animation: none; }  
}

/* Drag & Drop Styles */
.referral-file-drop-zone {
  position: relative;
  transition: all 0.3s ease;
}

.referral-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 123, 255, 0.1);
  border: 2px dashed #007bff;
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.referral-drop-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #007bff;
  font-weight: 600;
}

.referral-drop-overlay-content .material-icons {
  font-size: 3rem;
  opacity: 0.8;
}

.referral-file-drop-zone.drag-over {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.referral-file-drop-zone.drag-over .referral-drop-overlay {
  display: flex;
}

/* Paste indicator */
.referral-card.paste-ready {
  animation: pasteGlow 0.5s ease-in-out;
}

@keyframes pasteGlow {
  0%, 100% { box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.03) inset; }
  50% { box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 20px rgba(0, 255, 127, 0.4); }
}

/* Visual feedback for drag states */
.referral-drop-zone-active {
  border-color: #007bff !important;
  background: rgba(0, 123, 255, 0.05) !important;
}

.referral-drop-zone-reject {
  border-color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.05) !important;
}

/* File type indicators */
.referral-file-item .file-type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0.5rem;
}

.referral-file-item .file-type-indicator.image {
  background: rgba(52, 199, 89, 0.2);
  color: #34c759;
}

.referral-file-item .file-type-indicator.pdf {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
}

.referral-file-item .file-type-indicator.pasted {
  background: rgba(0, 255, 127, 0.2);
  color: #00ff7f;
}

/* Toast notification for paste */
.paste-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 255, 127, 0.9);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  z-index: 1000;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 255, 127, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.paste-notification.show {
  transform: translateX(0);
}