/* =========================
   Theme Variables & Container
   ========================= */
.tais-assistant-panel {
  /* Quiet Blue / Slate theme tokens */
  --bg: #F6F8FB;             /* Overall panel background */
  --card: #FFFFFF;           /* Card / column content bg */
  --text: #0F172A;           /* Primary text */
  --muted: #64748B;          /* Muted/secondary text */

  --primary: #4B8BFA;        /* Main action blue */
  --primary-600: #2E6FFA;
  --primary-700: #1E63F7;

  --accent: #7C3AED;         /* Rare highlight (icons, tags) */
  --success: #10B981;        /* Success state */
  --danger: #EF4444;         /* Danger/destructive state */
  --warning: #F59E0B;        /* Warning/attention */

  --border: #E5E7EB;         /* Soft neutral border */
  --soft: #F1F5F9;           /* Light fill for accordions/cards */
  --ring: rgba(75, 139, 250, 0.25);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 6px 18px rgba(17, 24, 39, .06);
  --shadow-3: 0 12px 30px rgba(17, 24, 39, .08);

  background: var(--bg);
  color: var(--text);
  width: 100%;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
}


/* =========================
   Grid Layout
   ========================= */
.tais-assistant-panel .tais-grid {
  display: grid;
  grid-template-columns: 25% 1fr 35%;
  gap: 20px;
  grid-template-areas: "left middle right";
  align-items: start;
}

.tais-assistant-panel .tais-presets { grid-area: left; }
.tais-assistant-panel .tais-chat    { grid-area: middle; }
.tais-assistant-panel .tais-profile { grid-area: right; }

@media (max-width: 1100px) {
  .tais-assistant-panel .tais-grid { grid-template-columns: 260px 1fr 300px; }
}
@media (max-width: 960px) {
  .tais-assistant-panel .tais-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "middle"
      "left"
      "right";
  }
  .tais-assistant-panel .tais-card { margin-bottom: 12px; }
}

/* =========================
   Cards
   ========================= */
.tais-assistant-panel .tais-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 16px;
}
.tais-assistant-panel .tais-card:hover { box-shadow: var(--shadow-2); }

.tais-assistant-panel .tais-card h1,
.tais-assistant-panel .tais-card h2,
.tais-assistant-panel .tais-card h3 {
  margin: 0 0 12px;
  color: var(--text);
}

/* =========================
   Buttons
   ========================= */
.tais-assistant-panel .generate-btn.btn.btn-primary {
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(75, 139, 250, .25);
}
.tais-assistant-panel .generate-btn.btn.btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: var(--shadow-3);
}
#tais-ai-button-container {
	min-height:20px;
}
#tais-ai-button-container a{
	float:left;
	display:inline-block;
	margin-right:5px;
	display:none;
}
.stop-icon {
  color: var(--danger);
}
.mic-icon {
  color: var(--primary);
}
.trash-icon {
  color: #DC2626;
}
.play-icon {
  color: var(--success);
}
/* =========================
   Inputs & Textareas
   ========================= */
.tais-assistant-panel .tais-textarea,
.tais-assistant-panel .form-control,
.tais-assistant-panel #input
 {
   border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.5;;
}
.tais-assistant-panel .tais-textarea:focus,
.tais-assistant-panel .form-control:focus,
.tais-assistant-panel #input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
/* Make all text inputs & selects inside the panel look the same */
.tais-assistant-panel input[type="text"],
.tais-assistant-panel input[type="search"],
.tais-assistant-panel input[type="email"],
.tais-assistant-panel select {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
}
/* Explicitly catch the “Service To Promote” field if you keep the id */
.tais-assistant-panel #selectService {
  /* optional: set a consistent height to match selects */
  min-height: 44px;
}
/* Consistent focus state */
.tais-assistant-panel input[type="text"]:focus,
.tais-assistant-panel input[type="search"]:focus,
.tais-assistant-panel input[type="email"]:focus,
.tais-assistant-panel select:focus,
.tais-assistant-panel .form-control:focus,
.tais-assistant-panel #input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
/* Form Row Layout */
.tais-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.tais-form-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Form Groups */
.tais-form-group {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.tais-form-group label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

/* top content creation form */
.tais-form-row .tais-form-group {
width:	30%;
margin-left:10px
}
/* Inputs & Selects */
.tais-assistant-panel .tais-select,
.tais-assistant-panel input[type="text"],
.tais-assistant-panel select {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.4;
  outline: none;
  font-size: 0.95rem;
  box-shadow: none;
}

.tais-assistant-panel .tais-select:focus,
.tais-assistant-panel input[type="text"]:focus,
.tais-assistant-panel select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

/* =========================
   Output Box
   ========================= */
.tais-assistant-panel .tais-output {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}

/* =========================
   Accordion
   ========================= */
.tais-assistant-panel .accordion-btn {
  background: var(--soft);
  color: var(--text);
}
.tais-assistant-panel .accordion-content {
  background: var(--card);
  border-top: 1px solid var(--border);
}

/* =========================
   Profile Panel
   ========================= */
.tais-assistant-panel .tais-avatar {
  border: 1px solid var(--border);
  background: var(--soft);
}
.tais-assistant-panel .tais-description {
  background: var(--card);
  border: 1px solid var(--border);
}

/* =========================
   History Border
   ========================= */
.tais-assistant-panel .tais-history-border {
  background: var(--soft);
  border: 1px solid var(--border);
}

/* =========================
   Text
   ========================= */
.tais-assistant-panel .tais-muted {
  color: var(--muted);
}
.tais-sub-header{
text-align:center;
font-weight:600;
margin-top:5px;	
}

/* =========================
   General Formatting Classes
   ========================= */
   
   .tais-left {
   	text-align:left;
   }
   .tais-right {
   	text-align:right;
   }
   .tais-center {
   	text-align:center;
   }
   
   #exitMessage{
   	display:none;
   	color: var(--warning);
}