* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #eef8ff; color: #1f2937; }
a { color: inherit; text-decoration: none; }

.app { max-width: 1320px; margin: 0 auto; min-height: 100vh; display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 18px; padding: 20px; }
.panel { background: #fff; border: 1px solid #dbeafe; border-radius: 16px; }

.left-panel, .right-panel { position: sticky; top: 20px; height: calc(100vh - 40px); overflow: auto; }
.left-panel { padding: 16px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.logo-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 138px; height: 52px; padding: 0 8px; margin-bottom: 24px; border-radius: 10px; }
.logo-text { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 500; font-size: 42px; line-height: 1; color: #4fa8d8; }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 999px; font-weight: 700; background: #f0f8ff; }
.nav-link:hover { background: #e0f1ff; }

.nav-icon, .bottom-nav-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg, .bottom-nav-icon svg { width: 22px; height: 22px; stroke: #4b5563; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.guest-box { border-top: 1px solid #e5e7eb; padding-top: 14px; display: flex; gap: 10px; align-items: center; }
.guest-icon, .post-icon, .profile-avatar, .mobile-user .guest-icon { border-radius: 999px; object-fit: cover; }
.guest-icon { width: 44px; height: 44px; }
.guest-name { font-weight: 700; }
.guest-id { color: #6b7280; font-size: 14px; }

.center-panel { padding: 0; overflow: hidden; }
.profile-loading { visibility: hidden; }
.profile-header-cover { height: 190px; width: 100%; object-fit: cover; object-position: center; display: block; }
.profile-main { position: relative; padding: 64px 16px 16px; border-bottom: 1px solid #e5e7eb; }
.profile-avatar { width: 108px; height: 108px; border: 4px solid #fff; position: absolute; left: 16px; top: -54px; }
.profile-actions { position: absolute; right: 16px; bottom: calc(100% - 54px); display: flex; align-items: flex-end; gap: 8px; }
.btn { min-width: 84px; border: 1px solid #bfdbfe; background: #f8fbff; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }
.btn.follow { background: #d9ecff; }
.profile-name { font-size: 22px; font-weight: 800; }
.profile-id { color: #6b7280; margin-top: 4px; }
.profile-bio { margin-top: 10px; line-height: 1.65; color: #374151; white-space: pre-line; }

.timeline-title { font-size: 19px; padding: 14px 16px 0; color: #2563eb; }
.posts-container { display: grid; gap: 12px; padding: 12px 16px 16px; }
.post { display: flex; gap: 12px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }
.post-icon { width: 42px; height: 42px; }
.post-header { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.post-display-name { font-weight: 700; }
.post-user-id, .post-date { color: #6b7280; }
.post-text { line-height: 1.6; margin-bottom: 8px; }
.post-images { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; clear: both; }
.post-images-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }
.post-image { width: 100%; max-width: 240px; border-radius: 10px; cursor: pointer; display: block; }
.post-images-grid .post-image { max-width: none; aspect-ratio: 1 / 1; object-fit: cover; }
.post-like-button { display: flex; clear: both; align-items: center; gap: 6px; color: #536471; background: transparent; border: none; border-radius: 999px; padding: 4px 8px; cursor: pointer; font: inherit; width: fit-content; }
.post-like-button:hover { color: #f91880; background: rgba(249, 24, 128, .1); }
.heart-icon { font-size: 22px; line-height: 1; }

.right-panel { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.search-group { border: 1px solid #dbeafe; border-radius: 14px; background: #f8fbff; padding: 12px; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-form input { border: 1px solid #bfdbfe; border-radius: 999px; padding: 12px 16px; min-width: 0; }
.search-form button { border: none; border-radius: 999px; padding: 12px 18px; min-width: 84px; background: #cfe8ff; font-weight: 700; cursor: pointer; }
.fiction-note { margin-top: auto; font-size: 12px; color: #6b7280; line-height: 1.7; }

/* おすすめユーザー Widget Styles (Twitter-like UI) */
.recommend-group {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #f8fbff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommend-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background-color 0.2s;
}

.recommend-item:hover {
  background: #eaf5ff;
}

.recommend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.recommend-info {
  flex: 1;
  min-width: 0;
}

.recommend-name {
  font-weight: 700;
  font-size: 14px;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-name:hover {
  text-decoration: underline;
}

.recommend-id {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.recommend-btn {
  border: 1px solid #1d9bf0;
  background: transparent;
  color: #1d9bf0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.recommend-btn:hover {
  background: #1d9bf0;
  color: #fff;
}

.recommend-btn.following {
  border-color: #cfd9de;
  background: #d9ecff;
  color: #1d4ed8;
}

.recommend-btn.following:hover {
  background: #c7e4ff;
}

.mobile-header, .mobile-bottom-nav, .mobile-drawer, .drawer-backdrop { display: none; }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 3000; align-items: center; justify-content: center; padding: 16px; }
.modal.active { display: flex; }
.modal-image { max-width: 92vw; max-height: 90vh; object-fit: contain; }

@media (max-width: 1099px) {
  .app { display: block; padding: 0; }
  .left-panel, .right-panel { display: none; }
  .center-panel { border: none; border-radius: 0; padding-bottom: 70px; }

  .mobile-header { position: fixed; top: 0; left: 0; right: 0; height: 58px; background: #eaf6ff; border-bottom: 1px solid #dbeafe; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; z-index: 2000; }
  .menu-btn { border: none; background: transparent; font-size: 22px; }
  .mobile-logo { display: flex; justify-content: center; align-items: center; width: 132px; height: 42px; margin: 0 auto; }
  .mobile-logo .logo-text { font-size: 31px; }

  .drawer-backdrop { position: fixed; inset: 58px 0 0 0; background: rgba(15, 23, 42, .25); opacity: 0; pointer-events: none; transition: opacity .28s ease; z-index: 2090; }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; display: block; }
  .mobile-drawer { position: fixed; inset: 58px auto 0 0; width: 86%; max-width: 360px; background: #fff; z-index: 2100; padding: 14px; transform: translateX(-102%); transition: transform .32s cubic-bezier(.22,.61,.36,1); border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; }
  .mobile-drawer.active { transform: translateX(0); }
  .mobile-user { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
  .mobile-links { list-style: none; padding: 12px 0; display: grid; gap: 8px; }
  .mobile-links a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f5f9ff; font-weight: 700; }
  .mobile-search-group { border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; padding: 10px; margin-bottom: 12px; }
  .mobile-fiction { margin-top: auto; padding-top: 10px; }

  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(4,1fr); position: fixed; left: 0; right: 0; bottom: 0; border-top: 1px solid #dbeafe; background: #fff; z-index: 2000; }
  .mobile-bottom-nav a { text-align: center; padding: 10px 0; display: flex; justify-content: center; }

  .profile-main { padding-top: 62px; }
  .profile-avatar { width: 96px; height: 96px; top: -48px; }
  .profile-header-cover { margin-top: 58px; height: 155px; }
}

.dm-page { background: #fff; }
.dm-shell { max-width: 620px; min-height: 100vh; margin: 0 auto; border-left: 1px solid #eff3f4; border-right: 1px solid #eff3f4; display: grid; grid-template-rows: auto 1fr auto; background: #fff; }
.dm-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid #eff3f4; }
.dm-back { font-size: 24px; line-height: 1; padding: 8px; border-radius: 999px; }
.dm-back:hover { background: #eff3f4; }
.dm-avatar { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; }
.dm-header h1 { font-size: 18px; }
.dm-header p { color: #536471; font-size: 13px; }
.dm-messages { padding: 18px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.dm-message { display: flex; flex-direction: column; max-width: 78%; }
.dm-message.mine { align-self: flex-end; align-items: flex-end; }
.dm-message.theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble { padding: 12px 16px; border-radius: 22px; line-height: 1.55; white-space: pre-wrap; }
.dm-message.mine .dm-bubble { color: #fff; background: #1d9bf0; border-bottom-right-radius: 6px; }
.dm-message.theirs .dm-bubble { color: #0f1419; background: #eff3f4; border-bottom-left-radius: 6px; }
.dm-meta { min-height: 16px; margin-top: 2px; color: #536471; font-size: 12px; }
.dm-compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border-top: 1px solid #eff3f4; }
.dm-compose input { border: none; border-radius: 999px; background: #eff3f4; padding: 13px 16px; font-size: 15px; outline: none; }
.dm-compose button { border: none; border-radius: 999px; padding: 0 18px; background: #1d9bf0; color: #fff; font-weight: 800; cursor: pointer; }

.search-page { max-width: 680px; min-height: 100vh; margin: 0 auto; background: #fff; border-left: 1px solid #eff3f4; border-right: 1px solid #eff3f4; }
.search-header { position: sticky; top: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid #eff3f4; z-index: 2; }
.search-page-form { padding: 12px 16px; }
.search-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.search-tabs a { text-align: center; padding: 14px 8px; color: #536471; font-weight: 700; border-bottom: 4px solid transparent; }
.search-tabs a.active { color: #0f1419; border-bottom-color: #1d9bf0; }
.search-results { min-height: 320px; }
.empty-search, .search-error { padding: 46px 18px; text-align: center; color: #536471; font-weight: 700; }
.search-error { color: #dc2626; }
.account-result { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eff3f4; }
.account-result:hover { background: #f7f9f9; }
.chrome-app .search-page, .chrome-app .dm-shell { max-width: none; width: 100%; margin: 0; }
.chrome-app .dm-shell { height: calc(100vh - 40px); min-height: 0; overflow: hidden; }
.chrome-app .dm-messages { min-height: 0; }
@media (max-width: 1099px) {
  .chrome-app .dm-shell { height: 100vh; min-height: 100vh; padding-bottom: 0; }
  .chrome-app .search-page { min-height: 100vh; padding-bottom: 70px; }
  .chrome-app .search-header, .chrome-app .dm-header { margin-top: 58px; }
}
.home-panel { overflow: hidden; }
.home-header { position: sticky; top: 0; z-index: 2; padding: 16px; border-bottom: 1px solid #e5e7eb; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.home-header h1 { font-size: 21px; font-weight: 800; }
.home-header p { color: #6b7280; margin-top: 4px; }
.home-timeline { padding-top: 16px; }
.timeline-post { border-radius: 0; border-left: none; border-right: none; border-top: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.timeline-end { text-align: center; color: #6b7280; padding: 28px 16px 36px; font-weight: 700; }
.notfound-panel { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 40px); padding: 24px; }
.notfound-card { max-width: 460px; text-align: center; display: grid; gap: 16px; }
.notfound-card .error-icon { font-size: 46px; }
.notfound-card h1 { font-size: 24px; }
.notfound-card p { color: #6b7280; line-height: 1.7; }
.btn-home { justify-self: center; background: #cfe8ff; color: #1d4ed8; border-radius: 999px; padding: 12px 22px; font-weight: 800; }
.dm-page { background: #eef8ff; }
.chrome-app .search-page { min-height: calc(100vh - 40px); }
@media (max-width: 1099px) {
  .home-header { margin-top: 58px; }
  .notfound-panel { min-height: 100vh; padding-top: 82px; padding-bottom: 90px; }
  .chrome-app .search-page { min-height: 100vh; }
}
.chrome-app { min-height: calc(100vh - 40px); }
.post-like-button.liked { color: #f91880; }
.soliy-dialog-backdrop { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .32); }
.soliy-dialog-backdrop.active { display: flex; }
.soliy-dialog { width: min(360px, 100%); background: #fff; border: 1px solid #dbeafe; border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); padding: 22px; text-align: center; }
.soliy-dialog p { line-height: 1.7; color: #1f2937; margin-bottom: 18px; }
.soliy-dialog button { border: none; border-radius: 999px; background: #cfe8ff; color: #1d4ed8; font-weight: 800; padding: 10px 28px; cursor: pointer; }
.home-content { padding: 18px; display: grid; gap: 18px; }
.home-hero, .home-card, .guest-message-card { border: 1px solid #dbeafe; border-radius: 18px; background: #f8fbff; padding: 22px; }
.home-hero h1 { font-size: 26px; line-height: 1.35; }
.home-hero p { margin-top: 10px; color: #6b7280; line-height: 1.7; }
.home-card h2 { font-size: 18px; margin-bottom: 12px; }
.home-user-list { display: grid; gap: 8px; }
.home-user-item { border-bottom: none; border-radius: 12px; }
.guest-message-card { margin: 16px; color: #374151; line-height: 1.8; font-weight: 700; }
.notifications-list { display: grid; }
.notification-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px; border-bottom: 1px solid #e5e7eb; }
.notification-item:hover { background: #f8fbff; }
.notification-icon { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: #e0f1ff; }
.notification-title { font-weight: 800; }
.notification-body p { margin-top: 4px; color: #374151; line-height: 1.6; }
.notification-body span { display: inline-block; margin-top: 6px; color: #6b7280; font-size: 13px; }
.dm-bubble a { color: inherit; text-decoration: underline; font-weight: 700; }
@media (max-width: 1099px) {
  .dm-page .chrome-app .dm-shell {
    height: calc(100dvh - 116px);
    min-height: calc(100dvh - 116px);
    margin-top: 58px;
    padding-bottom: 0;
  }
  .dm-page .chrome-app .dm-header { margin-top: 0; }
  .dm-page .dm-compose { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}