/* =========================================
   Quiet Blue / Slate Theme Variables
   ========================================= */
:root {
  --bg: #F6F8FB;             /* Overall page background */
  --card: #FFFFFF;           /* Cards / boxes */
  --text: #0F172A;           /* Main text */
  --muted: #64748B;          /* Muted text */

  --primary: #4B8BFA;        /* Primary blue */
  --primary-hover: #2E6FFA;
  
  --secondary: #7C3AED;      /* Accent purple */
  --secondary-hover: #642fc1;
  
  --orange: #ff5500;      /* Accent orange */
  --orange-hover: #df4a00;
  
  --green: #009400;      /* Accent green */
  --green-hover: #007300;
  
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;

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

  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 14px;
  
  --button-text: 16px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 6px 18px rgba(17, 24, 39, .06);
}

/* =========================================
   General
   ========================================= */
body {
  background: var(--bg);
  color: var(--text);
  cursor: default !important;
  font-family: Arial, sans-serif;
}

.tais-page-message {
  color: var(--success) !important;
  font-size: 38px;
  text-align: center;
  width:50%;
  margin:auto;
  margin-top:50px;
}



.QTitle {
  color: var(--danger) !important;
}

.linkButtons { display: inline-block; vertical-align: middle; }
.block { display: block; width: 150px; margin: 10px; }
.cert { width: 40%; }

/* =========================================
   Layout & Wrappers
   ========================================= */
.mainWrapper {
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative;
  left: 50% !important;
  right: 50% !important;
  background-color: var(--soft);
  border: 1px solid var(--border);
  margin-top: -40px;
}

.outerBox {
  width: 20%;
  max-width: 400px;
  border: 2px solid var(--primary);
  min-height: 50px;
}

/* =========================================
   Chatbox & Forms
   ========================================= */
.tais-chatbox {
  max-width: 600px;
  background-color: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  margin: 5px auto;
  padding: 0px 30px;
}

h1 {
  color: var(--primary);
  text-align: center;
  margin-top: 0;
}

.form-control,
#input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--text);
  height: 220px;       /* fixed height */
  resize: vertical;    /* allow user to resize vertically only */
}
}

.form-control:focus,
#input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.output {
  padding: 10px;
  margin-top: 20px;
  font-size: 1.2em;
  background-color: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
}

/* =========================================
   Buttons
   ========================================= */
.generate-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  cursor: pointer;
}
.generate-btn:hover { background: var(--primary-hover); }

#speak-ai-answer, #start-btn {
  border: 1px solid var(--success);
  background-color: #fff;
  color: var(--text);
}
#stop-ai-speak, #stop-btn, #clear-btn {
  border: 1px solid var(--danger);
  background-color: #fff;
  color: var(--text);
}
.btn-ai-link {
	width:150px;
	min-height:68px;
	margin-left:5px;
	margin-right:5px;
	background-color:var(--orange);
}
.btn-ai-link:hover {
	background-color:var(--orange-hover) !important;
}
.btn-internal{
	position: relative;
	z-index: 99999999 !important;
	width: 200px;
	float: left;
	display: inline-block;
	margin-bottom: 0px;
	margin-right: 5px;
	background-color: var(--green);
}
.btn-internal:hover{
	background-color: var(--green-hover);
}
.btn-special{
	width:100% !important;
	margin-bottom:0px;
	background-color:var(--secondary) !important;
}
.btn-special:hover{
	background-color:var(--secondary-hover) !important;
}
.tais-actions{
	text-align:center;
	margin-bottom:5px;
}
.btn-action{
	width:48%;
	min-width:200px;
	margin-bottom:5px;
}
.btn-like-icon{
	min-height:50px;
}

/* =========================================
   Accordion
   ========================================= */
#tais-history-border {
  line-height: 1.1em;
  padding: 10px;
  background-color: var(--soft);
  border: 1px solid var(--border);
}

.accordionContainer { background-color: var(--card); }

.accordion {
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--text);
}

.accordion-btn {
  background: var(--soft);
  color: var(--primary);
  border: none;
  padding: 5px;
  cursor: pointer;
}

/* =========================================
   Select Elements
   ========================================= */
#ai-selector {
  background-color: var(--secondary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 15px;
  border: none;
  width:200px;
  min-height:68px;
  font-size: var(--button-text);
}
#ai-selector:focus {
  box-shadow: 0 0 5px var(--ring);
}
#ai-selector:hover {
  background-color: var(--secondary-hover);
}