/* ============================================================
   Doplňky telefonu oběti: časy u zpráv, fotka, Poznámky,
   záznam hovorů, skrytý vstup do testovacího panelu
   ============================================================ */

:root{
  --notes-paper: #fbf1bd;
  --notes-line: #e2cf8e;
  --notes-ink: #3a2a17;
  --notes-meta: #a0773f;
  --notes-font: "Marker Felt", "Noteworthy", "Patrick Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}

/* skrytý vstup: pravý horní roh těla telefonu (3 klepnutí) */
.corner-zone{
  position:absolute; top:4px; right:0; width:96px; height:96px; z-index:5;
  padding:0; border:0; background:transparent; cursor:default;
  border-top-right-radius:46px; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.corner-zone:focus{ outline:none; }

/* prasklé sklo přes celou přední stranu (kreslí js/cracks.js) */
.glass-cracks{
  position:absolute; inset:0; width:100%; height:100%; z-index:300;
  pointer-events:none; border-radius:43px;
}
.glass-cracks path{ fill:none; stroke:#f4f6f8; stroke-linecap:round; stroke-linejoin:round; }
.glass-cracks .glass-cracks__shade{ stroke:#000; stroke-opacity:.5; stroke-width:1.8; }
/* mléčný lem kolem prasklin + ostrá světlá linka uprostřed */
.glass-cracks__glow.glass-cracks--a{ stroke-opacity:.16; stroke-width:4; }
.glass-cracks__glow.glass-cracks--b{ stroke-opacity:.13; stroke-width:2.8; }
.glass-cracks__glow.glass-cracks--c{ stroke-opacity:.10; stroke-width:1.8; }
.glass-cracks__core.glass-cracks--a{ stroke-opacity:.95; stroke-width:1.5; }
.glass-cracks__core.glass-cracks--b{ stroke-opacity:.85; stroke-width:1; }
.glass-cracks__core.glass-cracks--c{ stroke-opacity:.7; stroke-width:.6; }
.glass-cracks .glass-cracks__shard{ fill:#fff; fill-opacity:.18; stroke-opacity:.5; stroke-width:.4; }

/* téměř vybitá baterie */
.battery__fill.is-low{ background:linear-gradient(180deg,#ff5a4e,#d0221a); }

.app-root{ position:absolute; inset:0; }

/* ---------- Zprávy: čas pod každou bublinou ---------- */
.thread{ gap:0; }
.thread .bubble{ margin-top:4px; }
.bubble-time{
  font-size:9.5px; color:#9a9aa0; margin:2px 6px 2px; font-variant-numeric:tabular-nums;
}
.bubble-time--them{ align-self:flex-start; }
.bubble-time--me{ align-self:flex-end; }
.bubble-status{ margin-top:-2px; }

/* fotka v bublině je tlačítko, které otevře prohlížeč */
button.bubble{ font:inherit; text-align:left; cursor:pointer; color:inherit; }
button.bubble:focus-visible{ outline:2px solid #3a72c4; outline-offset:2px; }
.bubble--photo img{ height:auto; }
.photo-missing{ display:none; }
.is-missing > img{ display:none; }
.bubble--photo.is-missing .photo-missing{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:180px; height:132px; border-radius:10px; padding:10px; text-align:center;
  background:linear-gradient(180deg,#59606c,#3c424c); color:#fff;
  font-size:12px; font-weight:600; text-shadow:none;
}
.photo-missing small{ font-size:10px; font-weight:400; opacity:.75; }

/* ---------- prohlížeč fotky ---------- */
.photo-viewer{
  position:absolute; inset:0; z-index:30; background:#000;
  display:flex; flex-direction:column;
}
.photo-viewer__bar{
  flex:0 0 44px; display:flex; align-items:center; gap:8px; padding:0 6px;
  background:linear-gradient(180deg, rgba(60,60,64,.95), rgba(10,10,12,.95));
  border-bottom:1px solid #000; color:#fff;
}
.photo-viewer__done{
  font:inherit; font-size:12px; font-weight:700; color:#fff; cursor:pointer;
  padding:5px 9px; border-radius:5px; border:1px solid #000;
  background:linear-gradient(180deg,#5a5a60 0%, #2e2e34 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
.photo-viewer__title{ flex:1; text-align:center; font-size:16px; font-weight:700;
  text-shadow:0 -1px 0 rgba(0,0,0,.6); }
.photo-viewer__hint{ font-size:10px; color:rgba(255,255,255,.6); min-width:58px; text-align:right; }
.photo-viewer__scroll{
  flex:1; overflow:auto; display:flex; cursor:zoom-in; -webkit-overflow-scrolling:touch;
}
.photo-viewer__scroll img{ display:block; margin:auto; width:100%; max-width:none; height:auto; }
.photo-viewer.is-zoomed .photo-viewer__scroll{ cursor:zoom-out; }
.photo-viewer.is-zoomed .photo-viewer__scroll img{ width:260%; }
.photo-viewer__scroll.is-missing .photo-missing{
  display:flex; flex-direction:column; gap:4px; margin:auto; color:#fff; text-align:center;
  font-size:14px; font-weight:600;
}

/* ---------- Telefon: hovory u kontaktu ---------- */
.call-log{
  margin:10px 10px 4px; background:#fff; border:1px solid #a9b0b9; border-radius:8px; overflow:hidden;
}
.call-log__day{ padding:6px 10px 4px; font-size:12px; font-weight:700; color:#4c566a; }
.call-log__row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:8px; align-items:baseline;
  padding:5px 10px; border-top:1px solid #e3e3e8; font-size:13px; color:#1c1c1e;
  font-variant-numeric:tabular-nums;
}
.call-log__time{ font-weight:600; }
.call-log__type.missed{ color:#c81f1f; }
.call-log__len{ color:#6d6d72; font-size:12px; }

/* ---------- Poznámky ---------- */
.ios-app--notes{ background:var(--notes-paper); }
.navbar--notes{
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 49%,
                    rgba(255,255,255,0) 51%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, #b07c45 0%, #8a5a2c 50%, #7a4d23 51%, #8f6033 100%);
  border-bottom:1px solid #4e3014;
}
.navbar--notes .navbar__title{ text-shadow:0 -1px 0 rgba(60,30,5,.8); }
.navbar--notes .navbar__btn{
  border-color:#4e3014;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 49%,
                    rgba(255,255,255,0) 51%, rgba(255,255,255,.1) 100%),
    linear-gradient(180deg, #a2703d 0%, #6f4520 100%);
}
.navbar--notes .navbar__btn--back::before{
  border-color:#4e3014; background:linear-gradient(225deg, #94643a 0%, #85582d 100%);
}

.notes-body{ flex:1; overflow-y:auto; background:var(--notes-paper); }
.notes-list{ list-style:none; margin:0; padding:0; }
.notes-row{
  display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 10px 0 14px;
  border:0; border-bottom:1px solid var(--notes-line); background:transparent; cursor:pointer;
  font-family:var(--notes-font); color:var(--notes-ink); text-align:left;
}
.notes-row:active{ background:rgba(160,119,63,.18); }
.notes-row__title{ flex:1; min-width:0; font-size:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-row__date{ font-size:14px; color:var(--notes-meta); }
.notes-row__chev{ font-family:var(--ios-font); font-size:18px; font-weight:700; color:#c2a46f; }
.notes-empty{ padding:40px 20px; text-align:center; font-family:var(--notes-font); color:var(--notes-meta); }

.notes-paper{
  min-height:100%; padding:0 14px 20px;
  background-image:linear-gradient(to bottom, transparent 27px, var(--notes-line) 27px);
  background-size:100% 28px;
  font-family:var(--notes-font); color:var(--notes-ink);
}
.notes-paper__meta{
  display:flex; justify-content:space-between; height:28px; line-height:30px;
  font-size:14px; color:var(--notes-meta);
}
.notes-paper__text{ white-space:pre-wrap; font-size:20px; line-height:28px; overflow-wrap:anywhere; }

.notes-toolbar{
  flex:0 0 44px; display:flex; align-items:center; justify-content:space-around;
  background:var(--notes-paper); border-top:1px solid var(--notes-line);
}
.notes-toolbar button, .notes-toolbar span{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
}
.notes-toolbar span{ cursor:default; }
.notes-toolbar svg{ width:22px; height:22px; fill:#8a6232; }
.notes-toolbar button[disabled] svg{ opacity:.3; }
.notes-toolbar button:focus-visible{ outline:2px solid #8a6232; border-radius:6px; }