@charset "UTF-8";
/*
Theme Name: Sample Theme
Author: Ken C
Author URI: #
Description:
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1
*/

:root{
    --bg:#fafaf9;
    --panel:#ffffff;
    --border:#e5e3df;
    --text-main:#2d2b28;
    --text-dim:#87847e;
    --accent:#0e56a4;
    --accent-hover:#b5563a;
    --bubble-user:#f0eee9;
    --bubble-bot:#ffffff;
    --radius:16px;
    --font:'Inter', sans-serif;
}



/* ---------- Header ---------- */
.chat-header{
    padding:14px 22px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.avatar{
    width:32px; height:32px;
    border-radius:9px;
    background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.avatar svg{ width:18px; height:18px; color:#fff; }
.chat-header h1{
    font-size:15px;
    font-weight:600;
    margin:0;
    line-height:2em;
}

.chat-app {
    position: fixed;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: auto;
    z-index: 1000;
    transition: bottom 0.2s ease;
}

#userInput {
  font-size: 16px; /* anything under 16px triggers iOS auto-zoom on focus */
}

.messages.hidden {
  display: none;
}

.input-wrap {
  position: relative;
  z-index: 2; /* stays above content-area's shadow but content-area still overlays above it */
}

.content-area {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 0;              /* was max-height: 0 (if you had that) */
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  transform: translateY(100%);
  opacity: 0;
  transition: height 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

.content-area.revealed {
  height: 160px;          /* was max-height: 500px */
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.content-inner {
  display: flex;
  flex-direction: column;
  height: 100%;            /* now resolves correctly, since content-area has a real height */
  min-height: 0;
  overflow: hidden;
}

.messages {
  display:none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.messages.revealed{
  display: flex; /* or block, whatever .messages' normal display value is */
}

.main-content.revealed { display: block; }
.main-content { display: none; }
.puller {
    width: 60px;
    height: 10px;
    background: #ccc;
    border-radius: 5px;
    margin: 12px auto;
    cursor: grab;
    touch-action: none;
    position: relative;
}
.puller::before {
  content: '';
  position: absolute;
  top: -15px; left: -20px; right: -20px; bottom: -15px; /* invisible larger hit area */
}
/* .chat-header .sub{
    font-size:12px;
    color:var(--text-dim);
}

 .content-area{
  transition: transform 0.3s ease;
  touch-action: none;
  }


  .content-area.revealed{
    opacity:1;
    transform:translateY(0);
  }
  .content-inner{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  } */

/* ---------- Messages ---------- */
.messages{
    flex:1;
    overflow-y:auto;
    padding:24px 16px 12px;
    min-height:0;
}
.messages-inner{
    max-width:720px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.program-card {
    background: #f8f8f6;
    border: 1px solid #e8e6e1;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 8px 0;
	text-align: left;
}
.program-card h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}
.program-card p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #666;
}
.program-card ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.8;
}
.program-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 10px 0;
    text-align: left;
}
.perf-table th {
    background: #f0f0ee;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #ddd;
}
.perf-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
.perf-up {
    color: #2e7d32;
    font-weight: 600;
}
.perf-down {
    color: #c62828;
    font-weight: 600;
}
.trend-chart {
    background: #f8f8f6;
    border: 1px solid #e8e6e1;
    border-radius: 10px;
    padding: 14px;
    margin: 10px 0;
    text-align: left;
}
.trend-chart h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
}
.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}
.trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.trend-col span {
    font-size: 10px;
    color: #999;
}
.trend-bar {
    width: 100%;
    background: linear-gradient(180deg, #4caf50, #81c784);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
}
.trend-col.highlight .trend-bar {
    background: linear-gradient(180deg, #2e7d32, #4caf50);
}
.trend-col.highlight span {
    font-weight: 700;
    color: #2e7d32;
}

.opportunity-card {
    display: flex;
    gap: 12px;
    background: #f8f8f6;
    border: 1px solid #e8e6e1;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 8px 0;
    text-align: left;
}
.opp-rank {
    width: 28px;
    height: 28px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.opp-content h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
}
.opp-content p {
    margin: 0;
    font-size: 12px;
    color: #666;
}
.opp-value {
    color: #2e7d32 !important;
}
.opp-bar-chart {
    margin: 12px 0;
}
.opp-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.opp-bar-label {
    font-size: 11px;
    width: 80px;
    text-align: right;
    flex-shrink: 0;
}
.opp-bar {
    height: 22px;
    background: linear-gradient(90deg, #4caf50, #81c784);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}
.opp-bar span {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.category-growth {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.growth-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.growth-label {
    font-size: 11px;
    width: 100px;
    text-align: right;
    flex-shrink: 0;
}
.growth-row .growth-bar {
    height: 18px;
    border-radius: 3px;
    min-width: 4px;
}
.growth-row.up .growth-bar {
    background: linear-gradient(90deg, #4caf50, #81c784);
}
.growth-row.down .growth-bar {
    background: linear-gradient(90deg, #e57373, #c62828);
}
.growth-val {
    font-size: 11px;
    font-weight: 700;
    width: 40px;
}
.growth-row.up .growth-val {
    color: #2e7d32;
}
.growth-row.down .growth-val {
    color: #c62828;
}
.insight-callout {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.6;
}
  .msg-row{ display:flex; gap:12px; animation:fadeUp .25s ease; }
  .msg-row.user{ flex-direction:row-reverse; }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .msg-avatar{
    width:28px; height:28px;
    border-radius:8px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
    font-weight:600;
    margin-top:2px;
  }

.msg-row{ display:flex; gap:12px; animation:fadeUp .25s ease; }
.msg-row.user{ flex-direction:row-reverse; }

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

.msg-avatar{
    width:28px; height:28px;
    border-radius:8px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
    font-weight:600;
    margin-top:2px;
}

.msg-row.bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.msg-row.bot .bubble {
    width: 100%;
}
.msg-row.bot .msg-avatar{ color:#fff; }
.msg-row.user .msg-avatar{ background:var(--bubble-user); color:var(--text-main); }

.bubble{
    padding:12px 16px;
    border-radius:var(--radius);
    font-size:14.5px;
    line-height:1.6;
}
.msg-row.bot .bubble{
    background:var(--bubble-bot);
    border:1px solid var(--border);
    border-top-left-radius:4px;
}
.msg-row.user .bubble{
    background:var(--bubble-user);
    border-top-right-radius:4px;
}

/* Suggested questions */
.suggestions{
    max-width: 720px;
    margin: 4px auto 0;
    padding: 7px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-shrink: 0;
    border-bottom: 1px solid #ddd;
}

.suggestions.hidden{ display:none; }
.chip{
    font-family:var(--font);
    font-size:9px;
    color:var(--text-main);
    background:var(--panel);
    border:1px solid var(--border);
    padding:9px 14px;
    border-radius:20px;
    cursor:pointer;
    transition:background .15s, border-color .15s;
}

.is-android .chip {
    font-size:9px;
    padding: 9px 6px
}

.is-android .suggestions{
    padding: 7px 5px;
}

.chip:hover{ background:var(--bubble-user); border-color:#d8d5cf; }

/* Typing indicator */
.typing{ display:flex; gap:4px; padding:14px 16px; }
.typing span{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--text-dim);
    animation:blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{
    0%, 80%, 100%{ opacity:.25; transform:scale(.85); }
    40%{ opacity:1; transform:scale(1); }
}

/* ---------- Input bar (bottom, fixed) ---------- */
.input-wrap{
    padding:0;
    flex-shrink:0;
}
.input-bar{
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:20px;
    padding:8px 8px 8px 18px;
    box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.input-bar textarea{
    flex:1;
    border:none;
    outline:none;
    resize:none;
    background:transparent;
    font-family:var(--font);
    font-size:14.5px;
    line-height:1.5;
    color:var(--text-main);
    max-height:140px;
    padding:8px 0;
}
.input-bar textarea::placeholder{ color:var(--text-dim); }

.send-btn{
    width:36px; height:36px;
    border-radius:12px;
    border:none;
    cursor:pointer;
    background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .15s, opacity .15s, transform .15s;
}
  .send-btn:hover:not(:disabled){ background:var(--accent-hover); }
  .send-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .send-btn svg{ width:15px; height:15px; color:#fff; }

.hint{
     text-align:center;
    font-size:11.5px;
    color:var(--text-dim);
    margin-top:8px;
}

#sitefooter{
	display:none;
}

.msg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* if you want circular avatars */
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

.topnav,#navLinks,.topnav-logo{
	display:none;
}

@media (max-width: 576px) {
	
	.container{
		padding-left: 0!important;
		padding-right: 0!important;
	}
	
    .product-services .prodlist {
        display: flex;
        flex-wrap: wrap;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
		height: 340px;
    }

    .product-services .prodlist::-webkit-scrollbar {
        width: 6px;
    }

    .product-services .prodlist::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 3px;
    }

    .product-services .prodlist::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

    .product-services .prodlist .item {
        overflow: hidden;
        margin-bottom: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        width: 33%;
    }
	
	.product-services .categories h2{
		font-size: 11px;
        letter-spacing: 4px;
	}
	
	.product-services .bottom-header .container-full{
		overflow: hidden;
		display: block;
	}
	
	.product-services .bottom-header .container-full img{
		margin-top: -25px;
	}
	.topnav{
		display: block;
        position: absolute;
        z-index: 999999;
        top: 33%;
        left: 2%;
	}
	
	.topnav-logo{
		display: block;
		position: absolute;
		max-width: 15%;
		top: 19%;
		right: 3%;
	}
	.topnav-logo img{
		width: 100%;
	}
	.topnav i{
		font-size: 2em;
    	color: #fff;
	}
	#navLinks {
	  display: none;
		background: #ab9b36;
	}
	
	#navLinks a{
		color: #fff;
		padding: .5em 1em;
        display: block;
        text-decoration: none;
        text-transform: uppercase;
	}
	
	.top-header{
		display:none;
	}
	
	main .categories{
		padding: 2.5rem 0;
	}
}
@media (max-width: 768px) {
    .bottom-header {
        margin-top: 0!important;
    }
}