/* ── DASHBOARD CHARTS ── */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:80px;padding:0 4px;}
.bar{flex:1;background:var(--gold-glow);border:1px solid rgba(14,165,233,.3);border-radius:3px 3px 0 0;transition:height .4s;min-height:3px;cursor:pointer;position:relative;}
.bar:hover{background:rgba(14,165,233,.2);}
.bar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text3);white-space:nowrap;}
/* ── AI KEY NOTICE ── */
.ai-key-notice{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:10px;padding:14px;margin-bottom:14px;font-size:12px;color:var(--text2);line-height:1.8;}
/* ── FLOATING AI BOT ── */
.ai-fab{position:fixed;right:22px;bottom:22px;z-index:500;width:62px;height:62px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;box-shadow:0 10px 30px rgba(14,165,233,0.3),0 0 0 8px rgba(14,165,233,0.08);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:25px;font-weight:700;transition:transform .2s,box-shadow .2s;}
.ai-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 40px rgba(14,165,233,0.35),0 0 0 10px rgba(14,165,233,0.1);}
.ai-fab-label{position:absolute;right:74px;background:var(--surface);border:1px solid var(--border2);color:var(--text);padding:8px 10px;border-radius:10px;font-size:12px;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:all .2s;}
.ai-fab:hover .ai-fab-label{opacity:1;transform:none;}
.ai-bot-panel{max-width:420px;width:92%;padding:0;overflow:hidden;}
.ai-bot-head{padding:18px 20px;background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(16,185,129,.05));border-bottom:1px solid var(--border);}
.ai-bot-body{padding:18px 20px;}
.ai-bot-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr;}
.ai-quick-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:10px 12px;border-radius:10px;font-size:12px;text-align:left;cursor:pointer;transition:all .2s;}
.ai-quick-btn:hover{border-color:var(--gold);color:var(--text);}
@media (max-width:980px){
  .app{flex-direction:column;}
  .sidebar{
    width:100%;
    height:auto;
    position:sticky;
    top:0;
    z-index:30;
    border-right:none;
    border-bottom:1px solid var(--border);
    overflow:visible;
  }
  .sb-logo{padding:14px 14px 10px;}
  .sidebar-toggle{
    display:flex;
  }
  .sidebar-menu{
    display:none;
    padding-bottom:10px;
  }
  .sidebar.mobile-open .sidebar-menu{
    display:flex;
  }
  .sidebar.mobile-open .sidebar-toggle span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .sidebar.mobile-open .sidebar-toggle span:nth-child(2){
    opacity:0;
  }
  .sidebar.mobile-open .sidebar-toggle span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }
  .sb-user{padding:8px 12px;}
  .nav-section{display:none;}
  .sidebar .nav-item{
    display:inline-flex;
    border-left:none;
    border:1px solid var(--border);
    border-radius:999px;
    margin:0;
    padding:8px 12px;
    white-space:nowrap;
    background:var(--surface2);
  }
  .sidebar .nav-item.active{
    border-left:none;
    border-color:var(--gold);
  }
  .sidebar .sync-bar,
  .sidebar-menu > div:last-child{
    padding-bottom:10px;
  }
  .sidebar-menu > div:last-child{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:8px 12px 12px;
  }
  .sidebar-menu > div:last-child .sync-bar{
    flex:0 0 auto;
    padding:8px 10px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:999px;
  }
  .sidebar-menu > div:last-child > div:last-child{
    flex:0 0 auto;
    padding:0;
  }
  .main{
    width:100%;
    overflow-x:hidden;
  }
  .content{
    padding:16px;
    overflow-x:hidden;
  }
  .content > div,
  .content > div > div,
  .content .card,
  .content .grid-2,
  .content .grid-3,
  .content .grid-4{
    min-width:0;
  }
  .topbar{
    padding:12px 16px;
    align-items:flex-start;
  }
  .page-title{
    font-size:17px;
    white-space:normal;
  }
  .topbar-right{
    width:100%;
  }
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }
  .card{
    padding:16px;
  }
  .inv-preview,
  .portal-card{
    padding:18px;
  }
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .modal{
    width:94%;
    padding:18px;
  }
  #page-create .content > div{
    display:flex !important;
    flex-direction:column;
    gap:16px !important;
  }
  #page-create .content > div > div{
    min-width:0;
  }
  #page-create .content > div > div:last-child > div{
    position:static !important;
    top:auto !important;
  }
}
@media (max-width:700px){
  body{
    font-size:13px;
  }
  .auth-card{
    padding:20px;
    margin:10px;
    border-radius:16px;
  }
  .auth-tabs{
    flex-wrap:wrap;
  }
  .auth-tab{
    min-width:calc(50% - 2px);
    flex:1 1 calc(50% - 2px);
  }
  .otp-row{
    gap:6px;
  }
  .otp-box{
    width:42px;
    height:48px;
    font-size:18px;
  }
  .content{
    padding:12px;
    padding-bottom:88px;
  }
  .card{
    padding:14px;
    border-radius:16px;
  }
  .card-title{
    margin-bottom:12px;
  }
  .fg{
    margin-bottom:10px;
  }
  label{
    font-size:11px;
  }
  input,
  textarea,
  select{
    font-size:16px;
    min-height:48px;
  }
  textarea{
    min-height:84px;
  }
  .modal{
    width:calc(100% - 20px);
    padding:16px;
    border-radius:14px;
  }
  .topbar{
    padding:10px 12px;
  }
  #page-create .topbar-right,
  #page-invoices .topbar-right,
  #page-recurring .topbar-right,
  #page-clients .topbar-right,
  #page-payments .topbar-right,
  #page-gst .topbar-right,
  #page-profile .topbar-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #page-create .topbar-right .btn:first-child{
    grid-column:1 / -1;
  }
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stat-card{
    padding:12px;
    min-height:124px;
  }
  .stat-label{
    font-size:9px;
    line-height:1.3;
  }
  .stat-value{
    font-size:18px;
    margin-top:6px;
  }
  .stat-sub{
    font-size:10px;
    line-height:1.35;
    margin-top:4px;
  }
  .btn{
    font-size:12px;
    padding:8px 11px;
  }
  .generate-box .btn,
  .topbar-right .btn,
  .topbar-right select{
    width:100%;
    justify-content:center;
  }
  .topbar-right > *{
    min-width:0;
  }
  #page-create .content > div > div:last-child{
    display:none;
  }
  #page-create .card,
  #page-profile .card,
  #page-payments .card,
  #page-gst .card,
  #page-ai .card,
  #page-voice .card,
  #page-recurring .card,
  #page-clients .card,
  #page-invoices .card{
    overflow:hidden;
  }
  #page-create .card .grid-2,
  #page-profile .card .grid-2,
  #page-payments .card .grid-2,
  #page-gst .grid-4{
    grid-template-columns:1fr;
  }
  #page-create .flex[style*="justify-content:center"],
  #page-create .flex[style*="justify-content:space-between"],
  #page-profile .flex[style*="justify-content:center"],
  #page-profile .flex[style*="justify-content:space-between"]{
    flex-wrap:wrap;
  }
  #page-create .content > div{
    gap:14px !important;
  }
  #page-create .card,
  #page-profile .card,
  #page-payments .card,
  #page-recurring .card,
  #page-ai .card,
  #page-voice .card,
  #page-gst .card,
  #page-clients .card,
  #page-invoices .card{
    width:100%;
  }
  #page-create [style*="width:240px"],
  #page-create [style*="width:185px"]{
    width:100% !important;
    margin-left:0 !important;
  }
  #page-create [style*="grid-template-columns:3fr 60px 96px 96px 32px"]{
    display:none !important;
  }
  .chat-msg{
    max-width:100%;
  }
  .chat-input-row{
    flex-direction:column;
  }
  .chat-input-row .btn{
    width:100%;
    justify-content:center;
  }
  .inv-line{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .inv-line input[type="text"]{
    grid-column:1 / -1;
  }
  .inv-line button{
    grid-column:1 / -1;
    width:100%;
    justify-content:center;
  }
  .logo-up{
    padding:16px;
    min-height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .generate-box{
    padding:16px;
    margin-top:14px;
  }
  .generate-box .flex.gap8{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .generate-box .flex.gap8 .btn{
    margin:0;
  }
  .legal-link-row .btn{
    flex:1 1 100%;
  }
  .subscription-mini-top,
  .subscription-pack-card{
    flex-direction:column;
    align-items:stretch;
  }
  .subscription-grid{
    grid-template-columns:1fr;
  }
  .subscription-pack-action{
    justify-content:space-between;
  }
  .inv-preview,
  .portal-card{
    padding:18px;
    border-radius:10px;
  }
  #page-create .flex.gap8.mb14{
    flex-direction:column;
  }
  #page-create .flex.gap8.mb14 > *{
    width:100%;
  }
  #page-dashboard .grid-2{
    grid-template-columns:1fr;
  }
  .voice-btn-big{
    width:68px;
    height:68px;
    font-size:26px;
  }
  .voice-transcript{
    padding:12px;
    min-height:72px;
  }
  .card-header{
    gap:8px;
    align-items:flex-start;
    flex-direction:column;
  }
  .card-header .btn{
    width:100%;
    justify-content:center;
  }
  .sidebar .sb-user,
  .sidebar .sb-biz{
    display:none;
  }
  .sidebar .sb-logo{
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
  }
  .sidebar-menu > div:last-child{
    padding-top:0;
  }
  .toast{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
  }
  .ai-fab{right:12px;bottom:12px;width:52px;height:52px;font-size:22px;box-shadow:0 8px 20px rgba(14,165,233,0.25),0 0 0 6px rgba(14,165,233,0.06);}
  .ai-bot-grid{grid-template-columns:1fr;}
  .ai-fab-label{display:none;}
}
@media (max-width:420px){
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .stat-card{
    padding:10px;
    min-height:112px;
  }
  .stat-value{
    font-size:16px;
  }
  .stat-sub{
    font-size:9px;
  }
}