/* ============================================================
   Skeuomorfní iOS komponenty (displej 320 bodů)
   ============================================================ */

.ios-app{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#c5ccd3; color:#000; font-size:14px;
}

/* ---------- navigační lišta ---------- */
.navbar{
  flex:0 0 44px; height:44px; position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; padding:0 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 49%,
                    rgba(255,255,255,0) 51%, rgba(255,255,255,.12) 100%),
    linear-gradient(180deg, #8ab0dd 0%, #4d7fc0 48%, #3b70b6 52%, #2f62a8 100%);
  border-bottom:1px solid #26527f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.navbar__title{
  position:absolute; left:52px; right:52px; text-align:center;
  font-size:18px; font-weight:700; color:#fff; pointer-events:none;
  text-shadow:0 -1px 0 rgba(0,0,0,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.navbar__btn{
  position:relative; z-index:2; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.55);
  padding:5px 8px; max-width:96px; white-space:nowrap;
  border:1px solid #23507f; border-radius:5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 49%,
                    rgba(255,255,255,0) 51%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, #6d9ad3 0%, #33659f 100%);
  background-color:#4c7fbf;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.18);
  display:flex; align-items:center; gap:2px; overflow:hidden; text-overflow:ellipsis;
}
.navbar__btn:active{ filter:brightness(.8); }
.navbar__btn[disabled]{ opacity:.45; cursor:default; }
/* zpětné tlačítko se špičkou */
.navbar__btn--back{ padding-left:14px; border-radius:5px 5px 5px 5px; }
.navbar__btn--back::before{
  content:""; position:absolute; left:-7px; top:50%; width:16px; height:16px;
  margin-top:-8px; transform:rotate(45deg);
  border-left:1px solid #23507f; border-bottom:1px solid #23507f; border-radius:3px;
  background:linear-gradient(225deg, #5c8ecb 0%, #4c7fbf 100%);
  box-shadow: inset 1px -1px 0 rgba(255,255,255,.35);
}
.navbar__spacer{ min-width:44px; }
.navbar__icon{ padding:4px 8px; }
.navbar__icon svg{ width:18px; height:18px; fill:#fff; display:block;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.5)); }

/* ---------- obsah ---------- */
.ios-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#fff; }
.ios-body--grouped{ background:#c5ccd3; }

/* ---------- segmentovaný přepínač ---------- */
.seg-wrap{
  padding:6px 8px;
  background: linear-gradient(180deg,#b6bdc6 0%, #9aa3ae 100%);
  border-bottom:1px solid #7d8794;
}
.seg{
  display:flex; width:100%; border-radius:5px; overflow:hidden;
  border:1px solid #5c6673; box-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.seg button{
  flex:1; padding:5px 0; font-family:inherit; font-size:12px; font-weight:700;
  color:#3c4450; cursor:pointer; border:0;
  background: linear-gradient(180deg,#fdfdfe 0%, #dfe3e8 50%, #d3d8df 51%, #eef0f3 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.seg button + button{ border-left:1px solid #5c6673; }
.seg button.active{
  color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.5);
  background: linear-gradient(180deg,#7e8894 0%, #5c6673 50%, #525c69 51%, #6d7784 100%);
}

/* ---------- vyhledávání ---------- */
.searchbar{
  padding:7px 8px;
  background: linear-gradient(180deg,#b6bdc6 0%, #9aa3ae 100%);
  border-bottom:1px solid #7d8794;
}
.searchbar__box{
  position:relative; display:block; height:28px; border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid #7d8794;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.searchbar__ico{
  position:absolute; top:50%; left:calc(50% - 42px); width:12px; height:12px;
  margin-top:-6px; fill:#8a8a8f; pointer-events:none; transition:opacity .15s ease;
}
.searchbar input{
  width:100%; height:26px; border:0; background:transparent; padding:0 10px;
  text-align:center; font-family:inherit; font-size:13px; color:#000;
}
.searchbar input:focus{ outline:none; text-align:left; }
.searchbar input::placeholder{ color:#8a8a8f; }
.searchbar__box:focus-within .searchbar__ico,
.searchbar__box:has(input:not(:placeholder-shown)) .searchbar__ico{ opacity:0; }
.searchbar__box:has(input:not(:placeholder-shown)) input{ text-align:left; }

/* ---------- seznamy ---------- */
.list{ list-style:none; margin:0; padding:0; background:#fff; }
.list__section{
  padding:1px 10px; font-size:12px; font-weight:700; color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg,#a5aeba 0%, #8c96a3 100%);
  border-top:1px solid #7c8593; border-bottom:1px solid #7c8593;
  position:sticky; top:0; z-index:2;
}
.row{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px 5px 10px; min-height:44px;
  background:#fff; cursor:pointer; position:relative;
  text-align:left; width:100%; border:0; font-family:inherit;
}
.row::after{
  content:""; position:absolute; left:10px; right:0; bottom:0; height:1px;
  background:#d4d4d8;
}
.row--avatar::after{ left:50px; }
.row:active{ background: linear-gradient(180deg,#0e6bd8 0%, #0a53ad 100%); }
.row:active .row__title, .row:active .row__sub,
.row:active .row__preview, .row:active .row__meta{ color:#fff; }
.row__main{ flex:1; min-width:0; }
.row__title{ font-size:15px; color:#000; line-height:1.2; }
.row__title b{ font-weight:700; }
.row__title.strong{ font-weight:700; }
.row__title.missed{ color:#c81f1f; }
.row__sub{ display:flex; align-items:center; gap:3px; font-size:12px; color:#6d6d72; margin-top:1px; }
.row__preview{
  font-size:12.5px; color:#6d6d72; line-height:1.25; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row__meta{
  display:flex; align-items:center; gap:6px; font-size:12px; color:#3a72c4;
  flex:0 0 auto; align-self:flex-start; padding-top:2px; font-weight:500;
}
.row__meta--grey{ color:#8a8a8f; }
.row__chevron{ color:#a3a3a8; font-size:17px; line-height:1; font-weight:700; }
.dir-arrow{ width:9px; height:9px; display:block; fill:#6d6d72; }
.dir-arrow.missed{ fill:#c81f1f; }

.info-btn{
  width:23px; height:23px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid #2b5da0; color:#fff; font-size:12px; font-style:italic;
  font-family:Georgia, serif; line-height:1;
  background: linear-gradient(180deg,#7fa8dd 0%, #3f77c4 50%, #346ab6 51%, #5c8fd0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
}
.info-btn:active{ filter:brightness(.85); }

.avatar{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:600; background:#a8a8ae;
  text-shadow:0 -1px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 1px rgba(0,0,0,.25);
}
.avatar--unknown{ background:transparent; box-shadow:none; }
.avatar--unknown svg{ width:32px; height:32px; }

.empty-state{ padding:50px 20px; text-align:center; color:#6d6d72; font-size:14px; }

/* ---------- záložky dole ---------- */
.tabbar{
  flex:0 0 49px; display:flex; align-items:stretch;
  background: linear-gradient(180deg,#5d5d5d 0%, #343434 50%, #1d1d1d 51%, #0d0d0d 100%);
  border-top:1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.tabbar button{
  flex:1; background:none; border:0; cursor:pointer; padding:3px 0 2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:inherit; font-size:9.5px; font-weight:600; color:#9a9a9f;
  text-shadow:0 -1px 0 rgba(0,0,0,.8);
}
.tabbar svg{ width:22px; height:22px; fill:#9a9a9f; display:block; }
.tabbar button.active{ color:#fff; }
.tabbar button.active svg{ fill:#3f8ae0; filter: drop-shadow(0 0 3px rgba(63,138,224,.8)); }
.tabbar button.active{ background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }

/* ---------- detail kontaktu ---------- */
.ios-body--contact{ background:#c5ccd3; }
.contact-head{
  padding:12px 10px 10px; text-align:center;
  background: linear-gradient(180deg,#fefefe 0%, #eceef1 100%);
  border-bottom:1px solid #a9b0b9;
}
.contact-head .avatar{ width:66px; height:66px; font-size:26px; margin:0 auto 6px; }
.contact-head__name{ font-size:19px; font-weight:700; color:#1c1c1e; }
.contact-actions{ display:flex; justify-content:center; gap:14px; margin-top:10px; }
.contact-actions button{
  background:none; border:0; cursor:pointer; padding:0; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; color:#3a72c4; font-weight:600;
}
.contact-actions .bubble-ico{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #6f7885;
  background: linear-gradient(180deg,#fdfdfe 0%, #e2e5ea 50%, #d3d7de 51%, #eff1f4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.2);
}
.contact-actions svg{ width:18px; height:18px; fill:#53606f; }
.contact-actions button:active .bubble-ico{ filter:brightness(.9); }

.field{ padding:5px 10px; background:#fff; position:relative; }
.field::after{ content:""; position:absolute; left:10px; right:0; bottom:0; height:1px; background:#d4d4d8; }
.field__label{ font-size:11px; color:#6d6d72; font-weight:600; }
.field__value{ font-size:16px; color:#2f6ab5; font-weight:600; }
.field__value--plain{ color:#000; font-weight:400; }

/* ---------- číselník ---------- */
.dialer{ flex:1; display:flex; flex-direction:column; background:#000; }
.dialer__display{
  height:46px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#5d8fd0 0%, #2f62a8 50%, #27579b 51%, #3f6fb3 100%);
  border-bottom:1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.dialer__number{
  font-size:26px; font-weight:400; color:#fff; letter-spacing:.5px;
  text-shadow:0 -1px 0 rgba(0,0,0,.5);
}
.dialer__pad{
  flex:1; display:grid; grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(4, 1fr); gap:1px; padding:1px; background:#000;
}
.dialer__key{
  border:0; cursor:pointer; font-family:inherit; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#5a5a60 0%, #3a3a40 48%, #2e2e34 52%, #46464c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
.dialer__key b{ font-size:25px; font-weight:400; line-height:1; }
.dialer__key i{ font-style:normal; font-size:9px; letter-spacing:1.5px; font-weight:700; color:#d8d8dd; }
.dialer__key:active{ background:#7c7c86; }
.dialer__actions{
  flex:0 0 46px; display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:1px;
  padding:0 1px 1px; background:#000;
}
.dialer__act{
  border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#5a5a60 0%, #3a3a40 48%, #2e2e34 52%, #46464c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.dialer__act:active{ background:#7c7c86; }
.dialer__act svg{ width:24px; height:20px; fill:#fff; }
.dialer__act--call{
  background: linear-gradient(180deg,#8fe08d 0%, #3fbb3f 48%, #2fa233 52%, #63cc63 100%);
  color:#fff; font-family:inherit; font-size:17px; font-weight:700; gap:5px;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
}
.dialer__act--call:active{ filter:brightness(.88); }
.dialer__act--call svg{ width:18px; height:18px; }
.dialer__act--disabled{ opacity:.45; }

/* ---------- obrazovka hovoru ---------- */
.call-screen{
  position:absolute; inset:0; z-index:20; color:#fff;
  background: linear-gradient(180deg,#3a4049 0%, #14181d 100%);
  display:flex; flex-direction:column; align-items:center; padding-top:44px;
}
.call-screen__name{ font-size:28px; font-weight:400; text-shadow:0 -1px 1px rgba(0,0,0,.7); }
.call-screen__state{ font-size:14px; color:rgba(255,255,255,.65); margin-top:4px; }
.call-screen__end{
  margin-top:auto; margin-bottom:28px; width:220px; height:46px; border-radius:8px;
  border:1px solid #6e1512; cursor:pointer; color:#fff;
  font-family:inherit; font-size:17px; font-weight:700;
  text-shadow:0 -1px 0 rgba(0,0,0,.5);
  background: linear-gradient(180deg,#e06b62 0%, #c0261c 48%, #a81b13 52%, #cf4237 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.call-screen__end:active{ filter:brightness(.85); }

/* ---------- Zprávy ---------- */
.thread{
  flex:1; overflow-y:auto; padding:8px 8px 4px;
  background:#f2f2f4;
  display:flex; flex-direction:column; gap:2px;
}
.thread__day{ text-align:center; font-size:10.5px; color:#8a8a8f; font-weight:700; margin:6px 0 4px; }
.bubble{
  position:relative; max-width:76%; padding:7px 11px; border-radius:14px;
  font-size:14px; line-height:1.3; word-wrap:break-word; white-space:pre-wrap;
  box-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.bubble--them{
  align-self:flex-start; color:#000;
  background: linear-gradient(180deg,#fbfbfc 0%, #dcdce1 100%);
  border:1px solid #b9b9bf;
}
.bubble--them::after{
  content:""; position:absolute; left:-5px; bottom:5px; width:11px; height:11px;
  background:#e2e2e7; border-left:1px solid #b9b9bf; border-bottom:1px solid #b9b9bf;
  transform:rotate(45deg) skew(-6deg,-6deg); border-radius:0 0 0 3px;
}
.bubble--me{
  align-self:flex-end; color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.25);
  background: linear-gradient(180deg,#9ce87a 0%, #5cc23c 48%, #4cb32e 52%, #78d456 100%);
  border:1px solid #3f9227;
}
.bubble--me::after{
  content:""; position:absolute; right:-5px; bottom:5px; width:11px; height:11px;
  background:#5bbf3b; border-right:1px solid #3f9227; border-bottom:1px solid #3f9227;
  transform:rotate(-45deg) skew(6deg,6deg); border-radius:0 0 3px 0;
}
.bubble--photo{ padding:4px; }
.bubble--photo img{
  display:block; max-width:100%; width:180px; border-radius:10px;
}
.bubble__caption{ padding:4px 7px 2px; font-size:13px; }
.bubble-status{ align-self:flex-end; font-size:10px; color:#8a8a8f; margin:0 4px 5px; }

.composer{
  flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:6px 5px;
  background: linear-gradient(180deg,#b6bdc6 0%, #9aa3ae 100%);
  border-top:1px solid #7d8794;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.composer__cam{
  flex:0 0 auto; width:30px; height:28px; border-radius:5px; cursor:pointer;
  border:1px solid #6f7885; padding:0;
  background: linear-gradient(180deg,#fdfdfe 0%, #e2e5ea 50%, #d3d7de 51%, #eff1f4 100%);
  box-shadow: inset 0 1px 0 #fff;
  display:flex; align-items:center; justify-content:center;
}
.composer__cam svg{ width:18px; height:15px; fill:#53606f; }
.composer__cam:active{ filter:brightness(.9); }
.composer input[type="text"]{
  flex:1 1 auto; min-width:0; height:28px; border-radius:14px; border:1px solid #7d8794;
  padding:0 10px; font-family:inherit; font-size:14px; background:#fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.composer input[type="text"]:focus{ outline:none; }
.composer__send{
  flex:0 0 auto; padding:6px 9px; border-radius:5px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700; color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.4); border:1px solid #6b7480;
  background: linear-gradient(180deg,#b6bcc4 0%, #939aa4 48%, #878e99 52%, #a7aeb7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.composer__send.is-ready{
  border-color:#3f9227;
  background: linear-gradient(180deg,#9ce87a 0%, #5cc23c 48%, #4cb32e 52%, #78d456 100%);
}
.composer__send:active{ filter:brightness(.88); }
.composer__preview{
  position:absolute; left:6px; bottom:44px; padding:4px; border-radius:8px;
  background:rgba(0,0,0,.72); display:flex; align-items:center; gap:6px;
}
.composer__preview img{ width:46px; height:46px; object-fit:cover; border-radius:5px; display:block; }
.composer__preview button{
  background:none; border:0; color:#fff; font-size:16px; cursor:pointer; padding:0 4px;
}