/* Vision Mapping Assistant — Isolation Mode
   We use custom class names to bypass global Pixel CSS conflicts.
*/

/* 1. NUCLEAR FIX: KILL THE GHOST BORDERS (Global) */
#visionAssistantMount,
#visionMappingMount,    
#visionAssistantSide,
#visionMappingSide,
#vmConsoleCard,
#vmRightRailCard,
.visionmapping__panel {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. RE-ADD THE ONE TRUE BORDER (Gold Card) */
#vmConsoleCard,
#vmRightRailCard {
    border: 1px solid #b08a48 !important;
    border-radius: 0.5rem !important;
    background-color: #fffdf8 !important; 
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(176, 138, 72, 0.1) !important;
}

/* -----------------------------------------------------------------
   3. ISOLATED FORM STYLING (The "Stealth" Classes)
   Pixel.css does not know these classes exist, so it cannot squash them.
   ----------------------------------------------------------------- */

/* The Footer Container */
.vm-iso-footer {
    padding: 15px;
    background: #ffffff;
    border-top: 1px solid #eee;
}

/* The Form Container (Forces Stacking) */
.vm-iso-form {
    display: block !important;
    width: 100% !important;
}

/* The Input Field (Full Width, Gold Border, 0.5rem Radius) */
.vm-iso-input {
    display: block !important;
    width: 100% !important;
    min-height: 60px !important;
    margin-bottom: 10px !important;
    
    background-color: #ffffff !important;
    border: 1px solid #b08a48 !important;
    border-radius: 0.5rem !important;
    padding: 10px 15px !important;
    
    color: #000 !important;
    font-size: 16px !important;
    box-shadow: none !important;
    outline: none !important;
    resize: none !important; /* Stop manual resize breaking layout */
}

.vm-iso-input:focus {
    box-shadow: 0 0 0 2px rgba(176,138,72,0.2) !important;
}

/* The Button Row (Flex Side-by-Side) */
.vm-iso-btn-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 10px !important;
}

/* The Buttons */
.vm-iso-btn {
    flex: 1 !important;             /* 50/50 Split */
    min-height: 50px !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
    background: #fff;
    border: 1px solid #b08a48;
    color: #b08a48;
}

/* Primary Button Style (Send) */
.vm-iso-primary {
    background: #b08a48 !important;
    color: #fff !important;
}

.vm-iso-btn:hover {
    opacity: 0.9;
}

/* ----------------------------------------------------------------- */

/* Ensure layout containers flex */
#visionAssistantMount,
#visionMappingMount,
#vmAssistantShell,
#visionAssistantSide,
#visionMappingSide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Inner cards fill height */
#visionAssistantMount .card,
#visionMappingMount .card,
#visionAssistantSide .card,
#visionMappingSide .card {
    height: 100%;
    border: none !important; 
    background: transparent !important;
}

/* Assistant Pills */
#chatbotButtons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .5rem;
}

.assistant-pill {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.assistant-pill:hover { background: #f0f0f0; }

.assistant-pill.active {
  background-color: #b08a48;
  color: #fff;
  border-color: #b08a48;
}

/* Button Styling Override for Side Panel */
#visionAssistantSide .btn,
#visionMappingSide .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font-size: 0.84rem;
  background: #fff;
  color: #000;
  border: 1px solid #b08a48;
  border-radius: 0.5rem;
  text-decoration: none;
}