/* ====== Базовые переменные под «чистый» медпортал ====== */
:root{
    --brand-red:#e31e24;
    --brand-red-dark:#c4171b;
    --ink-900:#111827;
    --ink-700:#374151;
    --ink-500:#6b7280;
    --line:#e5e7eb;
    --bg:#f6f7f9;           /* светлый фон как на скрине */
    --card:#ffffff;
    --shadow:0 6px 20px rgba(17,24,39,.06);
    --radius:16px;
  }
  
  *{margin:0;padding:0;box-sizing:border-box;}
  
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg);
    color:var(--ink-900);
    min-height:100vh;
  }
  
  .container{
    max-width:1200px;
    margin:0 auto;
    padding:24px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  
  /* ====== Шапка ====== */
  .header{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:var(--shadow);
  }
  
  .logo{display:flex;align-items:center;gap:12px;color:var(--brand-red);}
  .logo i{font-size:28px;color:var(--brand-red);}
  .logo h1{font-size:20px;font-weight:700;color:var(--ink-900);}
  
  .header-right{display:flex;align-items:center;gap:16px;}
  
  .status-indicator{display:flex;align-items:center;gap:8px;color:var(--ink-700);font-weight:500;}
  .status-dot{width:10px;height:10px;border-radius:50%;background:#f59e0b;animation:pulse 2s infinite;}
  .status-dot.connected{background:#10b981;}
  .status-dot.connecting{background:#f59e0b;}
  
  .cta-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:12px;border:1px solid var(--brand-red);
    background:var(--brand-red);color:#fff;font-weight:600;text-decoration:none;
    transition:.2s ease;
  }
  .cta-btn:hover{background:var(--brand-red-dark);}
  
  /* ====== Разметка ====== */
  .main-content{
    flex:1;
    display:grid;
    grid-template-columns:1fr 340px;
    gap:20px;
    min-height:0;
  }
  
  /* ====== Чат ====== */
  .chat-container{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
    display:flex;flex-direction:column;
  }
  
  .messages{
    flex:1;overflow:auto;padding-right:8px;margin-bottom:16px;
  }
  
  .message{display:flex;gap:12px;margin-bottom:16px;animation:fadeInUp .25s ease-out;}
  .message-avatar{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;background:var(--brand-red);
    flex-shrink:0;
  }
  .user-message{flex-direction:row-reverse;}
  .user-message .message-avatar{background:#0ea5e9;}
  .message-content{
    background:#fafafa;border:1px solid var(--line);color:var(--ink-900);
    border-radius:14px;padding:12px 14px;max-width:80%;
  }
  
  /* Стриминговые сообщения */
  .message.streaming .message-content {
    border-color: #667eea;
    background: linear-gradient(90deg, #fafafa 0%, #f0f4ff 50%, #fafafa 100%);
    background-size: 200% 100%;
    animation: streamingGlow 2s ease-in-out infinite;
  }
  
  .typing-indicator {
    display: inline-block;
    margin-left: 8px;
    color: #667eea;
    animation: typingBlink 1.5s infinite;
    font-weight: bold;
  }
  
  @keyframes streamingGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  
  @keyframes typingBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
  }
  .user-message .message-content{
    background:#fff1f2;border-color:#fde2e2;color:#991b1b;margin-left:auto;
  }
  
  .input-area{display:flex;gap:12px;align-items:flex-end;}
  .voice-controls{display:flex;gap:10px;}
  
  /* Мобильная версия - кнопки в одной строке с полем ввода */
  @media (max-width: 768px) {
    .input-area {
      flex-direction: row;
      align-items: center;
      gap: 6px;
    }
    .text-input-area {
      flex: 1;
      order: 1;
      display: flex;
      gap: 6px;
    }
    .voice-controls {
      order: 2;
      gap: 4px;
      display: flex;
    }
    
    .continuous-btn, .stop-btn, .call-btn {
      width: 40px;
      height: 40px;
      font-size: 14px;
    }
  }
  
  .continuous-btn,.stop-btn,.interrupt-btn,.call-btn{
    width:56px;height:56px;border-radius:50%;border:1px solid var(--line);
    background:#fff;color:var(--ink-900);
    display:flex;align-items:center;justify-content:center;font-size:18px;
    box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .continuous-btn{border-color:#ffd1d2;color:var(--brand-red);}
  .continuous-btn:hover{transform:scale(1.03);}
  .continuous-btn.active{background:var(--brand-red);color:#fff;border-color:var(--brand-red);}
  .stop-btn{border-color:#fcd34d;color:#b45309;}
  .interrupt-btn{border-color:#d9d6fe;color:#6d28d9;}
  
  .text-input-area{flex:1;display:flex;gap:10px;}
  #textInput{
    flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:15px;
  }
  #textInput:focus{outline:none;border-color:#c7c9d1;box-shadow:0 0 0 4px rgba(227,30,36,.08);}
  
  /* Предотвращение масштабирования на мобильных устройствах */
  @media (max-width: 768px) {
    #textInput {
      font-size: 16px !important;
      transform: scale(1);
    }
  }
  
  .send-btn{
    width:52px;height:52px;border-radius:50%;border:1px solid var(--brand-red);
    background:var(--brand-red);color:#fff;cursor:pointer;transition:.2s ease;box-shadow:var(--shadow);
  }
  .send-btn:hover:not(:disabled){transform:translateY(-1px);background:var(--brand-red-dark);}
  .send-btn:disabled{opacity:.5;cursor:not-allowed}
  
  /* ====== Индикаторы ====== */
  .recording-indicator,.speaking-indicator{
    margin-top:12px;display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:12px;font-weight:600;
  }
  .recording-indicator{background:#fff1f2;color:#b91c1c;border:1px solid #fde2e2;}
  .speaking-indicator{background:#ecfdf5;color:#047857;border:1px solid #d1fae5;}
  .recording-animation{display:flex;gap:3px;}
  .wave{width:4px;height:18px;background:#b91c1c;border-radius:2px;animation:wave 1s infinite ease-in-out;}
  .wave:nth-child(2){animation-delay:.1s;}
  .wave:nth-child(3){animation-delay:.2s;}
  .speaking-animation .pulse{width:18px;height:18px;background:#047857;border-radius:50%;animation:pulse 1.5s infinite;}
  
  /* ====== Sidebar ====== */
  .sidebar{display:flex;flex-direction:column;gap:20px;}
  .info-panel,.controls-panel{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 20px;box-shadow:var(--shadow);
  }
  .info-panel h3,.controls-panel h3{
    display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--ink-900);font-size:16px;font-weight:700;
  }
  
  .doctor-schedule{display:flex;flex-direction:column;gap:12px;}
  
  /* Мобильная версия - уменьшенные отступы между врачами */
  @media (max-width: 768px) {
    .doctor-schedule {
      gap: 6px;
    }
  }
  
  @media (max-width: 480px) {
    .doctor-schedule {
      gap: 4px;
    }
  }
  .doctor-item{
    padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;
  }
  .doctor-item strong{display:block;color:var(--ink-900);margin-bottom:4px;}
  .doctor-item span{color:var(--ink-500);font-size:14px;}
  
  /* Мобильная версия - врач и время в одну строку */
  @media (max-width: 768px) {
    .doctor-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
    }
    .doctor-item strong {
      display: inline;
      margin-bottom: 0;
      margin-right: 8px;
    }
    .doctor-item span {
      font-size: 13px;
      white-space: nowrap;
    }
  }
  
  .control-group{margin-bottom:16px;}
  .control-group label{display:flex;gap:10px;align-items:center;color:var(--ink-700);}
  
  /* Кнопки */
  .clear-btn{
    width:100%;padding:12px;border:none;border-radius:12px;
    background:#fff;color:var(--brand-red);border:1px solid var(--brand-red);
    font-weight:600;cursor:pointer;transition:.2s ease;
  }
  .clear-btn:hover{background:var(--brand-red);color:#fff}
  
  /* ====== Notifications ====== */
  .notifications{position:fixed;top:20px;right:20px;z-index:1000;}
  .notification{
    background:#fff;border-radius:12px;border:1px solid var(--line);
    padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);
    border-left:4px solid #10b981;max-width:320px;animation:slideInRight .25s ease-out;
  }
  .notification.error{border-left-color:#ef4444;}
  .notification.warning{border-left-color:#f59e0b;}
  
  /* Адаптив для уведомлений */
  @media (max-width:768px){
    .notifications{
      top:10px;right:10px;left:10px;
    }
    .notification{
      max-width:100%;
      padding:12px 14px;
      font-size:14px;
    }
  }
  
  @media (max-width:480px){
    .notifications{
      top:5px;right:5px;left:5px;
    }
    .notification{
      padding:10px 12px;
      font-size:13px;
      border-radius:8px;
    }
  }
  
  /* ====== Modal ====== */
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px;}
  .modal-content{background:#fff;border-radius:16px;padding:28px;max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow);}
  .modal-content h3{margin-bottom:10px;color:var(--ink-900);}
  .modal-content p{margin-bottom:20px;color:var(--ink-500);line-height:1.45;}
  .modal-buttons{display:flex;gap:12px;justify-content:center;}
  .btn{padding:12px 20px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:.2s ease;}
  .btn-primary{background:var(--brand-red);color:#fff;}
  .btn-secondary{background:#f3f4f6;color:var(--ink-900);}
  .btn:hover{transform:translateY(-1px);}
  
  /* Адаптив для модальных окон */
  @media (max-width:768px){
    .modal{padding:8px;}
    .modal-content{
      padding:20px;
      max-width:100%;
      border-radius:12px;
    }
    .modal-content h3{font-size:18px;}
    .modal-content p{font-size:14px;}
    .modal-buttons{flex-direction:column;gap:8px;}
    .btn{
      padding:14px 20px;
      font-size:16px;
    }
  }
  
  @media (max-width:480px){
    .modal{padding:4px;}
    .modal-content{
      padding:16px;
      border-radius:8px;
    }
    .modal-content h3{font-size:16px;}
    .modal-content p{font-size:13px;}
    .btn{
      padding:12px 16px;
      font-size:14px;
    }
  }
  
  /* ====== Scrollbar ====== */
  .messages::-webkit-scrollbar{width:6px;}
  .messages::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px;}
  .messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
  .messages::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
  
  /* ====== Animations ====== */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  @keyframes slideInRight{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
  @keyframes wave{0%,40%,100%{transform:scaleY(.4)}20%{transform:scaleY(1)}}
  
  /* ====== Адаптив ====== */
  @media (max-width:1024px){
    .main-content{grid-template-columns:1fr;grid-template-rows:auto auto;}
    .sidebar{margin-top:20px;}
  }
  
  @media (max-width:768px){
    .container{padding:6px;gap:8px;}
    
    .header{
      flex-direction:column;gap:8px;text-align:center;
      padding:10px 12px;
    }
    
    .logo h1{font-size:18px;}
    .logo i{font-size:24px;}
    
    .status-indicator{
      font-size:14px;
      justify-content:center;
    }
    
    .main-content{
      grid-template-columns:1fr;
      gap:12px;
      flex:1;
      display:flex;
      flex-direction:column;
    }
    
    .chat-container{
      padding:10px;
      height:calc(100vh - 120px);
      display:flex;
      flex-direction:column;
    }
    
    .messages{
      flex:1;
      margin-bottom:8px;
      overflow-y:auto;
    }
    
    .input-area{
      flex-direction:row;gap:6px;
      align-items:center;
    }
    
    .voice-controls{
      justify-content:flex-end;
      gap:4px;
    }
    
    .continuous-btn,.stop-btn,.call-btn{
      width:40px;height:40px;
      font-size:14px;
    }
    
    .text-input-area{
      flex:1;
      flex-direction:row;
      gap:6px;
    }
    
    #textInput{
      padding:12px 14px;
      font-size:16px;
    }
    
    .send-btn{
      width:40px;height:40px;
      font-size:14px;
    }
    
    .message-content{max-width:85%;}
    
    .sidebar{
      margin-top:0;
      order:-1;
      max-height:35vh;
      overflow-y:auto;
    }
    
    .info-panel,.quick-actions{
      padding:6px 8px;
    }
    
    .doctor-item{
      padding:8px 10px;
    }
    
    .doctor-item strong{font-size:14px;}
    .doctor-item span{font-size:13px;}
    
    .clear-btn{
      padding:6px;
      font-size:13px;
    }
  }
  
  @media (max-width:480px){
    .container{padding:4px;gap:6px;}
    
    .header{
      padding:6px 10px;
      gap:6px;
    }
    
    .logo h1{font-size:16px;}
    .logo i{font-size:20px;}
    
    .status-indicator{
      font-size:12px;
    }
    
    .chat-container{
      padding:6px;
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }
    
    .messages{
      flex:1;
      margin-bottom:6px;
      overflow-y:auto;
    }
    
    .input-area{gap:8px;}
    
    .voice-controls{
      gap:8px;
    }
    
    .continuous-btn,.stop-btn,.call-btn{
      width:40px;height:40px;
      font-size:13px;
    }
    
    #textInput{
      padding:10px 12px;
      font-size:16px;
    }
    
    .send-btn{
      width:40px;height:40px;
      font-size:13px;
    }
    
    .message-content{
      max-width:90%;
      padding:10px 12px;
      font-size:14px;
    }
    
    .message-avatar{
      width:32px;height:32px;
      font-size:14px;
    }
    
    .info-panel,.quick-actions{
      padding:4px 6px;
    }
    
    .info-panel h3{
      font-size:14px;
      margin-bottom:6px;
    }
    
    .doctor-item{
      padding:6px 8px;
    }
    
    .doctor-item strong{font-size:12px;}
    .doctor-item span{font-size:11px;}
    
    .clear-btn{
      padding:4px;
      font-size:12px;
    }
    
    .recording-indicator,.speaking-indicator{
      padding:8px 10px;
      font-size:13px;
    }
    
    .sidebar{
      max-height:30vh;
      overflow-y:auto;
    }
  }

/* ====== Новые стили ====== */

/* Кнопка звонка */
.call-btn {
  background: #10b981 !important;
  color: white !important;
  border: 1px solid #10b981 !important;
}

.call-btn:hover {
  background: #059669;
  border-color: #059669;
  transform: scale(1.03);
}

.call-btn:active {
  transform: scale(0.95);
}

/* Быстрые действия */
.quick-actions {
  padding: 12px;
  text-align: center;
}

/* Модал звонка */
.call-modal {
  z-index: 1001;
}

.call-content {
  background: white;
  border-radius: 16px;
  width: 95vw;
  max-width: 480px;
  max-height: 90vh;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e7eb;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Адаптив для модального окна звонка */
@media (max-width:768px){
  .call-content {
    width: 98vw;
    max-height: 95vh;
    border-radius: 12px;
  }
  
  .call-header {
    padding: 16px 20px 12px;
  }
  
  .call-info h3 {
    font-size: 16px;
  }
  
  .call-main {
    padding: 16px 20px 20px;
    min-height: 300px;
  }
  
  .call-avatar i {
    font-size: 48px;
    width: 48px;
    height: 48px;
    padding: 16px;
  }
  
  .call-status {
    font-size: 14px;
  }
  
  .call-transcript h4 {
    font-size: 14px;
  }
  
  .transcript-container {
    max-height: 200px;
    padding: 10px;
  }
  
  .transcript-item {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .call-controls {
    padding: 16px 20px;
    gap: 12px;
  }
  
  .call-control-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  
  .end-call-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

@media (max-width:480px){
  .call-content {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .call-header {
    padding: 12px 16px 8px;
  }
  
  .call-info h3 {
    font-size: 14px;
  }
  
  .call-info span {
    font-size: 12px;
  }
  
  .call-main {
    padding: 12px 16px 16px;
    min-height: 250px;
  }
  
  .call-avatar i {
    font-size: 40px;
    width: 40px;
    height: 40px;
    padding: 12px;
  }
  
  .call-status {
    font-size: 13px;
  }
  
  .call-transcript h4 {
    font-size: 13px;
  }
  
  .transcript-container {
    max-height: 150px;
    padding: 8px;
  }
  
  .transcript-item {
    font-size: 11px;
    padding: 5px 8px;
  }
  
  .call-controls {
    padding: 12px 16px;
    gap: 8px;
  }
  
  .call-control-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  
  .end-call-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

.call-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: white;
  color: #1a1a1a;
}

.call-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-info h3 i {
  color: #10b981;
  font-size: 16px;
}

.call-info span {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

.close-call-btn {
  background: #f3f4f6;
  border: none;
  color: #6b7280;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-call-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.call-main {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 440px;
}

.call-avatar {
  text-align: center;
  padding: 20px 0;
}

.call-avatar i {
  font-size: 64px;
  margin-bottom: 12px;
  color: #dc2626;
  opacity: 0.9;
  background: #fef2f2;
  padding: 20px;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.call-status {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin-top: 8px;
}

.call-transcript {
  flex: 1;
  margin-top: 8px;
}

.call-transcript h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #374151;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-transcript h4 i {
  color: #6b7280;
  font-size: 14px;
}

.transcript-container {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 12px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transcript-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.transcript-item.user {
  background: #fff1f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  align-self: flex-end;
  max-width: 85%;
}

.transcript-item.bot {
  background: white;
  border: 1px solid #e5e7eb;
  color: #374151;
  align-self: flex-start;
  max-width: 85%;
}

.transcript-time {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}

.transcript-item.user .transcript-time {
  color: rgba(153, 27, 27, 0.7);
}

.transcript-speaker {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.transcript-item.user .transcript-speaker {
  color: rgba(153, 27, 27, 0.8);
}

.transcript-text {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}

.call-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid #f3f4f6;
  background: white;
}

.call-control-btn {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.call-control-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

.call-control-btn.muted {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.end-call-btn {
  background: #dc2626;
  border: 1px solid #dc2626;
  color: white;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.end-call-btn:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: scale(1.05);
}

/* Скроллбар для транскрипта */
.transcript-container::-webkit-scrollbar {
  width: 6px;
}

.transcript-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.transcript-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.transcript-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}