:root {
  --bg-primary: #ffffff;
  --surface-primary: rgba(255,255,255,0.95);
  --surface-secondary: rgba(250,251,252,0.9);
  --surface-hover: rgba(248,249,250,0.95);
  --input-bg: rgba(255,255,255,0.85);
  --text-primary: #2c3e50;
  --text-secondary: #546e7a;
  --text-light: #78909c;
  --text-hint: #90a4ae;
  --accent-medical: #06D6A0;
  --accent-warm: #525c60;
  --border-light: rgba(144,164,174,0.12);
  --border-soft: rgba(120,144,156,0.08);
  --shadow-warm: 0 2px 12px rgba(79,195,247,0.15);
  --shadow-magnetic: 0 8px 32px rgba(79,195,247,0.25);
  --shadow-subtle: 0 1px 4px rgba(120,144,156,0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: 'Mona Sans', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-weight: 400;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
.chat-page-container {
  height: 100vh; width: 100vw;
  display: block; position: relative; overflow: hidden;
}
.trendy-medical-brand { text-align: center; font-family: 'Inter',system-ui,sans-serif; position: relative; }
.main-tagline {
  font-size: clamp(26px,5vw,42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; color: #34495e;
  display: flex; justify-content: center; align-items: center;
}
.switching-text-container { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; margin: 0 6px; }
.switching-text-inner { animation: switchWords 10s cubic-bezier(0.7,0,0.3,1) infinite; }
.switching-text-inner div {
  height: 1.3em; font-weight: 800;
  background: linear-gradient(120deg,color-mix(in srgb, #b8b3ac 100%,white 5%),color-mix(in srgb,#546e7a 100%,white 5%));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; padding: 0 4px; display: flex; align-items: center; justify-content: center;
}
@keyframes switchWords {
  0%{transform:translateY(0);} 20%{transform:translateY(0);} 25%{transform:translateY(-1.3em);}
  45%{transform:translateY(-1.3em);} 50%{transform:translateY(-2.6em);}
  70%{transform:translateY(-2.6em);} 75%{transform:translateY(-3.9em);}
  95%{transform:translateY(-3.9em);} 100%{transform:translateY(-5.2em);}
}
.fading-separator {
  width: 60%; max-width: 250px; height: 1px; margin: 20px auto;
  background: linear-gradient(90deg,transparent 0%,rgba(79,195,247,0.5) 50%,transparent 100%);
  animation: endlessFade 5s linear infinite; border-radius: 1px;
}
.trendy-medical-brand .doctors-names { height: 50px; aspect-ratio: auto; width: auto; display: inline-block; }
@keyframes endlessFade {
  0% {background-position:-150% 0;} 100% {background-position:150% 0;}
}
@media (max-width:768px) {
  .main-tagline{font-size:clamp(22px,6vw,36px);flex-direction:column;line-height:1.4;}
  .fading-separator{margin:16px auto;}
}

.unique-navbar {
  position: fixed; top:0; left:0; width:100%; background:transparent!important;
  border-bottom:none; z-index:1000; transition:background 0.3s,box-shadow 0.3s;
}
.unique-navbar .uncommon-link{color:rgba(69,90,120,0.8)!important;}
.unique-navbar .uncommon-link:hover{color:rgba(44,62,80,1)!important;}
.unique-navbar .menu-text{color:rgba(44,62,80,0.85)!important;}
.unique-navbar .toggle-lines span{background-color:rgba(44,62,80,0.85)!important;}
.unique-navbar .dropdown-arrow{color:rgba(44,62,80,0.7)!important;}
.unique-navbar .dropdown-link{color:rgba(44,62,80,0.8)!important;}
.unique-navbar .dropdown-link:hover{color:rgba(44,62,80,1)!important;}
.rare-menu{background:rgba(250,250,245,0.88);color:#2c3e50;backdrop-filter:blur(16px) saturate(160%);}
.chat-main-content {
  position: absolute; top:0; left:0; width:100%; height:100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden; padding: 1rem; z-index: 1;
}
.bottom-input-container {
  position: fixed!important; bottom:20px!important; left:50%!important; transform:translateX(-50%)!important;
  width: 90%!important; max-width:600px!important; z-index:9999!important;
  background:none!important; backdrop-filter:none!important; border:none!important; box-shadow:none!important;
  padding:0!important; margin:0!important; display:none;
}
.bottom-input-container.visible { display:flex!important; justify-content:center!important; align-items:center!important; }
#initial-view {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);z-index:10;
}
#initial-view.hidden {opacity:0;transform:translateY(-20px) scale(0.98);pointer-events:none;}
.medical-logo {margin-bottom:2.5rem;text-align:center;}
.medical-logo img {width:100px;height:auto;opacity:0.95;filter:drop-shadow(var(--shadow-subtle));transition:transform 0.3s;}
.medical-logo img:hover {transform:scale(1.05);}
.consultation-input-container{width:100%;max-width:580px;position:relative;margin-bottom:2rem;}
.consultation-input {
  width:100%;background:var(--input-bg);border:1px solid var(--border-soft);
  border-radius:16px;padding:18px 60px 18px 24px;font-size:16px;font-weight:400;color:var(--text-primary);
  outline:none;box-shadow:var(--shadow-subtle);backdrop-filter:saturate(180%) blur(20px);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  /* --- ADDED FOR AUTO-RESIZE --- */
  resize: none; /* Disable manual resizing */
  overflow-y: hidden; /* Hide scrollbar initially */
  line-height: 1.5; /* Consistent line height for calculations */
  min-height: 24px; /* Approx 1 line of text */
  max-height: 120px; /* Approx 5 lines before scrolling */
  white-space: pre-wrap; /* Respect newlines */
  word-wrap: break-word; /* Break long words */
}
.consultation-input::placeholder {color:var(--text-hint);font-weight:300;}
.input-submit-btn {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;background:rgba(19,50,74,0.65);color:white;border:none;border-radius:12px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-warm);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  font-size:14px;backdrop-filter:blur(10px);
}
.input-submit-btn:hover {transform:translateY(-50%) scale(1.1);background:rgba(79,195,247,0.7);box-shadow:var(--magnetic-shadow);}
.medical-suggestions {
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:580px;margin-top:1.5rem;
}
.suggestion-tag{
  background:transparent;border:1px solid var(--border-soft);color:var(--text-secondary);
  padding:8px 16px;border-radius:12px;font-size:14px;font-weight:400;cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);backdrop-filter:saturate(180%) blur(10px);
  position:relative;overflow:hidden;
}
.suggestion-tag::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(79,195,247,0.1),rgba(129,199,132,0.1));opacity:0;transition:opacity 0.3s;
}
.suggestion-tag:hover{color:var(--text-primary);border-color:var(--accent-medical);transform:translateY(-3px);box-shadow:var(--shadow-warm);}
.suggestion-tag:hover::before{opacity:1;}
/* Default state: chat view is hidden, initial view is visible */
#chat-view {
  width:100%;height:100%;display:none;flex-direction:column;max-width:800px;margin:0 auto;
  background:none!important;backdrop-filter:none!important;box-shadow:none!important;border-radius:0!important;overflow:hidden;
}

#initial-view {
  display: flex; /* Visible by default */
}

/* When server detects preloaded session: INVERT the views instantly */
body.preload-chat-active #initial-view {
  display: none !important;
}

body.preload-chat-active #chat-view {
  display: flex !important;
}

/* Also ensure sidebar and input are ready for preloaded sessions */
body.preload-chat-active #chat-sidebar {
  display: flex !important;
}

body.preload-chat-active #consultation-input-container {
  display: flex !important;
}
#chat-view.active {display:flex;}
.consultation-header {display:none!important;}
.consultation-messages {
  flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem;padding-top:80px;padding-bottom:150px!important;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border-light) transparent;height:100%!important;
}
.consultation-messages::-webkit-scrollbar{width:4px;}
.consultation-messages::-webkit-scrollbar-track{background:transparent;}
.consultation-messages::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px;}
.consultation-messages::-webkit-scrollbar-thumb:hover{background:var(--accent-medical);}
.message{display:flex;margin-bottom:0.5rem;animation:messageSlide 0.4s cubic-bezier(0.4,0,0.2,1);}
.message.patient{justify-content:flex-end;direction:rtl;text-align:right;}
.message.patient.english{justify-content:flex-start;direction:ltr;}
.message.patient.arabic{justify-content:flex-end;direction:rtl;text-align:right;}
.message.doctor{justify-content:flex-start;}
.message.doctor+.message.patient{margin-top:0.5rem!important;}
.message.patient+.message.doctor{margin-top:0.5rem!important;}
.message:last-child{margin-bottom:4rem!important;padding-bottom:2rem!important;}
@keyframes messageSlide{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.message-turn {
  display: flex; flex-direction: column;
  align-items: flex-end;
  width: 70%;
  margin-left: auto; margin-right: auto;
  margin-bottom: 2.5rem;
}
.widget-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.widget-area {
  width: 100%;
  max-width: 100%;
  margin-top: 3px;
  background: transparent!important;
  border: none!important;
  box-shadow: none!important;
  border-radius: 0!important;
  overflow: visible!important;
  padding: 0!important;
  align-self: center;
}
.widget-tabs {
  background: transparent!important;
  border-bottom: none!important;
  padding: 0 6px 0 6px!important;
  margin-bottom: 0!important;
  display: flex;
  justify-content: center;
}
.tab-button {
  background: transparent!important;
  color: #546e7a!important;
  border: none!important;
  border-radius: 0!important;
  margin: 0 2px!important;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background-color 0.2s,color 0.2s;
}
.tab-button.active{
  background: rgba(6,214,160,0.07)!important;
  color: #1a365d!important;
  box-shadow: none!important;
}
.tab-button:hover{background-color:rgba(0,0,0,0.04);}
.widget-content-container{background:transparent!important;padding:0!important;}
.tab-content{display:none;animation:fadeIn 0.3s ease;}
.tab-content.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.thinking-process-list {list-style-type:none;padding-left:0;font-size:14px;color:#546e7a;}
.thinking-process-list li{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.07);display:flex;align-items:center;gap:8px;}
.thinking-process-list li:last-child{border-bottom:none;}
.thinking-process-list .dot{flex-shrink:0;}
.file-attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.file-attachment-item {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}
.file-attachment-item:last-child {
  border-bottom: none;
}
.file-attachment-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}
.file-icon-container {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.file-icon-container i {
    font-size: 20px;
    color: var(--text-light);
}
.file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  margin-right: 10px;
}
.file-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-source {
  font-size: 12px;
  color: var(--text-secondary);
}
.file-preview-container {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f3f5;
}
.file-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tab-content-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}
.message-turn .patient-message { border-bottom: none!important; }
.patient-message {
  background: none!important; border: none!important; border-bottom: none!important; color: #2c3e50!important;
  padding: 14px 18px 4px 18px!important; border-radius: 0!important; max-width: 70%!important; box-shadow: none!important;
}
.patient-message p { margin-bottom: 0!important; padding-bottom: 4px!important; }
.widget-content-container .tab-content .doctor-response, .doctor-response {
  color: var(--text-secondary); font-size: 15px; font-weight: 400; line-height: 1.8;
  max-width: 100%; padding: 0; word-wrap: break-word; margin: 0;
  background: transparent!important; border: none!important; box-shadow: none!important; border-radius: 0!important;
}
.widget-content-container .tab-content .doctor-response h3, .doctor-response h3 {
  color: #2c3e50!important; font-weight: 600!important;
  margin: 1.2em 0 0.6em 0!important; font-size: 18px!important;
  border-bottom: 1px solid rgba(79,195,247,0.3)!important; padding-bottom: 0.3em!important;
}
.widget-content-container .tab-content .doctor-response p, .doctor-response p { margin: 1em 0!important; line-height: 1.7!important;}
.widget-content-container .tab-content .doctor-response strong, .doctor-response strong { font-weight: 600!important; color: #1a365d!important;}
.widget-content-container .tab-content .doctor-response div[style*="padding-left"], .doctor-response div[style*="padding-left"] {transition:background-color 0.2s ease!important;margin:0.5em 0!important;}
.widget-content-container .tab-content .doctor-response div[style*="padding-left"]:hover,
.widget-content-container .tab-content .doctor-response div[style*="padding-left"]:active,
.doctor-response div[style*="padding-left"]:hover,
.doctor-response div[style*="padding-left"]:active {
  background-color: rgba(79,195,247,0.05)!important; border-radius: 4px!important; padding: 0.3em 0.5em 0.3em 1.2em!important;
}
.widget-content-container .tab-content .doctor-response br, .doctor-response br {display:block!important;margin-bottom:0.5em!important;content:""!important;}
.widget-content-container .tab-content .doctor-response span[style*="text-decoration: underline"], .doctor-response span[style*="text-decoration: underline"] {
  background-color:rgba(214,51,132,0.1)!important;padding:0.2em 0.4em!important;border-radius:3px!important;font-weight:500!important;
}
.widget-content-container .tab-content.active .doctor-response {animation:fadeIn 0.3s ease;}
@media (max-width:768px) {
  .message-turn { width: 98%!important; }
  .widget-content-container .tab-content .doctor-response, .doctor-response {font-size:14px;line-height:1.6;}
  .widget-content-container .tab-content .doctor-response h3,.doctor-response h3{font-size:16px!important;}
  .chat-main-content{padding:0.5rem;}
  #initial-view{padding:1rem;}
  .medical-suggestions{gap:8px;}
  .suggestion-tag{padding:6px 12px;font-size:13px;}
  .bottom-input-container{width:95%!important;bottom:15px!important;}
  .patient-message{max-width:85%;}
  .consultation-messages{padding:0.5rem;padding-top:70px;padding-bottom:100px!important;}
  .message{margin-bottom:0rem!important;}
  .message.doctor{margin-bottom:1rem!important;}
  .message.patient{margin-bottom:0.5rem!important;}
}
.consultation-input-row {
  background:rgba(255,255,255,0.95)!important;backdrop-filter:saturate(180%) blur(20px)!important;border:1px solid var(--border-soft)!important;
  border-radius:24px!important;padding:8px 12px!important;box-shadow:var(--shadow-subtle)!important;
  width:100%!important;display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;
}
.new-consultation-btn {
  background:transparent;border:none;color:var(--text-light);font-size:18px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)!important;flex-shrink:0;
}
.new-consultation-btn:hover {transform:rotate(90deg);color:var(--accent-medical);background:rgba(79,195,247,0.1);}
.new-consultation-btn.back-mode {background:transparent!important;transform:rotate(0deg)!important;}
.new-consultation-btn.back-mode:hover {background:transparent!important;transform:scale(1.1)!important;}
.send-message-btn {
  background:transparent;border:none;color:var(--text-light);font-size:18px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;
}
.send-message-btn:not(:disabled) {color:var(--accent-medical);}
.send-message-btn:hover:not(:disabled) {background:rgba(79,195,247,0.1);transform:scale(1.1);}
.send-message-btn:disabled {color:var(--text-hint);cursor:not-allowed;}
/* --- PERMANENT CHAT SIDEBAR (v5 - Floating Arrow Initial View) --- */
.chat-sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10002;
    display: flex; /* Will be set to flex by JS when chat is active */
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Language-aware positioning classes */
.chat-sidebar.english-position { right: 15px; }
.chat-sidebar.arabic-position { left: 15px; }

/* --- COLLAPSED STATE (ARROW ONLY - NO BACKGROUND) --- */
.chat-sidebar.collapsed {
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
}
.chat-sidebar.collapsed .sidebar-menu,
.chat-sidebar.collapsed .sidebar-footer {
    display: none; /* Hard hide menu items when collapsed */
}

/* --- EXPANDED STATE (GLASSY & CURVED) --- */
.chat-sidebar:not(.collapsed) {
    width: 120px; /* Much slimmer - ultra-compact design */
    height: 350px; /* Even more compact */
    padding: 6px; /* Minimal padding for tight design */
    background-color: rgba(255, 255, 255, 0.228);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.sidebar-header {
    width: 100%;
    display: flex;
    justify-content: center; /* Default for collapsed */
}
.chat-sidebar:not(.collapsed) .sidebar-header {
    justify-content: flex-end; /* Push to right when expanded */
    margin-bottom: 30px;
}

/* This is the base style for the toggler. It's the slim grey bar. */
.sidebar-toggler {
    width: 6px;
    height: 80px;
    border-radius: 3px;
    background: rgba(107, 114, 128, 0.5); /* A semi-transparent grey */
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: none;
    cursor: pointer;
    transition: all 0.4s ease;
    display: block; /* Ensure it's visible by default */
}

.sidebar-toggler:hover {
    background: rgba(55, 65, 81, 0.7); /* Darken on hover */
}

/* The bar has no icon, so hide the <i> tag by default. */
.sidebar-toggler i {
    display: none;
}

/* CRITICAL FIX: When the sidebar is EXPANDED, hide the toggler completely. */
.chat-sidebar:not(.collapsed) .sidebar-toggler {
    display: none;
}

/* Collapsed state override: This transforms the transparent button into the grey bar. */
.chat-sidebar.collapsed .sidebar-toggler {
    width: 6px; /* Very slim */
    height: 80px; /* Vertical line height */
    border-radius: 3px; /* Rounded ends for the bar */
    background: rgba(107, 114, 128, 0.5); /* A semi-transparent grey */
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.chat-sidebar.collapsed .sidebar-toggler:hover {
    background: rgba(55, 65, 81, 0.7); /* Darken on hover */
}
.chat-sidebar.collapsed .sidebar-toggler i {
    display: none; /* Hide the arrow icon when it's a bar */
}

/* Arrow Direction Logic for the EXPANDED state only */
.chat-sidebar.english-position:not(.collapsed) .sidebar-toggler i { transform: rotate(180deg); }
.chat-sidebar.arabic-position:not(.collapsed) .sidebar-toggler i { transform: rotate(0deg); }

/* --- Menu Fade-in Logic --- */
.sidebar-menu, .sidebar-footer {
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease 0.2s; /* Delay for nice effect */
}
.chat-sidebar:not(.collapsed) .sidebar-menu,
.chat-sidebar:not(.collapsed) .sidebar-footer {
    opacity: 1; pointer-events: auto;
}

/* Item styles */
.sidebar-menu { flex-grow: 1; gap: 8px; }
.sidebar-footer { padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.sidebar-menu-item {
  display: flex; align-items: center; background: transparent; border: none;
  width: 100%; padding: 8px 6px; border-radius: 6px; font-size: 12px;
  color: #333; cursor: pointer; gap: 8px; transition: background-color 0.2s ease;
  white-space: nowrap; overflow: hidden;
}
.sidebar-menu-item:hover { background-color: rgba(255,255,255,0.7); }
.sidebar-menu-item i {
    font-size: 16px;
    flex-shrink: 0;
    color: #06D6A0; /* This styles ONLY the icon with the requested color */
    transition: color 0.2s ease; /* Add a smooth transition for hover effects */
}
/* --- PRESERVED STYLES FROM ORIGINAL SEGMENT --- */
.consultation-followup-input {
  flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text-primary);padding:10px 12px;min-width:0;
}
.consultation-followup-input::placeholder {color:var(--text-hint);}
@media (prefers-reduced-motion: reduce) {
  * {animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}
}
@media (prefers-contrast: high) {
  :root {--border-soft:rgba(120,144,156,0.3);--border-light:rgba(144,164,174,0.4);}
}