/* JAI'S PHONE — Phase 1B / Instagram + LINE */
:root {
  --social-sep: #e9e9ec;
  --social-ink: #19191c;
  --social-muted: #909099;
  --ig-blue: #3797f0;
  --line-green: #06c755;
}
/* Both apps retain the Phase 1A phone shell and iOS gesture layer. */
.ig-shell .nav {
  border-bottom: 1px solid #f1f1f3;
  height: 96px;
  padding-top: 49px;
}
.ig-shell .appnav-title {
  font-size: 19px;
  letter-spacing: -0.6px;
}
.ig-shell .app-content {
  padding-bottom: 12px;
}
.ig-shell .appnav-action button,
.thread-toolbar button,
.ig-feed-heading button,
.line-header-actions button {
  display: grid;
  place-items: center;
  color: inherit;
}
.ig-shell .appnav-action svg,
.ig-feed-heading svg {
  width: 25px;
  height: 25px;
}
.social-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #374b6b, #ad8ca2);
  color: white;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -1px;
  box-shadow: inset 0 1px 6px #fff3;
}
.social-avatar.pik {
  background: linear-gradient(135deg, #bc9b8f, #7c547b);
}
.social-avatar.aod {
  background: linear-gradient(135deg, #93a299, #5a6877);
}
.social-avatar.me {
  background: linear-gradient(135deg, #172947, #9f728b);
}
.social-avatar.tiny {
  width: 27px;
  height: 27px;
  font-size: 12px;
}
.social-avatar.small {
  width: 34px;
  height: 34px;
  font-size: 15px;
}
.social-avatar.medium {
  width: 54px;
  height: 54px;
  font-size: 22px;
}
.social-avatar.large {
  width: 87px;
  height: 87px;
  font-size: 34px;
}
.social-avatar.ringed {
  border: 3px solid #e94da4;
  box-shadow:
    inset 0 1px 5px #fff3,
    0 0 0 2px #fff;
}
.social-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f1f3;
  margin: 0 16px 10px;
  padding: 0 11px;
  height: 37px;
  border-radius: 10px;
  color: #8e8e93;
}
.social-search svg {
  width: 16px;
  height: 16px;
  stroke: #8e8e93;
  flex: none;
}
.social-search input {
  display: block;
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  font-size: 15px;
  min-width: 0;
  color: #1b1b1e;
  user-select: text;
  -webkit-user-select: text;
}
.social-search input::placeholder {
  color: #9b9ba1;
}
.social-search-clear {
  font-size: 16px;
  color: #bbb;
}
.social-no-results {
  text-align: center;
  font-size: 13px;
  padding: 45px 15px;
  color: #9c9ca6;
}
.social-no-results[hidden] {
  display: none;
}
.social-content-note {
  font-size: 11px;
  color: #8d8d97;
  text-align: center;
  line-height: 1.45;
  padding: 12px 16px 18px;
}
.sample-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #bbb;
  vertical-align: middle;
  margin-right: 4px;
}
.social-item-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.social-item-copy strong {
  font-size: 15px;
  font-weight: 690;
  color: #191919;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-item-copy > span {
  font-size: 13px;
  color: #92929a;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.social-item-time {
  align-self: center;
  font-size: 10px;
  color: #aaa9b0;
  white-space: nowrap;
}
/* Instagram inbox */
.ig-account-row {
  padding: 17px 16px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ig-account-row strong {
  font-size: 21px;
  font-weight: 730;
  letter-spacing: -0.7px;
}
.ig-account-row button {
  width: 30px;
  height: 30px;
  color: #222;
}
.ig-account-row svg {
  width: 25px;
  height: 25px;
}
.chevron-text {
  color: #8f8f97;
  font-size: 15px;
}
.ig-inbox-title {
  display: flex;
  justify-content: space-between;
  padding: 8px 17px 15px;
  font-size: 15px;
}
.ig-inbox-title b {
  font-size: 16px;
}
.ig-inbox-title span {
  font-size: 14px;
  color: #3797f0;
  font-weight: 650;
}
.ig-thread-filters {
  display: flex;
  gap: 8px;
  padding: 4px 16px 13px;
}
.ig-thread-filters button {
  padding: 7px 17px;
  background: #f0f1f3;
  border-radius: 20px;
  color: #222;
  font-weight: 670;
  font-size: 13px;
}
.ig-thread-filters button.active {
  background: #222;
  color: #fff;
}
.ig-inbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  background: #fff;
  text-align: left;
  padding: 8px 15px;
}
.ig-inbox-item:active {
  background: #f5f5f6;
}
.ig-inbox-item .social-avatar {
  width: 59px;
  height: 59px;
  font-size: 23px;
}
.ig-inbox-item .social-item-time {
  align-self: flex-start;
  margin-top: 10px;
}
/* Instagram nav + feed */
.social-ig-footer {
  display: flex;
  height: 80px;
  flex: none;
  align-items: center;
  justify-content: space-around;
  padding: 5px 9px 28px;
  border-top: 1px solid #ededf0;
  background: #fff;
}
.social-ig-footer button {
  width: 54px;
  height: 44px;
  display: grid;
  place-items: center;
  opacity: 0.7;
}
.social-ig-footer button.active {
  opacity: 1;
}
.social-ig-footer svg {
  height: 26px;
  width: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
}
.social-ig-footer .social-avatar {
  border: 1px solid #222;
  box-shadow: 0 0 0 1px #fff;
}
.ig-feed-heading {
  border-bottom: 1px solid #f2f2f2;
}
.ig-feed-heading strong {
  font-style: italic;
  font-weight: 700;
}
.ig-stories {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 16px 14px 15px;
  border-bottom: 1px solid #efeff0;
  scrollbar-width: none;
}
.ig-stories::-webkit-scrollbar {
  display: none;
}
.ig-story {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  flex: none;
  max-width: 76px;
  font-size: 11px;
}
.ig-story .social-avatar {
  width: 60px;
  height: 60px;
  font-size: 23px;
}
.ig-story > span:last-child {
  max-width: 73px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-feed-post {
  padding-bottom: 16px;
  border-bottom: 1px solid #ededee;
}
.ig-feed-author strong {
  font-size: 13px;
  flex: 1;
}
.ig-feed-author svg {
  width: 21px;
  height: 21px;
}
.ig-feed-photo {
  aspect-ratio: 1/1;
}
.ig-placeholder-mark {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 700;
  border: 1px solid #fff6;
  padding: 11px 15px;
  z-index: 2;
}
.ig-feed-buttons button {
  width: 28px;
  height: 29px;
}
.ig-feed-buttons .liked {
  color: #fd324f;
}
.ig-feed-caption {
  line-height: 1.5;
}
.ig-feed-small {
  color: #a1a1a9;
  font-size: 11px;
  padding: 6px 14px;
}
/* Instagram profiles */
.ig-profile-section {
  padding-top: 8px;
}
.ig-profile-stats strong {
  font-size: 17px;
}
.ig-profile-bio {
  padding: 0 17px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.ig-profile-bio strong {
  font-weight: 690;
}
.ig-profile-bio .muted {
  color: #85858e;
}
.ig-profile-note {
  margin-top: 5px;
  color: #9999a2;
  font-size: 12px;
}
.ig-profile-actions {
  display: flex;
  gap: 8px;
  padding: 9px 17px;
}
.ig-profile-actions button {
  flex: 1;
  padding: 8px 5px;
  border-radius: 8px;
  background: #efeff1;
  font-weight: 700;
  font-size: 13px;
}
.ig-profile-actions button.primary {
  background: #3797f0;
  color: #fff;
}
.ig-profile-highlights {
  display: flex;
  gap: 16px;
  padding: 16px 17px 20px;
}
.ig-highlight {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-direction: column;
}
.ig-highlight span {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  border: 1px solid #d7d7da;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 300;
  background: #f5f5f7;
}
.ig-highlight small {
  font-size: 11px;
  font-weight: 650;
}
.ig-grid-tabs {
  height: 42px;
  border-top: 1px solid #ececee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #999;
}
.ig-grid-tabs span {
  height: 100%;
  flex: 1;
  text-align: center;
  padding-top: 7px;
  font-size: 25px;
}
.ig-grid-tabs .selected {
  border-top: 1px solid #222;
  color: #222;
}
.ig-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.ig-grid-tile {
  aspect-ratio: 3/4;
  display: grid;
  place-items: center;
}
.ig-grid-glyph {
  position: relative;
  z-index: 2;
  color: #fff9;
  font-size: 23px;
}
.ig-unverified {
  text-align: center;
  color: #a5a5ad;
  font-size: 11px;
  padding: 12px 10px;
}
/* LINE inbox */
.social-line-list .nav {
  background: #fff;
  border-bottom: 0;
  height: 83px;
  padding-top: 46px;
}
.social-line-list .appnav-title {
  font-size: 16px;
}
.social-line-list .app-content {
  padding-bottom: 10px;
}
.line-main-title {
  padding: 4px 18px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.line-main-title h1 {
  margin: 0;
  font-size: 30px;
}
.line-header-actions {
  display: flex;
  gap: 16px;
}
.line-header-actions button {
  width: 24px;
  height: 24px;
}
.line-header-actions svg {
  width: 23px;
  height: 23px;
}
.line-group-heading {
  display: flex;
  justify-content: space-between;
  padding: 17px 18px 6px;
  color: #333;
  font-weight: 700;
  font-size: 14px;
}
.line-group-heading span {
  font-weight: 400;
  color: #999;
}
.line-self {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 10px 18px;
}
.line-self > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.line-self small {
  color: #a0a0a6;
  font-size: 12px;
}
.line-inbox-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 18px;
  width: 100%;
  min-height: 78px;
  text-align: left;
  background: #fff;
}
.line-inbox-row:active {
  background: #f5f5f7;
}
.line-right-mini {
  color: #a0a0a5;
}
.social-line-footer {
  height: 80px;
  flex: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 7px 0 28px;
  border-top: 1px solid #eee;
}
.social-line-footer button {
  font-size: 10px;
}
/* Thread shell shared by both apps */
#appL .pg.social-thread {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.social-thread .thread-toolbar {
  height: 102px;
  min-height: 102px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 52px 12px 8px;
  z-index: 2;
  border-bottom: 1px solid #efeff0;
  background: #fff;
  color: #1a1a1a;
}
.thread-toolbar > button:first-child {
  width: 27px;
  min-width: 27px;
}
.thread-toolbar > button:first-child svg {
  width: 14px;
  height: 25px;
  stroke: #232323;
}
.thread-toolbar-person {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.thread-toolbar-person > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 1px;
}
.thread-toolbar-person strong {
  font-size: 15px;
  font-weight: 710;
  max-width: 170px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.thread-toolbar-person small {
  font-size: 10px;
  color: #95959d;
}
.thread-toolbar-icons {
  display: flex;
  gap: 15px;
}
.thread-toolbar-icons svg {
  width: 22px;
  height: 22px;
}
.social-thread .thread-messages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  padding: 12px 10px 17px;
  overscroll-behavior: contain;
}
.social-thread .thread-messages::-webkit-scrollbar {
  display: none;
}
.thread-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 21px 0 12px;
  font-size: 14px;
}
.thread-start .social-avatar {
  margin-bottom: 9px;
}
.thread-start strong {
  font-size: 16px;
}
.thread-start small {
  font-size: 12px;
  color: #91919a;
}
.thread-start > span:last-child {
  font-size: 11px;
  color: #aaa;
}
.thread-messages .social-content-note {
  font-size: 10px;
  padding: 10px 5px 13px;
}
.thread-date {
  text-align: center;
  font-size: 11px;
  color: #9898a0;
  margin: 17px auto 10px;
  line-height: 1.5;
}
.thread-bottom-spacer {
  height: 6px;
}
.ig-msg-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: 3px;
  min-height: 24px;
}
.ig-msg-row.first {
  margin-top: 13px;
}
.ig-msg-row.outgoing {
  flex-direction: row-reverse;
}
.ig-msg-row .ig-msg-spacer {
  width: 27px;
  flex: none;
}
.ig-msg-row .social-avatar {
  margin-right: 0;
}
.ig-msg-bubble {
  font-size: 14px;
  padding: 10px 14px;
  max-width: 73%;
  background: #efeff0;
  border-radius: 19px;
  word-wrap: break-word;
  line-height: 1.43;
}
.ig-msg-row.outgoing .ig-msg-bubble {
  background: #3797f0;
  color: white;
}
.ig-msg-row.outgoing .ig-msg-bubble.has-attachment {
  background: #f0f0f1;
  color: #333;
}
.ig-msg-row .ig-msg-heart {
  width: 24px;
  height: 24px;
  align-self: center;
  color: #b1b1bb;
  opacity: 0.55;
}
.ig-msg-heart svg {
  width: 17px;
  height: 17px;
}
.ig-msg-heart.hearted {
  color: #ff375f;
  opacity: 1;
}
.ig-msg-heart.hearted svg {
  fill: currentColor;
}
.chat-image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  min-width: 120px;
  min-height: 100px;
  background: linear-gradient(135deg, #a3acbe, #d3b5b6, #6f86a2);
  color: #fff;
  padding: 15px 13px;
  text-align: center;
}
.chat-image-placeholder > span {
  font-size: 33px;
}
.chat-image-placeholder small {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 620;
}
.social-thread .thread-compose-zone {
  flex: none;
  background: #fff;
  border-top: 1px solid #f1f1f1;
  padding: 8px 10px 27px;
}
.thread-compose {
  display: flex;
  align-items: center;
  gap: 8px;
}
.thread-compose .compose-add {
  width: 31px;
  height: 33px;
  display: grid;
  place-items: center;
  color: #333;
}
.thread-compose .compose-add svg {
  width: 25px;
  height: 25px;
}
.thread-compose .compose-field {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e5e5e8;
  border-radius: 22px;
  min-height: 38px;
  flex: 1;
  padding: 3px 10px 3px 13px;
  background: #fff;
}
.compose-field textarea {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  min-width: 0;
  flex: 1;
  max-height: 80px;
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
  padding: 7px 0 4px;
  color: #111;
}
.compose-field textarea::placeholder {
  color: #a1a1a7;
}
.compose-field button {
  font-size: 23px;
  color: #7e7e86;
  align-self: center;
}
.compose-send {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #3797f0;
  color: white;
  font-size: 20px;
}
.compose-send svg {
  width: 19px;
  height: 19px;
}
.composer-footnote {
  text-align: center;
  padding: 5px 0 0;
  color: #a0a0aa;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* LINE is intentionally visually distinct from IG while maintaining system spacing. */
.line-thread .thread-toolbar {
  border-color: transparent;
}
.line-thread .thread-date {
  width: max-content;
  max-width: 95%;
  margin: 16px auto 10px;
}
.line-thread .thread-start > span:last-child,
.line-thread .thread-start small {
  color: #627787;
}
.line-thread .social-content-note {
  color: #607e93;
}
.line-msg-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  align-items: flex-start;
}
.line-msg-row.first {
  margin-top: 12px;
}
.line-msg-row.outgoing {
  flex-direction: row-reverse;
}
.line-msg-spacer {
  width: 34px;
  flex: none;
}
.line-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  max-width: 77%;
  min-width: 0;
}
.line-msg-row.outgoing .line-bubble-wrap {
  flex-direction: row-reverse;
}
.line-bubble {
  font-size: 14px;
  line-height: 1.47;
  background: white;
  color: #161616;
  border-radius: 14px;
  padding: 9px 12px;
  word-break: break-word;
}
.line-msg-row.incoming.first .line-bubble {
  border-top-left-radius: 4px;
}
.line-msg-row.outgoing .line-bubble {
  background: #fee500;
  border-top-right-radius: 5px;
}
.line-msg-time {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  color: #5b7286;
  font-size: 10px;
  gap: 2px;
  line-height: 1.1;
  padding-bottom: 2px;
}
.line-msg-row.outgoing .line-msg-time {
  align-items: end;
}
.line-read {
  font-size: 9px;
  color: #627d96;
}
.line-thread .compose-send {
  font-size: 19px;
}
/* optional credits */
.credits-copy {
  font-size: 14px;
  line-height: 1.65;
  padding: 8px 19px 25px;
  color: #444;
}
.credits-copy h2 {
  font-size: 21px;
  margin: 12px 0 8px;
}
.credits-copy p {
  margin: 9px 0;
}
.credits-copy b {
  color: #1a1a1e;
}
.credits-copy .source-label {
  display: inline-block;
  background: #efeff2;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  margin-right: 5px;
  color: #555;
}
@media (max-height: 710px) {
  .ig-profile-highlights {
    padding: 7px 17px 13px;
  }
  .thread-start {
    margin-top: 6px;
  }
  .thread-start .social-avatar.large {
    width: 67px;
    height: 67px;
  }
  .social-thread .thread-compose-zone {
    padding-bottom: 22px;
  }
}

[data-search-item][hidden] {
  display: none !important;
}

/* ---- Phase 5 social refinements (formerly css/social-v2.css) ---- */
/* VISUAL MATCH PASS — Instagram dark reference + LINE iOS light reference, Oct 2026.
   Images/avatars are placeholders until user-supplied approved assets arrive. */
#appL:has(.ig-dark) {
  background: #0d1015;
}
#appL .pg.ig-dark {
  background: #0c0f14;
  color: #f6f7fa;
}
.ig-dark .nav {
  display: none !important;
}
.ig-dark .app-content {
  background: #0c0f14;
  color: #f6f7fa;
  padding: 0 0 112px !important;
}
.ig-dark .social-avatar {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ig-dark .social-avatar.ringed {
  border: 3px solid #c6379d;
  box-shadow: 0 0 0 1px #f2a63b;
}
.ig-dark .social-content-note {
  color: #7f8490;
}
.ig-dark .social-item-copy strong {
  color: #f5f5f6;
  font-size: 15px;
  font-weight: 650;
}
.ig-dark .social-item-copy > span {
  color: #92939f;
  font-size: 12px;
}
.ig-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 107px;
  padding: 54px 17px 8px;
  gap: 10px;
}
.ig-main-header h1 {
  margin: 0 !important;
  color: #fff;
  font-size: 25px !important;
  letter-spacing: -0.6px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
  font-weight: 760;
}
.ig-main-header h1 svg {
  width: 19px;
  height: 19px;
}
.ig-main-header > button {
  width: 32px;
  height: 35px;
  flex: none;
  color: #f7f7f9;
}
.ig-main-header > button svg {
  width: 26px;
  height: 26px;
}
.ig-inbox-screen .ig-main-header > button {
  margin-left: auto;
}
.ig-dark .social-search {
  margin: 4px 15px 18px;
  height: 42px;
  border-radius: 13px;
  background: #24272e;
  color: #989ea9;
  padding: 0 12px;
}
.ig-dark .social-search svg {
  width: 19px;
  height: 19px;
  stroke: #969ba7;
}
.ig-dark .social-search input {
  font-size: 16px;
  color: #fafafa;
}
.ig-dark .social-search input::placeholder {
  color: #9295a0;
}
.ig-dark .social-search-clear {
  display: none;
}
.ig-notes {
  display: flex;
  align-items: start;
  gap: 18px;
  padding: 0 16px 15px;
  height: 153px;
}
.ig-note {
  width: 92px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #c5c8d2;
  position: relative;
}
.ig-note-avatar {
  display: block;
  position: relative;
}
.ig-note .social-avatar.large {
  width: 78px;
  height: 78px;
  font-size: 30px;
  border: 1px solid #343840;
  background: linear-gradient(135deg, #242833, #121319);
}
.ig-note-prompt {
  position: absolute;
  top: -13px;
  left: -3px;
  min-width: 91px;
  max-width: 96px;
  padding: 9px 5px;
  background: #262a31;
  border: 1px solid #3d424b;
  border-radius: 20px;
  color: #969ba5;
  font-size: 10px;
  line-height: 1.18;
  text-align: center;
  box-shadow: 0 4px 8px #0003;
}
.ig-map-orb {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, #354c57, #193041);
  display: grid;
  place-items: center;
  font-size: 46px;
  filter: saturate(0.6);
}
.ig-list-caption {
  padding: 6px 17px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ig-list-caption strong {
  font-size: 16px;
}
.ig-list-caption span {
  font-size: 14px;
  color: #aeb3bb;
}
.ig-dark .ig-inbox-item {
  min-height: 78px;
  background: transparent;
  padding: 7px 16px;
  gap: 12px;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}
.ig-dark .ig-inbox-item:active {
  background: #20232a;
}
.ig-dark .ig-inbox-item .social-avatar.medium {
  width: 60px;
  height: 60px;
  font-size: 24px;
}
.ig-unread-dot {
  margin-left: auto;
  width: 8px;
  height: 8px;
  background: #526cfa;
  border-radius: 50%;
  flex: none;
}
.ig-dark .social-no-results {
  color: #a4a4ae;
}
/* IG Floating navigation has the unmistakable 5-icon rounded reference silhouette. */
#appL .ig-dark .social-ig-footer {
  position: absolute;
  z-index: 7;
  bottom: 31px;
  left: 12px;
  right: 12px;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 7px;
  border-radius: 35px;
  background: rgba(28, 31, 37, 0.93);
  border: 1px solid #3e4249;
  box-shadow: 0 4px 22px #0008;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.ig-dark .social-ig-footer button {
  height: 52px;
  width: 18%;
  display: grid;
  place-items: center;
  position: relative;
  color: #f7f7f9;
  border-radius: 33px;
}
.ig-dark .social-ig-footer button.active {
  background: #45484d;
}
.ig-dark .social-ig-footer svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}
.ig-dark .social-ig-footer .profile-active .social-avatar {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.ig-tab-dot {
  position: absolute;
  bottom: 7px;
  right: 22%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ed4858;
}
/* IG profile reference */
.ig-profile-header h1 {
  justify-content: center;
  margin: 0 !important;
  font-size: 23px !important;
}
.ig-profile-header > div {
  display: flex;
  align-items: center;
}
.ig-profile-header > div button {
  height: 28px;
  width: 28px;
  display: grid;
  place-items: center;
}
.ig-profile-header > div svg {
  width: 24px;
  height: 24px;
}
.ig-profile-main {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 15px 15px;
}
.ig-hero-avatar {
  position: relative;
  flex: none;
}
.ig-hero-avatar .social-avatar.large {
  height: 88px;
  width: 88px;
  background: #141414;
  border: 1px solid #25282e;
}
.ig-profile-note-pill {
  position: absolute;
  top: -11px;
  left: 0;
  background: #272b32;
  border: 1px solid #3b404a;
  border-radius: 19px;
  padding: 6px 8px;
  font-size: 10px;
  white-space: nowrap;
  color: #b8bcc5;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-profile-stats {
  flex: 1;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  text-align: center;
}
.ig-profile-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ig-profile-stats b {
  font-size: 18px;
  font-weight: 750;
}
.ig-profile-stats span {
  font-size: 12px;
  color: #e5e5eb;
}
.ig-dark .ig-profile-bio {
  color: #f6f6fa;
  padding: 0 17px 7px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.ig-profile-bio small {
  color: #9fa1a9;
  margin-top: 3px;
  font-size: 11px;
}
.ig-dark .ig-profile-actions {
  display: flex;
  gap: 6px;
  padding: 8px 16px 6px;
}
.ig-dark .ig-profile-actions button {
  background: #2c2f36;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 7px;
  flex: 1;
  white-space: nowrap;
}
.ig-dark .ig-profile-actions button:last-child:not(:nth-child(2)) {
  flex: 0 0 38px;
}
.ig-dark .ig-profile-actions .primary {
  background: #4c91f4;
}
.ig-profile-blank-highlights {
  padding: 15px 16px 16px;
}
.ig-profile-blank-highlights button {
  border-radius: 15px;
  border: 1px solid #363c44;
  color: #aeb2bc;
  padding: 6px 10px;
  font-size: 12px;
}
.ig-dark .ig-grid-tabs {
  height: 43px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #3c4045;
  border-top: 0;
  color: #9aa0a9;
}
.ig-dark .ig-grid-tabs span {
  height: 100%;
  flex: 1;
  display: grid;
  place-items: center;
}
.ig-dark .ig-grid-tabs span.selected {
  border-bottom: 2px solid #fff;
  color: #fff;
  border-top: none;
}
.ig-dark .ig-grid-tabs svg {
  height: 21px;
  width: 21px;
}
.ig-dark .ig-grid-layout {
  display: grid;
  gap: 1px;
}
.ig-dark .ig-grid-tile {
  height: auto;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}
.ig-placeholder-camera {
  display: grid;
  place-items: center;
  color: #ffffff66;
}
.ig-placeholder-camera svg {
  width: 22px;
  height: 22px;
}
.ig-feed-heading {
  height: 96px;
  padding: 52px 17px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ig-feed-heading strong {
  font-size: 27px;
  font-family: Georgia, serif;
  letter-spacing: -1px;
}
.ig-feed-heading svg {
  width: 25px;
  height: 25px;
}
.ig-feed-screen .ig-stories {
  display: flex;
  gap: 15px;
  overflow: auto;
  padding: 5px 15px 17px;
  scrollbar-width: none;
}
.ig-feed-screen .ig-story {
  width: 68px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #d4d5db;
}
.ig-feed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
}
.ig-feed-author button {
  margin-left: auto;
  color: #fff;
}
.ig-feed-photo {
  height: 280px;
  width: 100%;
  display: grid;
  place-items: center;
  color: #ffffffb3;
}
.ig-feed-photo small {
  font-size: 11px;
  letter-spacing: 2px;
}
.ig-feed-buttons {
  display: flex;
  gap: 13px;
  padding: 12px 14px 4px;
}
.ig-feed-buttons svg {
  width: 25px;
  height: 25px;
}
.ig-feed-buttons .liked svg {
  fill: #ff3355;
  stroke: #ff3355;
}
.ig-feed-caption {
  margin: 0;
  padding: 6px 14px 18px;
  font-size: 13px;
}
/* IG dark conversation */
#appL .pg.ig-thread {
  background: #0c0f14;
  color: #f8f8fa;
}
.ig-thread .thread-toolbar {
  color: #fff;
  border: 0;
  padding: 53px 13px 10px;
  gap: 8px;
}
.ig-thread .thread-toolbar > button:first-child {
  width: 34px;
  min-width: 34px;
}
.ig-thread .thread-toolbar > button:first-child svg {
  stroke: #fff;
  height: 25px;
  width: 17px;
}
.ig-thread .thread-toolbar-person {
  justify-content: flex-start;
  gap: 8px;
}
.ig-thread .thread-toolbar-person strong {
  color: #fff;
}
.ig-thread .thread-toolbar-person small {
  color: #aeb0ba;
  font-size: 11px;
}
.ig-thread .thread-toolbar-icons svg {
  height: 24px;
  width: 24px;
}
.ig-thread .thread-messages {
  color: #fff;
  padding: 5px 13px 20px;
}
.ig-thread .thread-start {
  margin: 6px 0 18px;
}
.ig-thread .thread-start small {
  color: #9699a3;
}
.ig-thread .thread-date {
  color: #8d939c;
  font-size: 11px;
  margin: 23px 0 18px;
}
.ig-thread .ig-msg-row {
  margin-top: 5px;
  gap: 6px;
}
.ig-thread .ig-msg-row.first {
  margin-top: 12px;
}
.ig-thread .ig-msg-bubble {
  color: #f6f6f7;
  border-radius: 18px;
  padding: 10px 12px;
  font-size: 14px;
  max-width: 78%;
  line-height: 1.43;
}
.ig-thread .ig-msg-row.outgoing .ig-msg-bubble {
  background: linear-gradient(135deg, #5c48e7, #673def);
  color: #fff;
}
.ig-thread .ig-msg-heart {
  color: #babac0;
  opacity: 0.8;
}
.ig-thread .ig-msg-heart.hearted {
  color: #ff315d;
}
.ig-thread .thread-compose-zone {
  background: #0c0f14;
  color: #fff;
  border: 0;
  padding: 8px 9px 43px;
}
.ig-thread .thread-compose {
  display: flex;
  border-radius: 26px;
  background: #24272d;
}
.ig-thread .compose-field {
  background: transparent;
  border: 0;
  min-width: 0;
  flex: 1;
  padding: 0;
}
.ig-thread .compose-field textarea {
  font-size: 14px;
  color: #fff;
  padding: 7px 0;
}
.ig-thread .compose-field textarea::placeholder {
  color: #a7a7af;
}
.ig-compose-camera {
  background: #5f47ed !important;
  border-radius: 50%;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
}
.ig-compose-camera svg {
  height: 23px;
  width: 23px;
}
.ig-compose-secondary {
  flex: none;
  width: 25px;
  height: 31px;
  color: #e4e4e6;
}
.ig-compose-secondary svg {
  width: 22px;
  height: 22px;
}
.ig-thread .compose-send {
  border-radius: 50%;
  background: #6246e8;
  flex: none;
  width: 31px;
  height: 31px;
  color: #fff;
}
.ig-thread .compose-send svg {
  width: 17px;
  height: 17px;
}
.ig-thread .chat-image-placeholder {
  background: linear-gradient(135deg, #32394a, #202b42);
  color: #c1c9dd;
  border: 1px solid #434757;
}
.ig-thread .chat-image-placeholder svg {
  width: 34px;
  height: 34px;
}
/* LINE bright inbox */
#appL .pg.line-modern.social-line-list {
  background: #fff;
  color: #111;
}
.line-modern.social-line-list .nav {
  display: none;
}
.line-modern.social-line-list .app-content {
  background: #fff;
  padding: 0 0 20px;
}
.line-pill-header {
  height: 128px;
  padding: 58px 14px 16px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.line-pill-switch {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e3;
  background: #fff;
  border-radius: 25px;
  padding: 3px;
  box-shadow: 0 2px 5px #00000005;
  min-width: 0;
}
.line-pill-switch button {
  font-size: 17px;
  font-weight: 750;
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 22px;
}
.line-pill-switch button.active {
  background: #111;
  color: #fff;
}
.line-header-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dedee0;
  border-radius: 28px;
  padding: 7px 8px;
  background: #fff;
  flex: none;
}
.line-header-tools button {
  width: 24px;
  height: 27px;
  display: grid;
  place-items: center;
}
.line-header-tools svg {
  width: 20px;
  height: 20px;
}
.line-modern .social-search {
  margin: 2px 15px 17px;
  height: 44px;
  border-radius: 26px;
  background: #f7f7f8;
  color: #a7a7aa;
}
.line-modern .social-search input {
  color: #111;
  font-size: 15px;
}
.line-modern .social-search-clear {
  font-size: 20px;
  color: #aaa;
}
.line-filters {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 15px 12px;
  overflow: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.line-filters span {
  border: 1px solid #ebebec;
  border-radius: 21px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 650;
  color: #19191b;
}
.line-filters .active {
  background: #111;
  color: #fff;
  border-color: #111;
}
.line-modern .line-inbox-row {
  min-height: 80px;
  padding: 10px 15px;
  gap: 12px;
  background: #fff;
}
.line-modern .line-inbox-row:active {
  background: #f6f6f7;
}
.line-modern .social-item-copy strong {
  font-size: 16px;
}
.line-modern .social-item-copy span {
  color: #929294;
  font-size: 13px;
}
.line-modern .social-item-time {
  font-size: 11px;
  color: #999;
  align-self: flex-start;
  padding-top: 8px;
}
#appL .social-line-footer {
  position: absolute;
  z-index: 6;
  left: 13px;
  right: 13px;
  bottom: 29px;
  height: 69px;
  background: #ffffffea;
  border: 1px solid #e0e3e2;
  border-radius: 36px;
  box-shadow: 0 8px 20px #0000000b;
  padding: 5px 4px 3px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.social-line-footer button {
  height: 56px;
  color: #151515;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  border-radius: 29px;
  font-weight: 650;
}
.social-line-footer button.active {
  background: #eef0f1;
  color: #111;
}
.social-line-footer svg {
  height: 23px;
  width: 23px;
}
.social-line-footer button span {
  font-size: 11px;
}
/* LINE blue chat */
#appL .pg.line-thread {
  background: #91acd3;
  color: #111;
}
.line-thread .thread-toolbar {
  background: #91acd3;
  color: #111;
  border: 0;
  height: 111px;
  min-height: 111px;
  padding: 58px 14px 10px;
}
.line-thread .thread-toolbar > button:first-child {
  width: 29px;
  min-width: 29px;
}
.line-thread .thread-toolbar > button:first-child svg {
  width: 18px;
  height: 25px;
  stroke: #0a0a0a;
}
.line-thread .thread-toolbar-person {
  justify-content: flex-start;
}
.line-thread .thread-toolbar-person strong {
  font-size: 19px;
  color: #101010;
}
.line-thread .thread-toolbar-icons svg {
  height: 25px;
  width: 25px;
}
.line-thread .thread-messages {
  background: #91acd3;
  padding: 7px 10px 18px;
}
.line-thread .thread-date {
  background: #7f99c0;
  color: #f7f9ff;
  font-size: 12px;
  border-radius: 19px;
  padding: 7px 14px;
  letter-spacing: 0;
}
.line-thread .line-bubble {
  font-size: 16px;
  color: #151515;
}
.line-thread .line-msg-row.outgoing .line-bubble {
  color: #111;
}
.line-thread .line-read {
  font-size: 10px;
}
.line-thread .thread-compose-zone {
  background: #fff;
  border: 0;
  padding: 10px 11px 40px;
}
.line-thread .compose-add {
  width: 26px;
  color: #171717;
}
.line-thread .compose-add svg {
  height: 25px;
  width: 25px;
}
.line-thread .compose-field {
  background: #f7f7f8;
  border: 1px solid #e9e9ec;
  border-radius: 24px;
  min-height: 42px;
  padding: 3px 9px 3px 13px;
}
.line-thread .compose-field textarea {
  font-size: 15px;
  padding: 8px 0 5px;
}
.line-thread .compose-send {
  border-radius: 50%;
  background: #06c755;
  color: #fff;
}
.line-thread .compose-send svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 350px) {
  .line-pill-switch button {
    padding: 8px;
    font-size: 14px;
  }
  .line-header-tools {
    gap: 4px;
    padding: 6px;
  }
  .line-header-tools button {
    width: 20px;
  }
  .ig-dark .social-ig-footer {
    left: 7px;
    right: 7px;
  }
  .ig-main-header h1 {
    font-size: 22px !important;
  }
}
@media (max-height: 710px) {
  #appL .social-line-footer {
    bottom: 20px;
  }
  .ig-main-header {
    min-height: 98px;
    padding-top: 51px;
  }
  .ig-notes {
    height: 130px;
  }
  .ig-note .social-avatar.large,
  .ig-map-orb {
    width: 66px;
    height: 66px;
  }
  .ig-dark .social-ig-footer {
    bottom: 22px;
  }
}
/* Override the iPhone shell's high-specificity generic navbar: LINE uses its own pill header. */
#appL .pg.line-modern.social-line-list .nav {
  display: none !important;
}

/* Phase 5 LINE pass: preserve the established palette and pill navigation. */
.line-modern {
  --line-chat-bg: #91acd3;
  --line-bubble-in: #fff;
  --line-bubble-out: #83e273;
  --line-meta: #344f75;
  --line-bubble-radius: 17px;
}
#appL .pg.line-thread,
.line-thread .thread-toolbar,
.line-thread .thread-messages {
  background: var(--line-chat-bg);
}
.line-thread .thread-toolbar {
  flex-shrink: 0;
}
.line-thread .thread-toolbar > button,
.line-thread .thread-toolbar-icons button {
  min-width: 44px;
  min-height: 44px;
}
.line-thread .thread-toolbar-icons {
  gap: 0;
}
.line-thread .thread-toolbar-person {
  overflow: hidden;
}
.line-thread .thread-toolbar-person strong {
  max-width: 100%;
}
.line-thread .line-msg-row {
  margin-top: 3px;
}
.line-thread .line-msg-row.first {
  margin-top: 12px;
}
.line-thread .line-message-content {
  min-width: 0;
  max-width: calc(100% - 40px);
}
.line-thread .line-bubble-wrap {
  max-width: 100%;
  gap: 6px;
}
.line-thread .line-bubble {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  background: var(--line-bubble-in);
  border-radius: var(--line-bubble-radius);
  padding: 9px 12px;
  line-height: 1.45;
}
.line-thread .line-msg-row.outgoing .line-bubble {
  background: var(--line-bubble-out);
  border-top-right-radius: var(--line-bubble-radius);
}
.line-thread .line-msg-row.incoming.first .line-bubble {
  border-top-left-radius: 9px;
}
.line-thread .line-msg-row.first .line-bubble::before {
  content: '';
  position: absolute;
  top: 3px;
  left: -6px;
  width: 11px;
  height: 14px;
  background: var(--line-bubble-in);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M11 0C8 4 4 5 0 3C2 9 6 13 11 14Z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M11 0C8 4 4 5 0 3C2 9 6 13 11 14Z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.line-thread .line-msg-row.outgoing.first .line-bubble::before {
  left: auto;
  right: -6px;
  background: var(--line-bubble-out);
  transform: scaleX(-1);
}
.line-thread .line-msg-time {
  font-variant-numeric: tabular-nums;
  color: var(--line-meta);
  font-size: 10px;
  line-height: 1.25;
  flex: none;
  padding-bottom: 2px;
}
.line-thread .line-msg-time .line-read {
  font-size: 10px;
  color: inherit;
}
.line-thread .line-group-sender {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--line-meta);
  padding: 0 3px 4px;
}
.line-thread .compose-field {
  min-width: 0;
}
.line-thread .compose-add,
.line-thread .compose-send {
  min-width: 44px;
  min-height: 44px;
  flex: none;
}
.line-thread .thread-compose {
  gap: 6px;
}
.line-thread .compose-send {
  width: 44px;
  height: 44px;
}

/* Phase 5 Instagram: keep the current dark surfaces and floating navigation. */
.ig-dark {
  --ig-surface: #0c0f14;
  --ig-field: #24272d;
  --ig-bubble-in: #262a31;
  --ig-text: #f6f7fa;
  --ig-muted: #aeb0ba;
}
.ig-main-header h1 {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-main-header h1 svg {
  flex: none;
}
.ig-main-header > button,
.ig-profile-header > div button,
.ig-feed-heading > button {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
}
.ig-inbox-screen .ig-main-header h1 {
  margin-left: 44px !important;
}
.ig-profile-header > div {
  gap: 0;
  flex: none;
}
.ig-profile-header h1 {
  display: block;
  line-height: 44px;
  text-overflow: ellipsis;
}
.ig-profile-header h1 svg {
  display: inline-block;
  vertical-align: middle;
}
.ig-profile-main,
.ig-profile-stats {
  min-width: 0;
}
.ig-profile-stats > div {
  min-width: 0;
  flex: 1;
}
.ig-dark .ig-profile-actions button {
  min-height: 44px;
}
.ig-dark .ig-profile-actions button:last-child:not(:nth-child(2)) {
  flex-basis: 44px;
}
.ig-profile-blank-highlights button {
  min-height: 44px;
}
.ig-dark .ig-grid-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ig-dark .ig-feed-heading,
.ig-dark .ig-feed-post,
.ig-dark .ig-stories {
  border-color: #292d34;
}
.ig-dark .ig-feed-photo {
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
}
.ig-dark .ig-feed-author strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-dark .ig-feed-author button,
.ig-dark .ig-feed-buttons button {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.ig-dark .ig-feed-buttons {
  gap: 2px;
  padding: 5px 7px 0;
}
.ig-dark .ig-feed-caption {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ig-thread .thread-toolbar {
  flex-shrink: 0;
  background: var(--ig-surface);
}
.ig-thread .thread-toolbar > button:first-child,
.ig-thread .thread-toolbar-icons button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}
.ig-thread .thread-toolbar-icons {
  gap: 0;
  flex: none;
}
.ig-thread .thread-toolbar-person {
  overflow: hidden;
  min-height: 44px;
}
.ig-thread .thread-toolbar-person strong {
  max-width: 100%;
  font-size: 14px;
}
.ig-thread .thread-toolbar-person .social-avatar {
  width: 32px;
  height: 32px;
}
.ig-thread .thread-messages {
  background: var(--ig-surface);
}
.ig-thread .ig-msg-bubble {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  background: var(--ig-bubble-in);
}
.ig-thread .ig-msg-row.incoming .ig-msg-bubble {
  max-width: calc(100% - 83px);
}
.ig-thread .ig-msg-row.incoming:not(.first) .ig-msg-bubble {
  border-top-left-radius: 6px;
}
.ig-thread .ig-msg-row.incoming:not(.last) .ig-msg-bubble {
  border-bottom-left-radius: 6px;
}
.ig-thread .ig-msg-row.outgoing:not(.first) .ig-msg-bubble {
  border-top-right-radius: 6px;
}
.ig-thread .ig-msg-row.outgoing:not(.last) .ig-msg-bubble {
  border-bottom-right-radius: 6px;
}
.ig-thread .ig-msg-heart {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
}
.ig-thread .thread-compose {
  gap: 4px;
  padding: 4px;
  min-height: 52px;
  align-items: flex-end;
}
.ig-thread .ig-compose-camera,
.ig-thread .ig-compose-secondary,
.ig-thread .compose-send {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  flex: none;
  display: grid;
  place-items: center;
}
.ig-thread .compose-field {
  align-self: center;
}
.ig-thread .compose-field textarea {
  width: 100%;
  line-height: 1.4;
}
/* Accommodate the enlarged controls without overlapping adjacent content. */
.ig-thread .thread-toolbar {
  height: 107px;
  min-height: 107px;
}
.ig-dark .ig-feed-heading {
  height: 104px;
}
.ig-profile-blank-highlights {
  height: auto;
  min-height: 75px;
}

/* Instagram is an archive. Keep familiar composer chrome without an input. */
.ig-thread .ig-history-composer {
  align-items: center;
}
.ig-thread .ig-history-placeholder {
  flex: 1;
  min-width: 0;
  color: #a7a7af;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-thread .ig-history-composer .ig-compose-secondary {
  display: grid;
}
.ig-dark button:disabled {
  cursor: default;
}

.line-thread .line-msg-row.outgoing.first .line-bubble {
  border-top-right-radius: 9px;
}

/* Authored archive media, never an editable or live message composer. */
.ig-thread .ig-msg-bubble.has-archive-card {
  background: transparent !important;
  padding: 0;
  max-width: min(230px, 78%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.ig-thread .ig-msg-row.incoming .ig-msg-bubble.has-archive-card {
  max-width: min(210px, calc(100% - 83px));
}
.ig-story-reply-label {
  color: #a7a9b2;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 3px;
}
.ig-archive-card {
  display: flex;
  flex-direction: column;
  width: 210px;
  max-width: 100%;
  border: 1px solid #383c44;
  border-radius: 15px;
  overflow: hidden;
  background: #1c2027;
  color: #f6f7fa;
  text-align: left;
}
.ig-card-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 9/13;
  background: #222731;
  overflow: hidden;
}
.ig-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  color: #a7adb8;
  text-align: center;
}
.ig-card-empty > svg {
  width: 32px;
  height: 32px;
  flex: none;
}
.ig-card-empty small {
  font-size: 12px;
}
.ig-card-copy:empty {
  display: none;
}
.ig-card-copy {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ig-card-copy > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-card-copy > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-card-reel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  color: #fff;
}
.ig-card-reel-badge svg {
  width: 22px;
  height: 22px;
}
.ig-story-card {
  flex-direction: row;
  border: 0;
  border-left: 2px solid #797d88;
  border-radius: 0;
  padding-left: 8px;
  background: transparent;
  width: 210px;
  min-height: 70px;
}
.ig-story-card .ig-card-art {
  width: 55px;
  height: 78px;
  aspect-ratio: auto;
  border-radius: 7px;
  flex: none;
}
.ig-story-card .ig-card-empty {
  padding: 5px;
  gap: 4px;
}
.ig-story-card .ig-card-empty > svg {
  width: 22px;
  height: 22px;
}
.ig-story-card .ig-card-empty small {
  font-size: 9px;
}
.ig-story-card .ig-card-copy {
  padding: 6px 9px;
  justify-content: center;
  min-width: 0;
}
.ig-card-message {
  align-self: flex-end;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5c48e7, #673def);
  overflow-wrap: anywhere;
}
.ig-msg-row.incoming .ig-card-message {
  background: #262a31;
  align-self: flex-start;
}
.ig-archive-media header {
  gap: 10px;
  flex: none;
  padding: 54px 13px 8px;
  min-height: 106px;
}
.ig-archive-media header > button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
}
.ig-archive-media header svg {
  width: 18px;
  height: 26px;
}
.ig-archive-media header strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
}
.ig-archive-media header > span {
  width: 44px;
  flex: none;
}
.ig-full-media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 12px 40px;
}
.ig-full-media > img,
.ig-full-media > video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ig-full-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: #a7adb8;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #1c2027;
}
.ig-full-media-empty svg {
  width: 42px;
  height: 42px;
}
.ig-full-media-empty span {
  font-size: 14px;
}
.ig-full-media-caption {
  padding: 0 18px 44px;
  margin: 0;
  max-height: 25%;
  overflow: auto;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}

/* User-supplied portraits and Instagram posts. Viewer keeps the original aspect ratio. */
.social-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ig-grid-tile {
  overflow: hidden;
}
.ig-grid-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-feed-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-chat-photo {
  display: block;
  max-width: 100%;
  width: 200px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}
.ig-chat-photo img {
  width: 100%;
  display: block;
}
.ig-dark .ig-feed-photo {
  position: relative;
  overflow: hidden;
}
.ig-feed-photo > img {
  position: absolute;
  inset: 0;
}
.ig-grid-tile > img {
  position: absolute;
  inset: 0;
}

/* Reference icon pass: inactive features retain their visual weight. */
#appL button[data-demo-disabled],
#appL .thread-toolbar-person:disabled {
  opacity: 1;
  filter: none;
  cursor: default;
  -webkit-text-fill-color: currentColor;
}
.ig-dark .social-ig-footer svg {
  width: 30px;
  height: 30px;
}
.ig-dark .social-ig-footer [data-igtab='dm'] svg {
  width: 33px;
  height: 33px;
}
.ig-dark .social-ig-footer .profile-active .social-avatar {
  outline: none;
}
.line-thread .compose-send {
  background: transparent;
  color: #586bfa;
  box-shadow: none;
}
.line-thread .compose-send svg {
  width: 34px;
  height: 34px;
  stroke: none;
}
.line-thread .line-call-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 7px;
  margin: 13px 6px 13px 0;
}
.line-thread .line-call-time {
  color: var(--line-meta);
  font-size: 10px;
  padding-bottom: 5px;
  flex: none;
}
.line-thread .line-call-event {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 230px;
  max-width: calc(100% - 42px);
  border-radius: 24px;
  background: var(--line-bubble-out);
  color: #172817;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
}
.line-thread .line-call-event::before {
  content: '';
  position: absolute;
  top: 3px;
  right: -6px;
  width: 11px;
  height: 14px;
  background: inherit;
  transform: scaleX(-1);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M11 0C8 4 4 5 0 3C2 9 6 13 11 14Z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.line-call-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  min-height: 78px;
}
.line-call-disc {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: none;
  border-radius: 50%;
  background: #22c94d38;
}
.line-call-disc svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.line-call-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #21943d24;
  padding: 10px 12px;
  color: #287d30;
  font-size: 13px;
}
.line-call-footer > span:nth-child(2) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-call-music {
  display: grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: white;
  background: #17c64b;
}
.line-call-chevron {
  margin-left: auto;
  font-size: 24px;
  line-height: 16px;
}
.ig-dark svg.ig-send-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.ig-dark .social-ig-footer button {
  opacity: 1;
}

/* LINE delivery state and received voice-call history. */
.line-inbox-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: none;
  min-width: 32px;
}
.line-unread {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 12px;
  background: #06c755;
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.line-modern .has-unread .social-item-copy > span {
  color: #53565b;
}
.line-thread .line-call-row.incoming-call {
  justify-content: flex-start;
  align-items: flex-start;
}
.line-thread .incoming-call .line-call-event {
  background: white;
  max-width: calc(100% - 76px);
}
.line-thread .incoming-call .line-call-event::before {
  left: -6px;
  right: auto;
  transform: none;
}
.line-thread .incoming-call .line-call-time {
  align-self: flex-end;
}
.incoming-call .line-call-disc {
  background: #f5f5f5;
}
.incoming-call .line-call-footer {
  color: #999;
  border-color: #eee;
}
.line-call-duration {
  display: block;
  color: #777;
  font-size: 14px;
  margin-top: 3px;
}
#appL button[data-episode-locked] {
  opacity: 1;
  cursor: default;
}

/* IG portraits fill the circle, without a padded rim or Story ring. */
.ig-dark .social-avatar:has(> img) {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.ig-dark .social-avatar.me > img {
  transform: translate(-18%, 15%) scale(1.65);
}
.ig-dark .social-avatar.pik > img {
  transform: translate(0, 12%) scale(1.5);
}

/* Reference LINE scanner mark: four open corners and one horizontal scan line. */
.line-modern .line-qr-scan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.line-modern .line-qr-scan svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.2;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* Portraits use the original framing; neutral avatars never inherit character crops. */
.ig-dark .social-avatar > img,
.ig-dark .social-avatar.me > img,
.ig-dark .social-avatar.pik > img {
  transform: none;
  object-fit: contain;
  object-position: center;
}
.ig-profile-details {
  min-width: 0;
  flex: 1;
}
.ig-profile-details .ig-profile-bio {
  padding: 0;
  margin: 0 0 14px;
  font-size: 14px;
}
.ig-profile-details .ig-profile-stats {
  width: 100%;
}
.ig-profile-details .ig-profile-stats span {
  text-transform: lowercase;
}
.ig-profile-details .ig-profile-stats > div {
  min-width: 0;
}
.ig-dark .ig-grid-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ig-dark .ig-grid-tabs span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}
.ig-empty-posts {
  grid-column: 1/-1;
  text-align: center;
  color: #a8a8af;
  padding: 40px 0;
}
.ig-unavailable-reply {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  max-width: 100%;
}
.ig-unavailable-reply small,
.ig-unavailable-label {
  color: #a5a7b2;
  font-size: 12px;
}
.ig-unavailable-label {
  border-right: 4px solid #282b33;
  padding-right: 12px;
  line-height: 23px;
}
.ig-unavailable-text {
  padding: 11px 15px;
  background: #8435f3;
  color: white;
  border-radius: 24px;
  white-space: pre-wrap;
}
.ig-msg-bubble:has(.ig-unavailable-reply) {
  background: transparent !important;
  padding: 0;
  max-width: 100%;
}
/* Attach the outgoing call tail to the corner rather than reversing it outwards. */
.line-thread .line-call-event::before {
  right: -5px;
  top: 0;
  width: 14px;
  height: 18px;
  transform: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0C5 4 9 5 14 2C13 9 7 15 0 18Z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.line-thread .incoming-call .line-call-event::before {
  left: -6px;
  right: auto;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M11 0C8 4 4 5 0 3C2 9 6 13 11 14Z'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
}
.ig-chat-photo img {
  height: auto;
}

/* Photo messages are the image itself, with rounded corners and no coloured bubble. */
.ig-thread .ig-msg-row .ig-msg-bubble.has-attachment:has(.ig-chat-photo) {
  padding: 0;
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  border-radius: 14px;
}
.ig-thread .ig-chat-photo {
  border: 0;
  box-shadow: none;
  margin: 0;
  border-radius: 14px;
  background: transparent;
}

.ig-thread .thread-start {
  gap: 6px;
  padding-bottom: 28px;
}
.ig-thread .thread-start .mutual-since {
  font-size: 12px;
  line-height: 1.5;
}
.thread-view-profile {
  background: #272c35;
  color: #fff;
  border-radius: 9px;
  padding: 9px 18px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}
.thread-view-profile:disabled {
  opacity: 1;
}
.ig-post-date {
  position: absolute;
  bottom: 38px;
  left: 16px;
  right: 16px;
  color: #a4a8b3;
  text-align: center;
  font-size: 12px;
}

.ig-profile-details .ig-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  text-align: left;
}
.ig-profile-details .ig-profile-stats b {
  white-space: nowrap;
}
.ig-profile-details .ig-profile-stats span {
  font-size: clamp(10px, 3cqw, 12px);
  white-space: nowrap;
}

/* Reference profile: portrait beside name/statistics, mutuals, four archive tabs. */
.ig-dark .ig-profile-main {
  padding: 12px 16px 14px;
  gap: 16px;
  align-items: center;
}
.ig-profile-main .social-avatar.large {
  width: 88px;
  height: 88px;
}
.ig-profile-details .ig-profile-bio {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.ig-profile-details .ig-profile-stats {
  gap: 10px;
}
.ig-profile-details .ig-profile-stats b {
  font-size: 18px;
  font-weight: 650;
}
.ig-dark .ig-grid-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ig-profile-actions {
  gap: 6px;
  margin-bottom: 14px;
}
.ig-profile-actions button {
  border-radius: 9px;
  min-height: 34px;
}
.ig-post-detail {
  padding: 12px 14px 4px;
}
.ig-post-metrics {
  display: flex;
  align-items: center;
  gap: 13px;
}
.ig-post-metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.ig-post-metrics svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ig-post-metrics b {
  font-weight: 600;
}
.ig-post-metrics .liked {
  color: #ff0341;
}
.ig-post-metrics .liked svg {
  fill: currentColor;
}
.ig-post-metrics .ig-post-save {
  margin-left: auto;
}
.ig-liked-by,
.ig-post-comments p,
.ig-post-detail .ig-feed-caption {
  padding: 0;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
.ig-post-comments p {
  margin-top: 7px;
}
.ig-post-media {
  display: block;
  overflow-y: auto;
  padding: 64px 0 35px;
}
.ig-post-media > header {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
}
.ig-post-media > header > div {
  text-align: center;
}
.ig-post-media > header small {
  display: block;
  color: #afb3bb;
  font-size: 12px;
  margin-top: 3px;
}
.ig-post-media .ig-full-media {
  position: relative;
  inset: auto;
  height: auto;
  display: block;
}
.ig-post-media .ig-full-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.ig-post-media .ig-post-date {
  padding: 12px 14px;
}
.ig-list-caption > button {
  color: #a8a0ff;
  font-size: 13px;
  background: transparent;
  border: 0;
}
.ig-requests-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 20px;
}
.ig-requests-heading h1 {
  font-size: 18px;
  margin: 0;
}
.ig-request-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.ig-request-tabs span {
  flex: 1;
  background: #272c33;
  border-radius: 8px;
  padding: 9px;
  text-align: center;
  font-size: 13px;
}
.ig-request-tabs .selected {
  color: #111;
  background: #fff;
}
.ig-request-message {
  background: #252a33;
  border-radius: 18px;
  padding: 14px;
  line-height: 1.6;
  margin: 20px;
  max-width: 82%;
}
.ig-request-notice {
  text-align: center;
  font-size: 12px;
  color: #999fa9;
}
@media (max-width: 350px) {
  .ig-post-metrics {
    gap: 8px;
  }
  .ig-post-metrics > span {
    font-size: 11px;
  }
  .ig-profile-main .social-avatar.large {
    width: 74px;
    height: 74px;
  }
}

.ig-requests-screen .app-content {
  padding: 68px 16px 30px;
}
.ig-requests-heading {
  position: static;
  margin: 0;
  padding: 4px 0 24px;
}
.ig-requests-heading h1 {
  font-size: 17px;
}
.ig-requests-screen .ig-inbox-item {
  padding: 14px 0;
  gap: 14px;
}
.ig-requests-screen .social-avatar {
  width: 54px;
  height: 54px;
  background: transparent;
  flex-shrink: 0;
}
.ig-requests-screen .social-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ig-post-media .ig-post-date {
  position: static;
  display: block;
  margin: 0;
  text-align: left;
}
.ig-post-media > header {
  position: static;
}
.ig-profile-screen .ig-profile-actions {
  display: flex;
  padding: 0 16px;
  margin: 10px 0 18px;
}
.ig-profile-screen .ig-profile-actions button {
  flex: 1;
  height: 36px;
  padding: 6px 8px;
  font-size: 13px;
}
.ig-profile-screen .ig-profile-actions button[aria-label='Discover people'] {
  flex: 0 0 36px;
}

.ig-dark.ig-requests-screen .app-content {
  padding: 70px 16px 30px !important;
}
.ig-post-media {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 70px 0 32px !important;
  display: block !important;
  overflow-y: auto;
}
.ig-post-media > header {
  min-height: 0;
  padding: 0 16px 14px;
}

.ig-dark.ig-request-conversation .app-content {
  padding: 0 0 30px !important;
  display: flex;
  flex-direction: column;
}
.ig-request-chat-header {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 68px 16px 14px;
  border-bottom: 1px solid #ffffff12;
}
.ig-request-chat-header button {
  width: 32px;
  height: 32px;
  padding: 3px;
  background: none;
  border: 0;
  color: #fff;
}
.ig-request-chat-header img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.ig-request-chat-header strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-request-chat-body {
  padding: 18px 16px 30px;
}
.ig-request-chat-body .thread-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}
.ig-request-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
}
.ig-request-chat-body .thread-date {
  margin: 16px 0;
}
.ig-request-chat-body .ig-request-message {
  margin: 0;
  max-width: 86%;
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.ig-request-chat-body .ig-request-notice {
  margin: 22px 0 0;
}