/*============Glogbal Style================ */
html,
body {
height: 100%;
font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
}

p {
font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
font-size: 18px;
line-height: 2.3rem;
color: #000;
margin: 0;
}

.text-purple{
color: #6166be;
}

.bg-black{
background:#0f172a;
}

.bg-purple{
background:#6166be;
}

.bg-light-green{
background-color: #06b6d4 !important;	
}
.border-light-green {
border-color:#06b6d4;
}	

.border-purple {
border-color: #6166be !important;
}


/*主banner start*/
.matter-banner-cover{
padding:18% 0;
background-image:url("../images/iot_security/2025_iot_security/matter/new/main_banner_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 30%;
left:5%;
}

.matter-banner-title h1{
font-size: 60px;
line-height: 5.2rem;
color: #88F1FF;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 1%;
text-align: center;	
}

.banner-subtitle-h1{
font-size: 21px;
color: #fff;
text-align: center;
display: block;
margin-bottom: 2%;
}

/*主banner end*/


.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2,.dac-title h2{
font-size:42px;
line-height: 3rem;
}

.main-subtitle ,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle,.dac-subtitle{
display: block;
font-size: 21px;
line-height: 2.4rem;
}

.word-break-banner-subtitle-h1{
display: block;
}

.word-break-h1{
display: block;
}

.production-bg-cover{
padding: 5% 0 5% 0;
}


        
/* Custom Colors matching original design */
.text-primary-custom { color: #6166be; }
.bg-primary-custom { background-color: #6166be; }
.btn-primary-custom {
background-color: #6166be;
border-color: #6166be;
color: white;}


.btn-primary-custom:hover {
background-color: #3a45a5;
border-color: #3a45a5;
}



/* Card Hover Effects */
.hover-card {
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}

.card:hover {
transition: all 0.3s ease;	
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border-color:#17a2b8;
}

.icon-box {
width: 75px;
height: 75px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.2rem;
border-radius: 15px ;
border:2px solid #84c3f7;
}

.icon-box img{
width: 65%;
vertical-align:middle;
}


.card-body{
font-size:17px;
line-height: 2rem;
}


/* Decorative Blobs (Hero) */
/*
.blob {
position: absolute;
border-radius: 50%;
filter: blur(64px);
z-index: 0;
}
.blob-1 { top: -6rem; right: -6rem; width: 24rem; height: 24rem; background-color: #3b82f6; opacity: 0.2; }
.blob-2 { top: 50%; left: -6rem; width: 18rem; height: 18rem; background-color: #a855f7; opacity: 0.2; }
*/

/* AI Widget Custom Styles (Replicating Tailwind Utilities) */
/*
#ai-widget-container {
z-index: 1050;
}
#ai-widget-window {
transform-origin: bottom right;
transition: all 0.3s ease;
width: 90vw;
max-width: 450px;
max-height: 80vh;
}
*/
/* State classes for JS toggling */
/*
.scale-0 { transform: scale(0); }
.opacity-0 { opacity: 0; pointer-events: none; }

.typing-dot {
animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
*/

/* Tab Active State */
/*
.tab-active {
color: #2563eb;
border-bottom: 2px solid #2563eb;
background-color: white;
}
.tab-inactive {
color: #64748b;
}

Markdown Styles 
.prose h3 { font-size: 1.1em; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.2em; color: #1e3a8a; }
.prose ul { padding-left: 1.2em; margin-bottom: 0.5em; list-style-type: disc; }
.prose strong { color: #2563eb; }
*/



/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.matter-banner-title h1{
font-size: 50px;
line-height: 4rem;
}
.banner-subtitle-h1{
font-size: 18px;
color: #fff;
text-align: center;
display: block;
margin-bottom: 2%;
}
	
}
/*max-width: 1400px*/
@media screen and (max-width: 1400px) {
.banner-title-position{
position: absolute;
top: 30%;
left:4%;
}
	
.matter-banner-title h1{
font-size: 40px;
line-height: 3.5rem;
}
.banner-subtitle-h1{
font-size: 15px;
margin-bottom: 2%;
letter-spacing: -1px;
}
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:45px;
line-height: 3.5rem;
}
	
.main-subtitle,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle{
font-size:23px;
line-height: 2.3rem;
}	

}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
.matter-banner-cover {
padding: 22% 0;
}	
.banner-title-position{
top: 25%;
left:1%;
}

.matter-banner-title h1{
font-size: 35px;
line-height: 3.2rem;
}
	
.banner-subtitle-h1{
font-size: 15px;
margin-bottom: 2%;
letter-spacing: -1px;
}
	
h4{
line-height: 2.3rem;
}	


.word-break-banner-subtitle-h1{
display: inline;
}	

.word-break-h2-1190px{
display: block;
}
.word-break-subtitle-1190px{
display: block;
}
}


/*Medium devices (tablets, less than 992px)*/

/*.col<576px(Extra small)/ .col-sm-≥576px(Small)/.col-md-≥768px(Medium)/
.col-lg-≥992px(Large)/.col-xl-≥1200px(Extra large)*/
@media screen and (max-width: 991.98px) {
.matter-banner-title h1{
font-size: 28px;
line-height: 2.4rem;
}
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:40px;
line-height: 3.2rem;
}

.word-break-subtitle-1190px{
display: inline;
}	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.banner-title-position{
top: 9%;
left:4%;
}

.matter-banner-cover{
padding:62% 0;
background-image:url("../images/iot_security/2025_iot_security/matter/new/main_banner_bg_sm.png");
}
	
.matter-banner-title h1{
font-size: 48px;
line-height: 3.5rem;
text-align: left;
}
	
.banner-subtitle-h1{
font-size: 18px;
margin-bottom: 2%;
line-height: 2rem;
text-align: left;
}
	
.main-subtitle,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle{
font-size:22px;
line-height: 2.3rem;
}	
	
	
.word-break-h1{
display: inline;
}

.word-break-h2-phone{
display: block;
}	

}

/*Extra small devices (portrait phones, less than 576px)*/

@media screen and (max-width: 575.98px) { 

.banner-title-position{
top: 8%;
left:3%;
}
	
	
.matter-banner-cover{
padding:90% 0;
background-image:url("../images/iot_security/2025_iot_security/matter/new/main_banner_bg_phone.png");
}	

.matter-banner-title h1 {
font-size: 32px;
line-height: 3.2rem;
text-align: left;
margin-bottom: 2%;
text-align: justify;
}

.banner-subtitle-h1{
font-size: 19px;
margin-bottom: 2%;
line-height: 2.2rem;
/*letter-spacing: -1px;*/
text-align: justify;
}	
	
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:28px;
line-height: 2.9rem;
}	

.production-bg-cover{
padding: 15% 0 15% 0;
}
	
.icon-box {
width: 100px;
height: 100px;
}	

.small{
line-height: 1.3rem;
}
	
.word-break-h2-phone,.word-break-h2-1190px{
display: inline;
}	

.word-break-h2-0{
display: block;
}
	

}

	

/*Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width*/

/*=====================================================
  CSP 合規性調整：原 inline style 改為外部 class
  (公司資安政策不允許 style="" 內嵌樣式)
=====================================================*/

/* 按鈕 - 半透明玻璃感（原banner上的AI顧問按鈕） */
.btn-glass {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(4px);
}

/* Hero區塊 z-index 層級 */
.z-index-10 {
	z-index: 10;
}

/* 藍色半透明徽章底色 */
.badge-blue-translucent {
	background-color: rgba(59, 130, 246, 0.2);
	font-size: 0.875rem;
}

/* 淺藍文字強調 */
.text-blue-light {
	color: #60a5fa;
}

/* Banner導言文字寬度限制與顏色 */
.lead-banner-text {
	max-width: 800px;
	color: #cbd5e1 !important;
}

/* 區塊淺灰底色（hardware / compliance 區） */
.bg-section-gray {
	background-color: #e4eaef;
}

/* 卡片左側色條樣式 */
.card-border-left {
	border-left-width: 4px !important;
	border-radius: 0.5rem;
}

/* 圓形數字標籤（35x35） */
.circle-35 {
	width: 35px;
	height: 35px;
}

/* 淺灰面板底色（SDK架構區） */
.bg-panel-light {
	background-color: #ebeff2;
}

/* 深色卡片底色（服務模式區） */
.bg-dark-card {
	background-color: #1e293b;
}

/* 深色卡片底色 - 推薦方案（加邊框與位移效果） */
.bg-dark-card-featured {
	background-color: #1e293b;
	border-width: 2px;
	transform: translateY(-5px);
}

/* 卡片右上角徽章定位（最推薦） */
.badge-corner {
	top: 0;
	right: 0;
	border-bottom-left-radius: 0.5rem;
}

/* 資訊色文字（模式二標題） */
.text-info-custom {
	color: #17a2b8 !important;
}

/* 資訊色邊框（模式二底部分隔線） */
.border-info-custom {
	border-color: #17a2b8 !important;
}

/* 紫色圓形icon底色 */
.icon-circle-purple {
	background: #6166be;
}

/* AI對話視窗 - 標題列底色 */
.bg-chat-header {
	background-color: #1d4ed8 !important;
}

/* icon尺寸 - 大 */
.icon-lg {
	font-size: 1.25rem;
}

/* icon尺寸 - 中 */
.icon-md {
	font-size: 1.1rem;
}

/* 對話框頭像圓形容器（32x32，含透明度） */
.avatar-32 {
	width: 32px;
	height: 32px;
	opacity: 0.1;
}

/* 頭像內icon恢復完全不透明 */
.opacity-full {
	opacity: 1;
}

/* 對話泡泡 - 左側（AI回覆樣式） */
.bubble-left {
	border-radius: 0 1rem 1rem 1rem;
}

/* 對話泡泡 - 右側（使用者訊息樣式） */
.bubble-right {
	border-radius: 1rem 1rem 0 1rem;
}

/* 輸入框淺色底 */
.bg-input-light {
	background-color: #f1f5f9;
}

/* 送出按鈕定位（輸入框內右側） */
.btn-send-position {
	right: 5px;
	top: 3px;
	width: 32px;
	height: 32px;
}

/* 浮動按鈕（FAB，56x56） */
.btn-fab {
	width: 56px;
	height: 56px;
	pointer-events: auto;
	transition: transform 0.2s;
}

/* 打字動畫圓點尺寸（含右邊距） */
.typing-dot-size {
	width: 8px;
	height: 8px;
	margin-right: 4px;
}

/* 打字動畫最後一個圓點（無右邊距） */
.typing-dot-size-last {
	width: 8px;
	height: 8px;
}