* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

input { -webkit-user-select: text; user-select: text; }

.view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.hidden { display: none !important; }

/* ---------- Calculator ---------- */

#calc { justify-content: flex-end; padding: 0 4vw calc(4vw + env(safe-area-inset-bottom)); }

#display {
  text-align: right;
  font-size: clamp(2.4rem, 16vw, 5.2rem);
  font-weight: 200;
  padding: 0 3vw 2vh;
  min-height: 1.3em;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
#display.small { font-size: clamp(1.8rem, 11vw, 3.4rem); }
#display.tiny { font-size: clamp(1.4rem, 8vw, 2.4rem); }
#display.micro { font-size: clamp(1rem, 5.5vw, 1.6rem); }

#keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3vw;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.key {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  font-size: clamp(1.4rem, 8vw, 2.2rem);
  font-weight: 400;
  color: #fff;
  background: #333;
  cursor: pointer;
  transition: filter 0.08s;
}
.key:active { filter: brightness(1.6); }
.key.fn { background: #a5a5a5; color: #000; }
.key.op { background: #ff9f0a; font-weight: 500; }
.key.zero {
  aspect-ratio: auto;
  grid-column: span 2;
  border-radius: 999px;
  text-align: left;
  padding-left: 9%;
}

@media (min-width: 500px) {
  #keys { gap: 14px; }
  #calc { padding-bottom: 24px; }
}

/* ---------- Bars & lists ---------- */

#home, #conv { background: #000; }

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #111;
  border-bottom: 1px solid #222;
}
.bar-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 2px 8px;
  min-width: 36px;
}

#lists { flex: 1; overflow-y: auto; padding: 6px 0 24px; }

.sec-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  padding: 16px 16px 6px;
}

.row {
  padding: 12px 16px;
  border-bottom: 1px solid #161616;
  cursor: pointer;
}
.row:active { background: #141414; }
.row-label { font-size: 1rem; }
.row-sub { font-size: 0.78rem; color: #888; margin-top: 2px; }
.row.dim .row-label { color: #999; }
.row-btns { display: flex; gap: 8px; margin-top: 8px; }
.row-btns button {
  background: #0a84ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.sheet-err { font-size: 0.82rem; color: #ff6b6b; min-height: 1em; }
.sheet-hint { font-size: 0.75rem; color: #888; line-height: 1.4; }
.sheet button.ghost, .row-btns button.ghost {
  background: #2c2c2e;
  color: #ddd;
}

#msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; }
.msg.own { align-items: flex-end; }

.msg .who {
  font-size: 0.72rem;
  margin: 0 10px 2px;
  opacity: 0.85;
}

.bubble {
  max-width: 78%;
  background: #26262a;
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 0.98rem;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.msg.own .bubble { background: #0a84ff; }

.bubble img {
  display: block;
  max-width: min(240px, 60vw);
  border-radius: 12px;
  margin: 2px 0;
  pointer-events: auto;
}
.bubble.has-img { padding: 4px; }
.bubble.has-img .txt { padding: 4px 8px 6px; display: block; }

.msg .when {
  font-size: 0.62rem;
  color: #666;
  margin: 2px 10px 0;
}

#preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #111;
}
#preview img { height: 48px; border-radius: 8px; }
#preview button {
  background: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
}

#composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #111;
  border-top: 1px solid #222;
}
#msgText {
  flex: 1;
  background: #1c1c1e;
  border: 1px solid #333;
  border-radius: 999px;
  color: #fff;
  padding: 9px 14px;
  font-size: 1rem;
  outline: none;
}
#imgBtn, #sendBtn {
  background: #1c1c1e;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}
#sendBtn { background: #0a84ff; font-weight: 700; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.overlay img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }

.sheet {
  background: #1c1c1e;
  border-radius: 16px;
  padding: 22px;
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet p { font-weight: 600; }
.sheet input {
  background: #111;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
}
.sheet button {
  background: #0a84ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 1rem;
  cursor: pointer;
}