/* Hi & Home Styles */
#hi-js-overlay-feed{--hi-bg-color:#ffffff;--hi-text-color:white;--hi-border-color-1:#dd2476;--hi-border-color-2:#ff512f;--hi-btn-bg-inner:rgba(20,20,20,0.95);font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Sans Thai', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);position:fixed;top:var(--header-height-feed,56px);bottom:0;left:0;right:0;width:100%;background-color:var(--background-color-feed,#fff);z-index:100;opacity:0;visibility:hidden;transform:scale(0.95);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.3s ease,visibility 0.3s ease;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 30px rgba(0,0,0,0.1)}#hi-js-overlay-feed.active{opacity:1;visibility:visible;transform:scale(1)}#hi-js-overlay-feed .hi-js-container{width:100%;height:100%;border:none;overflow:hidden;flex:1;background:var(--hi-bg-color);display:flex;justify-content:center;align-items:center;position:relative}#hi-js-overlay-feed *{box-sizing:border-box}.main-selection-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;transform:translateY(18%);padding-bottom:env(safe-area-inset-bottom)}.main-glow-effect{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:100vw;height:100vw;background:radial-gradient(circle,rgba(255,20,147,0.5) 0%,rgba(38,197,243,0.3) 120%,transparent 100%);filter:blur(100px);z-index:0;opacity:0;will-change:opacity;animation:hi-glowAppear 2s ease-in-out forwards 2.5s,hi-glowPulse 1.7s infinite alternate 2s}.main-mascot-head-glow{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;background:radial-gradient(circle,#2962ff 0%,#00bbff 60%,transparent 85%);filter:blur(25px);z-index:1;opacity:0;animation:hi-textGlowAppear 2s ease forwards;animation-delay:2s;pointer-events:none}.main-mascot-layer{position:absolute;top:55%;left:50%;clip-path:inset(0 0 2% 0);width:380px;max-width:90vw;z-index:2;opacity:0;will-change:transform,opacity;animation:hi-slideUpFade 3s cubic-bezier(0.3,1,0.1,1) forwards;animation-delay:1.3s}.main-content-stack{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:190px}.main-text-back-glow{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:160%;height:100%;background:radial-gradient(ellipse at center,#4285f4 0%,#9c27b0 60%,transparent 80%);filter:blur(30px);z-index:5;opacity:0;animation:hi-textGlowFadeWeak 2s ease forwards;animation-delay:3s;pointer-events:none}.main-text-hello{font-size:8rem;font-weight:900;line-height:1;background:linear-gradient(90deg,var(--hi-border-color-1),var(--hi-border-color-2),var(--hi-border-color-1));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;-webkit-text-stroke:2px white;animation:hi-gradientFlow 5s infinite;margin-bottom:-30px;z-index:20;position:relative;text-shadow:0 10px 30px rgba(0,0,0,0.1)}.main-text-partners{font-size:5rem;font-weight:900;background:linear-gradient(90deg,var(--hi-border-color-1),var(--hi-border-color-2),var(--hi-border-color-1));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;-webkit-text-stroke:2px white;animation:hi-gradientFlow 5s infinite;line-height:1;margin-bottom:-25px;z-index:19;position:relative;text-shadow:0 10px 30px rgba(0,0,0,0.1)}.main-google-btn{position:relative;display:flex;align-items:center;gap:12px;padding:18px 40px;border-radius:50px;font-size:1.3rem;font-weight:600;color:white;background:var(--hi-bg-color);border:1px solid rgba(255,255,255,0.1);box-shadow:0 10px 30px rgba(0,0,0,0.8);z-index:25;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.2s}.main-google-btn:active{transform:scale(0.98)}.main-google-btn::before{content:'';position:absolute;top:50%;left:50%;width:300%;height:300%;background:conic-gradient(from 0deg,transparent 0%,transparent 70%,var(--hi-border-color-2) 85%,var(--hi-border-color-1) 100%);transform:translate(-50%,-50%);z-index:-2;opacity:0;transition:opacity 0.3s ease;will-change:transform,opacity}.main-google-btn::after{content:'';position:absolute;inset:3px;background:var(--hi-btn-bg-inner);border-radius:50px;z-index:-1}.main-google-btn:hover::before,.main-google-btn.main-simulate-hover::before{opacity:1;animation:hi-snakeRotate 2s linear infinite}.main-google-icon{width:28px;height:28px}.main-login-info{margin-top:25px;text-align:center;color:#888;font-size:0.85rem;font-weight:400;z-index:25;opacity:0;animation:hi-textGlowAppear 1s ease forwards 3.8s}.main-login-info p{margin-bottom:5px}.main-login-info a{color:var(--hi-border-color-2);text-decoration:none;font-weight:600;transition:all 0.3s}.main-login-info a:hover{text-decoration:underline}@keyframes hi-slideUpFade{from{opacity:0;transform:translate(-50%,-55%)}to{opacity:1;transform:translate(-50%,-65%)}}@keyframes hi-glowPulse{0%{opacity:0.9}100%{opacity:1}}@keyframes hi-gradientFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes hi-snakeRotate{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes hi-textGlowAppear{from{opacity:0}to{opacity:1}}@keyframes hi-textGlowFadeWeak{from{opacity:0}to{opacity:0.2}}@keyframes hi-glowAppear{from{opacity:0}to{opacity:1}}@media(max-width:480px){.main-selection-wrapper{transform:translateY(8%)}.main-text-hello{font-size:6rem;margin-bottom:-10px}.main-text-partners{font-size:4rem;margin-bottom:-80px}.main-google-btn{padding:14px 30px;width:280px;font-size:1rem;margin-top:80px}.main-mascot-layer{width:300px;transform:translate(-50%,-60%);margin-top:-70px;top:52%}.main-mascot-head-glow{width:220px;height:220px;top:45%;filter:blur(20px)}.main-content-stack{margin-top:140px}.main-login-info{font-size:0.75rem;margin-top:20px}@keyframes hi-slideUpFade{from{opacity:0;transform:translate(-50%,-50%)}to{opacity:1;transform:translate(-50%,-60%)}}}#home-overlay-feed{position:fixed;top:var(--header-height-feed,45px);bottom:35px;left:0;right:0;width:100%;background:linear-gradient(180deg,#eef2f3 10%,#8e9eab 100%);z-index:90;opacity:0;visibility:hidden;transform:scale(0.8);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.3s ease,visibility 0.3s ease;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 30px rgba(0,0,0,0.1);--home-font-stack:'Sarabun',-apple-system,BlinkMacSystemFont,sans-serif;--home-glass-bg:rgba(255,255,255,0.75);--home-glass-border:rgba(255,255,255,0.5);--home-text-primary:#1d1d1f;--home-text-secondary:#5e5e63;--home-shadow-soft:0 20px 40px rgba(0,0,0,0.15);--home-anim-speed:0.5s;--home-skeleton-bg:rgba(200,200,200,0.4);--home-color-up:#34c759;--home-color-down:#ff3b30}#home-overlay-feed.active{opacity:1;visibility:visible;transform:scale(1)}#home-screen-home{position:relative;width:100%;height:100%;padding:20px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:15px;z-index:1;overflow-y:auto;padding-bottom:80px}.widget-home{background:var(--home-glass-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--home-glass-border);border-radius:24px;padding:18px;box-shadow:var(--home-shadow-soft);display:flex;flex-direction:column;overflow:hidden}.widget-large-home{grid-column:span 2;grid-row:span 2}.widget-tall-home{grid-row:span 2}.widget-wide-home{grid-column:span 2}.widget-small-home{grid-column:span 1;grid-row:span 1}.widget-header-home{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.widget-title-home{font-size:0.8rem;font-weight:600;color:var(--home-text-secondary);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:5px}.widget-content-home{flex:1;display:flex;flex-direction:column;justify-content:center}.widget-data-home{color:var(--home-text-primary);line-height:1.1;font-weight:500}.widget-subtitle-home{font-size:0.85rem;color:var(--home-text-secondary);margin-top:4px;font-weight:400}#home-overlay-feed .fade-slide{transition:opacity 0.4s ease,transform 0.4s ease;opacity:1;transform:translateY(0)}#home-overlay-feed .fade-slide.out{opacity:0;transform:translateY(-5px)}#home-overlay-feed .fade-slide.in{opacity:1;transform:translateY(0)}#home-overlay-feed .skeleton{background:var(--home-skeleton-bg);border-radius:4px;color:transparent!important;min-width:40%;display:inline-block;animation:home-pulse 1.5s infinite}@keyframes home-pulse{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}#overlay-home{position:absolute;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(5px);z-index:10;opacity:0;visibility:hidden;transition:all 0.4s ease}#overlay-home.active-home{opacity:1;visibility:visible}.glass-panel-base-home{position:absolute;background:#f2f2f7;border:1px solid var(--home-glass-border);box-shadow:var(--home-shadow-soft);z-index:20;transition:transform var(--home-anim-speed) cubic-bezier(0.32,0.72,0,1);overflow:hidden;color:var(--home-text-primary);display:flex;flex-direction:column;align-items:center}#right-panel-home{top:15px;bottom:15px;right:15px;width:70%;border-radius:32px;transform:translateX(calc(100% + 20px));background:rgba(255,255,255,0.95);backdrop-filter:blur(40px)}#right-panel-home.open-home{transform:translateX(0)}#left-panel-home{top:15px;bottom:15px;left:15px;width:70%;border-radius:32px;transform:translateX(calc(-100% - 20px));background:rgba(255,255,255,0.95);backdrop-filter:blur(40px)}#left-panel-home.open-home{transform:translateX(0)}#top-panel-home{top:0!important;left:0;width:100%;height:60%;border-radius:0 0 32px 32px;transform:translateY(-100%);background:rgba(245,245,247,0.98);backdrop-filter:blur(50px);color:#1d1d1f;padding:20px;z-index:120;display:flex;justify-content:center;align-items:center}#top-panel-home.open-home{transform:translateY(0)}.panel-header-area{width:100%;padding:25px;text-align:center;border-bottom:1px solid rgba(0,0,0,0.05);background:rgba(255,255,255,0.8)}.panel-header-title{font-size:1.3rem;font-weight:600}.panel-list-container{width:100%;flex:1;overflow-y:auto;padding:0 20px}.list-item-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(0,0,0,0.05)}.item-main{font-size:1rem;font-weight:500}.item-sub{font-size:0.8rem;color:var(--home-text-secondary)}.item-val{font-size:1rem;font-weight:600}.trend-up{color:var(--home-color-up)}.trend-down{color:var(--home-color-down)}#bottom-footer{position:absolute;bottom:0;left:0;width:100%;height:auto;margin:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;background:rgba(255,255,255,0.9);border-radius:20px 20px 0 0;box-shadow:0 -5px 20px rgba(0,0,0,0.08);padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom));min-height:calc(35px + env(safe-area-inset-bottom));transform:translateY(0);transition:transform 0.5s cubic-bezier(0.32,0.72,0,1);z-index:130;overflow:visible!important}#bottom-footer.hide-footer{transform:translateY(100%)}.bottom-icon-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;background:transparent}.bottom-icon-btn:active{transform:scale(0.9);background:rgba(0,0,0,0.05)}.bottom-icon-svg{width:30px;height:30px;fill:var(--home-text-primary);opacity:0.8}.center-logo-wrapper-home{width:45px;height:45px;background:#1d1d1f;border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 15px rgba(0,0,0,0.2);cursor:pointer;position:relative;margin-top:-35px;border:4px solid rgba(255,255,255,0.9);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);opacity:0;transform:scale(0.5)}.center-logo-img{width:36px;height:36px;object-fit:contain}#bottom-footer.open-home .center-logo-wrapper-home{opacity:1;transform:scale(1)}.center-logo-wrapper-home:active{transform:scale(0.9)!important}.calendar-wrapper{width:100%;max-width:400px;padding:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-weight:700;font-size:1.5rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;text-align:center}.calendar-day-name{font-weight:600;color:var(--home-text-secondary);font-size:0.9rem;margin-bottom:10px}.calendar-day{padding:10px;border-radius:12px;font-size:1rem;transition:background 0.2s}.calendar-day.today{background:var(--home-text-primary);color:white;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.2)}.calendar-day.empty{pointer-events:none}.detail-view-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;text-align:center}.detail-view-title{font-size:1.5rem;font-weight:700;margin-bottom:20px;color:var(--home-text-primary)}.detail-view-content{width:100%;overflow-y:auto;text-align:left}.mini-list-container{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:5px}.mini-list-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.05)}.mini-list-row:last-child{border-bottom:none}.mini-list-left{font-size:1rem;font-weight:500;display:flex;align-items:center;gap:8px}.mini-list-right{font-size:0.95rem;font-weight:600;opacity:0.8}
/* Footer & Sidemenu Styles */
.app-footer-feed{position:fixed;bottom:0;left:0;right:0;height:auto;min-height:38px;background:var(--card-background-feed,#fff);border-top:1px solid var(--divider-color-feed,#e4e6eb);display:flex;align-items:center;justify-content:space-between;padding:0 16px calc(5px + env(safe-area-inset-bottom));z-index:100;box-shadow:0 -2px 5px rgba(0,0,0,0.05);overflow:visible!important;border-top-left-radius:24px;border-top-right-radius:24px}.footer-icon-btn{background:var(--background-color-feed);border:none;cursor:pointer;font-size:14px;color:var(--text-secondary-feed,#65676b);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color 0.2s ease}.footer-icon-btn:hover{background-color:var(--hover-overlay-feed)}.footer-content-middle{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--primary-color-feed,#1877f2)}.footer-chat-btn{width:80px;height:80px;background-color:transparent;border:none;box-shadow:none;border-radius:0;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:-35px;transform:translateX(-50%) scale(0);opacity:0;cursor:pointer;z-index:105;transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.3s ease;pointer-events:none}.footer-chat-btn img{width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.2));transition:transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275)}.footer-chat-btn:active img{transform:scale(0.9)}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1999;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}.sidebar-overlay.active{opacity:1;visibility:visible}.sidebar{position:fixed;top:0;bottom:0;width:80vw;max-width:400px;z-index:2000;background-color:var(--card-background-feed,#fff);box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:transform 0.3s ease-in-out;display:flex;flex-direction:column}.sidebar.sidebar-left{left:0;transform:translateX(-100%)}.sidebar.sidebar-right{right:0;transform:translateX(100%)}.sidebar.active{transform:translateX(0)}.sidebar-submenu{z-index:2001}.sidebar .p-6{overflow-y:auto;flex-grow:1;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right))}.sidebar-skeleton-header{display:flex;align-items:center;margin-bottom:24px}.sidebar-skeleton-avatar{width:40px;height:40px;border-radius:8px;margin-right:12px}.sidebar-skeleton-title{flex:1}.sidebar-skeleton-item{display:flex;align-items:center;padding:12px 8px;margin-bottom:8px}.sidebar-skeleton-icon{width:24px;height:24px;border-radius:4px;margin-right:16px}.sidebar-skeleton-text{height:16px;width:70%;border-radius:4px}.sidebar .material-icons{font-family:'Material Icons';font-size:24px;display:inline-block;line-height:1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.sidebar .btn-icon{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%}.sidebar .btn-icon:hover{background-color:rgba(0,0,0,0.05)}.sidebar .text-muted{color:#65676b}.sidebar .text-text-primary{color:#050505}.sidebar .text-text-secondary{color:#333}.sidebar .text-secondary{color:#6c757d}.sidebar .text-success{color:#4caf50}.sidebar .glass{background-color:rgba(240,242,245,0.7)}