*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html, body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

body{
  padding-top:0;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ascunde scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.phone::-webkit-scrollbar,
.container::-webkit-scrollbar,
main::-webkit-scrollbar,
.content::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.call-history::-webkit-scrollbar{
  display:none;
}

html,
body,
.app-shell,
.phone,
.container,
main,
.content,
.page-content,
.call-history{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

/* wrapper principal */
.app-shell,
.phone,
.container{
  width:100%;
  min-height:100dvh;
}

/* ===== UNIVERSAL HEADER ===== */
header,
.header,
.topbar,
.app-header{
  position:sticky;
  top:0;
  z-index:100;
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:12px 14px 10px 14px !important;
  padding-top:calc(env(safe-area-inset-top) + 10px) !important;

  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border-bottom:1px solid #e5e5ea;
}

/* titlu universal */
.title,
.app-header-title{
  font-weight:700;
  font-size:16px;
  color:#007aff;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* zona butoane header */
.top-actions,
.nav-links,
.app-header-actions,
.app-header-left,
.app-header-right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* butoane header */
.back,
.small-btn,
header button,
.app-header-btn{
  border:none;
  background:#e9e9ed;
  color:#111;
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
  cursor:pointer;
  font-weight:600;
  white-space:nowrap;
}

/* linkuri din header */
.nav-links a{
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  color:#007aff;
  white-space:nowrap;
}

/* zone scrollabile */
main,
.content,
.page-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* listă scrollabilă */
.call-history{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* telefoane mici */
@media (max-height:700px){
  body{
    align-items:flex-start !important;
  }

  .app-shell,
  .phone,
  .container{
    min-height:100dvh;
    height:auto !important;
    max-height:none !important;
  }
}