/* Arztbrief — custom Bulma overrides, dark-grey surface theme */

:root {
  --ab-primary:     #1e88e5;
  --ab-primary-light: #bbdefb;
  --ab-primary-dark: #1565c0;
  --ab-bg:          #2f343a;
  --ab-surface:     #444b54;
  --ab-surface-soft:#3a4048;
  --ab-text:        #f1f5f9;
  --ab-muted:       #c7d1de;
  --ab-border:      #5d6672;
  --ab-success:     #2e7d32;
  --ab-danger:      #c62828;
}

/* Global */
html,
body {
  min-height: 100%;
  background: var(--ab-bg);
}
body {
  color: var(--ab-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.section {
  background: transparent;
}

/* Navbar */
.navbar {
  background: var(--ab-primary) !important;
  box-shadow: 0 2px 8px rgba(30,136,229,.3);
}
.navbar-brand .navbar-item,
.navbar-item,
.navbar-link {
  color: #fff !important;
  font-weight: 500;
}
.navbar-item:hover { background: var(--ab-primary-dark) !important; }
.navbar-burger span { background: #fff; color:  rgba(30,136,229,.3); }

/* Hero / landing */
.hero.is-primary {
  background: linear-gradient(135deg, var(--ab-primary) 0%, var(--ab-primary-dark) 100%);
}

/* Buttons */
.button.is-primary {
  background: var(--ab-primary);
  border-color: transparent;
}
.button.is-primary:hover { background: var(--ab-primary-dark); }

/* Cards */
.card {
  background: var(--ab-surface);
  color: var(--ab-text);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(12, 16, 22, .32);
  border: 1px solid var(--ab-border);
}
.card-header {
  background: var(--ab-surface-soft);
  border-radius: 12px 12px 0 0;
}
.card-header-title { color: #e6edf7; }
.card-content { background: transparent; }

/* Form containers */
#login-form,
#reg-form,
#briefe-list .card {
  border-radius: 10px;
}

/* Form elements */
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--ab-primary);
  box-shadow: 0 0 0 3px rgba(30,136,229,.2);
}
.input,
.textarea,
.select select {
  background: #535b66;
  border-color: var(--ab-border);
  color: var(--ab-text);
}
.input::placeholder,
.textarea::placeholder {
  color: rgba(241, 245, 249, .72);
}
.label { color: #dbe7f6; font-weight: 600; }

.title,
.subtitle,
.heading,
.has-text-grey,
.has-text-grey-light {
  color: var(--ab-text) !important;
}

a {
  color: #9ad0ff;
}
a:hover {
  color: #c9e7ff;
}

/* Tags */
.tag.is-primary { background: var(--ab-primary); color: #fff; }

/* Brief editor */
#brief-editor {
  min-height: 320px;
  font-size: 1rem;
  line-height: 1.75;
  text-align: justify;
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 1rem;
  background: var(--ab-surface);
}
#brief-editor:focus { outline: none; border-color: var(--ab-primary); }

/* Recording button */
.btn-record {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--ab-primary);
  cursor: pointer;
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  box-shadow: 0 4px 16px rgba(30,136,229,.4);
  transition: transform .15s, box-shadow .15s, border-color .15s, color .15s, background .15s;
  color: var(--ab-primary);
}
.btn-record:hover { 
  transform: scale(1.05); 
  border-color: var(--ab-danger);
  color: var(--ab-danger);
}
.btn-record.recording {
  background: var(--ab-danger);
  border-color: var(--ab-danger);
  color: #fff;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,40,40,.6); }
  50%       { box-shadow: 0 0 0 12px rgba(198,40,40,0); }
}

/* Recording area */
.recording-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: var(--ab-surface-soft);
  border-radius: 12px;
  border: 1px solid var(--ab-border);
}

/* Sound wave visualization (WhatsApp style) */
.sound-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 50px;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.sound-wave-container.active {
  opacity: 1;
}

.sound-wave-bar {
  width: 4px;
  height: 8px;
  background: var(--ab-primary);
  border-radius: 2px;
  transition: all 0.1s;
}

.sound-wave-container.recording .sound-wave-bar {
  background: var(--ab-danger);
  animation: sound-wave 1.2s ease-in-out infinite;
}

.sound-wave-container.processing .sound-wave-bar {
  background: var(--ab-primary);
  animation: processing-pulse 1.5s ease-in-out infinite;
}

/* Different delays for each bar to create wave effect */
.sound-wave-bar:nth-child(1) { animation-delay: 0s; }
.sound-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.sound-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.sound-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.sound-wave-bar:nth-child(5) { animation-delay: 0.4s; }
.sound-wave-bar:nth-child(6) { animation-delay: 0.3s; }
.sound-wave-bar:nth-child(7) { animation-delay: 0.2s; }
.sound-wave-bar:nth-child(8) { animation-delay: 0.1s; }
.sound-wave-bar:nth-child(9) { animation-delay: 0s; }

@keyframes sound-wave {
  0%, 100% { 
    height: 8px;
    transform: scaleY(1);
  }
  50% { 
    height: 40px;
    transform: scaleY(1);
  }
}

@keyframes processing-pulse {
  0%, 100% { 
    opacity: 0.4;
    transform: scaleY(0.8);
  }
  50% { 
    opacity: 1;
    transform: scaleY(1.2);
  }
}

/* Recording status text */
#record-status {
  font-size: 0.95rem;
  color: var(--ab-muted);
  text-align: center;
  min-height: 1.5rem;
  transition: color 0.3s;
}

/* Processing overlay */
.processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(47, 52, 58, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border-radius: 12px;
  z-index: 10;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Loading spinner */
.processing-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(30, 136, 229, 0.2);
  border-top-color: var(--ab-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Processing message */
.processing-message {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ab-text);
  margin: 0;
  animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Processing stages */
.processing-stages {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.3;
  transition: all 0.4s ease;
}

.stage.active {
  opacity: 1;
  transform: scale(1.1);
}

.stage.completed {
  opacity: 0.6;
}

.stage-icon {
  font-size: 2rem;
  filter: grayscale(100%);
  transition: filter 0.4s;
}

.stage.active .stage-icon,
.stage.completed .stage-icon {
  filter: grayscale(0%);
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.stage-text {
  font-size: 0.85rem;
  color: var(--ab-muted);
  font-weight: 500;
}

.stage.active .stage-text {
  color: var(--ab-primary);
  font-weight: 600;
}

.stage.completed .stage-text {
  color: var(--ab-success);
}

/* Mobile button centering */
@media screen and (max-width: 768px) {
  .field.is-grouped {
    justify-content: center;
  }
  
  .field.is-grouped-centered {
    justify-content: center;
  }
  
  .field.is-grouped .control {
    width: 100%;
    max-width: 300px;
  }
  
  .field.is-grouped .control .button {
    width: 100%;
  }
  
  .btn-record {
    width: 80px; 
    height: 80px;
  }
  
  .btn-record svg {
    width: 36px;
    height: 36px;
  }
  
  /* Center all buttons on mobile */
  .has-text-centered {
    text-align: center !important;
  }
  
  .button {
    margin: 0.25rem auto;
  }
}

/* ICD suggestion pills */
.icd-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ab-primary-light);
  border: 1px solid var(--ab-border);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s;
}
.icd-pill:hover { background: var(--ab-primary); color: #fff; }

/* Section tabs */
.section-tab.is-active {
  border-bottom: 3px solid var(--ab-primary);
  color: var(--ab-primary);
  font-weight: 700;
}

/* Toast notification */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  min-width: 240px; padding: .75rem 1.25rem;
  border-radius: 8px; color: #fff; font-weight: 500;
  opacity: 0; transform: translateY(20px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.is-success { background: var(--ab-success); }
#toast.is-danger  { background: var(--ab-danger); }
#toast.is-info    { background: var(--ab-primary); }
#toast.is-warning { background: #ed6c02; }

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero { padding: 1.5rem 1rem; }
  .card { border-radius: 8px; }
  #brief-editor { min-height: 200px; font-size: .95rem; }
}

/* Dashboard Qwen assistant */
.qwen-assistant-card {
  background: linear-gradient(180deg, #46505c 0%, #404953 100%);
}

.qwen-chat-history {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--ab-border);
  border-radius: 10px;
  padding: .75rem;
  background: rgba(0, 0, 0, 0.12);
}

.qwen-chat-bubble {
  margin-bottom: .6rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.qwen-chat-bubble.user {
  background: rgba(30, 136, 229, 0.25);
  border: 1px solid rgba(30, 136, 229, 0.5);
}

.qwen-chat-bubble.assistant {
  background: rgba(241, 245, 249, 0.08);
  border: 1px solid rgba(241, 245, 249, 0.15);
}

.qwen-output {
  min-height: 150px;
  border: 1px solid var(--ab-border);
  border-radius: 10px;
  padding: .9rem;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.16);
  line-height: 1.6;
  font-size: .95rem;
}

@media (max-width: 768px) {
  .qwen-actions {
    display: block;
  }

  .qwen-actions .control {
    width: 100%;
    margin-bottom: .5rem;
  }

  .is-fullwidth-mobile {
    width: 100%;
  }
}