@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Vazirmatn;src:url(/fonts/webfonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}:root,[data-theme=dark],[data-theme=light]{color-scheme:dark only;--primary-50: #ecfdf5;--primary-100: #d1fae5;--primary-200: #a7f3d0;--primary-500: #10b981;--primary-600: #059669;--primary-700: #047857;--primary-800: #065f46;--accent-gold: #f59e0b;--accent-gold-dark: #d97706;--accent-amber-light: #fef3c7;--accent-cyan: #06b6d4;--accent-rose: #f43f5e;--accent-violet: #8b5cf6;--bg-main: #0b1120;--bg-surface: #131d33;--bg-surface-elevated: #1a2744;--bg-card: rgba(19, 29, 51, .85);--bg-glass: rgba(19, 29, 51, .75);--border-color: #1e293b;--border-focus: #34d399;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-inverse: #0f172a;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 15px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 45px rgba(0, 0, 0, .65);--shadow-glow: 0 0 30px rgba(16, 185, 129, .35);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{direction:rtl;font-family:Vazirmatn,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark only}body{background-color:var(--bg-main);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden;transition:background-color var(--transition-normal),color var(--transition-normal)}button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none}input,select,textarea{font-family:inherit;font-size:inherit;outline:none;border:1px solid var(--border-color);background-color:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input:focus,select:focus,textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #10b98126}a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-500)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;user-select:none}.btn-primary{background:linear-gradient(135deg,var(--primary-600),var(--primary-500));color:#fff;box-shadow:0 4px 12px #10b9814d}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-700),var(--primary-600));transform:translateY(-2px);box-shadow:0 6px 18px #10b98166}.btn-accent{background:linear-gradient(135deg,var(--accent-gold-dark),var(--accent-gold));color:#fff;box-shadow:0 4px 12px #f59e0b4d}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 18px #f59e0b73}.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--primary-50);border-color:var(--primary-500);color:var(--primary-700);transform:translateY(-1px)}[data-theme=dark] .btn-secondary:hover{background:#10b9811a;color:var(--primary-200)}.btn-sm{padding:.4rem .85rem;font-size:.85rem;border-radius:var(--radius-sm)}.btn-icon{padding:.6rem;border-radius:var(--radius-md);color:var(--text-secondary)}.btn-icon:hover{background:var(--primary-50);color:var(--primary-600)}[data-theme=dark] .btn-icon:hover{background:#ffffff14;color:var(--primary-200)}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.78rem;font-weight:600;border-radius:var(--radius-full)}.badge-success{background:#10b98126;color:var(--primary-600);border:1px solid rgba(16,185,129,.3)}[data-theme=dark] .badge-success{color:#34d399}.badge-gold{background:#f59e0b26;color:var(--accent-gold-dark);border:1px solid rgba(245,158,11,.3)}[data-theme=dark] .badge-gold{color:#fbbf24}.badge-info{background:#06b6d426;color:#0891b2;border:1px solid rgba(6,182,212,.3)}.badge-danger{background:#f43f5e26;color:var(--accent-rose);border:1px solid rgba(244,63,94,.3)}.card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);box-shadow:var(--shadow-md);display:flex;flex-direction:column}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:#10b98166}.ticker-container{background:linear-gradient(90deg,#0f172a,#1e293b,#0f172a);color:#fff;padding:.5rem 1rem;overflow:hidden;font-size:.85rem;position:sticky;top:0;z-index:99;border-bottom:1px solid rgba(56,189,248,.22);display:flex;align-items:center;gap:1rem}.ticker-label{display:flex;align-items:center;gap:.4rem;background:#00000040;border:1px solid rgba(255,255,255,.2);padding:.2rem .6rem;border-radius:var(--radius-full);font-weight:700;white-space:nowrap;font-size:.78rem;flex-shrink:0;z-index:2}.ticker-track-wrapper{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;mask-image:linear-gradient(to left,transparent,black 15px,black calc(100% - 15px),transparent);-webkit-mask-image:linear-gradient(to left,transparent,black 15px,black calc(100% - 15px),transparent)}.ticker-track{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;animation:marquee 380s linear infinite;will-change:transform}.ticker-track:active{animation-play-state:paused}.ticker-container:hover .ticker-track{animation-play-state:paused}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(50%)}}.ticker-item{display:inline-flex;align-items:center;gap:.5rem}.ticker-item .rate{font-weight:700;color:#fef08a}.ticker-item .change-up{color:#86efac}.ticker-item .change-down{color:#fca5a5}.modal-overlay{position:fixed;inset:0;background:#000000a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:1000;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-content{background:var(--bg-surface-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);transform:scale(.95);transition:transform var(--transition-normal);display:flex;flex-direction:column}.modal-overlay.active .modal-content{transform:scale(1)}@media (max-width: 768px){.modal-overlay{padding:.5rem;align-items:flex-end}.modal-content{max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-body{padding:1rem!important}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color);background:var(--bg-surface);position:sticky;top:0;z-index:10}.modal-title{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}.modal-close-btn{font-size:1.5rem;color:var(--text-muted);line-height:1;padding:.25rem;border-radius:var(--radius-sm);transition:color var(--transition-fast)}.modal-close-btn:hover{color:var(--accent-rose)}.modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.form-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid-3col{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}@media (max-width: 640px){.form-grid-2col{grid-template-columns:1fr!important}}.hero-section{position:relative;border-radius:var(--radius-lg);padding:2.5rem;margin-bottom:2rem;background:linear-gradient(135deg,#10b9811f,#f59e0b14);border:1px solid rgba(16,185,129,.25);display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;overflow:hidden}.hero-glow{position:absolute;top:-20%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(16,185,129,.25) 0%,transparent 70%);pointer-events:none}.nav-tabs{display:flex;align-items:center;gap:.5rem;border-bottom:2px solid var(--border-color);margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none}.nav-tabs::-webkit-scrollbar{display:none}.nav-tab{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;color:var(--text-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom:3px solid transparent;transition:all var(--transition-fast);white-space:nowrap}.nav-tab:hover{color:var(--primary-600);background:#10b9810f}.nav-tab.active{color:var(--primary-600);border-bottom-color:var(--primary-500);background:#10b9811a}[data-theme=dark] .nav-tab.active{color:#34d399;border-bottom-color:#34d399}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2rem}.tool-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-500),var(--accent-gold));opacity:0;transition:opacity var(--transition-fast)}.tool-card:hover{transform:translateY(-3px);border-color:var(--primary-500);box-shadow:var(--shadow-md)}.tool-card:hover:before{opacity:1}.tool-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#10b9811f;color:var(--primary-600);margin-bottom:.25rem}.chat-drawer{position:fixed;bottom:20px;left:20px;z-index:1100}.chat-toggle-btn{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#059669,#047857);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #10b98173;cursor:pointer;transition:transform var(--transition-normal),box-shadow var(--transition-normal);position:relative;border:2px solid rgba(52,211,153,.5)}.chat-toggle-btn:hover{transform:scale(1.08);box-shadow:0 12px 30px #10b98199}.factory-floating-btn{animation:pulse-glow 3s infinite alternate}.floating-hub-pill{position:absolute;right:72px;white-space:nowrap;background:#064e3bf2;color:#fff;border:1px solid rgba(52,211,153,.5);border-radius:var(--radius-full);padding:.35rem .85rem;font-size:.8rem;font-weight:700;box-shadow:0 4px 15px #0000004d;backdrop-filter:blur(8px);pointer-events:none}.chat-badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;background:var(--accent-rose);border-radius:50%;border:2px solid #fff;font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #f43f5eb3;animation:pulse-dot 1.3s infinite}.chat-window{position:absolute;bottom:78px;left:0;width:420px;max-width:calc(100vw - 32px);height:580px;max-height:82vh;background:var(--bg-surface-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(20px) scale(.95);transition:all var(--transition-normal);z-index:1200}.chat-window.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.chat-header{background:linear-gradient(135deg,var(--primary-700),var(--primary-600));color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.chat-bubble{max-width:82%;padding:.65rem .95rem;border-radius:var(--radius-md);font-size:.9rem;line-height:1.5;word-break:break-word}.chat-bubble.seller{background:var(--bg-surface);border:1px solid var(--border-color);align-self:flex-start;border-bottom-right-radius:2px}.chat-bubble.user{background:var(--primary-600);color:#fff;align-self:flex-end;border-bottom-left-radius:2px}.chat-input-area{padding:.75rem 1rem;border-top:1px solid var(--border-color);display:flex;align-items:center;gap:.5rem;background:var(--bg-surface)}.subunit-mini-card{transition:all var(--transition-fast)}.subunit-mini-card:hover{border-color:var(--primary-500)!important;transform:translateY(-2px);box-shadow:var(--shadow-md)!important}.delete-subunit-btn{transition:all var(--transition-fast)}.delete-subunit-btn:hover{color:var(--accent-rose)!important;background:#f43f5e26!important;transform:scale(1.15)}.btn-preset-subunit{transition:all var(--transition-fast);border:1px solid var(--border-color)}.btn-preset-subunit:hover{border-color:var(--primary-500);background:#10b98126;color:var(--primary-600);transform:translateY(-1px)}.global-back-btn,.modal-back-btn,.page-back-btn{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;transition:all var(--transition-fast);cursor:pointer;user-select:none}.global-back-btn svg,.modal-back-btn svg,.page-back-btn svg{transition:transform var(--transition-fast);flex-shrink:0}.global-back-btn:hover,.modal-back-btn:hover,.page-back-btn:hover{border-color:var(--primary-500)!important;color:var(--primary-600)!important}.global-back-btn:hover svg,.modal-back-btn:hover svg,.page-back-btn:hover svg{transform:translate(3px)}#header-back-btn{border:1.5px solid var(--border-color);background:var(--bg-surface);color:var(--text-primary);padding:.35rem .75rem;border-radius:var(--radius-sm);animation:fadeIn .2s ease-out}#header-back-btn:hover{background:#10b9811a;border-color:var(--primary-500)}@media (max-width: 480px){#header-back-btn{padding:.25rem .5rem;font-size:.78rem}}.app-container{max-width:1360px;margin:0 auto;padding:0 1.25rem 4rem}.main-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);position:sticky;top:38px;z-index:90;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all var(--transition-fast)}.header-inner{max-width:1360px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.brand-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}.brand-icon{width:44px;height:44px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary-500),#047857);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 4px 10px #10b9814d}.brand-info h1{font-size:1.25rem;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);display:flex;align-items:center;gap:.4rem}.brand-info p{font-size:.78rem;color:var(--text-muted)}.search-bar-wrapper{flex:1;max-width:520px;position:relative}.search-input{width:100%;padding:.65rem 2.75rem .65rem 1rem;border-radius:var(--radius-full);background:var(--bg-main);border:1px solid var(--border-color);font-size:.9rem}.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.header-actions{display:flex;align-items:center;gap:.75rem}.filter-bar{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.filter-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.filter-select{padding:.45rem 1rem;border-radius:var(--radius-sm);background:var(--bg-main);font-size:.88rem;color:var(--text-secondary)}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.5rem}.item-image-wrapper{position:relative;width:100%;height:200px;overflow:hidden;background:#e2e8f0}.item-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.card:hover .item-image{transform:scale(1.05)}.item-badge-floating{position:absolute;top:12px;right:12px;z-index:2}.item-badge-type{position:absolute;bottom:12px;left:12px;z-index:2;background:#000000a6;color:#fff;padding:.2rem .6rem;border-radius:var(--radius-sm);font-size:.78rem;backdrop-filter:blur(4px)}.item-content{padding:1.25rem;display:flex;flex-direction:column;flex:1;gap:.75rem}.item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.item-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);line-height:1.4}.item-specs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;background:var(--bg-main);padding:.75rem;border-radius:var(--radius-sm);font-size:.82rem;color:var(--text-secondary)}.spec-entry{display:flex;align-items:center;gap:.35rem}.spec-entry strong{color:var(--text-primary)}.item-footer{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.item-price{display:flex;flex-direction:column}.price-label{font-size:.75rem;color:var(--text-muted)}.price-amount{font-size:1.15rem;font-weight:800;color:var(--primary-600)}[data-theme=dark] .price-amount{color:#34d399}.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem}.article-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;transition:all var(--transition-fast)}.article-card:hover{border-color:var(--primary-500);box-shadow:var(--shadow-md)}.main-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:3rem 1.25rem 2rem;margin-top:4rem}.footer-grid{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #10b9814d}50%{box-shadow:0 0 25px #10b98199}}.live-indicator{display:inline-block;width:8px;height:8px;background-color:#22c55e;border-radius:50%;box-shadow:0 0 8px #22c55e;animation:pulse-dot 1.5s infinite}@keyframes pulse-dot{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.3);opacity:1}to{transform:scale(.95);opacity:.8}}/* Enhanced Rolling Bottom Dock Navigation *//* ==========================================================================
   ✨ DAMBAN PWA - FLOATING GLASSMORPHISM DOCK (NO BLACK BACKGROUND)
   ========================================================================== */
.mobile-bottom-nav{display:none;position:fixed;bottom:12px;left:6px;right:6px;max-width:520px;margin:0 auto;z-index:9999;pointer-events:none;justify-content:center}
.bottom-nav-scroll-wrapper{width:100%;max-width:100%;position:relative;overflow:hidden;background:transparent!important;padding:4px 0}
.bottom-nav-dock{width:100%;min-height:64px;height:66px;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;display:flex;align-items:center;justify-content:flex-start;padding:0 0.5rem;gap:0.65rem;pointer-events:auto;position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bottom-nav-dock::-webkit-scrollbar{display:none}
[data-theme=light] .bottom-nav-dock{background:transparent!important;border:none!important;box-shadow:none!important}

/* Floating Glass Islands - Subtle Warm Amber/Orange Aura (هاله نارنجی ملایم و چشم‌نواز) */
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;min-width:68px;height:56px;color:#e2e8f0;text-decoration:none;background:rgba(15,23,42,0.65)!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border:1px solid rgba(249,115,22,0.28)!important;border-radius:18px!important;padding:0.25rem 0.45rem;cursor:pointer;user-select:none;scroll-snap-align:center;transition:all 0.22s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden;box-shadow:0 8px 22px -2px rgba(0,0,0,0.5),0 0 14px rgba(249,115,22,0.14),inset 0 1px 1px 0 rgba(255,255,255,0.22)!important;-webkit-tap-highlight-color:transparent}
[data-theme=light] .bottom-nav-item{background:rgba(255,255,255,0.82)!important;backdrop-filter:blur(18px) saturate(160%)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important;border:1px solid rgba(249,115,22,0.32)!important;color:#0f172a!important;box-shadow:0 6px 18px rgba(0,0,0,0.08),0 0 12px rgba(249,115,22,0.12),inset 0 1px 2px rgba(255,255,255,0.9)!important}

.bottom-nav-item:hover{background:rgba(249,115,22,0.12)!important;border-color:rgba(249,115,22,0.48)!important;transform:translateY(-3px) scale(1.04);box-shadow:0 12px 26px -2px rgba(0,0,0,0.6),0 0 18px rgba(249,115,22,0.24),inset 0 1px 2px rgba(255,255,255,0.35)!important}
[data-theme=light] .bottom-nav-item:hover{background:rgba(255,255,255,0.95)!important;border-color:rgba(249,115,22,0.5)!important;box-shadow:0 8px 22px rgba(0,0,0,0.12),0 0 14px rgba(249,115,22,0.2)!important}
.bottom-nav-item:active{transform:scale(0.9);transition:transform 0.08s ease-in}

.bottom-nav-item.nav-item-spring{animation:dockItemBounce 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes dockItemBounce{0%{transform:scale(0.88)}50%{transform:scale(1.12)}75%{transform:scale(0.96)}100%{transform:scale(1)}}

.bottom-nav-item .nav-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:26px;border-radius:10px;background:rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.2);transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1)}
[data-theme=light] .bottom-nav-item .nav-icon-wrapper{background:rgba(249,115,22,0.06);border:1px solid rgba(249,115,22,0.15)}
.bottom-nav-item .nav-icon{font-size:1.26rem;line-height:1;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.bottom-nav-item .nav-label{font-size:0.71rem;font-weight:800;color:#cbd5e1;transition:all 0.2s ease;margin-top:2px;white-space:nowrap;letter-spacing:-0.2px;text-shadow:0 1px 3px rgba(0,0,0,0.7)}
[data-theme=light] .bottom-nav-item .nav-label{color:#334155;text-shadow:none}

/* Active State for Items - Soft Warm Orange Glow (هاله شیک و ملایم نارنجی) */
.bottom-nav-item.active{background:linear-gradient(135deg,rgba(249,115,22,0.22),rgba(217,119,6,0.14))!important;border:1.5px solid rgba(249,115,22,0.65)!important;box-shadow:0 10px 28px rgba(0,0,0,0.55),0 0 20px rgba(249,115,22,0.28),inset 0 1px 2px rgba(255,255,255,0.35)!important;color:#fff!important}
[data-theme=light] .bottom-nav-item.active{background:linear-gradient(135deg,rgba(255,247,237,0.95),rgba(254,237,213,0.9))!important;border:1.5px solid rgba(249,115,22,0.7)!important;box-shadow:0 6px 18px rgba(249,115,22,0.2),0 0 12px rgba(249,115,22,0.18)!important;color:#7c2d12!important}

.bottom-nav-item.active .nav-icon-wrapper{background:linear-gradient(135deg,rgba(249,115,22,0.3),rgba(234,88,12,0.18))!important;border-color:rgba(249,115,22,0.7)!important;box-shadow:0 0 14px rgba(249,115,22,0.32),0 2px 6px rgba(0,0,0,0.4)!important;transform:translateY(-2px)}
[data-theme=light] .bottom-nav-item.active .nav-icon-wrapper{background:rgba(249,115,22,0.15)!important;border-color:rgba(249,115,22,0.6)!important;box-shadow:0 2px 6px rgba(249,115,22,0.2)!important}

.bottom-nav-item.active .nav-icon{transform:scale(1.14);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5))}
.bottom-nav-item.active .nav-label{color:#ffedd5!important;font-weight:900!important;text-shadow:0 1px 8px rgba(249,115,22,0.5)!important}
[data-theme=light] .bottom-nav-item.active .nav-label{color:#9a3412!important;text-shadow:none!important}

.bottom-nav-item .nav-active-dot{display:none;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:999px;background:#f97316;box-shadow:0 0 8px rgba(249,115,22,0.9)}
.bottom-nav-item.active .nav-active-dot{display:block;animation:navDotGlow 1.8s infinite alternate}
[data-theme=light] .bottom-nav-item .nav-active-dot{background:#ea580c!important;box-shadow:0 0 6px rgba(234,88,12,0.6)!important}

/* Center Item (Rearing / پرورش) - Unified with Soft Orange Aura (No longer green) */
.bottom-nav-item.bottom-nav-center-item{background:rgba(15,23,42,0.65)!important;border:1px solid rgba(249,115,22,0.35)!important;box-shadow:0 8px 24px rgba(0,0,0,0.5),0 0 16px rgba(249,115,22,0.18),inset 0 1px 1px rgba(255,255,255,0.22)!important;transform:translateY(-1px)}
[data-theme=light] .bottom-nav-item.bottom-nav-center-item{background:rgba(255,255,255,0.85)!important;border:1px solid rgba(249,115,22,0.4)!important;box-shadow:0 6px 18px rgba(0,0,0,0.08),0 0 14px rgba(249,115,22,0.15)!important}

.bottom-nav-item.bottom-nav-center-item .nav-icon-wrapper,
.center-hero-icon-green{background:rgba(249,115,22,0.12)!important;border:1px solid rgba(249,115,22,0.35)!important;box-shadow:0 0 12px rgba(249,115,22,0.18),0 2px 6px rgba(0,0,0,0.3)!important;transform:translateY(-1px)}
.bottom-nav-item.bottom-nav-center-item .nav-icon{font-size:1.3rem!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}

.bottom-nav-item.bottom-nav-center-item .nav-label,
.center-hero-label-green{color:#fed7aa!important;font-weight:800!important;text-shadow:0 1px 4px rgba(0,0,0,0.7)!important}
[data-theme=light] .bottom-nav-item.bottom-nav-center-item .nav-label{color:#9a3412!important;text-shadow:none!important}

.bottom-nav-item.bottom-nav-center-item:hover{background:rgba(249,115,22,0.16)!important;border-color:rgba(249,115,22,0.55)!important;box-shadow:0 12px 28px rgba(0,0,0,0.6),0 0 20px rgba(249,115,22,0.28)!important;transform:translateY(-3px) scale(1.04)}

.bottom-nav-item.bottom-nav-center-item.active{background:linear-gradient(135deg,rgba(249,115,22,0.26),rgba(217,119,6,0.18))!important;border:1.5px solid rgba(249,115,22,0.75)!important;box-shadow:0 12px 30px rgba(0,0,0,0.6),0 0 24px rgba(249,115,22,0.32),inset 0 1px 2px rgba(255,255,255,0.4)!important}
.bottom-nav-item.bottom-nav-center-item.active .nav-icon-wrapper{background:linear-gradient(135deg,rgba(249,115,22,0.35),rgba(234,88,12,0.22))!important;border-color:rgba(249,115,22,0.8)!important;box-shadow:0 0 18px rgba(249,115,22,0.4),0 4px 10px rgba(0,0,0,0.45)!important;transform:translateY(-2px) scale(1.08)}
.bottom-nav-item.bottom-nav-center-item.active .nav-label{color:#fff7ed!important;font-weight:900!important;text-shadow:0 1px 8px rgba(249,115,22,0.6)!important}
.bottom-nav-item.bottom-nav-center-item.active .nav-active-dot{background:#f97316!important;box-shadow:0 0 10px #f97316!important}
.dock-tap-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.2) 45%,transparent 70%);pointer-events:none;transform:translate(-50%,-50%) scale(0.2);animation:dockRippleAnim 0.42s ease-out forwards;z-index:10}
@keyframes dockRippleAnim{0%{transform:translate(-50%,-50%) scale(0.2);opacity:1}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.nav-badge-dot{position:absolute;top:1px;right:2px;width:7px;height:7px;border-radius:50%;background:#ef4444;border:1.5px solid var(--bg-surface);box-shadow:0 0 6px #ef4444cc}
.nav-center-ai{position:relative;margin-top:-18px;flex:1.15}.nav-center-ai-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#059669,#10b981,#06b6d4);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px #10b98180,0 0 0 3px #0f172ae6;position:relative;transition:all .25s cubic-bezier(.34,1.56,.64,1);border:1.5px solid rgba(255,255,255,.4)}[data-theme=light] .nav-center-ai-btn{box-shadow:0 8px 22px #10b98159,0 0 0 3px #fff}.nav-center-ai:hover .nav-center-ai-btn,.nav-center-ai:active .nav-center-ai-btn{transform:translateY(-4px) scale(1.08);box-shadow:0 12px 28px #10b981b3,0 0 0 3px #0f172ae6}.nav-center-ai .ai-icon{font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}.nav-center-ai .ai-sparkle{position:absolute;top:1px;right:1px;font-size:.72rem;animation:sparkleTwinkle 2s infinite ease-in-out}.nav-center-ai .ai-label{color:#34d399!important;font-weight:900!important;font-size:.67rem;margin-top:3px;text-shadow:0 1px 4px rgba(16,185,129,.35)}@keyframes sparkleTwinkle{0%,to{opacity:.3;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(15deg)}}@keyframes aiPulseRing{0%{transform:scale(.95);opacity:.8}50%{transform:scale(1.22);opacity:0}to{transform:scale(.95);opacity:0}}.ai-glow-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(16,185,129,.5);animation:aiPulseRing 2.4s infinite;pointer-events:none}.messenger-layout-container{display:grid;grid-template-columns:320px 1fr;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);min-height:600px;margin-bottom:2.5rem}.messenger-sidebar{border-left:1px solid var(--border-color);background:var(--bg-main);display:flex;flex-direction:column}.messenger-chat-col{display:flex;flex-direction:column;background:var(--bg-surface)}@media (max-width: 1024px){.hero-section{grid-template-columns:1fr;padding:2rem 1.5rem}.footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}@media (max-width: 768px){html,body{overflow-x:hidden!important;max-width:100vw!important;width:100%!important}.mobile-bottom-nav{display:flex!important}.app-container{padding:0 .85rem 6.5rem!important}.ticker-container{height:32px!important;padding:0 .5rem!important;font-size:.78rem!important;gap:.5rem!important}.ticker-label{font-size:.7rem!important;padding:.15rem .4rem!important}.main-header{top:32px!important}.header-inner{padding:.5rem .85rem!important;gap:.5rem!important;flex-wrap:wrap!important}.brand-logo .brand-icon{width:34px!important;height:34px!important;font-size:1.2rem!important}.brand-info h1{font-size:1rem!important}.brand-info p{display:none!important}.header-actions #nav-btn-messenger,.header-actions #btn-open-add-listing,.header-actions #nav-btn-factory,.header-actions #nav-btn-profile{display:none!important}.search-bar-wrapper{order:3!important;max-width:100%!important;width:100%!important;margin-top:.15rem!important}.search-input{padding:.45rem 2.2rem .45rem .75rem!important;font-size:.82rem!important}.hero-section{padding:1rem .85rem!important;gap:1rem!important;margin-bottom:1.25rem!important;border-radius:var(--radius-md)!important}.hero-section h2{font-size:1.2rem!important;line-height:1.45!important;margin-bottom:.65rem!important}.hero-section p{font-size:.84rem!important;line-height:1.6!important;margin-bottom:.85rem!important}.hero-actions-group{flex-direction:column!important;width:100%!important;gap:.55rem!important}.hero-actions-group .btn{width:100%!important;justify-content:center!important;padding:.65rem 1rem!important;font-size:.88rem!important;text-align:center!important}.hero-factory-card{padding:.75rem!important;flex-direction:column!important;align-items:stretch!important;gap:.65rem!important}.hero-factory-card button{width:100%!important;justify-content:center!important}.hero-image-box img{height:170px!important}.tools-grid{grid-template-columns:1fr 1fr!important;gap:.6rem!important}.tool-card{padding:.75rem!important}.tool-card h4{font-size:.88rem!important}.tool-card p{display:none!important}.nav-tabs{gap:.35rem!important;padding-bottom:.25rem!important;margin-bottom:1rem!important;overflow-x:auto!important}.nav-tab{padding:.5rem .75rem!important;font-size:.82rem!important;white-space:nowrap!important}.items-grid{grid-template-columns:1fr!important;gap:1rem!important}.item-image-wrapper{height:175px!important}.item-specs{grid-template-columns:1fr!important}.chat-drawer{display:none!important}.modal-overlay{padding:0!important;align-items:flex-end!important}.modal-content{width:100%!important;max-width:100%!important;max-height:92vh!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;margin:0!important}.modal-header{padding:.75rem 1rem!important}.modal-body{padding:.85rem!important;max-height:calc(92vh - 60px)!important;overflow-y:auto!important}.factory-staff-grid{grid-template-columns:1fr!important;gap:.65rem!important}.factory-modal-tabs{flex-wrap:wrap!important;gap:.35rem!important}.factory-tab-btn{flex:1 1 auto!important;min-width:120px!important;font-size:.78rem!important;padding:.4rem .5rem!important}.footer-grid{grid-template-columns:1fr!important;gap:1.5rem!important}.nav-btn-label{display:none!important}.header-actions{gap:.35rem!important}.header-actions .btn{padding:.45rem .65rem!important}}@media (max-width: 480px){.tools-grid{grid-template-columns:1fr 1fr!important}}.capacity-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-500)!important}.enterprise-factory-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-500)!important}@keyframes glowPulse{0%{box-shadow:0 0 10px #8b5cf64d}50%{box-shadow:0 0 35px #8b5cf6b3,0 0 20px #10b98166}to{box-shadow:0 0 10px #8b5cf64d}}.media-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-500)!important}.media-filter-btn{transition:all var(--transition-fast)}.topology-diagram-container{position:relative;overflow:hidden}.spoke-node{cursor:pointer;transition:transform .2s ease,filter .2s ease}.spoke-node:hover{transform:scale(1.08)!important;z-index:10!important}.spoke-badge{background:var(--bg-surface);border:1.5px solid var(--primary-500);border-radius:var(--radius-full);padding:.35rem .75rem;display:flex;align-items:center;gap:.45rem;box-shadow:0 4px 15px #00000014;white-space:nowrap;backdrop-filter:blur(8px)}.spoke-badge.spoke-factory,.spoke-factory .spoke-badge{border-color:var(--accent-gold)!important}.spoke-icon{font-size:1.2rem}.spoke-text{display:flex;flex-direction:column;line-height:1.25}.spoke-text strong{font-size:.76rem;color:var(--text-primary)}.spoke-text span{font-size:.65rem;color:var(--text-muted)}#topology-center-node:hover,#topology-center-node:active{transform:translate(-50%,-50%) !important;box-shadow:0 0 35px #10b98199;border-color:#34d399 !important}.enterprise-unit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-500)!important}.topology-viewport-container{width:100%;position:relative;border-radius:var(--radius-lg);background:radial-gradient(circle at center,#064e3b40,#0f172abf 75%);padding:.5rem .25rem;overflow:hidden;box-shadow:inset 0 0 30px #00000080}.topology-diagram-container{position:relative;width:100%;max-width:440px;height:380px;margin:0 auto;user-select:none}@media (min-width: 769px){.topology-diagram-container{max-width:680px;height:440px}}.topology-svg-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.topology-center-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;background:linear-gradient(145deg,#0f172a 30%,#064e3bf2);border:2px solid #10b981;border-radius:20px;width:92px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.35rem;box-shadow:0 10px 30px #10b98166,inset 0 1px #fff3;cursor:pointer;transition:box-shadow .2s ease,border-color .2s ease}@media (min-width: 769px){.topology-center-node{width:145px;height:125px;border-radius:24px;padding:.75rem .6rem}}.topology-center-node:hover,.topology-center-node:active{transform:translate(-50%,-50%) !important;box-shadow:0 0 35px #10b981bf,inset 0 1px #fff6;border-color:#34d399 !important}.center-icon{font-size:1.45rem;line-height:1;margin-bottom:.15rem}@media (min-width: 769px){.center-icon{font-size:2rem;margin-bottom:.25rem}}.center-title{font-size:.76rem;font-weight:900;color:#fff;line-height:1.2}@media (min-width: 769px){.center-title{font-size:.95rem}}.center-status{display:flex;align-items:center;gap:.25rem;margin-top:.15rem}.center-subtitle{font-size:.6rem;color:#34d399;font-weight:800}@media (min-width: 769px){.center-subtitle{font-size:.72rem}}.center-badge{font-size:.55rem;padding:.1rem .4rem;margin-top:.2rem;border-radius:999px;display:none}@media (min-width: 769px){.center-badge{display:inline-block;font-size:.62rem}}.pulse-ring-outer{position:absolute;inset:-6px;border-radius:24px;border:1.5px solid rgba(16,185,129,.5);animation:aiPulseRing 2.4s infinite;pointer-events:none}@media (min-width: 769px){.pulse-ring-outer{inset:-8px;border-radius:30px;border-width:2px}}.spoke-node{position:absolute;cursor:pointer;z-index:5;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s ease;user-select:none}.spoke-node-1{top:9%;left:50%;transform:translate(-50%,-50%)}.spoke-node-2{top:20%;left:78%;transform:translate(-50%,-50%)}.spoke-node-3{top:50%;left:83%;transform:translate(-50%,-50%)}.spoke-node-4{top:80%;left:78%;transform:translate(-50%,-50%)}.spoke-node-5{top:91%;left:50%;transform:translate(-50%,-50%)}.spoke-node-6{top:80%;left:22%;transform:translate(-50%,-50%)}.spoke-node-7{top:50%;left:17%;transform:translate(-50%,-50%)}.spoke-node-8{top:20%;left:22%;transform:translate(-50%,-50%)}.spoke-node:hover{transform:translate(-50%,-50%) scale(1.14)!important;z-index:25!important;filter:drop-shadow(0 0 15px rgba(16,185,129,.7))}.spoke-badge{background:#0f172aeb;border:1.5px solid rgba(16,185,129,.45);border-radius:var(--radius-full);padding:.25rem .55rem;display:flex;align-items:center;gap:.35rem;box-shadow:0 4px 15px #00000073,0 0 10px #10b9811f;white-space:nowrap;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .2s ease}@media (min-width: 769px){.spoke-badge{padding:.4rem .85rem;gap:.5rem}}.spoke-badge.spoke-factory,.spoke-factory .spoke-badge{border-color:#f59e0b99!important;box-shadow:0 4px 15px #00000073,0 0 10px #f59e0b33!important}.spoke-node:hover .spoke-badge{border-color:#34d399!important;background:#0f172afa!important}.spoke-icon{font-size:1.05rem;line-height:1}@media (min-width: 769px){.spoke-icon{font-size:1.35rem}}.spoke-text{display:flex;flex-direction:column;line-height:1.2}.spoke-text .unit-name{font-size:.68rem;color:#fff;font-weight:800;white-space:nowrap}@media (min-width: 769px){.spoke-text .unit-name{font-size:.82rem}}.spoke-text .unit-staff{font-size:.58rem;color:#94a3b8;display:none}@media (min-width: 769px){.spoke-text .unit-staff{display:inline-block;font-size:.68rem}}#rearing-modal-overlay{position:fixed!important;inset:0!important;z-index:100000!important;background:#030712e0!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:1rem!important;overflow:hidden!important;pointer-events:auto!important;visibility:visible!important}.rearing-modal-container{width:100%!important;max-width:1100px!important;height:92vh!important;max-height:92vh!important;background:#0b1324!important;border:1.5px solid rgba(56,189,248,.4)!important;border-radius:24px!important;box-shadow:0 25px 60px #000000d9,0 0 35px rgba(56,189,248,.18)!important;display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;position:relative!important}.rearing-modal-header{flex-shrink:0!important;padding:.85rem 1.25rem!important;background:linear-gradient(135deg,#0f172ae6,#1e293bf2)!important;border-bottom:1.5px solid rgba(56,189,248,.28)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important}.rearing-tabs-nav{flex-shrink:0!important;display:flex!important;gap:.4rem!important;padding:.55rem 1.15rem!important;background:#0b1324f5!important;border-bottom:1px solid rgba(255,255,255,.08)!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;white-space:nowrap!important;z-index:10!important}.rearing-tabs-nav::-webkit-scrollbar{display:none!important}.rearing-tab-content-area{flex:1 1 0%!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;touch-action:pan-y!important;padding:1.25rem 1.35rem!important}.rearing-tab-content-area::-webkit-scrollbar{width:6px}.rearing-tab-content-area::-webkit-scrollbar-track{background:#0f172a80}.rearing-tab-content-area::-webkit-scrollbar-thumb{background:#10b98166;border-radius:3px}.rearing-tab-content-area::-webkit-scrollbar-thumb:hover{background:#10b981}@media (max-width: 768px){#rearing-modal-overlay{padding:0!important;align-items:flex-end!important}.rearing-modal-container{height:96vh!important;max-height:96vh!important;width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;border-bottom:none!important;border-left:none!important;border-right:none!important;margin:0!important}.rearing-modal-header{padding:.65rem .85rem!important}.rearing-tabs-nav{padding:.45rem .75rem!important;gap:.35rem!important}.rearing-tab-content-area{padding:.85rem .75rem!important}}.bazaar-item-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary-500)!important}.bazaar-filter-btn{transition:all var(--transition-fast)}.messenger-layout-container{display:flex;height:520px;max-height:75vh;background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);position:relative}.messenger-sidebar{width:325px;height:100%;max-height:100%;border-left:1px solid var(--border-color);display:flex;flex-direction:column;background:var(--bg-surface);flex-shrink:0;transition:all var(--transition-normal)}.messenger-contacts-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.messenger-chat-col{flex:1;height:100%;max-height:100%;display:flex;flex-direction:column;background:var(--bg-main);min-width:0;position:relative}.messenger-contact-item{transition:background-color var(--transition-fast),border-color var(--transition-fast)}.messenger-contact-item:hover{background:var(--bg-surface-elevated)!important}.chat-bubble-wrapper{display:flex;flex-direction:column;margin-bottom:.35rem;animation:fadeIn .25s ease}.chat-bubble-wrapper.user{align-items:flex-start}.chat-bubble-wrapper.other{align-items:flex-end}.chat-bubble-content{padding:.75rem .95rem;font-size:.9rem;line-height:1.55;position:relative;word-break:break-word}.chat-bubble-wrapper.user .chat-bubble-content{background:linear-gradient(135deg,var(--primary-600),#047857);color:#fff;border-radius:18px 18px 4px;box-shadow:0 2px 8px #05966938}.chat-bubble-wrapper.other .chat-bubble-content{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color);border-radius:18px 18px 18px 4px;box-shadow:var(--shadow-sm)}.chat-media-img-wrapper{position:relative;border-radius:12px;overflow:hidden;margin-bottom:.45rem;cursor:pointer;background:#0000001a;max-width:290px}.chat-media-img-wrapper img{width:100%;max-height:220px;object-fit:cover;display:block;transition:transform .25s ease}.chat-media-img-wrapper:hover img{transform:scale(1.03)}.chat-media-img-overlay{position:absolute;inset:0;background:#00000040;opacity:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;transition:opacity .2s ease}.chat-media-img-wrapper:hover .chat-media-img-overlay{opacity:1}.chat-media-video-wrapper{position:relative;border-radius:12px;overflow:hidden;margin-bottom:.45rem;max-width:310px;background:#000;box-shadow:var(--shadow-sm)}.chat-media-video-wrapper video{width:100%;max-height:220px;display:block}.chat-media-file-card{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:10px;margin-bottom:.45rem;background:#00000012;border:1px solid rgba(0,0,0,.08);cursor:pointer;transition:background .2s}.chat-bubble-wrapper.other .chat-media-file-card{background:var(--bg-main);border:1px solid var(--border-color)}.chat-media-file-card:hover{background:#0000001f}.chat-media-audio-card{display:flex;align-items:center;gap:.65rem;padding:.45rem .65rem;border-radius:10px;margin-bottom:.35rem;background:#00000012}.voice-wave-bars{display:flex;align-items:center;gap:2.5px;height:22px}.voice-wave-bars span{display:inline-block;width:3px;background:currentColor;border-radius:3px;opacity:.75}.voice-wave-bars.playing span{animation:soundWave .8s ease-in-out infinite alternate}.voice-wave-bars.playing span:nth-child(2){animation-delay:.15s}.voice-wave-bars.playing span:nth-child(3){animation-delay:.3s}.voice-wave-bars.playing span:nth-child(4){animation-delay:.45s}.voice-wave-bars.playing span:nth-child(5){animation-delay:.2s}.voice-wave-bars.playing span:nth-child(6){animation-delay:.35s}@keyframes soundWave{0%{height:4px}to{height:20px}}.chat-status-ticks{font-size:.72rem;margin-right:.25rem;display:inline-flex;align-items:center;letter-spacing:-1.5px}.chat-status-ticks.read{color:#38bdf8!important}.typing-dots{display:inline-flex;align-items:center;gap:3px}.typing-dots span{width:5px;height:5px;background-color:var(--primary-500);border-radius:50%;animation:typingBounce 1.3s infinite ease-in-out both}.typing-dots span:nth-child(1){animation-delay:-.32s}.typing-dots span:nth-child(2){animation-delay:-.16s}.typing-dots span:nth-child(3){animation-delay:0s}@keyframes typingBounce{0%,80%,to{transform:scale(.3);opacity:.3}40%{transform:scale(1);opacity:1}}.messenger-attachment-sheet{position:absolute;bottom:68px;right:18px;background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:.65rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;z-index:100;width:280px;animation:fadeIn .18s cubic-bezier(.16,1,.3,1)}.attach-option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.65rem .4rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-main);color:var(--text-primary);font-size:.76rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);gap:.3rem}.attach-option-btn:hover{background:var(--primary-50);border-color:var(--primary-500);color:var(--primary-700);transform:translateY(-2px)}[data-theme=dark] .attach-option-btn:hover{background:#10b98126;color:#34d399}.messenger-lightbox-backdrop{position:fixed;inset:0;background:#000000e0;backdrop-filter:blur(8px);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;animation:fadeIn .2s ease}.messenger-lightbox-content{position:relative;max-width:90vw;max-height:85vh;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 40px #0009;background:#000}.messenger-lightbox-content img,.messenger-lightbox-content video{max-width:100%;max-height:80vh;display:block}@media (max-width: 768px){.messenger-layout-container{height:500px;max-height:calc(100vh - 140px)}.messenger-sidebar.mobile-hide{display:none!important}.messenger-sidebar.mobile-show{display:flex!important;width:100%!important;border-left:none!important}.messenger-chat-col.mobile-hide{display:none!important}.messenger-chat-col.mobile-show{display:flex!important;width:100%!important}.messenger-attachment-sheet{right:8px;left:8px;width:auto;bottom:65px}}@keyframes pulseGlowOnline{0%{box-shadow:0 0 #10b981bf;transform:scale(1)}70%{box-shadow:0 0 0 8px #10b98100;transform:scale(1.08)}to{box-shadow:0 0 #10b98100;transform:scale(1)}}.live-online-dot{width:10px;height:10px;background:#10b981;border-radius:50%;display:inline-block;animation:pulseGlowOnline 1.6s infinite ease-in-out;border:1.5px solid #ffffff;flex-shrink:0}.live-online-badge{display:inline-flex;align-items:center;gap:.35rem;background:#10b9811f;border:1px solid rgba(16,185,129,.4);color:#059669;font-size:.72rem;font-weight:800;padding:.15rem .55rem;border-radius:var(--radius-full)}.ai-jewel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-bottom:1.25rem}.ai-jewel-tile{background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);padding:.95rem 1.05rem;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.75rem;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);text-align:right}.ai-jewel-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000014}.ai-jewel-tile.active-purple{border-color:#8b5cf6;background:linear-gradient(135deg,#8b5cf61f,#7c3aed0a);box-shadow:0 6px 18px #8b5cf638}.ai-jewel-tile.active-emerald{border-color:#10b981;background:linear-gradient(135deg,#10b98124,#0596690a);box-shadow:0 6px 18px #10b98138}.ai-jewel-tile.active-blue{border-color:#3b82f6;background:linear-gradient(135deg,#3b82f624,#1d4ed80a);box-shadow:0 6px 18px #3b82f638}.ai-jewel-tile.active-gold{border-color:#f59e0b;background:linear-gradient(135deg,#f59e0b24,#d977060a);box-shadow:0 6px 18px #f59e0b38}.ai-jewel-icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;transition:transform .2s ease}.ai-jewel-tile:hover .ai-jewel-icon-wrap{transform:scale(1.08)}.ton-reward-badge{display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#0098ea24,#0098ea0d);border:1px solid rgba(0,152,234,.45);color:#0098ea;border-radius:var(--radius-full);padding:.15rem .55rem;font-size:.72rem;font-weight:800}.star-reward-badge{display:inline-flex;align-items:center;gap:.3rem;background:linear-gradient(135deg,#f59e0b29,#fbbf240f);border:1px solid rgba(245,158,11,.45);color:#d97706;border-radius:var(--radius-full);padding:.15rem .55rem;font-size:.72rem;font-weight:800}.golden-master-card{background:var(--bg-surface);border:1.5px solid rgba(245,158,11,.35);border-radius:var(--radius-md);padding:1rem 1.15rem;transition:all .2s ease;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.golden-master-card:hover{transform:translateY(-2px);border-color:#f59e0b;box-shadow:0 8px 22px #f59e0b29}.golden-master-card:before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:linear-gradient(180deg,#f59e0b,#d97706)}.ai-jewel-grid-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.85rem;margin-bottom:1.15rem}.vault-toast-popup{animation:slideInUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app-search-result-card{background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;transition:all .18s ease}.app-search-result-card:hover{border-color:var(--primary-500);background:var(--bg-surface-elevated);transform:translate(-3px);box-shadow:var(--shadow-sm)}.gov-portals-section{background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);padding:.95rem 1.15rem;box-shadow:var(--shadow-sm);position:relative;transition:all .25s ease}.gov-portals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem}.gov-portal-item{background:var(--bg-main);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem .85rem;display:flex;flex-direction:column;justify-content:space-between;gap:.45rem;text-decoration:none;transition:all .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000000a;position:relative;overflow:hidden;min-height:105px}.gov-portal-item:hover{transform:translateY(-2px);border-color:var(--primary-500);box-shadow:0 6px 18px #10b9811f,0 2px 6px #0000000f}.gov-portal-item:hover .portal-arrow-chip{background:var(--primary-600)!important;color:#fff!important;border-color:var(--primary-600)!important}.btn-gov-tab{cursor:pointer;transition:all .18s ease;font-family:inherit}.btn-gov-tab:hover:not(.active){border-color:var(--primary-500)!important;color:var(--primary-600)!important}.portal-title-short{display:none}@media (max-width: 1024px) and (min-width: 769px){.gov-portals-grid{grid-template-columns:repeat(4,1fr);gap:.55rem}}@media (max-width: 768px){.gov-portals-section{padding:.75rem .65rem!important}.gov-portals-grid{grid-template-columns:repeat(4,1fr)!important;gap:.35rem!important}.gov-portal-item{padding:.42rem .18rem!important;min-height:80px!important;max-height:96px!important;gap:.2rem!important;align-items:center!important;text-align:center!important;border-radius:10px!important;justify-content:center!important;box-shadow:0 1px 2px #0000000f!important}.gov-portal-item:active{transform:scale(.93)!important;border-color:var(--primary-500)!important}.gov-portal-item .portal-top-row,.gov-portal-item .portal-header-left{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.2rem!important;width:100%!important}.gov-portal-item .portal-icon-box{width:30px!important;height:30px!important;font-size:1.15rem!important;border-radius:8px!important;margin:0 auto!important;display:flex!important;align-items:center!important;justify-content:center!important}.gov-portal-item .portal-title-wrapper{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important}.gov-portal-item .portal-title-full{display:none!important}.gov-portal-item .portal-title-short{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-size:.68rem!important;font-weight:800!important;line-height:1.25!important;color:var(--text-primary)!important;text-align:center!important;min-height:1.7em!important;max-width:100%!important;word-break:break-word!important}.gov-portal-item .portal-category-tag,.gov-portal-item .portal-arrow-chip,.gov-portal-item .portal-authority,.gov-portal-item .portal-desc{display:none!important}.gov-portal-item .portal-bottom-bar{border-top:none!important;padding-top:0!important;margin-top:0!important;justify-content:center!important;width:100%!important}.gov-portal-item .portal-domain{font-size:.58rem!important;color:var(--text-muted)!important;opacity:.75!important;text-align:center!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;direction:ltr!important}.gov-portal-item .portal-status-badge{display:none!important}}.media-knowledge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.media-card{background:var(--bg-surface);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:1.15rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);cursor:pointer;position:relative;overflow:hidden}.media-card:hover{border-color:var(--primary-500);transform:translateY(-2px);box-shadow:var(--shadow-md)}.media-card-desktop-view{display:flex;flex-direction:column;justify-content:space-between;height:100%}.media-card-mobile-view{display:none}@media (max-width: 768px){.media-knowledge-grid{grid-template-columns:1fr!important;gap:.85rem!important}.media-card{padding:1.1rem!important;min-height:auto!important;max-height:none!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;box-shadow:var(--shadow-sm)!important}.media-card:active{transform:scale(.98)!important;border-color:var(--primary-500)!important}.media-card-desktop-view{display:flex!important;flex-direction:column!important;justify-content:space-between!important;height:100%!important}.media-card-mobile-view{display:none!important}}.media-mobile-title{font-size:.68rem!important;font-weight:800!important;line-height:1.25!important;color:var(--text-primary)!important;text-align:center!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;max-width:100%!important;word-break:break-word!important;min-height:1.7em!important}.media-mobile-badge{font-size:.58rem!important;font-weight:700!important;white-space:nowrap!important}}.triage-flock-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem}.triage-flock-type-btn{display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);cursor:pointer;transition:all .2s ease;text-align:right}.triage-flock-type-btn.active{border-color:#3b82f6;background:#3b82f614;box-shadow:0 0 0 2px #3b82f633}.triage-visual-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}@media (max-width: 768px){.triage-visual-cards-grid{grid-template-columns:repeat(3,1fr)!important;gap:.4rem!important}}@media (max-width: 480px){.triage-visual-cards-grid{grid-template-columns:repeat(2,1fr)!important;gap:.4rem!important}}.triage-visual-card{border:1.5px solid var(--border-color);background:var(--bg-surface);border-radius:var(--radius-md);padding:.55rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}.triage-visual-card:hover{transform:translateY(-2px);border-color:#3b82f6;box-shadow:var(--shadow-sm)}.triage-visual-card.active{border-color:#3b82f6!important;background:#3b82f614!important;box-shadow:0 0 0 2px #3b82f64d!important}.triage-visual-card.active .triage-check-badge{display:flex!important}.triage-check-badge{display:none;position:absolute;top:5px;right:5px;background:#3b82f6;color:#fff;font-size:.62rem;font-weight:900;width:17px;height:17px;border-radius:50%;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 4px #0003}.rearing-tab-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:#94a3b8;padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;user-select:none}.rearing-tab-btn:hover{color:#f1f5f9;background:#10b9811f;border-color:#10b9814d;transform:translateY(-1px)}.rearing-tab-btn.active-rearing-tab{background:linear-gradient(135deg,#10b98147,#05966938)!important;color:#34d399!important;border:1px solid rgba(52,211,153,.55)!important;font-weight:900;box-shadow:0 4px 15px #10b98140}.rearing-checklist-item:hover{border-color:#10b98173!important;transform:translate(-2px)}.rearing-home-banner:hover{transform:translateY(-2px);border-color:#10b981a6!important;box-shadow:0 15px 30px -5px #0009,0 0 25px #10b98140!important}

/* Harmonized Farm & Unit Modal Enhancements */
.unit-kpi-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.unit-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  #unit-modal-overlay .modal-content {
    margin: 0.5rem auto !important;
    max-height: 94vh !important;
    width: 98% !important;
  }
  #unit-modal-overlay .modal-header {
    padding: 0.75rem 1rem !important;
  }
  #unit-modal-overlay .modal-body {
    padding: 0.85rem !important;
  }
  .unit-kpi-card {
    min-height: 90px !important;
    padding: 0.65rem 0.5rem !important;
  }
}


/* Enhanced Framing for Media Knowledge Hub & Read More */
.media-expand-box {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
.media-expand-btn:active {
  transform: scale(0.98) !important;
}
@media (max-width: 768px) {
  .media-knowledge-hub > div {
    padding: 0.85rem !important;
    border-radius: 14px !important;
  }
  .media-knowledge-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }
  .media-card {
    padding: 1rem !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--bg-surface) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  .media-card-desktop-view {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
  }
  .media-card-mobile-view {
    display: none !important;
  }
  .media-expand-box {
    padding: 1rem 0.75rem !important;
    margin-top: 1rem !important;
    border-radius: 14px !important;
  }
  .media-expand-btn {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem !important;
    padding: 0.7rem 0.85rem !important;
  }
}


/* ==========================================================================
   ✨ ULTRA-COMPACT SLEEK REARING MODAL, TABS & UNIVERSAL BACK BUTTONS (v4.8)
   ========================================================================== */

.rearing-modal-container {
  width: 96vw !important;
  max-width: 1060px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: var(--bg-surface-elevated, #0f172a) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.75), 0 0 35px rgba(16, 185, 129, 0.25) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .rearing-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
  }
}

.rearing-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0.3rem 0.75rem !important;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
  border-bottom: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.rearing-modal-header .rearing-title-text {
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}

.rearing-modal-header .rearing-badge-chip {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.rearing-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.2rem 0.65rem !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

.rearing-tabs-nav::-webkit-scrollbar {
  display: none !important;
}

.rearing-tab-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  padding: 0.22rem 0.65rem !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  transition: all 0.2s ease !important;
  height: 28px !important;
  user-select: none !important;
}

.rearing-tab-btn:hover {
  color: #fff !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.rearing-tab-btn.active-rearing-tab {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.25)) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.6) !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.rearing-tab-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.32rem 0.65rem !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.6)) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  border-radius: 10px !important;
  margin-bottom: 0.55rem !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.rearing-tab-top-bar .tab-top-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.btn-tab-back-action, .btn-universal-back {
  padding: 0.22rem 0.55rem !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.btn-tab-back-action:hover, .btn-universal-back:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
  transform: translateY(-1px) !important;
}

.btn-tab-back-action:active, .btn-universal-back:active {
  transform: scale(0.96) !important;
}

@media (max-width: 480px) {
  .rearing-modal-header {
    padding: 0.25rem 0.45rem !important;
  }
  .rearing-modal-header .rearing-badge-chip {
    max-width: 90px !important;
    font-size: 0.65rem !important;
  }
  .rearing-modal-header .rearing-title-text {
    font-size: 0.82rem !important;
  }
  .hide-on-xs {
    display: none !important;
  }
  .modal-header {
    padding: 0.45rem 0.75rem !important;
  }
}


/* ==========================================================================
   🎮 SONY PLAYSTATION 3 & MOBILE FRAMING MASTER UPGRADE
   کادربندی بی‌نقص موبایل برای تمام مودال‌ها، شبکه اتصالات و منوی پرورش
   ========================================================================== */

/* Universal Modal Overlay - Mobile Optimized */
.modal-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 0.4rem !important;
    align-items: center !important;
  }
}

/* Universal Modal Content Box Framing */
.modal-content {
  width: 95vw !important;
  max-width: 880px !important;
  max-height: 90vh !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.75), 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 768px) {
  .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
}

/* Universal Modal Header */
.modal-header {
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 768px) {
  .modal-header {
    padding: 0.55rem 0.75rem !important;
    gap: 0.4rem !important;
  }
}

/* Universal Modal Body Scroll Container */
.modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
  .modal-body {
    padding: 0.75rem 0.65rem !important;
  }
}

/* Universal Return/Back Button Styling */
.btn-universal-back, .btn-tab-back-action, #btn-unit-back, #btn-rearing-back-dashboard, #btn-close-unit-footer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.btn-universal-back:hover, .btn-tab-back-action:hover, #btn-unit-back:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.btn-universal-back:active, .btn-tab-back-action:active, #btn-unit-back:active {
  transform: scale(0.96) !important;
}

/* Never hide back button text on mobile */
.hide-on-xs {
  display: inline !important;
}
.rearing-back-label {
  display: inline !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   🌱 1. REARING MODAL (منوی مدیریت دوره پرورش) - PERFECT PROPORTIONS
   ========================================================================== */
.rearing-modal-container {
  width: 95vw !important;
  max-width: 980px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  border-radius: 18px !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.25) !important;
}

@media (max-width: 768px) {
  .rearing-modal-container {
    width: 96vw !important;
    max-width: 96vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
}

.rearing-modal-header {
  padding: 0.6rem 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.45rem !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex-shrink: 0 !important;
}

@media (max-width: 480px) {
  .rearing-modal-header {
    padding: 0.45rem 0.6rem !important;
    gap: 0.35rem !important;
  }
  .rearing-modal-header .rearing-title-text {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .rearing-modal-header .rearing-badge-chip {
    font-size: 0.68rem !important;
    padding: 0.12rem 0.35rem !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #btn-rearing-back-dashboard {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   🏭 2. UNIT MODAL (شبکه اتصالات / فارم تاکستان / کشتارگاه / کارخانه)
   ========================================================================== */
#unit-modal-overlay .modal-content {
  width: 95vw !important;
  max-width: 900px !important;
  max-height: 92vh !important;
  border-radius: 18px !important;
  margin: auto !important;
}

@media (max-width: 768px) {
  #unit-modal-overlay .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
    margin: auto !important;
  }

  #unit-modal-overlay .modal-header {
    padding: 0.65rem 0.75rem !important;
    gap: 0.45rem !important;
  }

  #unit-modal-overlay .modal-header h3 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }

  #btn-unit-back {
    padding: 0.32rem 0.65rem !important;
    font-size: 0.78rem !important;
  }
}

/* Role bar in unit modal */
@media (max-width: 768px) {
  #unit-modal-overlay .modal-content > div:nth-child(2) {
    padding: 0.45rem 0.75rem !important;
    gap: 0.35rem !important;
  }
  #unit-modal-overlay .modal-content > div:nth-child(2) span {
    font-size: 0.76rem !important;
  }
}

/* ==========================================================================
   📱 3. OTHER MODALS (FACTORY, GOV, VET, FEED, PROFIT, VAULT, VIP)
   ========================================================================== */
#factory-modal-overlay .modal-content,
#gov-modal-overlay .modal-content,
#vet-modal-overlay .modal-content,
#feed-modal-overlay .modal-content,
#profit-modal-overlay .modal-content,
#vault-modal-overlay .modal-content,
#vip-modal-overlay .modal-content,
#item-detail-modal-overlay .modal-content,
#add-listing-modal-overlay .modal-content,
#profile-modal-overlay .modal-content {
  width: 95vw !important;
  max-width: 860px !important;
  max-height: 92vh !important;
  border-radius: 16px !important;
  margin: auto !important;
}

@media (max-width: 768px) {
  #factory-modal-overlay .modal-content,
  #gov-modal-overlay .modal-content,
  #vet-modal-overlay .modal-content,
  #feed-modal-overlay .modal-content,
  #profit-modal-overlay .modal-content,
  #vault-modal-overlay .modal-content,
  #vip-modal-overlay .modal-content,
  #item-detail-modal-overlay .modal-content,
  #add-listing-modal-overlay .modal-content,
  #profile-modal-overlay .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
}

/* Close button universal styling */
.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  transform: rotate(90deg) !important;
}



/* ==========================================================================
   ✨ UNIVERSAL REARING-GRADE FRAMING & RESPONSIVE MENUS FOR ALL MODALS & SECTIONS
   ========================================================================== */

/* 1. Modal Overlay Universal Viewport */
.modal-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(3, 7, 18, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end !important;
  }
}

/* 2. Modal Content / Container Framing (Identical to Smart Rearing System) */
.modal-content,
.modal-overlay .modal-content,
#unit-modal-overlay .modal-content,
#factory-modal-overlay .modal-content,
#gov-modal-overlay .modal-content,
#vet-modal-overlay .modal-content,
#feed-modal-overlay .modal-content,
#profit-modal-overlay .modal-content,
#vault-modal-overlay .modal-content,
#vip-modal-overlay .modal-content,
#lifecycle-modal-overlay .modal-content,
#item-detail-modal-overlay .modal-content,
#add-listing-modal-overlay .modal-content,
#profile-modal-overlay .modal-content,
#escrow-modal-overlay .modal-content,
#preorder-modal-overlay .modal-content,
#android-modal-overlay .modal-content,
#auth-register-modal-overlay .modal-content,
[id$="-modal-overlay"] .modal-content,
.rearing-modal-container {
  width: 95vw !important;
  max-width: 1040px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 20px !important;
  background: var(--bg-surface-elevated, #131d33) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.75), 0 0 35px rgba(16, 185, 129, 0.25) !important;
  box-sizing: border-box !important;
  margin: auto !important;
}

@media (max-width: 768px) {
  .modal-content,
  .modal-overlay .modal-content,
  #unit-modal-overlay .modal-content,
  #factory-modal-overlay .modal-content,
  #gov-modal-overlay .modal-content,
  #vet-modal-overlay .modal-content,
  #feed-modal-overlay .modal-content,
  #profit-modal-overlay .modal-content,
  #vault-modal-overlay .modal-content,
  #vip-modal-overlay .modal-content,
  #lifecycle-modal-overlay .modal-content,
  #item-detail-modal-overlay .modal-content,
  #add-listing-modal-overlay .modal-content,
  #profile-modal-overlay .modal-content,
  #escrow-modal-overlay .modal-content,
  #preorder-modal-overlay .modal-content,
  #android-modal-overlay .modal-content,
  #auth-register-modal-overlay .modal-content,
  [id$="-modal-overlay"] .modal-content,
  .rearing-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 94vh !important;
    max-height: 94vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8) !important;
  }
}

/* 3. Universal Sleek Header Framing */
.modal-header,
.rearing-modal-header,
#unit-modal-overlay .modal-header,
#factory-modal-overlay .modal-header,
[id$="-modal-overlay"] .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1.25rem !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .modal-header,
  .rearing-modal-header,
  #unit-modal-overlay .modal-header,
  #factory-modal-overlay .modal-header,
  [id$="-modal-overlay"] .modal-header {
    padding: 0.6rem 0.85rem !important;
    gap: 0.4rem !important;
  }
}

/* 4. Universal Tabs Ribbon (منوها - بدون رپ، اسکرول افقی نرم لمسی) */
.rearing-tabs-nav,
.factory-modal-tabs,
.unit-modal-tabs,
.modal-tabs,
.nav-tabs,
#unit-modal-overlay .modal-content > div[style*="display: flex"][style*="gap"],
[id$="-modal-overlay"] [class*="tabs"] {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
  padding: 0.55rem 1.25rem !important;
  background: rgba(11, 17, 32, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.rearing-tabs-nav::-webkit-scrollbar,
.factory-modal-tabs::-webkit-scrollbar,
.unit-modal-tabs::-webkit-scrollbar,
.modal-tabs::-webkit-scrollbar,
[id$="-modal-overlay"] [class*="tabs"]::-webkit-scrollbar {
  display: none !important;
}

@media (max-width: 768px) {
  .rearing-tabs-nav,
  .factory-modal-tabs,
  .unit-modal-tabs,
  .modal-tabs,
  .nav-tabs,
  [id$="-modal-overlay"] [class*="tabs"] {
    padding: 0.45rem 0.75rem !important;
    gap: 0.35rem !important;
  }
}

/* 5. Universal Tab Buttons (دکمه‌های کپسولی شیک منو با هایلایت فعال) */
.unit-tab-btn,
.factory-tab-btn,
.gov-tab-btn,
.vet-tab-btn,
.rearing-tabs-nav button,
.rearing-tab-btn,
.tab-btn,
[class*="tab-btn"] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 0.42rem 1.05rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #94a3b8 !important;
  box-sizing: border-box !important;
}

.unit-tab-btn:hover,
.factory-tab-btn:hover,
.gov-tab-btn:hover,
.vet-tab-btn:hover,
[class*="tab-btn"]:hover {
  color: #fff !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  transform: translateY(-1px) !important;
}

.unit-tab-btn.btn-primary,
.unit-tab-btn.active,
.factory-tab-btn.active,
.gov-tab-btn.active,
.vet-tab-btn.active,
[class*="tab-btn"].active,
[class*="tab-btn"].btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* 6. Universal Scrollable Content Area Framing */
.modal-body,
.rearing-tab-content-area,
#unit-modal-overlay .modal-body,
#factory-modal-overlay .modal-body,
[id$="-modal-overlay"] .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.25rem !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .modal-body,
  .rearing-tab-content-area,
  #unit-modal-overlay .modal-body,
  #factory-modal-overlay .modal-body,
  [id$="-modal-overlay"] .modal-body {
    padding: 0.85rem !important;
  }
}

/* 7. Universal Modal Close & Back Buttons */
.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  transform: rotate(90deg) !important;
}

.btn-universal-back,
.modal-back-btn {
  border-radius: 8px !important;
  padding: 0.32rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-universal-back:hover,
.modal-back-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #10b981 !important;
}



/* ==========================================================================
   ✨ COMPACT, ERGONOMIC MEDIA & ARTICLES CARDS (کادرهای خلاصه و راحت مقالات و فیلم‌ها)
   ========================================================================== */

.media-knowledge-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 0.75rem !important;
}

@media (max-width: 768px) {
  .media-knowledge-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

.media-card,
.media-compact-card {
  padding: 0.75rem 0.95rem !important;
  border-radius: 14px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  min-height: auto !important;
  max-height: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.media-card:hover,
.media-compact-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}



/* ==========================================================================
   ✨ 5 ANALYTICAL TOOLS, EMPLOYER INSURANCE & GOV MODALS (سامانه‌های اداری و بیمه)
   ========================================================================== */

/* Tools Grid Clean Responsive Layout */
.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.85rem !important;
}

@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  .tools-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

.tool-card {
  background: var(--bg-surface) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 16px !important;
  padding: 1rem 1.15rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.tool-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2) !important;
}

/* Gov Portals Showcase Grid */
.gov-portals-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.65rem !important;
}

@media (max-width: 900px) {
  .gov-portals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .gov-portals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
  }
}

/* Gov, Feed, and Lifecycle Ribbon Tabs */
.gov-modal-tabs,
.gov-category-tabs,
.feed-modal-tabs,
.lifecycle-modal-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.55rem 1rem !important;
  background: rgba(11, 17, 32, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.gov-modal-tabs::-webkit-scrollbar,
.gov-category-tabs::-webkit-scrollbar,
.feed-modal-tabs::-webkit-scrollbar,
.lifecycle-modal-tabs::-webkit-scrollbar {
  display: none !important;
}

.gov-modal-tabs button,
.gov-category-tabs button,
.feed-modal-tabs button,
.lifecycle-modal-tabs button,
.btn-gov-cat-filter,
.btn-gov-tab,
.btn-lifecycle-tab {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.95rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  color: #94a3b8 !important;
}

.gov-modal-tabs button:hover,
.gov-category-tabs button:hover,
.feed-modal-tabs button:hover,
.lifecycle-modal-tabs button:hover {
  color: #fff !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

.gov-modal-tabs button.active,
.gov-modal-tabs button.btn-primary,
.gov-category-tabs button.active,
.feed-modal-tabs button.active,
.feed-modal-tabs button.btn-primary,
.lifecycle-modal-tabs button.active,
.lifecycle-modal-tabs button.btn-primary,
.btn-gov-cat-filter.btn-primary,
.btn-gov-tab.active,
.btn-lifecycle-tab.btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* Pathology Assistant & Scanner v5.4 Enhancements */
@keyframes scanLine {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 96%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

.btn-scanner-organ-chip {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(30, 41, 59, 0.65);
  color: #cbd5e1;
}

.btn-scanner-organ-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(167, 139, 250, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.btn-scanner-organ-chip.active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #ffffff !important;
  border-color: #a78bfa !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5) !important;
}

.btn-switch-diff-diagnosis {
  transition: all 0.2s ease;
}

.btn-switch-diff-diagnosis:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: #60a5fa !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35) !important;
  color: #ffffff !important;
}


.modal-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: var(--radius-sm) !important;
  width: auto !important;
  height: auto !important;
  min-height: 32px !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}


/* ==========================================================================
   ✨ DAMBAN PWA v5.6.8 - PERFECT FRAMING & HIGH-VISIBILITY CONNECTIVITY
   ========================================================================== */

/* 1. Universal Modal Close & Back Buttons (No text overflow, No rotate) */
.modal-close-btn {
  width: auto !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #10b981 !important;
  transform: translateY(-1px) !important;
}

.btn-universal-back,
.modal-back-btn {
  border-radius: 8px !important;
  padding: 0.32rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease !important;
}

.btn-universal-back:hover,
.modal-back-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #10b981 !important;
  transform: translateY(-1px) !important;
}

/* 2. Zero-Overflow Mobile Modal Overlays & Framing */
.modal-overlay,
#unit-modal-overlay,
#factory-modal-overlay,
[id$="-modal-overlay"] {
  box-sizing: border-box !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .modal-content,
  .rearing-modal-container,
  .unit-modal-container,
  .factory-modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .unit-modal-header,
  #unit-modal-overlay .modal-header {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
  }
}

/* 3. Safe-Bound Radial Nodes & Spoke Badges (Zero Clipping on Mobile) */
.spoke-node-1 { top: 9% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-2 { top: 20% !important; left: 78% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-3 { top: 50% !important; left: 83% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-4 { top: 80% !important; left: 78% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-5 { top: 91% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-6 { top: 80% !important; left: 22% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-7 { top: 50% !important; left: 17% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-8 { top: 20% !important; left: 22% !important; transform: translate(-50%, -50%) !important; }

.spoke-badge {
  padding: 0.22rem 0.5rem !important;
  border-radius: var(--radius-full) !important;
  white-space: nowrap !important;
  max-width: 135px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .spoke-badge {
    padding: 0.18rem 0.4rem !important;
    gap: 0.25rem !important;
    max-width: 115px !important;
  }
  .spoke-text .unit-name {
    font-size: 0.62rem !important;
  }
  .spoke-text .unit-staff {
    font-size: 0.55rem !important;
  }
}


/* ==========================================================================
   ✨ DAMBAN PWA v5.6.8 / v5.6.9 - ZERO-CLIPPING RADAR & FLAWLESS MODAL FRAMING
   ========================================================================== */

/* 1. Topology Diagram Container: Increased Height & Breathing Room */
.topology-diagram-container {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  height: 425px !important;
  margin: 0 auto !important;
  user-select: none !important;
}

@media (min-width: 769px) {
  .topology-diagram-container {
    max-width: 680px !important;
    height: 460px !important;
  }
}

/* 2. Precision Safe-Margin Spoke Node Coordinates (Zero Border Collision) */
.spoke-node-1 { top: 12% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-2 { top: 24% !important; left: 74% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-3 { top: 50% !important; left: 80% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-4 { top: 76% !important; left: 74% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-5 { top: 88% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-6 { top: 76% !important; left: 26% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-7 { top: 50% !important; left: 20% !important; transform: translate(-50%, -50%) !important; }
.spoke-node-8 { top: 24% !important; left: 26% !important; transform: translate(-50%, -50%) !important; }

/* 3. Spoke Badges Framing & Typography (Zero Clipping & Graceful Ellipsis) */
.spoke-badge {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.5) !important;
  border-radius: 999px !important;
  padding: 0.22rem 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  max-width: 125px !important;
  box-sizing: border-box !important;
}

.spoke-factory {
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.spoke-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.spoke-text .unit-name {
  font-size: 0.67rem !important;
  color: #fff !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.spoke-text .unit-staff {
  font-size: 0.58rem !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 480px) {
  .topology-diagram-container {
    height: 410px !important;
  }
  .spoke-badge {
    padding: 0.18rem 0.4rem !important;
    gap: 0.25rem !important;
    max-width: 110px !important;
  }
  .spoke-text .unit-name {
    font-size: 0.62rem !important;
  }
  .spoke-text .unit-staff {
    font-size: 0.54rem !important;
  }
}
[data-theme=light] 50%{transform:scale(1.12)}}[data-theme=light] 
/* Masoud Directives: Proportionate Pathology & Compact 5 Tools */
.analytical-tools-section, .ai-assistant-section {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.tools-compact-dock {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.55rem !important;
}

.tool-compact-item {
  min-height: 56px !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tool-compact-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-triage-factor-tile {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

.btn-triage-factor-tile * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.triage-stepper-btn {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

@media (max-width: 640px) {
  .tools-compact-dock {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.45rem !important;
}
  .triage-icons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }
  .ai-clean-tabs {
    flex-direction: column !important;
  }
}

/* Masoud Triage Glassy Aesthetics & Mode Switcher */
.ai-clinical-module-nav {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.45rem !important;
}

.btn-mode-tab:hover:not(.active-mode-tab) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.btn-triage-factor-tile:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}

.btn-triage-factor-tile.active-organ-glass {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(99, 102, 241, 0.18)) !important;
  border-color: rgba(167, 139, 250, 0.8) !important;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35) !important;
}

@media (max-width: 640px) {
  .ai-clinical-module-nav {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    padding: 0.25rem !important;
  }
  .btn-mode-tab {
    padding: 0.4rem 0.25rem !important;
    font-size: 0.76rem !important;
    gap: 0.25rem !important;
  }
  .btn-mode-tab span:first-child {
    font-size: 1rem !important;
  }
  .triage-icons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }
  .btn-triage-factor-tile {
    min-height: 44px !important;
    padding: 0.38rem 0.5rem !important;
    flex-direction: row !important;
  }
  .btn-triage-factor-tile span.triage-organ-main-title {
    font-size: 0.75rem !important;
  }
}

/* Masoud Dock-Style Clinical Switcher */
.ai-clinical-roller-track::-webkit-scrollbar {
  display: none !important;
}
@media (max-width: 640px) {
  .ai-clinical-roller-track {
    gap: 0.45rem !important;
    padding: 0.15rem 0 !important;
  }
  .ai-clinical-roller-track .btn-roller-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.3rem 0.2rem !important;
    font-size: 0.72rem !important;
    height: 60px !important;
  }
}


/* Dedicated Triage Clinical Examination Modal */
.triage-exam-modal-container {
  width: 100% !important;
  max-width: 1140px !important;
  height: 94vh !important;
  max-height: 94vh !important;
  background: radial-gradient(circle at 50% 0%, #151e36 0%, #0b1324 70%, #080d19 100%) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 40px rgba(139, 92, 246, 0.25) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  animation: triageModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes triageModalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.triage-exam-modal-header {
  padding: 0.85rem 1.25rem;
  background: rgba(11, 19, 36, 0.95);
  border-bottom: 1.5px solid rgba(139, 92, 246, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  flex-shrink: 0;
}

.triage-exam-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.35rem;
}

/* ==========================================================================
   ✨ v5.12.47 - REARING-GRADE SUPPLY CHAIN NETWORK FRAMING & MENUS
   ========================================================================== */
.rearing-network-master-box {
  width: 100% !important;
  box-sizing: border-box !important;
}

.network-rearing-unit-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.18) !important;
}

.network-rearing-unit-card .btn-open-unit-modal:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  #enterprise-capacity-section .rearing-modal-header {
    padding: 0.7rem 0.85rem !important;
  }
  #enterprise-capacity-section .rearing-tab-content-area,
  #enterprise-capacity-section .rearing-inline-section-body,
  #bazaar-section .rearing-inline-section-body {
    padding: 0.85rem !important;
  }
}

/* ==========================================================================
   ✨ v5.12.50 - PAGE VERTICAL SCROLL FIX (ZERO SCROLL TRAP ON MAIN SECTIONS)
   ========================================================================== */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

.modal-overlay:not(.active) {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.rearing-network-master-box {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.rearing-network-master-box .rearing-modal-header {
  height: auto !important;
  min-height: 52px !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
}

.rearing-inline-section-body {
  display: block !important;
  flex: none !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  overscroll-behavior: auto !important;
}

/* ==========================================================================
   ✨ v5.12.58 - FULL-SCREEN DEDICATED UNIT PAGES (SPECS, CHAT, REPORT)
   رفع کامل تداخل نوشته‌ها و کادرها در صفحات مشخصات، گفتگو و ثبت گزارش شبکه ۲ و ۳
   ========================================================================== */
#unit-modal-overlay.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #060b16 !important;
  z-index: 250000 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#unit-modal-overlay .unit-modal-container {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #0b1324 !important;
}

#unit-modal-overlay .unit-modal-header {
  height: auto !important;
  min-height: 64px !important;
  max-height: none !important;
  padding: 0.85rem 1.25rem !important;
  white-space: normal !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  flex-shrink: 0 !important;
}

#unit-modal-overlay .unit-modal-header h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

#unit-modal-overlay #btn-unit-back {
  width: auto !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 0.42rem 1rem !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  transform: none !important;
}

#unit-modal-overlay .unit-modal-tabs {
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  padding: 0.55rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  overflow-x: auto !important;
  flex-shrink: 0 !important;
  background: #09101f !important;
}

#unit-modal-overlay .unit-tab-btn {
  height: auto !important;
  min-height: 38px !important;
  padding: 0.45rem 1.05rem !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
  line-height: 1.3 !important;
}

#unit-modal-overlay .unit-modal-body {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
}

#unit-modal-overlay .unit-modal-body * {
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #unit-modal-overlay .unit-modal-header {
    padding: 0.75rem 0.9rem !important;
    gap: 0.55rem !important;
  }
  #unit-modal-overlay .unit-modal-tabs {
    padding: 0.45rem 0.85rem !important;
    gap: 0.4rem !important;
  }
  #unit-modal-overlay .unit-tab-btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.78rem !important;
  }
  #unit-modal-overlay .unit-modal-body {
    padding: 0.9rem !important;
  }
}

/* ==========================================================================
   ✨ v5.12.59 - UNIVERSAL BACK TO DASHBOARD BUTTON SIZING & ZERO TEXT COLLISION
   اصلاح سایزبندی تمامی کلیدهای بازگشت به داشبورد در کل سامانه تا هیچ‌گاه وارد متن‌های دیگر نشوند
   ========================================================================== */
.modal-close-btn,
.btn-universal-back,
.modal-back-btn,
.global-back-btn,
#close-chain-network-modal-btn,
#btn-unit-back,
#close-rearing-modal-btn,
#btn-rearing-back-dashboard,
#close-profile-modal-btn,
#close-factory-modal-btn,
#btn-gov-back,
#btn-vet-back,
#btn-feed-back,
#btn-profit-back,
#btn-lifecycle-back,
#close-vault-modal-btn,
#close-vip-modal-btn,
#close-item-detail-btn,
#close-add-listing-modal-btn {
  width: auto !important;
  min-width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  padding: 0.38rem 0.9rem !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

.modal-close-btn:hover,
.btn-universal-back:hover,
.modal-back-btn:hover,
.global-back-btn:hover,
#close-chain-network-modal-btn:hover,
#btn-unit-back:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  transform: translateY(-1px) !important;
}

.modal-header,
.rearing-modal-header,
.chain-network-header,
.unit-modal-header {
  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
}

.modal-header h2,
.modal-header h3,
.rearing-modal-header .rearing-title-text,
.chain-network-header h2,
.unit-modal-header h3 {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   ✨ v5.12.60 - SPACIOUS LARGE FARM & FACTORY CARDS IN NETWORK LEVELS 2 & 3
   کادرهای بزرگ‌تر، خواناتر و دلبازتر برای فارم‌ها و کارخانه‌ها در سطح ۲ و ۳
   ========================================================================== */
.chain-units-spacious-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)) !important;
  gap: 1.15rem !important;
}

@media (max-width: 768px) {
  .chain-units-spacious-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ==========================================================================
   ✨ v5.12.72 - GLOBAL VAZIRMATN TYPOGRAPHY ACROSS ENTIRE APPLICATION
   تبدیل فونت کل اپلیکیشن، اعداد، جدول‌ها، کارت‌ها و مودال‌ها به Vazirmatn
   ========================================================================== */
:root {
  --font-family-main: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body, #app, *, *::before, *::after,
button, input, select, textarea, option, optgroup,
table, th, td, code, pre, kbd, samp, small, strong, span, div, p, h1, h2, h3, h4, h5, h6, a, li, label, svg text {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   ✨ v5.12.89 - UNIFIED MULTI-COLUMN MOBILE & DESKTOP GRID LOCK
   رفع کامل مشکل تک‌ستونی شدن کادرهای نرخ زنده بازار، منوها و ابزارها در موبایل
   ========================================================================== */
#mkt-cards-grid,
.mkt-cards-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#all-market-cards-grid,
.all-market-cards-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#home-bazaar-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#enterprise-capacity-section .rearing-env-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  #mkt-cards-grid,
  .mkt-cards-responsive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }
  #all-market-cards-grid,
  .all-market-cards-responsive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }
  #home-bazaar-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  #enterprise-capacity-section .rearing-env-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  #enterprise-capacity-section .rearing-env-card {
    padding: 0.65rem 0.6rem !important;
    gap: 0.45rem !important;
  }
  #enterprise-capacity-section .rearing-env-card > div:first-child {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.25rem !important;
  }
  #enterprise-capacity-section .rearing-env-card div {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

.market-category-pills {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0.45rem !important;
}
.market-category-pills::-webkit-scrollbar {
  display: none !important;
}

/* ==========================================================================
   ✨ v5.12.93 - ENLARGED, HIGH-LEGIBILITY ROLLING TAB MENUS & BOTTOM DOCK
   بزرگ‌تر، واضح‌تر و خواناتر شدن تمامی منوهای رولی در پیشخوان ملی و سایر بخش‌ها
   ========================================================================== */

/* 1. All Rolling Tab Ribbons Container (.rearing-tabs-nav, #gov-tabs-nav, etc.) */
.rearing-tabs-nav,
#gov-tabs-nav,
#rearing-tabs-nav,
#triage-tabs-nav,
#chain-modal-tabs-nav,
#bazaar-brain-tabs-nav,
.factory-modal-tabs,
.unit-modal-tabs,
.gov-modal-tabs,
.gov-category-tabs,
.feed-modal-tabs,
.lifecycle-modal-tabs,
.modal-tabs,
.nav-tabs,
#unit-modal-overlay .unit-modal-tabs,
[id$="-modal-overlay"] [class*="tabs"] {
  height: auto !important;
  min-height: 58px !important;
  max-height: none !important;
  padding: 0.6rem 1.25rem !important;
  gap: 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* 2. All Rolling Tab Buttons (پیشخوان ملی، پرورش، پاتولوژی، زنجیره، بازارگاه، فارم‌ها و غیره) */
.rearing-tab-btn,
.unit-tab-btn,
.factory-tab-btn,
.gov-tab-btn,
.vet-tab-btn,
.btn-gov-cat-filter,
.btn-gov-tab,
.btn-lifecycle-tab,
.chain-modal-tab-btn,
.bazaar-subtab-btn,
.bazaar-filter-btn,
.rearing-tabs-nav button,
.gov-modal-tabs button,
.gov-category-tabs button,
.lifecycle-modal-tabs button,
#unit-modal-overlay .unit-tab-btn,
.tab-btn,
[class*="tab-btn"] {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 42px !important;
  max-height: none !important;
  padding: 0.52rem 1.18rem !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  white-space: nowrap !important;
  letter-spacing: -0.1px !important;
  color: #e2e8f0 !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  box-sizing: border-box !important;
}

.rearing-tab-btn.active-rearing-tab,
.rearing-tab-btn.btn-primary,
.unit-tab-btn.active,
.unit-tab-btn.btn-primary,
.factory-tab-btn.active,
.gov-tab-btn.active,
.btn-gov-cat-filter.active-rearing-tab,
.btn-gov-cat-filter.btn-primary,
.btn-lifecycle-tab.btn-primary,
#unit-modal-overlay .unit-tab-btn.active-rearing-tab,
[class*="tab-btn"].active,
[class*="tab-btn"].btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
}

/* 3. Bottom Rolling Navigation Dock (.bottom-nav-dock & .bottom-nav-item) */
.mobile-bottom-nav .bottom-nav-dock {
  min-height: 68px !important;
  height: 70px !important;
  gap: 0.5rem !important;
  padding: 0 0.5rem !important;
}

.mobile-bottom-nav .bottom-nav-item {
  min-width: 72px !important;
  height: 60px !important;
  padding: 0.3rem 0.45rem !important;
  border-radius: 16px !important;
}

.mobile-bottom-nav .bottom-nav-item .nav-icon-wrapper {
  width: 32px !important;
  height: 26px !important;
}

.mobile-bottom-nav .bottom-nav-item .nav-icon {
  font-size: 1.25rem !important;
}

.mobile-bottom-nav .bottom-nav-item .nav-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
}

.mobile-bottom-nav .bottom-nav-item.active .nav-label {
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

/* 4. Mobile Responsive Sizing for Rolling Menus (Clear & Readable on Phones) */
@media (max-width: 768px) {
  .rearing-tabs-nav,
  #gov-tabs-nav,
  #rearing-tabs-nav,
  #triage-tabs-nav,
  #chain-modal-tabs-nav,
  #bazaar-brain-tabs-nav,
  .factory-modal-tabs,
  .unit-modal-tabs,
  .gov-modal-tabs,
  .gov-category-tabs,
  .feed-modal-tabs,
  .lifecycle-modal-tabs,
  .modal-tabs,
  .nav-tabs,
  #unit-modal-overlay .unit-modal-tabs,
  [id$="-modal-overlay"] [class*="tabs"] {
    min-height: 48px !important;
    padding: 0.4rem 0.65rem !important;
    gap: 0.38rem !important;
  }

  .rearing-tab-btn,
  .unit-tab-btn,
  .factory-tab-btn,
  .gov-tab-btn,
  .vet-tab-btn,
  .btn-gov-cat-filter,
  .btn-gov-tab,
  .btn-lifecycle-tab,
  .chain-modal-tab-btn,
  .bazaar-subtab-btn,
  .bazaar-filter-btn,
  .rearing-tabs-nav button,
  .gov-modal-tabs button,
  .gov-category-tabs button,
  .lifecycle-modal-tabs button,
  #unit-modal-overlay .unit-tab-btn,
  .tab-btn,
  [class*="tab-btn"] {
    min-height: 36px !important;
    padding: 0.38rem 0.82rem !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
  }

  .ai-clinical-roller-track .btn-roller-item {
    min-width: 0 !important;
    width: 100% !important;
    height: 62px !important;
    padding: 0.3rem 0.2rem !important;
  }

  .ai-clinical-roller-track .btn-roller-item .nav-label {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }

  #btn-toggle-search {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }
}

#btn-toggle-search:hover {
  transform: translateY(-1px) scale(1.04) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.3) !important;
}

/* ==========================================================================
   ✨ v5.13.01 - UNIVERSAL CROSS-DEVICE VIEWPORT & GEOMETRY NORMALIZATION ENGINE
   استانداردسازی ۱۰۰٪ یکسان چیدمان، فونت، منوها و باکس‌ها از سامسونگ S7 (360px) تا آیفون 13 Pro Max (428px) و دسکتاپ
   ========================================================================== */

/* 1. Fluid Proportional Root Typography & Anti-Font-Boost Lock */
html {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

@media (max-width: 768px) {
  html {
    /* Scales smoothly: 320px -> 12.2px, 360px (Samsung S7) -> 13.5px, 390px -> 14.6px, 428px (iPhone 13 Pro Max) -> 16px */
    font-size: clamp(12.2px, 3.74vw, 16px) !important;
  }
}

/* 2. Legacy WebView Compatibility (Samsung S7 Android 7/8 & Older iOS) */
.modal-overlay,
#rearing-modal-overlay,
#unit-modal-overlay.modal-overlay,
.messenger-lightbox-backdrop {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Safe-Area Padding for Notched Phones (iPhone 13 Pro Max) & Compact Dock on S7 */
.mobile-bottom-nav {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 768px) {
  .app-container {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 3. Clinical 3-Mode Dock: Decoupled from .bottom-nav-item min-width so 3 columns are always 100% equal */
  .ai-clinical-roller-track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .ai-clinical-roller-track .btn-roller-item {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0.28rem 0.18rem !important;
    border-radius: 13px !important;
  }
  .ai-clinical-roller-track .btn-roller-item .nav-icon-wrapper {
    width: 28px !important;
    height: 26px !important;
  }
  .ai-clinical-roller-track .btn-roller-item .nav-label {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 4. 10-Organ Triage Grid: 2-Per-Row Compact Horizontal Clinical Cards on All Phones */
  .triage-icons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
  }
  .btn-triage-factor-tile {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 0.38rem 0.5rem !important;
    border-radius: 11px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.38rem !important;
  }
  .btn-triage-factor-tile .triage-organ-art-box {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .btn-triage-factor-tile span.triage-organ-main-title {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: right !important;
  }

  /* 5. 6 Analytical Tools Dock: Uniform 2-Column Compact Cards on Phones */
  .tools-grid.tools-compact-dock {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
  }
  .tools-grid.tools-compact-dock .tool-card {
    min-height: 54px !important;
    padding: 0.45rem 0.5rem !important;
    gap: 0.4rem !important;
    border-radius: 11px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .tools-grid.tools-compact-dock .tool-card .tool-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  .tools-grid.tools-compact-dock .tool-card h4 {
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 6. Rearing 4-Card KPI Banner & Market Live Price Grids */
  .rearing-env-grid,
  #enterprise-capacity-section .rearing-env-grid,
  #mkt-cards-grid,
  .mkt-cards-responsive-grid,
  #all-market-cards-grid,
  .all-market-cards-responsive-grid,
  #home-bazaar-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
  }

  .rearing-env-card {
    min-width: 0 !important;
    padding: 0.5rem 0.55rem !important;
    gap: 0.4rem !important;
    border-radius: 11px !important;
  }

  /* 7. National Portals 4-Column Grid Normalization */
  .gov-portals-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
    width: 100% !important;
  }
  .gov-portal-item {
    min-width: 0 !important;
    min-height: 74px !important;
    height: 78px !important;
    padding: 0.35rem 0.15rem !important;
  }
}

/* Extra-Narrow Screen Guard (Samsung S7 360px, iPhone SE 320px-375px, Galaxy Fold) */
@media (max-width: 385px) {
  .tools-grid.tools-compact-dock {
    grid-template-columns: 1fr !important;
    gap: 0.38rem !important;
  }
  .mobile-bottom-nav .bottom-nav-item {
    min-width: 64px !important;
    height: 56px !important;
    padding: 0.25rem 0.35rem !important;
  }
}

/* ==========================================================================
   ✨ SMOOTH VERTICAL SCROLLING GUARDRAILS FOR ALL NEWLY ADDED MODALS & SECTIONS
   ========================================================================== */
#damban-biosecurity-radar-modal,
#damban-smart-daily-alert-modal,
#damban-farm-benchmark-modal,
#damban-commercial-hub-modal,
#auto-procure-modal-overlay,
#vip-modal-overlay,
#escrow-modal-overlay,
#preorder-modal-overlay {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.damban-scrollable-modal,
#damban-biosecurity-radar-modal .modal-content,
#damban-smart-daily-alert-modal .modal-content,
#damban-farm-benchmark-modal .modal-content,
#damban-commercial-hub-modal .modal-content {
  display: block !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.modal-content > * {
  flex-shrink: 0;
}












@media(max-width:768px){.ticker-track{animation:marquee 380s linear infinite!important;}}

/* =======================================================================
   🐾 ENG. MASOUD ROLL BAR & VIP SCROLL REPAIR (v5.19.2)
   ======================================================================= */
.mobile-bottom-nav {
  z-index: 1000005 !important;
  pointer-events: auto !important;
}

.mobile-bottom-nav .bottom-nav-dock {
  pointer-events: auto !important;
}

#rearing-modal-overlay {
  z-index: 1000000 !important;
  padding: 0 0 78px 0 !important;
  align-items: flex-start !important;
  overflow: hidden !important;
}

#rearing-modal-overlay .rearing-modal-container {
  height: calc(100vh - 84px) !important;
  max-height: calc(100vh - 84px) !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  border-radius: 0 0 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  bottom: auto !important;
  position: relative !important;
}

@media (max-width: 768px) {
  #rearing-modal-overlay {
    padding: 0 0 78px 0 !important;
    align-items: flex-start !important;
  }
  #rearing-modal-overlay .rearing-modal-container {
    height: calc(100vh - 84px) !important;
    max-height: calc(100vh - 84px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 0 16px 16px !important;
    bottom: auto !important;
    position: relative !important;
  }
}

#damban-commercial-hub-modal,
#vip-modal-overlay {
  z-index: 1000000 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

#damban-commercial-hub-modal .rearing-modal-container,
#vip-modal-overlay .modal-content {
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
}

#damban-commercial-hub-modal .rearing-tab-content-area,
#vip-modal-overlay [style*="overflow-y: auto"] {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* =======================================================================
   🛡️ AUTH MODAL HORIZONTAL TABS SCROLL & DRAWER BACK BUTTON (v5.19.3)
   ======================================================================= */
#btn-close-main-menu {
  height: 36px !important;
  width: auto !important;
  min-width: 84px !important;
  padding: 0 0.95rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(220, 38, 38, 0.28) 100%) !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
  color: #fee2e2 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  user-select: none !important;
}

#btn-close-main-menu:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(220, 38, 38, 0.48) 100%) !important;
  border-color: rgba(248, 113, 113, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

#btn-close-main-menu:active {
  transform: translateY(1px) scale(0.97);
}

.auth-tabs-horizontal-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: smooth !important;
  max-width: 100% !important;
}

.auth-tabs-horizontal-bar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.auth-tabs-horizontal-bar .auth-tab-btn {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.auth-tabs-horizontal-bar .auth-tab-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.auth-tabs-horizontal-bar .auth-tab-btn:active {
  transform: translateY(1px) scale(0.97);
}

/* =======================================================================
   🐾 ENG. MASOUD BOTTOM ROLL BAR POSITION PRESERVATION (v5.19.4)
   ======================================================================= */
.mobile-bottom-nav .bottom-nav-dock {
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
}

/* =======================================================================
   💎 DAMBAN BESPOKE FLOATING ACTIONS SUITE (v5.22.3)
   Repositioned & Redesigned exclusively per Eng. Masoud's direct order:
   - Zero overlap with the bottom rolling dock (.bottom-nav-dock)
   - Height: bottom: calc(90px + env(safe-area-inset-bottom, 0px)) on all devices
   - Right: «مشاور شما 🤖» (Farm AI Advisor) with Cyber-Emerald glow
   - Left: «پیشنهاد به شما 💡» (Flock Needs) with Royal Amber-Gold glow
   ======================================================================= */

/* 1. RIGHT FAB: «مشاور شما 🤖» */
.ai-consultant-floating-trigger {
  position: fixed !important;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  right: 14px !important;
  left: auto !important;
  z-index: 1000002 !important;
  height: 44px !important;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.65) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 22px rgba(16, 185, 129, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 0.85rem 0 0.45rem !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  direction: rtl !important;
}

.ai-consultant-floating-trigger:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: #34d399 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 28px rgba(16, 185, 129, 0.5) !important;
}

.ai-consultant-floating-trigger:active {
  transform: translateY(1px) scale(0.97) !important;
}

.ai-floating-icon-wrap {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.5) !important;
  flex-shrink: 0 !important;
}

.ai-floating-pulse {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1.5px solid #34d399 !important;
  animation: aiPulseGlow 2.2s infinite ease-out !important;
  pointer-events: none !important;
}

@keyframes aiPulseGlow {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.ai-floating-label-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.15 !important;
  gap: 1px !important;
}

.ai-floating-title {
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.ai-floating-badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #6ee7b7 !important;
  background: rgba(16, 185, 129, 0.22) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(110, 231, 183, 0.3) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* 2. LEFT FAB: «پیشنهاد به شما 💡» */
.user-suggestion-floating-trigger {
  position: fixed !important;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  left: 14px !important;
  right: auto !important;
  z-index: 1000002 !important;
  height: 44px !important;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 22px rgba(245, 158, 11, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 0.85rem 0 0.45rem !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.4s ease, box-shadow 0.25s ease !important;
  direction: rtl !important;
}

.user-suggestion-floating-trigger.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.user-suggestion-floating-trigger:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 28px rgba(245, 158, 11, 0.5) !important;
}

.user-suggestion-floating-trigger:active {
  transform: translateY(1px) scale(0.97) !important;
}

.suggestion-floating-icon-wrap {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5) !important;
}

.suggestion-floating-bulb {
  font-size: 16px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) !important;
}

.suggestion-floating-pulse {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  border: 1.5px solid #fbbf24 !important;
  animation: suggestionPulseGlow 2.2s infinite ease-out !important;
  pointer-events: none !important;
}

@keyframes suggestionPulseGlow {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.suggestion-floating-label-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.15 !important;
  gap: 1px !important;
}

.suggestion-floating-title {
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.suggestion-floating-badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.22) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(253, 230, 138, 0.3) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* 3. EXPANDED SMART POPUP (Guaranteed above the bottom dock) */
#damban-silent-smart-popup {
  position: fixed !important;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  left: 14px !important;
  right: auto !important;
  z-index: 1000003 !important;
  width: 290px !important;
  max-width: calc(100vw - 28px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 25px rgba(245, 158, 11, 0.25) !important;
}

#damban-silent-smart-pill {
  position: fixed !important;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  left: 14px !important;
  right: auto !important;
  z-index: 1000002 !important;
}

/* 4. RESPONSIVE MOBILE ADAPTATION (Zero Rolling Dock Collision) */
@media (max-width: 640px) {
  .ai-consultant-floating-trigger {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    height: 40px !important;
    padding: 0 0.7rem 0 0.35rem !important;
    gap: 0.4rem !important;
  }
  .ai-floating-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    font-size: 1.05rem !important;
  }
  .ai-floating-title {
    font-size: 0.74rem !important;
  }
  .ai-floating-badge {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
  }

  .user-suggestion-floating-trigger {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    height: 40px !important;
    padding: 0 0.7rem 0 0.35rem !important;
    gap: 0.4rem !important;
  }
  .suggestion-floating-icon-wrap {
    width: 28px !important;
    height: 28px !important;
  }
  .suggestion-floating-bulb {
    font-size: 14px !important;
  }
  .suggestion-floating-title {
    font-size: 0.74rem !important;
  }
  .suggestion-floating-badge {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
  }

  #damban-silent-smart-popup {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
  }
  #damban-silent-smart-pill {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
  }
}

@media (max-width: 480px) {
  .ai-consultant-floating-trigger {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    height: 38px !important;
    padding: 0 0.55rem 0 0.3rem !important;
    gap: 0.35rem !important;
  }
  .ai-floating-icon-wrap {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.95rem !important;
  }
  .ai-floating-title {
    font-size: 0.7rem !important;
  }
  .ai-floating-badge {
    font-size: 0.54rem !important;
  }

  .user-suggestion-floating-trigger {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    height: 38px !important;
    padding: 0 0.55rem 0 0.3rem !important;
    gap: 0.35rem !important;
  }
  .suggestion-floating-icon-wrap {
    width: 26px !important;
    height: 26px !important;
  }
  .suggestion-floating-bulb {
    font-size: 13px !important;
  }
  .suggestion-floating-title {
    font-size: 0.7rem !important;
  }
  .suggestion-floating-badge {
    font-size: 0.54rem !important;
  }

  #damban-silent-smart-popup {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ==========================================================================
   👑 DAMBAN SUPREME LUXURY REARING MODAL & SUITE OVERHAUL (v5.22.46)
   ========================================================================== */

#rearing-modal-overlay {
  z-index: 1000000 !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(4, 9, 20, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5vh 1rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#rearing-modal-overlay .rearing-modal-container {
  height: 94vh !important;
  max-height: 94vh !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: auto !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  background: linear-gradient(180deg, #0b1428 0%, #060b17 100%) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(16, 185, 129, 0.22) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

@media (max-width: 768px) {
  #rearing-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #rearing-modal-overlay .rearing-modal-container {
    height: 100% !important;
    max-height: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 72px) !important;
  }
}

.rearing-modal-header {
  min-height: 54px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0.6rem 1rem !important;
  background: linear-gradient(135deg, rgba(8, 20, 38, 0.98), rgba(4, 12, 24, 0.98)) !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: normal !important;
  flex-shrink: 0 !important;
}

.rearing-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.4rem 0.85rem !important;
  background: rgba(13, 22, 38, 0.96) !important;
  border-bottom: 1.2px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.rearing-tabs-nav::-webkit-scrollbar {
  display: none !important;
}

.rearing-tab-btn {
  padding: 0.42rem 0.85rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.rearing-tab-btn:hover {
  color: #f1f5f9 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  transform: translateY(-1px) !important;
}
.rearing-tab-btn.active-rearing-tab {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(5, 150, 105, 0.24)) !important;
  color: #34d399 !important;
  border: 1.2px solid rgba(52, 211, 153, 0.65) !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.rearing-tab-content-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 1rem 1.15rem 4rem 1.15rem !important;
  box-sizing: border-box !important;
}

.rearing-env-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 820px) {
  .rearing-env-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}
@media (max-width: 380px) {
  .rearing-env-grid {
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
  }
}

.rearing-env-card {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.2px solid rgba(52, 211, 153, 0.24) !important;
  border-radius: 13px !important;
  padding: 0.75rem 0.85rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 92px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.rearing-env-card:hover {
  border-color: rgba(52, 211, 153, 0.55) !important;
  transform: translateY(-2px) !important;
}


/* === v5.22.57 UNIVERSAL TOP-LEFT BACK BUTTONS & SCHEMATIC BAZAAR CARDS === */
.modal-header,
.chain-network-header,
.unit-modal-header,
.rearing-tab-top-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
}

.modal-header > .modal-title,
.modal-header > div:first-child:not(:only-child),
.chain-network-header > div:first-child:not(:only-child),
.unit-modal-header > div:first-child:not(:only-child),
.rearing-tab-top-bar > .tab-top-title {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

#header-back-btn,
#btn-return-home-from-bazaar,
.btn-universal-back,
.global-back-btn,
.modal-back-btn,
.btn-back-modal,
.page-back-btn,
.btn-tab-back-action,
.modal-close-btn,
#close-rearing-modal-btn,
#close-chain-network-modal-btn,
#btn-unit-back,
#close-unit-modal-btn,
#btn-profit-back,
#close-profit-modal-btn,
#btn-feed-back,
#close-feed-modal-btn,
#btn-lifecycle-back,
#close-lifecycle-modal-btn,
#btn-vet-back,
#close-vet-modal-btn,
#btn-gov-back,
#close-gov-modal-btn,
#close-factory-modal-btn,
#close-profile-modal-btn,
#close-add-listing-modal-btn,
#close-price-sources-btn,
#close-media-detail-btn,
#close-media-upload-btn,
#close-vault-modal-btn,
#close-item-detail-btn,
#close-chat-btn,
#close-vip-modal-btn,
#close-escrow-modal-btn,
#close-preorder-modal-btn,
#btn-close-auto-procure,
#btn-close-android-modal,
#btn-close-search-overlay,
#btn-mobile-back-to-contacts,
#btn-close-main-menu,
#btn-close-sent-modal,
#btn-close-lightbox,
#close-admin-login-btn,
#close-behavior-inspector-btn,
#sb-close-btn,
#sc-modal-close,
#dn-close,
#de-close,
#sci-lib-close {
  width: auto !important;
  height: auto !important;
  min-width: 84px !important;
  min-height: 36px !important;
  padding: 0.36rem 0.9rem !important;
  border-radius: 10px !important;
  font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.99)) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.5) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  align-self: flex-start !important;
}

#header-back-btn {
  order: 99 !important;
  align-self: center !important;
}

.bazaar-item-card:hover {
  border-color: rgba(52, 211, 153, 0.75) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(16, 185, 129, 0.18) !important;
}


/* === BAZAAR CARD PHOTO PLACEMENT & PROPORTIONS FIX === */
.bazaar-item-card .item-image-wrapper {
  width: 100% !important;
  height: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #090d16 !important;
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.bazaar-item-card .item-image {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
@media (max-width: 768px) {
  .bazaar-item-card .item-image-wrapper {
    width: 100% !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
    border-radius: 12px 12px 0 0 !important;
  }
}

/* === DAMBAN MESSENGER V2 === */
.messenger-layout-container {
  display: flex !important;
  flex-direction: row !important;
  height: calc(100vh - 140px) !important;
  min-height: 560px !important;
  max-height: 840px !important;
  background: var(--bg-surface) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.messenger-sidebar {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  height: 100% !important;
  max-height: 100% !important;
  border-left: 1.5px solid var(--border-color) !important;
  border-right: none !important;
  border-bottom: none !important;
  background: var(--bg-main) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.messenger-contacts-scroll {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-width: thin !important;
}

.messenger-contact-item {
  padding: 0.75rem 0.9rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  cursor: pointer !important;
  background: transparent;
  border-right: 4px solid transparent;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.messenger-contact-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.messenger-contact-item.active-contact,
.messenger-contact-item[style*="var(--bg-surface-elevated)"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border-right: 4px solid var(--primary-500) !important;
}

.messenger-chat-col {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-surface) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#btn-mobile-back-to-contacts {
  display: none !important;
}

.chat-messages {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.15rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  background: var(--bg-main) !important;
  scrollbar-width: thin !important;
  box-sizing: border-box !important;
}

.chat-bubble-wrapper {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 0.35rem !important;
  animation: fadeIn 0.2s ease !important;
  box-sizing: border-box !important;
}

.chat-bubble-wrapper.user {
  justify-content: flex-start !important;
}

.chat-bubble-wrapper.other {
  justify-content: flex-end !important;
}

.chat-bubble-content {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.chat-bubble-wrapper.user .chat-bubble-content {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-radius: 16px 4px 16px 16px !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25) !important;
  max-width: 78% !important;
  min-width: 85px !important;
}

.chat-bubble-wrapper.other .chat-bubble-content {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px 16px 16px 16px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  max-width: 78% !important;
  min-width: 85px !important;
}

.chat-media-img-wrapper {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 0.45rem !important;
  cursor: pointer !important;
  background: rgba(0, 0, 0, 0.2) !important;
  max-width: 320px !important;
}
.chat-media-img-wrapper img {
  width: 100% !important;
  max-height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px !important;
}

.chat-media-video-wrapper {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 0.45rem !important;
  max-width: 330px !important;
  background: #000 !important;
}
.chat-media-video-wrapper video {
  width: 100% !important;
  max-height: 240px !important;
  display: block !important;
}

.chat-media-file-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.6rem 0.85rem !important;
  border-radius: 10px !important;
  margin-bottom: 0.45rem !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
}
.chat-bubble-wrapper.other .chat-media-file-card {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
}

.chat-media-audio-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 10px !important;
  margin-bottom: 0.35rem !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

#dedicated-chat-form {
  padding: 0.65rem 1rem !important;
  border-top: 1.5px solid var(--border-color) !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  background: var(--bg-surface) !important;
  position: relative !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#dedicated-chat-input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 1.1rem !important;
  border-radius: 999px !important;
  background: var(--bg-main) !important;
  border: 1.5px solid var(--border-color) !important;
  font-size: 0.88rem !important;
  color: var(--text-primary) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#dedicated-chat-input:focus {
  border-color: var(--primary-500) !important;
}

.messenger-attachment-sheet {
  position: absolute !important;
  bottom: 68px !important;
  right: 18px !important;
  background: var(--bg-surface) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
  padding: 0.75rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
  z-index: 100 !important;
  width: 290px !important;
}

@media (max-width: 768px) {
  .messenger-layout-container {
    height: calc(100vh - 120px) !important;
    min-height: 480px !important;
    max-height: none !important;
    border-radius: 12px !important;
    margin-bottom: 5.5rem !important;
  }

  .messenger-sidebar.mobile-hide {
    display: none !important;
  }
  .messenger-sidebar.mobile-show {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border-left: none !important;
    border-bottom: none !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  .messenger-chat-col.mobile-hide {
    display: none !important;
  }
  .messenger-chat-col.mobile-show {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  #btn-mobile-back-to-contacts {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--primary-600) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    flex-shrink: 0 !important;
  }

  .chat-messages {
    padding: 0.85rem !important;
    max-height: none !important;
  }

  .chat-bubble-wrapper.user .chat-bubble-content,
  .chat-bubble-wrapper.other .chat-bubble-content {
    max-width: 86% !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 0.85rem !important;
  }

  #dedicated-chat-form {
    padding: 0.5rem 0.7rem !important;
    gap: 0.35rem !important;
  }

  #dedicated-chat-input {
    height: 38px !important;
    font-size: 0.82rem !important;
    padding: 0 0.85rem !important;
  }

  .send-btn-text {
    display: none !important;
  }

  #btn-send-message {
    padding: 0 0.85rem !important;
    height: 38px !important;
  }

  #btn-toggle-attach-menu,
  #btn-mic-record {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .messenger-attachment-sheet {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    bottom: 60px !important;
  }
}